reshaped 3.8.0-canary.8 → 3.8.0

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

@@ -1,8 +1,8 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
+import type { FlyoutProps, FlyoutTriggerAttributes } from "../Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates" | "contentAttributes" | "contentClassName"> & {
     /** Node for inserting children */
-    children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
+    children: (attributes: FlyoutTriggerAttributes) => React.ReactNode;
     /** Text content for the tooltip */
     text?: React.ReactNode;
     /** Color of the tooltip

package/dist/components/View/View.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
-import { classNames, isMatchingComponentChildId, responsiveClassNames, responsiveVariables, setComponentChildId, } from "../../utilities/props.js";
+import React, { isValidElement } from "react";
+import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
 import s from "./View.module.css";
@@ -100,13 +100,15 @@ const View = (props) => {
         return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
     };
     const renderItem = ({ className, child, index }) => {
-        const isItem = isMatchingComponentChildId(child, "View.Item");
-        const isView = isMatchingComponentChildId(child, "View");
+        const isElement = isValidElement(child);
+        const isItem = isElement && child.type === ViewItem;
+        const isView = isElement && child.type === View;
         const key = child.key;
         const dividerElement = !!index && divided && renderDivider({ className, key });
         let itemElement;
         if (isItem) {
             itemElement = React.cloneElement(child, {
+                // @ts-expect-error -- child is guaranteed to be an element
                 className: classNames(className, child.props.className),
             });
         }
@@ -120,10 +122,13 @@ const View = (props) => {
             itemElement = (_jsx("div", { className: className, children: child }, key));
         }
         // Passing grow here because it's responsive and nowrap should follow it
+        // @ts-expect-error -- child is guaranteed to be an element
         if ((isItem || isView) && child.props?.grow) {
+            // @ts-expect-error -- child is guaranteed to be an element
             nowrap = child.props.grow;
             isFlex = true;
         }
+        // @ts-expect-error -- child is guaranteed to be an element
         if (isItem && child.props?.gap === "auto")
             nowrap = true;
         return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, key ? `${key}-fragment` : undefined));
@@ -134,8 +139,10 @@ const View = (props) => {
         if (!child)
             return null;
         const usedIndex = renderedItemIndex;
+        // eslint-disable-next-line react-hooks/immutability
         renderedItemIndex += 1;
-        if (isMatchingComponentChildId(child, "Hidden")) {
+        if (isValidElement(child) && child.type === Hidden) {
+            // @ts-expect-error -- child is guaranteed to be an element
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
             return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));
@@ -167,8 +174,6 @@ const View = (props) => {
     return (_jsx(TagName, { ...attributes, className: rootClassNames, style: rootVariables, children: formattedChildren }));
 };
 View.Item = ViewItem;
-setComponentChildId(View.Item, "View.Item");
-setComponentChildId(View, "View");
 View.displayName = "View";
 ViewItem.displayName = "View.Item";
 export default View;

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

@@ -87,7 +87,7 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** z-index style */
     zIndex?: number;
     /** Shadow style, based on the shadow tokens */
-    shadow?: "raised" | "overlay" | "inset";
+    shadow?: "raised" | "overlay";
     /** Overflow style */
     overflow?: "hidden" | "auto";
     /** Add transition for the properties */

package/dist/components/_private/Expandable/Expandable.js

@@ -10,7 +10,9 @@ const Expandable = (props) => {
     const rootRef = React.useRef(null);
     const mountedRef = React.useRef(false);
     const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const contentClassNames = classNames(s.root, 
+    // eslint-disable-next-line react-hooks/refs
+    mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

package/dist/components/_private/Portal/Portal.js

@@ -18,18 +18,20 @@ const Portal = (props) => {
     const { children, targetRef } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
+    // eslint-disable-next-line react-hooks/refs
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
     const defaultTargetEl = isShadowDom ? rootNode : document.body;
     /**
      * Check for parent portal to render inside it
-     * To avoid z-iondex issues
+     * To avoid z-index issues
      * Example:
      * Dropdown rendered on the page should render under the modal
      * Dropdown inside the modal should render above it
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
+    // eslint-disable-next-line react-hooks/refs
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     useIsomorphicLayoutEffect(() => {
         mountedToggle.activate();
@@ -37,6 +39,7 @@ const Portal = (props) => {
     }, []);
     /* Preserve the current theme when rendered in body */
     return [
+        // eslint-disable-next-line react-hooks/refs
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
         // Make sure this element doesn't affect components using :last-child when their children use portals
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),

package/dist/hooks/_private/usePrevious.js

@@ -12,6 +12,7 @@ const usePrevious = (value, clean = false) => {
     React.useEffect(() => {
         ref.current = clean ? copy(value) : value;
     }, [value, clean]);
+    // eslint-disable-next-line react-hooks/refs
     return ref.current;
 };
 export default usePrevious;

package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const base: StoryObj;
+export declare const horizontal: StoryObj;
+export declare const vertical: StoryObj;
+export declare const circular: StoryObj;
+export declare const disabled: StoryObj;

package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js

@@ -0,0 +1,128 @@
+import React, { useRef } from "react";
+import { expect, userEvent } from "storybook/test";
+import View from "../../components/View/index.js";
+import Button from "../../components/Button/index.js";
+import useKeyboardArrowNavigation from "../useKeyboardArrowNavigation.js";
+export default {
+    title: "Hooks/useKeyboardArrowNavigation",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[2]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const horizontal = {
+    name: "orientation: horizontal",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "horizontal" });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        expect(buttons[0]).toHaveAttribute("tabindex", "0");
+        expect(buttons[1]).toHaveAttribute("tabindex", "-1");
+        expect(buttons[2]).toHaveAttribute("tabindex", "-1");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const vertical = {
+    name: "orientation: vertical",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, orientation: "vertical" });
+        return (<View gap={2} direction="column" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowDown/}");
+        expect(document.activeElement).toBe(buttons[1]);
+        await userEvent.keyboard("{ArrowUp/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[0]);
+    },
+};
+export const circular = {
+    name: "circular",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, circular: true });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[2]);
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        await userEvent.keyboard("{ArrowLeft/}");
+        expect(document.activeElement).toBe(buttons[2]);
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => {
+        const ref = useRef(null);
+        useKeyboardArrowNavigation({ ref, disabled: true });
+        return (<View gap={2} direction="row" attributes={{ ref }}>
+				<Button onClick={() => { }}>Action 1</Button>
+				<Button onClick={() => { }}>Action 2</Button>
+				<Button onClick={() => { }}>Action 3</Button>
+			</View>);
+    },
+    play: async ({ canvas }) => {
+        const buttons = canvas.getAllByRole("button");
+        buttons[0].focus();
+        await userEvent.keyboard("{ArrowRight/}");
+        expect(document.activeElement).toBe(buttons[0]);
+        expect(buttons[0]).not.toHaveAttribute("tabindex");
+    },
+};

