reshaped 3.0.9 → 3.0.11-rc.0

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
+.root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral:hover,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical:hover,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary:hover,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

package/dist/components/Modal/Modal.js

@@ -9,6 +9,7 @@ import Overlay from "../Overlay/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Modal.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
 const DRAG_EDGE_BOUNDARY = 32;
@@ -40,6 +41,7 @@ const ModalSubtitle = (props) => {
 };
 const Modal = (props) => {
     const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, className, attributes, } = props;
+    const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
@@ -110,7 +112,7 @@ const Modal = (props) => {
             // Changing to a different direction will keep the modal opened
             const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
             if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
-                onClose?.();
+                onCloseRef.current?.();
             }
             else {
                 resetDragData();
@@ -151,8 +153,7 @@ const Modal = (props) => {
             document.removeEventListener("touchmove", handleDrag);
             document.removeEventListener("touchend", handleDragEnd);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dragging, clientPosition]);
+    }, [dragging, clientPosition, onCloseRef, position, rootRef]);
     // Syncing distance to the ref to avoid having a dependency on dragDistance in handleDragEnd
     React.useEffect(() => {
         const rootEl = rootRef.current;

package/dist/components/Modal/tests/Modal.stories.d.ts

@@ -14,7 +14,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const foo: () => React.JSX.Element;
 export declare const position: () => React.JSX.Element;
 export declare const size: () => React.JSX.Element;
 export declare const padding: () => React.JSX.Element;

package/dist/components/Modal/tests/Modal.stories.js

@@ -9,7 +9,6 @@ import Switch from "../../Switch/index.js";
 import TextField from "../../TextField/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 import Radio from "../../Radio/index.js";
-import Slider from "../../Slider/index.js";
 export default {
     title: "Components/Modal",
     component: Modal,
@@ -19,21 +18,6 @@ export default {
         },
     },
 };
-export const foo = () => {
-    const { activate, deactivate, active } = useToggle(false);
-    return (<>
-			<Button onClick={console.log}>Other</Button>
-			<Button onClick={activate}>Open modal</Button>
-			<Button onClick={console.log}>Other</Button>
-
-			<Modal active={active} onClose={deactivate}>
-				<Slider name="slider" defaultValue={20} onChange={(args) => console.log(args.value)}/>
-				<Button onClick={console.log}>Btn 1</Button>
-
-				<Button onClick={console.log}>Btn 2</Button>
-			</Modal>
-		</>);
-};
 const Demo = (props) => {
     const { active: activeProp, title, subtitle, children, ...modalProps } = props;
     const { active, activate, deactivate } = useToggle(activeProp);

package/dist/components/Overlay/Overlay.js

@@ -11,8 +11,11 @@ import useScrollLock from "../../hooks/useScrollLock.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
     const { active, children, transparent, onClose, onOpen, className, attributes } = props;
+    const onCloseRef = useHandlerRef(onClose);
+    const onOpenRef = useHandlerRef(onOpen);
     const clickThrough = transparent === true;
     const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
     const [mounted, setMounted] = React.useState(false);
@@ -35,10 +38,8 @@ const Overlay = (props) => {
     const close = React.useCallback(() => {
         if (!visible || !isDismissible())
             return;
-        if (onClose)
-            onClose();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible, isDismissible]);
+        onCloseRef.current?.();
+    }, [visible, isDismissible, onCloseRef]);
     const handleMouseDown = (event) => {
         isMouseDownValidRef.current = !isInsideChild(event.target);
     };
@@ -84,11 +85,10 @@ const Overlay = (props) => {
         trapFocus.trap({
             initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
         });
-        onOpen?.();
+        onOpenRef.current?.();
         return () => trapFocus.release();
         // Ignoring onOpen since it might be not memoized when passed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rendered]);
+    }, [rendered, onOpenRef]);
     // Unlock scroll on unmount
     React.useEffect(() => {
         return () => {

package/dist/components/Overlay/tests/Overlay.stories.js

@@ -47,7 +47,9 @@ class CustomElement extends window.HTMLElement {
         root.render(overlay);
     }
 }
-window.customElements.define("custom-element", CustomElement);
+if (!window.customElements.get("custom-element")) {
+    window.customElements.define("custom-element", CustomElement);
+}
 export const shadowDom = () => {
     return (<Example>
 			<Example.Item>

package/dist/components/Popover/Popover.js

@@ -5,14 +5,14 @@ import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
 const Popover = (props) => {
-    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, disableContentHover, instanceRef, containerRef, } = props;
+    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, instanceRef, containerRef, } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
     const paddingStyles = getPaddingStyles(padding);
     const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles?.classNames);
     return (
     // @ts-ignore
-    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
+    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, disableCloseOnOutsideClick: disableCloseOnOutsideClick, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
 };
 const PopoverDismissible = (props) => {
     const { handleClose } = useFlyoutContext();

package/dist/components/Popover/Popover.types.d.ts

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "containerRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef"> & {
     children?: React.ReactNode;
     padding?: number;
     variant?: "elevated" | "headless";

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}@layer rs.reset{blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:var(--rs-font-family-body);font-size:87.5%;font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3);text-rendering:optimizelegibility;touch-action:manipulation}*{box-sizing:border-box}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+:root{--rs-z-index-raised:5;--rs-z-index-flyout:80;--rs-z-index-fixed:90;--rs-z-index-overlay:100;--rs-z-index-notification:110}@layer rs.reset{blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,h5,h6,li,ol,p,ul{margin:0;padding:0}ol[class],ul[class]{list-style:none}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}fieldset{border:0;margin:0;padding:0}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}option{background:var(--rs-color-background-elevation-base)}label{cursor:pointer}input::placeholder,textarea::placeholder{color:var(--rs-color-foreground-neutral-faded);opacity:.5}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-family:var(--rs-font-family-body);font-size:87.5%;font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);text-rendering:optimizelegibility;touch-action:manipulation}*{box-sizing:border-box}body,html{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);height:100%;scroll-behavior:smooth}}[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

package/dist/components/Resizable/Resizable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as T from "./Resizable.types";
+declare const Resizable: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: React.FC<T.ItemProps>;
+    Handle: React.FC<T.HandleProps>;
+};
+export default Resizable;

