reshaped 3.0.8-rc.1 → 3.0.10

package/dist/components/Popover/Popover.js

@@ -1,18 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../utilities/helpers.js";
-import Flyout from "../_private/Flyout/index.js";
+import Flyout, { useFlyoutContext } from "../_private/Flyout/index.js";
+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();
+    return _jsx(Dismissible, { ...props, onClose: handleClose });
+};
+Popover.Dismissible = PopoverDismissible;
 Popover.Trigger = Flyout.Trigger;
 Popover.Content = Flyout.Content;
 export default Popover;

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/Popover/tests/Popover.stories.d.ts

@@ -2,6 +2,7 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").PopoverProps): import("react").JSX.Element;
+        Dismissible: (props: import("../../Dismissible").DismissibleProps) => import("react").JSX.Element;
         Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
         Content: (props: import("../../_private/Flyout").FlyoutContentProps) => import("react").JSX.Element | null;
     };
@@ -17,4 +18,5 @@ export declare const width: () => import("react").JSX.Element;
 export declare const variant: () => import("react").JSX.Element;
 export declare const padding: () => import("react").JSX.Element;
 export declare const triggerType: () => import("react").JSX.Element;
+export declare const dismissible: () => import("react").JSX.Element;
 export declare const edgeCases: () => import("react").JSX.Element;

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

@@ -94,6 +94,22 @@ export const triggerType = () => (<Example>
 			<Demo triggerType="hover"/>
 		</Example.Item>
 	</Example>);
+export const dismissible = () => {
+    return (<Example>
+			<Example.Item title="with dismissible">
+				<Popover>
+					<Popover.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open</Button>}
+					</Popover.Trigger>
+					<Popover.Content>
+						<Popover.Dismissible closeAriaLabel="Close" align="center">
+							Popover content
+						</Popover.Dismissible>
+					</Popover.Content>
+				</Popover>
+			</Example.Item>
+		</Example>);
+};
 export const edgeCases = () => (<Example>
 		<Example.Item title="Popover with tooltip">
 			<Tooltip position="top" text="Hello">

package/dist/components/Radio/Radio.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-decorator-size) * .4)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+.root{align-items:center;cursor:pointer;display:inline-flex;user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{--rs-radio-decorator-size:var(--rs-line-height-body-3);background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-decorator-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-decorator-size)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-decorator-size) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-decorator-size) * .4)}.input:focus-visible+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

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;height:100%}.--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;width:100%}.--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/Slider/Slider.module.css

@@ -1 +1 @@
-.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1}.input:focus+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{--rs-slider-overflow-gap:var(--rs-unit-x1);--rs-slider-thumb-size:var(--rs-unit-x4);align-items:center;cursor:pointer;display:flex;position:relative;user-select:none;-webkit-tap-highlight-color:transparent}.root:has(.thumb:hover,.thumb--active,.input:focus-visible){overflow:visible}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);position:relative}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);position:absolute}.tooltip{--rs-slider-tooltip-translate:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-small);box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);font-variant-numeric:tabular-nums;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.thumbs,.tooltip{position:absolute}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-slider-thumb-size);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-slider-thumb-size)}.thumb:after,.thumb:before{content:"";position:absolute}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1}.input:focus-visible+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus-visible+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus-visible+.thumb .tooltip,.thumb--active .tooltip{opacity:1}.input:focus-visible+.thumb:before{box-shadow:var(--rs-focus-shadow)}.--orientation-horizontal{height:var(--rs-slider-thumb-size);margin-inline:calc(var(--rs-slider-overflow-gap) * -1);overflow-x:clip;padding-inline:var(--rs-slider-overflow-gap)}.--orientation-horizontal .bar{height:var(--rs-unit-x1);width:100%}.--orientation-horizontal .selection{height:100%;inset-inline-start:var(--rs-slider-selection-start);width:var(--rs-slider-selection-size)}.--orientation-horizontal .tooltip{bottom:100%;left:50%;transform:translate(var(--rs-slider-tooltip-translate))}.--orientation-horizontal .thumbs{height:100%;inset-inline:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap))}.--orientation-horizontal .thumb{height:100%;inset-inline-start:var(--ts-slider-thumb-position);width:0}.--orientation-horizontal .thumb:after,.--orientation-horizontal .thumb:before{left:0;top:50%;transform:translate(-50%,-50%)}.--orientation-horizontal .input:focus+.thumb .tooltip,.--orientation-horizontal .thumb--active .tooltip,.--orientation-horizontal .thumb:hover .tooltip{transform:translate(var(--rs-slider-tooltip-translate),calc(var(--rs-unit-x1) * -1.5))}.--orientation-vertical{flex-direction:column;height:100%;margin-block:calc(var(--rs-slider-overflow-gap) * -1);overflow-y:clip;padding-block:var(--rs-slider-overflow-gap);width:var(--rs-slider-thumb-size)}.--orientation-vertical .bar{height:100%;width:var(--rs-unit-x1)}.--orientation-vertical .selection{height:var(--rs-slider-selection-size);inset-block-end:var(--rs-slider-selection-start);inset-inline-start:auto;width:100%}.--orientation-vertical .tooltip{inset-inline-start:100%;top:50%;transform:translateY(var(--rs-slider-tooltip-translate))}.--orientation-vertical .thumbs{inset-block:calc(var(--rs-slider-thumb-size) / 2 + var(--rs-slider-overflow-gap));width:100%}.--orientation-vertical .thumb{height:0;inset-block-end:var(--ts-slider-thumb-position);width:100%}.--orientation-vertical .thumb:after,.--orientation-vertical .thumb:before{left:50%;top:0;transform:translate(-50%,-50%)}.--orientation-vertical .input:focus+.thumb .tooltip,.--orientation-vertical .thumb--active .tooltip,.--orientation-vertical .thumb:hover .tooltip{transform:translate(calc(var(--rs-unit-x1) * 1.5),-50%)}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

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">