package/dist/hooks/useKeyboardArrowNavigation.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    ref: React.RefObject<HTMLElement | null>;
+    disabled?: boolean;
+    orientation?: "vertical" | "horizontal";
+    circular?: boolean;
+};
+declare const useKeyboardArrowNavigation: (props: Props) => void;
+export default useKeyboardArrowNavigation;

package/dist/hooks/useKeyboardArrowNavigation.js

@@ -0,0 +1,62 @@
+import React, { useEffect } from "react";
+import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "../utilities/a11y/index.js";
+import useHotkeys from "./useHotkeys.js";
+const useKeyboardArrowNavigation = (props) => {
+    const { ref, disabled, orientation, circular } = props;
+    const backHotkeys = [];
+    const forwardHotkeys = [];
+    if (!orientation || orientation === "vertical") {
+        backHotkeys.push("ArrowUp");
+        forwardHotkeys.push("ArrowDown");
+    }
+    if (!orientation || orientation === "horizontal") {
+        backHotkeys.push("ArrowLeft");
+        forwardHotkeys.push("ArrowRight");
+    }
+    const updateTabIndex = React.useCallback((options) => {
+        const { el, focusableElements } = options;
+        const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
+        const activeEl = el ?? initialEl ?? focusableElements[0];
+        focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
+        activeEl?.setAttribute("tabindex", "0");
+    }, []);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (disabled)
+            return;
+        const focusableElements = getFocusableElements(ref.current);
+        updateTabIndex({ focusableElements });
+    }, [ref, updateTabIndex, disabled]);
+    useHotkeys({
+        [backHotkeys.join(", ")]: () => {
+            if (!ref.current)
+                return;
+            const data = focusPreviousElement(ref.current, { circular });
+            updateTabIndex(data);
+        },
+        [forwardHotkeys.join(", ")]: () => {
+            if (!ref.current)
+                return;
+            const data = focusNextElement(ref.current, { circular });
+            updateTabIndex(data);
+        },
+        Home: () => {
+            if (!ref.current)
+                return;
+            const data = focusFirstElement(ref.current);
+            updateTabIndex(data);
+        },
+        End: () => {
+            if (!ref.current)
+                return;
+            const data = focusLastElement(ref.current);
+            updateTabIndex(data);
+        },
+    }, [updateTabIndex, circular], {
+        ref,
+        preventDefault: true,
+        disabled,
+    });
+};
+export default useKeyboardArrowNavigation;