package/dist/components/Resizable/Resizable.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import useDrag from "../../hooks/useDrag.js";
+import View from "../View/index.js";
+import s from "./Resizable.module.css";
+const PrivateResizableHandle = (props) => {
+    const { containerRef, onDrag, index, direction, children } = props;
+    const { ref, active } = useDrag((args) => {
+        onDrag({ ...args, index });
+    }, {
+        containerRef,
+        orientation: direction === "row" ? "horizontal" : "vertical",
+    });
+    const handleClassNames = classNames(s.handle, active && s["handle--dragging"]);
+    if (children)
+        return _jsx(View.Item, { children: children({ ref }) });
+    return (_jsx(View.Item, { className: handleClassNames, attributes: {
+            role: "button",
+            tabIndex: 0,
+            ref: (el) => {
+                // @ts-ignore
+                ref.current = el;
+            },
+        } }));
+};
+const PrivateResizableItem = React.forwardRef((props, ref) => {
+    const { children, defaultSize, minSize, maxSize } = props;
+    const itemRef = React.useRef(null);
+    return (_jsx(View.Item, { grow: true, className: s.item, attributes: {
+            ref: (el) => {
+                if (typeof ref === "function")
+                    ref(el);
+                itemRef.current = el;
+            },
+            style: {
+                "--rs-resizable-default-size": defaultSize,
+                "--rs-resizable-min-size": minSize,
+                "--rs-resizable-max-size": maxSize,
+            },
+        }, children: children }));
+});
+const Resizable = (props) => {
+    const { children, height, direction = "row", gap = 2, className, attributes } = props;
+    const rootClassNames = classNames(s.root, s[`--direction-${direction}`], className);
+    const containerRef = React.useRef(null);
+    const itemsRef = React.useRef([]);
+    const horizontal = direction === "row";
+    let currentHandleIndex = 0;
+    let currentItemIndex = 0;
+    itemsRef.current = [];
+    const checkedCrossedBoundaries = (args) => {
+        const { item, grow, itemsSize, itemsCount } = args;
+        const { minSize, maxSize } = item.props;
+        const nextPx = (grow / itemsCount / 100) * itemsSize;
+        const minPx = minSize && Number(minSize.replace("px", ""));
+        const maxPx = maxSize && Number(maxSize?.replace("px", ""));
+        if (minPx && minPx > nextPx)
+            return true;
+        if (maxPx && maxPx < nextPx)
+            return true;
+        return false;
+    };
+    const onDrag = (args) => {
+        const { index, x, y, triggerX, triggerY } = args;
+        const startItem = itemsRef.current[index];
+        const endItem = itemsRef.current[index + 1];
+        if (!startItem.el || !endItem.el)
+            return;
+        const itemsCount = itemsRef.current.length;
+        // Each item has a flex-grow of 1 as default and these values get updated while dragging for the items around the handle
+        // Grow value of all items besides currently updating ones
+        let currentItemsGrow = itemsCount * 100;
+        let itemsSize = 0;
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el)
+                return;
+            itemsSize += horizontal ? item.el.clientWidth : item.el.clientHeight;
+            if (i === index || i === index + 1)
+                return;
+            currentItemsGrow -= Number(item.el.style.flexGrow || 100);
+        }, 0);
+        const startSize = horizontal ? startItem.el.clientWidth : startItem.el.clientHeight;
+        const startOffset = horizontal ? startItem.el.offsetLeft : startItem.el.offsetTop;
+        const endSize = horizontal ? endItem.el.clientWidth : endItem.el.clientHeight;
+        // Handles containing triggers are located lower based on the gap and padding inside the handle
+        const gapCompensation = (horizontal ? triggerX : triggerY) - startSize - startOffset;
+        const dragCoord = (horizontal ? x : y) - gapCompensation;
+        // Total size of the dragging area
+        const currentItemsSize = startSize + endSize;
+        // x is calculated based on container but we're changing grow based on current items
+        const percent = Math.min(1, Math.max(0, (dragCoord - startOffset) / currentItemsSize));
+        const nextStartGrow = Math.floor(percent * currentItemsGrow);
+        const nextEndGrow = Math.floor(currentItemsGrow - nextStartGrow);
+        // Validate that next grow values won't break the min/max size values
+        if (checkedCrossedBoundaries({ item: startItem, itemsSize, grow: nextStartGrow, itemsCount })) {
+            return;
+        }
+        if (checkedCrossedBoundaries({ item: endItem, itemsSize, grow: nextEndGrow, itemsCount })) {
+            return;
+        }
+        startItem.el.style.flexGrow = nextStartGrow.toString();
+        endItem.el.style.flexGrow = nextEndGrow.toString();
+    };
+    /**
+     * When passing sizes, items first get rendered with css
+     * and then have to be hydrated with flexGrow to enable correct resizing
+     */
+    React.useEffect(() => {
+        const growValues = [];
+        // Calculate total size of items excluding gaps
+        let totalItemsSize = 0;
+        itemsRef.current.forEach((item) => {
+            if (!item.el)
+                return;
+            totalItemsSize += horizontal ? item.el.clientWidth : item.el.clientHeight;
+        });
+        // Calculate flex grow values of all items rendered by css originally
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el)
+                return;
+            const itemSizePercent = (horizontal ? item.el.clientWidth : item.el.clientHeight) / totalItemsSize;
+            growValues[i] = itemsRef.current.length * itemSizePercent * 100;
+        });
+        // Apply flex grow after calculation is done to avoid layout shifts during the calculation
+        itemsRef.current.forEach((item, i) => {
+            if (!item.el || !growValues[i])
+                return;
+            item.el.style.flexGrow = growValues[i].toString();
+            item.el.setAttribute("data-rs-resizable-item-mounted", "");
+        });
+    }, [horizontal]);
+    const output = React.Children.map(children, (child) => {
+        const isComponent = React.isValidElement(child);
+        if (isComponent && child.type === Resizable.Handle && child.props) {
+            return (_jsx(PrivateResizableHandle, { ...child.props, containerRef: containerRef, index: currentHandleIndex++, onDrag: onDrag, direction: direction }));
+        }
+        if (isComponent && child.type === Resizable.Item && child.props) {
+            const index = currentHandleIndex;
+            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => (itemsRef.current[index] = { el, props: child.props }) }));
+        }
+        return null;
+    });
+    return (_jsx(View, { attributes: { ...attributes, ref: containerRef }, className: rootClassNames, height: height, direction: direction, align: "stretch", gap: gap, children: output }));
+};
+Resizable.Item = (() => null);
+Resizable.Handle = (() => null);
+export default Resizable;