package/dist/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}
+.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top;-webkit-tap-highlight-color:transparent}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}.input:focus-visible+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.area,.thumb{border-radius:999px}.thumb{background:var(--rs-color-white);box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--size-large .area{height:calc(var(--rs-unit-x1) * 6);width:calc(var(--rs-unit-x1) * 10)}.root--size-large .thumb{height:var(--rs-unit-x5);width:var(--rs-unit-x5)}.root--size-large .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x4))}[dir=rtl] .root--size-large .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x4) * -1))}.root--reversed{flex-direction:row-reverse}

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

@@ -37,23 +37,24 @@ export type ContainerProps = {
     status?: "entering" | "entered" | "exiting";
     inspected: boolean;
 };
+export type ShowOptions = {
+    timeout?: Timeout;
+    position?: Position;
+};
+export type ShowProps = Props & ShowOptions;
 export type Context = {
     options?: ProviderProps["options"];
     queues: Record<RegionProps["position"], Array<ContainerProps>>;
-    add: (toast: Props & ShowOptions) => string;
+    add: (toast: ShowProps) => string;
     show: (id: string) => void;
     hide: (id: string) => void;
     remove: (id: string) => void;
     id: string;
 };
-export type ShowOptions = {
-    timeout?: Timeout;
-    position?: Position;
-};
 type AddAction = {
     type: "add";
     payload: {
-        toastProps: Props & ShowOptions;
+        toastProps: ShowProps;
         id: string;
     };
 };

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

@@ -1,3 +1,3 @@
 export { default as useToast } from "./useToast";
 export { default as ToastProvider } from "./ToastProvider";
-export type { Props as ToastProps, ProviderProps as ToastProviderProps } from "./Toast.types";
+export type { Props as ToastProps, ProviderProps as ToastProviderProps, ShowProps as ToastShowProps, } from "./Toast.types";

package/dist/components/Toast/useToast.d.ts

@@ -1,5 +1,5 @@
 declare const useToast: () => {
-    show: (toast: import("./Toast.types").Props & import("./Toast.types").ShowOptions) => string;
+    show: (toast: import("./Toast.types").ShowProps) => string;
     hide: (id: string) => void;
     id: string;
 };

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

@@ -121,4 +121,35 @@ export const edgeCases = () => (<Example>
 					</Actionable>)}
 			</Tooltip>
 		</Example.Item>
+
+		<Example.Item title="nested popovers inside a tooltip">
+			<Tooltip position="top" text="Hello">
+				{(tooltipAttributes) => (<Popover position="bottom">
+						<Popover.Trigger>
+							{(attributes) => (<Button color="primary" attributes={{
+                ...tooltipAttributes,
+                ...attributes,
+            }}>
+									Open
+								</Button>)}
+						</Popover.Trigger>
+						<Popover.Content>
+							<View gap={2} align="start">
+								Popover content
+								<Popover position="bottom">
+									<Popover.Trigger>
+										{(attributes) => <Button attributes={attributes}>Open</Button>}
+									</Popover.Trigger>
+									<Popover.Content>
+										<View gap={2} align="start">
+											Popover content
+											<Button onClick={() => { }}>Button</Button>
+										</View>
+									</Popover.Content>
+								</Popover>
+							</View>
+						</Popover.Content>
+					</Popover>)}
+			</Tooltip>
+		</Example.Item>
 	</Example>);

package/dist/components/_private/Flyout/Flyout.context.d.ts

@@ -3,7 +3,9 @@ import type * as T from "./Flyout.types";
 declare const FlyoutContext: React.Context<T.ContextProps>;
 declare const useFlyoutContext: () => T.ContextProps;
 declare const useFlyoutTriggerContext: () => T.TriggerContextProps;
+declare const useFlyoutContentContext: () => boolean;
 declare const Provider: React.Provider<T.ContextProps>;
 declare const TriggerProvider: React.Provider<T.TriggerContextProps>;
-export { Provider, TriggerProvider, useFlyoutContext, useFlyoutTriggerContext };
+declare const ContentProvider: React.Provider<boolean>;
+export { Provider, TriggerProvider, ContentProvider, useFlyoutContext, useFlyoutTriggerContext, useFlyoutContentContext, };
 export default FlyoutContext;