package/dist/hooks/useOnClickOutside.js

@@ -39,8 +39,6 @@ const useOnClickOutside = (refs, handler, options) => {
         if (disabled)
             return;
         const handleClick = (event) => {
-            if (!event.pointerType)
-                return;
             if (event.button === 2)
                 return;
             if (isMouseDownInsideRef.current)

package/dist/hooks/useScrollLock.js

@@ -1,18 +1,20 @@
 "use client";
 import React from "react";
-import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
+import { lockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = (options) => {
     const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
+    const unlockScrollRef = React.useRef(null);
     const handleLockScroll = React.useCallback(() => {
-        lockScroll({
+        unlockScrollRef.current = lockScroll({
             containerEl: containerRef?.current,
             originEl: originRef?.current,
             cb: () => setLocked(true),
         });
     }, [containerRef, originRef]);
     const handleUnlockScroll = React.useCallback(() => {
-        unlockScroll(() => setLocked(false));
+        unlockScrollRef.current?.(() => setLocked(false));
+        unlockScrollRef.current = null;
     }, []);
     return React.useMemo(() => ({
         scrollLocked: locked,

package/dist/index.d.ts

@@ -103,7 +103,7 @@ export type { ContainerProps } from "./components/Container";
 export { default as Dismissible } from "./components/Dismissible";
 export type { DismissibleProps } from "./components/Dismissible";
 export { default as Flyout } from "./components/Flyout";
-export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
+export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "./components/Flyout";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
 export { default as Grid } from "./components/Grid";
@@ -135,6 +135,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef";
 export { default as useHotkeys } from "./hooks/useHotkeys";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
+export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
 export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
 export { default as useRTL } from "./hooks/useRTL";

package/dist/index.js

@@ -74,6 +74,7 @@ export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
 export { default as useHotkeys } from "./hooks/useHotkeys.js";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
+export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
 export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
 export { default as useRTL } from "./hooks/useRTL.js";

package/dist/styles/resolvers/align/align.css

@@ -1 +1 @@
-[style*="--rs-align-s:"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-xl)}}
+[style*="--rs-align-"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-"]{--rs-align:var(--rs-align-xl)}}

package/dist/styles/resolvers/aspectRatio/aspectRatio.css

@@ -1 +1 @@
-[style*="--rs-ratio-s:"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-xl)}}
+[style*="--rs-ratio-"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/resolvers/bleed/bleed.module.css

@@ -1 +1 @@
-.root[style*="--rs-bleed-s:"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}
+.root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}

package/dist/styles/resolvers/justify/justify.css

@@ -1 +1 @@
-[style*="--rs-justify-s:"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-xl)}}
+[style*="--rs-justify-"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-xl)}}

package/dist/styles/resolvers/maxHeight/maxHeight.module.css

@@ -1 +1 @@
-.root[style*="--rs-max-h-s:"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-max-h-"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/maxWidth/maxWidth.module.css

@@ -1 +1 @@
-.root[style*="--rs-max-w-s:"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-max-w-"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/minHeight/minHeight.module.css

@@ -1 +1 @@
-.root[style*="--rs-min-h-s:"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-min-h-"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/minWidth/minWidth.module.css

@@ -1 +1 @@
-.root[style*="--rs-min-w-s:"]{--rs-min-w-s:none;--rs-min-w-m:var(--rs-min-w-s);--rs-min-w-l:var(--rs-min-w-m);--rs-min-w-xl:var(--rs-min-w-l);--rs-min-w:var(--rs-min-w-s)}.--type-literal{min-width:var(--rs-min-w)!important}.--type-unit{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-m)}.--type-literal--m{min-width:var(--rs-min-w)!important}.--type-unit--m{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-l)}.--type-literal--l{min-width:var(--rs-min-w)!important}.--type-unit--l{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-xl)}.--type-literal--xl{min-width:var(--rs-min-w)!important}.--type-unit--xl{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-min-w-"]{--rs-min-w-s:none;--rs-min-w-m:var(--rs-min-w-s);--rs-min-w-l:var(--rs-min-w-m);--rs-min-w-xl:var(--rs-min-w-l);--rs-min-w:var(--rs-min-w-s)}.--type-literal{min-width:var(--rs-min-w)!important}.--type-unit{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-m)}.--type-literal--m{min-width:var(--rs-min-w)!important}.--type-unit--m{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-l)}.--type-literal--l{min-width:var(--rs-min-w)!important}.--type-unit--l{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-xl)}.--type-literal--xl{min-width:var(--rs-min-w)!important}.--type-unit--xl{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/position/position.css

@@ -1 +1 @@
-[style*="--rs-position-s:"]{position:var(--rs-position)!important;--rs-position-s: ;--rs-position-m:var(--rs-position-s);--rs-position-l:var(--rs-position-m);--rs-position-xl:var(--rs-position-l);--rs-position:var(--rs-position-s)}@media (--rs-viewport-m ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-m)}}@media (--rs-viewport-l ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-l)}}@media (--rs-viewport-xl ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-xl)}}
+[style*="--rs-position-"]{position:var(--rs-position)!important;--rs-position-s: ;--rs-position-m:var(--rs-position-s);--rs-position-l:var(--rs-position-m);--rs-position-xl:var(--rs-position-l);--rs-position:var(--rs-position-s)}@media (--rs-viewport-m ){[style*="--rs-position-"]{--rs-position:var(--rs-position-m)}}@media (--rs-viewport-l ){[style*="--rs-position-"]{--rs-position:var(--rs-position-l)}}@media (--rs-viewport-xl ){[style*="--rs-position-"]{--rs-position:var(--rs-position-xl)}}