package/dist/components/Resizable/Resizable.module.css

@@ -0,0 +1 @@
+.item{--rs-resizable-default-size:none;--rs-resizable-min-size:0;--rs-resizable-max-size:100%;flex-grow:100;max-width:var(--rs-resizable-default-size);min-width:var(--rs-resizable-default-size);overflow:hidden}.handle{flex-shrink:0;position:relative}.handle:after,.handle:before{border-radius:999px;content:"";position:absolute}.handle:after{background:var(--rs-color-border-neutral);opacity:0;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.handle--dragging:after,.handle:focus-visible:after,.handle:hover:after{opacity:.6}body:has(.handle--dragging) .handle:not(.handle--dragging){opacity:0}body:has(.--direction-row>.handle--dragging){cursor:ew-resize}body:has(.--direction-column>.handle--dragging){cursor:ns-resize}.--direction-row>.handle{cursor:ew-resize}.--direction-row>.handle:after,.--direction-row>.handle:before{inset-block:0;inset-inline-start:50%;transform:translateX(-50%)}.--direction-row>.handle:before{width:var(--rs-unit-x4)}.--direction-row>.handle:after{width:var(--rs-unit-x1)}.--direction-row>.item[data-rs-resizable-item-mounted]{max-width:var(--rs-resizable-max-size);min-width:var(--rs-resizable-min-size)}.--direction-column>.handle{cursor:ns-resize}.--direction-column>.handle:after,.--direction-column>.handle:before{inset-block-start:50%;inset-inline:0;transform:translateY(-50%)}.--direction-column>.handle:before{height:var(--rs-unit-x4)}.--direction-column>.handle:after{height:var(--rs-unit-x1)}.--direction-column>.item[data-rs-resizable-item-mounted]{max-height:var(--rs-resizable-max-size);min-height:var(--rs-resizable-min-size)}

package/dist/components/Resizable/Resizable.types.d.ts

@@ -0,0 +1,29 @@
+import type React from "react";
+import type { ViewProps } from "../View";
+import type { UseDragCallbackArgs } from "../../hooks/useDrag";
+export type Props = Pick<ViewProps, "children" | "className" | "attributes" | "height" | "direction" | "gap">;
+export type ItemProps = {
+    children: React.ReactNode;
+    minSize?: `${number}px`;
+    maxSize?: `${number}px`;
+    defaultSize?: `${number}px`;
+};
+export type PrivateItemProps = ItemProps & {
+    index: number;
+};
+export type HandleProps = {
+    children?: (attributes: {
+        ref: React.RefObject<HTMLButtonElement>;
+    }) => React.ReactNode;
+};
+export type PrivateHandleProps = HandleProps & {
+    containerRef: React.RefObject<HTMLDivElement>;
+    index: number;
+    onDrag: (args: UseDragCallbackArgs & {
+        index: number;
+    }) => void;
+} & Pick<Props, "direction">;
+export type ItemsRefProps = {
+    el: HTMLDivElement | null;
+    props: ItemProps;
+}[];

package/dist/components/Resizable/Resizable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Resizable/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./Resizable";
+export type { Props as ResizableProps, ItemProps as ResizableItemProps, HandleProps as ResizableHandleProps, } from "./Resizable.types";

package/dist/components/Resizable/index.js

@@ -0,0 +1 @@
+export { default } from "./Resizable.js";

package/dist/components/Resizable/tests/Resizable.stories.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ResizableProps): import("react").JSX.Element;
+        Item: import("react").FC<import("./..").ResizableItemProps>;
+        Handle: import("react").FC<import("./..").ResizableHandleProps>;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: () => import("react").JSX.Element;

