From 1f098fb60dd6d9f34cd6555b07fb685cf02328d3 Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 00:22:50 +0300 Subject: [PATCH 1/7] feat(styles): add `view` mixin for scoped styling based on view attributes --- src/styles/mixins.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index 86abc3e..2166212 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss @@ -22,6 +22,12 @@ } } +@mixin view($view) { + html[view="#{$view}"] & { + @content; + } +} + @mixin browser($browser) { html[browser="#{$browser}"] & { @content; From 0ce3323ceb520caafb83d141bd31c39d5a88a96a Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 00:24:14 +0300 Subject: [PATCH 2/7] feat(ScrollArea): add `viewportRef` and `viewportProps` support, update transitions in styles --- src/components/ScrollArea/ScrollArea.tsx | 6 ++++++ src/components/ScrollArea/scroll-area.module.scss | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/ScrollArea/ScrollArea.tsx b/src/components/ScrollArea/ScrollArea.tsx index 5e67d7c..56e7f09 100644 --- a/src/components/ScrollArea/ScrollArea.tsx +++ b/src/components/ScrollArea/ScrollArea.tsx @@ -21,6 +21,8 @@ export interface ScrollAreaProps extends ScrollAreaRootProps { cornerClassName?: string; viewportClassName?: string; scrollbarClassName?: string; + viewportRef?: React.Ref; + viewportProps?: Omit, 'className' | 'children'>; } const ScrollArea: ForwardRefRenderFunction = (props, ref) => { @@ -32,6 +34,8 @@ const ScrollArea: ForwardRefRenderFunction = (p horizontalScroll, thumbClassName, cornerClassName, + viewportRef, + viewportProps, viewportClassName, scrollbarClassName, ...other @@ -40,6 +44,7 @@ const ScrollArea: ForwardRefRenderFunction = (p return ( = (p }, viewportClassName )} + {...viewportProps} > {children} diff --git a/src/components/ScrollArea/scroll-area.module.scss b/src/components/ScrollArea/scroll-area.module.scss index f86e14e..5987def 100644 --- a/src/components/ScrollArea/scroll-area.module.scss +++ b/src/components/ScrollArea/scroll-area.module.scss @@ -19,7 +19,7 @@ $root: scroll-area; touch-action: none; padding: var(--scroll-area-scrollbar-padding, 3px); background: var(--scroll-area-scrollbar-bg-color, transparent); - transition: background var(--transition-speed-sm) ease-in-out; + transition: background var(--transition-speed-sm); &:hover { background: var(--scroll-area-scrollbar-bg-color-hover, transparent); @@ -42,6 +42,7 @@ $root: scroll-area; position: relative; background: var(--scroll-area-thumb-bg-color); border-radius: var(--scroll-area-thumb-border-radius, 100px); + transition: background var(--transition-speed-sm); &:hover { background: var(--scroll-area-thumb-bg-color-hover, var(--scroll-area-thumb-bg-color)); From 5231c3e28c1f54f3d76568a5893bd1b7e2a2c84d Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 00:25:02 +0300 Subject: [PATCH 3/7] refactor(types): update `tooltip` type to omit `content` property in `TooltipProps` --- src/components/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/types.ts b/src/components/types.ts index c60891a..d4f1bbb 100644 --- a/src/components/types.ts +++ b/src/components/types.ts @@ -58,7 +58,7 @@ export interface ComponentsProps { | "radius" | "color" >; - tooltip?: TooltipProps; + tooltip?: Omit; view?: ViewProps; viewDrawer?: ViewDrawerProps; viewModal?: ViewModalProps; From 46cb16003df2d85d8f10e972aa52dddd3d416dd0 Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 00:28:06 +0300 Subject: [PATCH 4/7] feat(styles): extend transition properties to include `border-color` and `background` --- src/providers/ui/styles/reset.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/providers/ui/styles/reset.scss b/src/providers/ui/styles/reset.scss index e391c35..c73233d 100644 --- a/src/providers/ui/styles/reset.scss +++ b/src/providers/ui/styles/reset.scss @@ -123,5 +123,7 @@ body { will-change: background-color, color; transition: background-color var(--transition-speed-md), + border-color var(--transition-speed-md), + background var(--transition-speed-md), color var(--transition-speed-md); } From ea29ff224e5a0e26f81157b015531d60fd8fe5c8 Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 09:07:25 +0300 Subject: [PATCH 5/7] fix(Tooltip): set default value for `delayDuration` prop --- src/components/Tooltip/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 28efbb4..9436b89 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -29,7 +29,7 @@ const Tooltip: ForwardRefRenderFunction = (props, open, defaultOpen, disableHoverableContent, - delayDuration, + delayDuration = 250, onOpenChange, arrowWidth, From 36524838099e7e32899dc821131b3eb60660ab3c Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 13:08:00 +0300 Subject: [PATCH 6/7] feat(Viewport): add transition support with `withTransition` control and scoped styles --- src/components/Viewport/Provider.tsx | 13 ++++++++++++- src/components/Viewport/context.ts | 4 ++++ src/components/Viewport/viewport.module.scss | 16 +++++++++------- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/Viewport/Provider.tsx b/src/components/Viewport/Provider.tsx index d0e9279..6c9356a 100644 --- a/src/components/Viewport/Provider.tsx +++ b/src/components/Viewport/Provider.tsx @@ -17,12 +17,21 @@ import styles from "./viewport.module.scss"; export type ViewportProps = ComponentProps<"div"> & { mode?: ViewportMode; + transition?: boolean; }; const Provider: ForwardRefRenderFunction> = ( - {children, className, style, mode: viewportMode = ViewportMode.Adaptive, ...props}, + { + children, + className, + style, + mode: viewportMode = ViewportMode.Adaptive, + transition: viewportTransition = true, + ...props + }, ref ) => { + const [transition, withTransition] = useState(viewportTransition); const [mode, setModeState] = useState(viewportMode); const [sizes, setSizesState] = useState(null); @@ -40,6 +49,7 @@ const Provider: ForwardRefRenderFunction({ setSizes() {}, + withTransition() {}, + resetSizes() {}, }); diff --git a/src/components/Viewport/viewport.module.scss b/src/components/Viewport/viewport.module.scss index 8a5f3c5..92292de 100644 --- a/src/components/Viewport/viewport.module.scss +++ b/src/components/Viewport/viewport.module.scss @@ -6,13 +6,15 @@ max-width: var(--viewport-max-width); min-height: var(--viewport-min-height); max-height: var(--viewport-max-height); - transition: - height var(--transition-speed-md) ease-in-out, - width var(--transition-speed-md) ease-in-out, - min-height var(--transition-speed-md) ease-in-out, - min-width var(--transition-speed-md) ease-in-out, - max-height var(--transition-speed-md) ease-in-out, - max-width var(--transition-speed-md) ease-in-out; + + &--transition { + transition: height var(--transition-viewport, var(--transition-speed-md)) ease-in-out, + width var(--transition-viewport, var(--transition-speed-md)) ease-in-out, + min-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out, + min-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out, + max-height var(--transition-viewport, var(--transition-speed-md)) ease-in-out, + max-width var(--transition-viewport, var(--transition-speed-md)) ease-in-out; + } &--expanded { min-height: var(--viewport-max-height); From 2a752d1ba2413a1d1faeee54bf40b3af725ea0b0 Mon Sep 17 00:00:00 2001 From: Rostyslav Nihrutsa Date: Fri, 17 Oct 2025 13:09:04 +0300 Subject: [PATCH 7/7] feat(ScrollArea): add `scrollTo` support and improve imperative handle usage --- src/components/ScrollArea/ScrollArea.tsx | 34 +++++++++++++++++------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/src/components/ScrollArea/ScrollArea.tsx b/src/components/ScrollArea/ScrollArea.tsx index 56e7f09..5febea1 100644 --- a/src/components/ScrollArea/ScrollArea.tsx +++ b/src/components/ScrollArea/ScrollArea.tsx @@ -1,4 +1,4 @@ -import React, {forwardRef, ForwardRefRenderFunction, memo} from "react"; +import React, {forwardRef, ForwardRefRenderFunction, memo, useImperativeHandle} from "react"; import classnames from "classnames"; import { Corner, @@ -21,8 +21,6 @@ export interface ScrollAreaProps extends ScrollAreaRootProps { cornerClassName?: string; viewportClassName?: string; scrollbarClassName?: string; - viewportRef?: React.Ref; - viewportProps?: Omit, 'className' | 'children'>; } const ScrollArea: ForwardRefRenderFunction = (props, ref) => { @@ -32,17 +30,33 @@ const ScrollArea: ForwardRefRenderFunction = (p children, className, horizontalScroll, + onScroll, thumbClassName, cornerClassName, - viewportRef, - viewportProps, viewportClassName, scrollbarClassName, ...other } = {...useComponentProps("scrollArea"), ...props}; + const rootRef = React.useRef(null); + const viewportRef = React.useRef(null); + useImperativeHandle( + ref, + () => ({ + ...rootRef.current!, + scrollTo: ((optionsOrX?: ScrollToOptions | number, y?: number) => { + if (typeof optionsOrX === 'number') { + viewportRef.current?.scrollTo(optionsOrX, y!); + } else { + viewportRef.current?.scrollTo(optionsOrX); + } + }) as HTMLElement['scrollTo'], + + }), + [] + ); return ( - + = (p }, viewportClassName )} - {...viewportProps} + onScroll={onScroll} > {children} @@ -62,7 +76,7 @@ const ScrollArea: ForwardRefRenderFunction = (p style={{padding: `0 ${xOffset}px`}} className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)} > - + = (p style={{padding: `${yOffset}px 0`}} className={classnames(styles["scroll-area__scrollbar"], scrollbarClassName)} > - + - + ); };