package/dist/styles/resolvers/textAlign/textAlign.css

@@ -1 +1 @@
-[style*="--rs-text-align-s:"]{text-align:var(--rs-text-align)!important;--rs-text-align-s: ;--rs-text-align-m:var(--rs-text-align-s);--rs-text-align-l:var(--rs-text-align-m);--rs-text-align-xl:var(--rs-text-align-l);--rs-text-align:var(--rs-text-align-s)}@media (--rs-viewport-m ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-m)}}@media (--rs-viewport-l ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-xl)}}
+[style*="--rs-text-align-"]{text-align:var(--rs-text-align)!important;--rs-text-align-s: ;--rs-text-align-m:var(--rs-text-align-s);--rs-text-align-l:var(--rs-text-align-m);--rs-text-align-xl:var(--rs-text-align-l);--rs-text-align:var(--rs-text-align-s)}@media (--rs-viewport-m ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-m)}}@media (--rs-viewport-l ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-xl)}}

package/dist/styles/resolvers/width/width.module.css

@@ -1 +1 @@
-.root[style*="--rs-w-s:"]{--rs-w-s:auto;--rs-w-m:var(--rs-w-s);--rs-w-l:var(--rs-w-m);--rs-w-xl:var(--rs-w-l);--rs-w:var(--rs-w-s)}.--type-literal{width:var(--rs-w)!important}.--type-unit{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-m)}.--type-literal--m{width:var(--rs-w)!important}.--type-unit--m{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-l)}.--type-literal--l{width:var(--rs-w)!important}.--type-unit--l{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-xl)}.--type-literal--xl{width:var(--rs-w)!important}.--type-unit--xl{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-w-"]{--rs-w-s:auto;--rs-w-m:var(--rs-w-s);--rs-w-l:var(--rs-w-m);--rs-w-xl:var(--rs-w-l);--rs-w:var(--rs-w-s)}.--type-literal{width:var(--rs-w)!important}.--type-unit{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-m)}.--type-literal--m{width:var(--rs-w)!important}.--type-unit--m{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-l)}.--type-literal--l{width:var(--rs-w)!important}.--type-unit--l{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-xl)}.--type-literal--xl{width:var(--rs-w)!important}.--type-unit--xl{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}

package/dist/utilities/a11y/focus.d.ts

@@ -14,8 +14,25 @@ export declare const getFocusData: (args: {
 }) => {
     overflow: boolean;
     el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusNextElement: (root: HTMLElement, options?: {
+    circular?: boolean;
+}) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusPreviousElement: (root: HTMLElement, options?: {
+    circular?: boolean;
+}) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusFirstElement: (root: HTMLElement) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
+};
+export declare const focusLastElement: (root: HTMLElement) => {
+    el: FocusableElement;
+    focusableElements: FocusableElement[];
 };
-export declare const focusNextElement: (root: HTMLElement) => void;
-export declare const focusPreviousElement: (root: HTMLElement) => void;
-export declare const focusFirstElement: (root: HTMLElement) => void;
-export declare const focusLastElement: (root: HTMLElement) => void;

package/dist/utilities/a11y/focus.js

@@ -88,13 +88,14 @@ export const getFocusData = (args) => {
             nextIndex = target === "prev" ? positions.first : positions.last;
         }
     }