package/dist/components/Resizable/tests/Resizable.stories.js

@@ -0,0 +1,58 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import Resizable from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Components/Resizable",
+    component: Resizable,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/Resizable",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item>
+			<Resizable height="300px" gap={4}>
+				<Resizable.Item minSize="100px" defaultSize="200px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+						Panel
+					</View>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
+					<Resizable height="100%" direction="column">
+						<Resizable.Item minSize="50px" maxSize="100px">
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+						<Resizable.Handle>
+							{(attributes) => (<View backgroundColor="primary-faded" padding={1} align="center" borderRadius="small">
+									<Button attributes={attributes} type="button">
+										Drag me
+									</Button>
+								</View>)}
+						</Resizable.Handle>
+						<Resizable.Item>
+							<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height="100%">
+								Panel
+							</View>
+						</Resizable.Item>
+					</Resizable>
+				</Resizable.Item>
+			</Resizable>
+		</Example.Item>
+	</Example>);

package/dist/components/ScrollArea/ScrollArea.js

@@ -7,8 +7,10 @@ import getHeightStyles from "../../styles/height/index.js";
 import getMaxHeightStyles from "../../styles/maxHeight/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import s from "./ScrollArea.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
+    const onThumbMoveRef = useHandlerRef(onThumbMove);
     const [dragging, setDragging] = React.useState(false);
     const dragStartPositionRef = React.useRef(0);
     const barRef = React.useRef(null);
@@ -38,10 +40,8 @@ const ScrollAreaBar = (props) => {
             return;
         const diff = vertical ? e.movementY : e.movementX;
         const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
-        onThumbMove({ value: diff / total, type: "relative" });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [ratio, vertical, dragging]);
+        onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
+    }, [vertical, dragging, onThumbMoveRef]);
     const handleDragEnd = React.useCallback(() => {
         setDragging(false);
         enableUserSelect();

package/dist/components/Select/Select.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}
+.root{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;overflow:hidden;padding:calc(var(--rs-unit-x1) - 1px) 0;position:relative;z-index:0}.root:focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;color:var(--rs-color-foreground-neutral);cursor:pointer;display:flex;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);outline:none;padding-inline-end:calc(var(--rs-select-chevron-size) + var(--rs-select-gap) * 2 + var(--rs-unit-x1));padding-inline-start:var(--rs-select-gap);position:relative;width:100%;z-index:1}.input::-ms-expand{display:none}.slot{align-items:center;display:flex;flex-shrink:0;padding-inline-start:var(--rs-select-gap);position:relative;z-index:5}.input .slot{padding-inline-end:var(--rs-select-gap);padding-inline-start:0}.arrow{color:var(--rs-color-foreground-neutral-faded);display:flex;inset-block-start:50%;inset-inline-end:var(--rs-select-gap);pointer-events:none;position:absolute;transform:translateY(-50%);z-index:5}.--size-medium{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}.root.--placeholder .input{color:var(--rs-color-foreground-neutral-faded)}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .arrow,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--m{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--m{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--l{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--l{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-select-gap:var(--rs-unit-x2);--rs-select-chevron-size:var(--rs-unit-x4);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3);padding-bottom:var(--rs-unit-x1);padding-top:var(--rs-unit-x1)}.--size-large--xl{--rs-select-gap:var(--rs-unit-x3);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x2);padding-top:var(--rs-unit-x2)}.--size-xlarge--xl{--rs-select-gap:var(--rs-unit-x4);--rs-select-chevron-size:var(--rs-unit-x5);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2);padding-bottom:var(--rs-unit-x3);padding-top:var(--rs-unit-x3)}}

package/dist/components/Slider/Slider.types.d.ts

@@ -48,9 +48,9 @@ type BaseProps = {
     min?: number;
     max?: number;
     orientation?: "vertical" | "horizontal";
-    renderValue?: (args: {
+    renderValue?: ((args: {
         value: number;
-    }) => string;
+    }) => string) | false;
     className?: G.ClassName;
     attributes?: G.Attributes<"div">;
 };