-    return { overflow: isOverflow, el: focusable[nextIndex] };
+    return { overflow: isOverflow, el: focusable[nextIndex], focusableElements: focusable };
 };
 const focusTargetElement = (root, target, options) => {
     const data = getFocusData({ root, target, options });
     focusElement(data.el);
+    return { el: data.el, focusableElements: data.focusableElements };
 };
-export const focusNextElement = (root) => focusTargetElement(root, "next", { includeNegativeTabIndex: true });
-export const focusPreviousElement = (root) => focusTargetElement(root, "prev", { includeNegativeTabIndex: true });
+export const focusNextElement = (root, options) => focusTargetElement(root, "next", { ...options, includeNegativeTabIndex: true });
+export const focusPreviousElement = (root, options) => focusTargetElement(root, "prev", { ...options, includeNegativeTabIndex: true });
 export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
 export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });

package/dist/utilities/props.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import type * as G from "../types/global";
 type Value = string | boolean | number | undefined;
 type ClassNameResolver = string | ((value: Value) => string);
@@ -11,6 +10,4 @@ export declare const responsiveClassNames: <V extends G.Responsive<Value>>(s: Re
 }) => string[];
 export declare const responsiveVariables: <V extends Value = Value>(variableName: G.CSSVariable, value?: G.Responsive<V>) => Record<G.CSSVariable, V>;
 export declare const responsivePropDependency: <Result, T>(prop: G.Responsive<T>, resolver: (value: T, key: G.Viewport) => Result) => Result;
-export declare const setComponentChildId: (Component: React.FC<any>, id: string) => string;
-export declare const isMatchingComponentChildId: (child: React.ReactNode, id: string) => boolean | null;
 export {};

package/dist/utilities/props.js

@@ -1,4 +1,3 @@
-import React from "react";
 /**
  * Resolve an array of values into a classname string
  */
@@ -82,21 +81,3 @@ export const responsivePropDependency = (prop, resolver) => {
         return { ...acc, [viewport]: resolver(viewportValue, viewport) };
     }, {});
 };
-/**
- * Add unique ids to components relying on React.Children.map
- * Relying on an id instead of child.type makes it work in dev mode during HMR
- */
-const getComponentChildId = (id) => `__rs-child-${id}`;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const setComponentChildId = (Component, id) => {
-    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    return (Component.__reshapedChildId = getComponentChildId(id));
-};
-export const isMatchingComponentChildId = (child, id) => {
-    if (!React.isValidElement(child))
-        return null;
-    /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-    // @ts-ignore
-    return child.type.__reshapedChildId === getComponentChildId(id);
-};

package/dist/utilities/scroll/index.d.ts

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable";
-export { lockScroll, unlockScroll } from "./lock";
+export { lockScroll } from "./lock";

package/dist/utilities/scroll/index.js

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable.js";
-export { lockScroll, unlockScroll } from "./lock.js";
+export { lockScroll } from "./lock.js";

package/dist/utilities/scroll/lock.d.ts

@@ -2,5 +2,4 @@ export declare const lockScroll: (args: {
     containerEl?: HTMLElement | null;
     originEl?: HTMLElement | null;
     cb?: () => void;
-}) => void;
-export declare const unlockScroll: (cb?: () => void) => void;
+}) => ((cb?: () => void) => void) | undefined;