package/dist/components/Slider/Slider.utilities.js

@@ -15,10 +15,10 @@ export const applyStepToValue = (value, step) => {
 export const getDragCoord = ({ event, vertical, }) => {
     if (vertical) {
         if (event instanceof MouseEvent)
-            return event.pageY || event.screenY;
-        return event.changedTouches[0].pageY;
+            return event.clientY;
+        return event.changedTouches[0].clientY;
     }
     if (event instanceof MouseEvent)
-        return event.pageX || event.screenX;
-    return event.changedTouches[0].pageX;
+        return event.clientX;
+    return event.changedTouches[0].clientX;
 };

package/dist/components/Slider/SliderControlled.js

@@ -9,9 +9,12 @@ import { useFormControl } from "../FormControl/index.js";
 import SliderThumb from "./SliderThumb.js";
 import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
     const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, orientation = "horizontal", } = props;
+    const onChangeRef = useHandlerRef(onChange);
+    const onChangeCommitRef = useHandlerRef(onChangeCommit);
     const vertical = orientation === "vertical";
     const minValue = range && props.minValue !== undefined ? applyStepToValue(props.minValue, step) : undefined;
     const maxValue = applyStepToValue(range ? props.maxValue : props.value, step);
@@ -79,22 +82,21 @@ const SliderControlled = (props) => {
     const handleMinChange = React.useCallback((value, options) => {
         if (!range)
             return;
-        const method = options?.commit ? onChangeCommit : onChange;
+        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        // @ts-ignore - creating refs out of handler props loses connection to the range flag
         method?.({ minValue: value, maxValue, name });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [maxValue, name, range]);
+    }, [maxValue, name, range, onChangeCommitRef, onChangeRef]);
     const handleMaxChange = React.useCallback((value, options) => {
         if (range) {
-            const method = options?.commit ? onChangeCommit : onChange;
+            const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+            // @ts-ignore - creating refs out of handler props loses connection to the range flag
             method?.({ minValue: minValue, maxValue: value, name });
             return;
         }
-        const method = options?.commit ? onChangeCommit : onChange;
+        const method = options?.commit ? onChangeCommitRef.current : onChangeRef.current;
+        // @ts-ignore - creating refs out of handler props loses connection to the range flag
         method?.({ value, name });
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [minValue, name, range]);
+    }, [minValue, name, range, onChangeRef, onChangeCommitRef]);
     const handleMouseDown = ({ nativeEvent }) => {
         if (disabled)
             return;

package/dist/components/Slider/SliderThumb.js

@@ -15,6 +15,6 @@ const SliderThumb = (props, ref) => {
     const handleChange = (e) => {
         onChange(+e.target.value);
     };
-    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("input", { className: s.input, type: "range", name: name, value: value, onChange: handleChange, disabled: disabled, max: max, min: min, step: step, "aria-labelledby": id, "aria-orientation": orientation }), _jsx("div", { ref: ref, className: thumbClassNames, onMouseDown: onDragStart, onTouchStart: onDragStart, style: { "--ts-slider-thumb-position": `${position}%` }, id: id, "aria-hidden": "true", children: renderValue !== false && (_jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", weight: "medium", className: s.tooltip, attributes: { ref: tooltipRef }, children: tooltipValue }) })) })] }));
 };
 export default React.forwardRef(SliderThumb);

package/dist/components/Slider/tests/Slider.stories.js

@@ -22,6 +22,7 @@ export const direction = () => (<Example>
 			<View height="200px">
 				<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} orientation="vertical"/>
 			</View>
+			<View height="2000px"/>
 		</Example.Item>
 	</Example>);
 export const step = () => (<Example>
@@ -49,6 +50,9 @@ export const customRender = () => (<Example>
 		<Example.Item title="custom render">
 			<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
 		</Example.Item>
+		<Example.Item title="no tooltip">
+			<Slider name="slider" defaultValue={30} renderValue={false}/>
+		</Example.Item>
 	</Example>);
 export const formControl = () => (<Example>
 		<Example.Item title="form control, disabled">