reshaped 3.2.0-canary.4 → 3.2.0-canary.6

package/dist/components/Actionable/Actionable.js

@@ -5,8 +5,8 @@ import { classNames } from "../../utilities/helpers.js";
 import * as keys from "../../constants/keys.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
-    const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
+    const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, fullWidth, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
     const rootAttributes = { ...attributes };
     const hasClickHandler = onClick || attributes?.onClick;
     const hasFocusHandler = attributes?.onFocus || attributes?.onBlur;

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.root:focus{outline:none}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-raised)}.root.--inset:focus-visible{box-shadow:var(--rs-focus-inset-shadow)}.root.--radius-inherit:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible>*{box-shadow:var(--rs-focus-shadow)}.root.--radius-inherit.--inset:focus-visible>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.root:focus{outline:none}.root:focus-visible{box-shadow:var(--rs-focus-shadow);outline:none;z-index:var(--rs-z-index-raised)}.root.--inset:focus-visible{box-shadow:var(--rs-focus-inset-shadow)}.root.--disabled-focus-ring:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible{box-shadow:none}.root.--radius-inherit:focus-visible>*{box-shadow:var(--rs-focus-shadow)}.root.--radius-inherit.--inset:focus-visible>*{box-shadow:var(--rs-focus-inset-shadow)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

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

@@ -8,6 +8,7 @@ export type Props = {
     disabled?: boolean;
     fullWidth?: boolean;
     insetFocus?: boolean;
+    disableFocusRing?: boolean;
     borderRadius?: "inherit";
     as?: keyof JSX.IntrinsicElements;
     className?: G.ClassName;

package/dist/components/Autocomplete/Autocomplete.js

@@ -19,7 +19,11 @@ const Autocomplete = (props) => {
     const [active, setActive] = React.useState(false);
     const hasChildren = !!React.Children.toArray(children).filter(Boolean).length;
     const lockedRef = React.useRef(false);
-    const handleOpen = React.useCallback(() => setActive(true), []);
+    const handleOpen = React.useCallback(() => {
+        if (lockedRef.current)
+            return;
+        setActive(true);
+    }, []);
     const handleClose = () => setActive(false);
     useHotkeys({
         [keys.BACKSPACE]: () => onBackspaceRef.current?.(),
@@ -28,9 +32,11 @@ const Autocomplete = (props) => {
         disabled: !onBackspaceRef.current,
     });
     useHotkeys({
-        [keys.DOWN]: () => handleOpen(),
+        [keys.DOWN]: () => {
+            handleOpen();
+        },
         [keys.ENTER]: () => {
-            const el = getActiveElement();
+            const el = getActiveElement(inputRef.current);
             el?.click();
         },
     }, [handleOpen], { ref: inputRef, preventDefault: true });
@@ -50,7 +56,7 @@ const Autocomplete = (props) => {
         onInput?.({ value: e.currentTarget.value, name, event: e });
         textFieldProps.inputAttributes?.onInput?.(e);
     };
-    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: !lockedRef.current && hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
+    return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: hasChildren && active, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: hasChildren && active, 
                         // Ignoring the type check since TS can't infer the correct html element type
                         attributes: { ...textFieldProps.attributes, ref }, inputAttributes: {
                             ...textFieldProps.inputAttributes,

package/dist/components/Dismissible/Dismissible.module.css

@@ -1 +1 @@
-.root{padding-inline-end:var(--rs-unit-x7);position:relative}.close{inset-block-start:0;inset-inline-end:0;position:absolute;z-index:5}.--hide-close,.--variant-media{padding:0}.--variant-media .close{inset-block-start:var(--rs-unit-x2);inset-inline-end:var(--rs-unit-x2)}.--align-center .close{inset-block-start:50%;transform:translateY(-50%)}
+.root{min-height:var(--rs-unit-x5);padding-inline-end:var(--rs-unit-x7);position:relative}.close{inset-block-start:0;inset-inline-end:0;position:absolute;z-index:5}.--hide-close,.--variant-media{padding:0}.--variant-media .close{inset-block-start:var(--rs-unit-x2);inset-inline-end:var(--rs-unit-x2)}.--align-center .close{inset-block-start:50%;transform:translateY(-50%)}

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

@@ -9,7 +9,7 @@ export default {
     component: Overlay,
     parameters: {
         iframe: {
-            url: "https://reshaped.so/docs/components/overlay",
+            url: "https://reshaped.so/docs/utilities/overlay",
         },
     },
 };

package/dist/components/Select/Select.js

@@ -41,7 +41,7 @@ const Select = (props) => {
                     return 6;
                 return 4;
             }), svg: icon })) : (startSlot) }));
-    return (_jsxs("div", { ...attributes, className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", { ...inputAttributes, onFocus: (onFocus || inputAttributes?.onFocus), onBlur: (onBlur || inputAttributes?.onBlur), className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, onClick: onClick, attributes: {
+    return (_jsxs("div", { ...attributes, className: rootClassName, children: [options ? (_jsxs(_Fragment, { children: [startContent, _jsxs("select", { ...inputAttributes, onFocus: (onFocus || inputAttributes?.onFocus), onBlur: (onBlur || inputAttributes?.onBlur), className: s.input, disabled: disabled, name: name, value: value, defaultValue: defaultValue, onChange: handleChange, id: inputId, children: [placeholder && _jsx("option", { value: "", children: placeholder }), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {
                             ...inputAttributes,
                             onFocus: onFocus || inputAttributes?.onFocus,
                             onBlur: onBlur || inputAttributes?.onBlur,

package/dist/components/Table/Table.js

@@ -5,11 +5,11 @@ import getWidthStyles from "../../styles/width/index.js";
 import getMinWidthStyles from "../../styles/minWidth/index.js";
 import s from "./Table.module.css";
 const TableCellPrivate = (props) => {
-    const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, attributes, } = props;
+    const { minWidth, rowSpan, colSpan, align, verticalAlign, tagName: TagName, padding, paddingInline, paddingBlock, children, className, attributes, } = props;
     const width = props.width === "auto" ? "0px" : props.width;
     const widthStyles = getWidthStyles(width);
     const minWidthStyles = getMinWidthStyles(minWidth || width);
-    const headingClassNames = classNames(s.cell, widthStyles?.classNames, minWidthStyles?.classNames, (width === 0 || width === "0px") && s["cell--width-auto"], align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`]);
+    const headingClassNames = classNames(s.cell, widthStyles?.classNames, minWidthStyles?.classNames, (width === 0 || width === "0px") && s["cell--width-auto"], align && s[`cell--align-${align}`], verticalAlign && s[`cell--valign-${verticalAlign}`], className);
     const headingStyle = {
         ...widthStyles?.variables,
         ...minWidthStyles?.variables,
@@ -30,10 +30,12 @@ const TableRow = (props) => {
     return (_jsx("tr", { ...attributes, className: rowClassNames, children: children }));
 };
 const TableBody = (props) => {
-    return _jsx("tbody", { children: props.children });
+    const { children, attributes, className } = props;
+    return (_jsx("tbody", { ...attributes, className: classNames(className), children: children }));
 };
 const TableHead = (props) => {
-    return _jsx("thead", { children: props.children });
+    const { children, attributes, className } = props;
+    return (_jsx("thead", { ...attributes, className: classNames(className), children: children }));
 };
 const Table = (props) => {
     const { children, border, columnBorder, className, attributes } = props;

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

@@ -23,6 +23,7 @@ export type CellProps = {
     width?: "auto" | string | number;
     minWidth?: string | number;
     children?: React.ReactNode;
+    className?: G.ClassName;
     attributes?: G.Attributes<"td">;
 };
 export type HeadingProps = CellProps & {
@@ -30,10 +31,14 @@ export type HeadingProps = CellProps & {
 };
 export type BodyProps = {
     children: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"tbody">;
 };
 export type HeadProps = {
     children: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"thead">;
 };
-export type PrivateCellProps = HeadingProps & {
+export type PrivateCellProps = CellProps & {
     tagName: "td" | "th";
 };

package/dist/components/Tooltip/Tooltip.js

@@ -8,6 +8,6 @@ const Tooltip = (props) => {
     const { id, text, children, onOpen, onClose, position = "bottom", containerRef, active, disabled, disableContentHover, } = props;
     if (!text)
         return _jsx(_Fragment, { children: children({}) });
-    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 export default Tooltip;

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

@@ -26,16 +26,20 @@ const Expandable = (props) => {
         const rootEl = rootRef.current;
         if (!rootEl || !mountedRef.current)
             return;
-        let targetHeight = 0;
         if (active) {
             rootEl.style.height = "auto";
-            targetHeight = rootEl.clientHeight;
-            rootEl.style.height = "0";
+            requestAnimationFrame(() => {
+                const targetHeight = rootEl.clientHeight;
+                rootEl.style.height = "0";
+                setAnimatedHeight(targetHeight);
+            });
         }
-        if (!active) {
+        else {
             rootEl.style.height = `${rootEl.clientHeight}px`;
+            requestAnimationFrame(() => {
+                setAnimatedHeight(0);
+            });
         }
-        setAnimatedHeight(targetHeight);
     }, [active]);
     return (_jsx("div", { ...attributes, className: contentClassNames, ref: rootRef, style: animatedHeight !== null
             ? { height: animatedHeight, overflow: animatedHeight === "auto" ? "visible" : undefined }

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

@@ -64,6 +64,7 @@ export type TriggerAttributes = {
 type BaseProps = {
     id?: string;
     triggerType?: "hover" | "click" | "focus";
+    groupTimeouts?: boolean;
     position?: Position;
     forcePosition?: boolean;
     trapFocusMode?: TrapMode;

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -16,7 +16,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, } = props;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
     const resolvedActive = disabled === true ? false : passedActive;
@@ -118,11 +118,15 @@ const FlyoutRoot = (props) => {
             hoverTriggeredWithTouchEventRef.current = false;
         }
         else {
-            timerRef.current = setTimeout(handleOpen, cooldown.timer || isSubmenu ? timeouts.mouseEnterShort : timeouts.mouseEnter);
-            if (!isSubmenu && triggerType === "hover")
+            if (groupTimeouts)
                 cooldown.warm();
+            timerRef.current = setTimeout(() => {
+                handleOpen();
+            }, groupTimeouts && cooldown.status === "warming"
+                ? timeouts.mouseEnter
+                : timeouts.mouseEnterShort);
         }
-    }, [clearTimer, timerRef, handleOpen, isSubmenu, triggerType]);
+    }, [clearTimer, timerRef, handleOpen, groupTimeouts]);
     const handleMouseLeave = React.useCallback(() => {
         cooldown.cool();
         clearTimer();
@@ -180,14 +184,14 @@ const FlyoutRoot = (props) => {
         if (checkTransitions() &&
             !disableHideAnimation &&
             transitionStartedRef.current &&
-            (cooldown.status !== "warm" || triggerType !== "hover")) {
+            (cooldown.status === "cooling" || !groupTimeouts)) {
             hide();
         }
         else {
             // In case transitions are disabled globally - remove from the DOM immediately
             remove();
         }
-    }, [resolvedActive, render, hide, remove, disableHideAnimation, disabled]);
+    }, [resolvedActive, render, hide, remove, disableHideAnimation, disabled, groupTimeouts]);
     React.useEffect(() => {
         // Wait after positioning before show is triggered to animate flyout from the right side
         if (status === "positioned")

package/dist/components/_private/Flyout/useFlyout.js

@@ -1,6 +1,6 @@
 import React from "react";
 import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
+import { getClosestFlyoutTarget, getShadowRoot } from "../../../utilities/dom.js";
 import calculatePosition from "./utilities/calculatePosition.js";
 const topPos = ["top-start", "top", "top-end"];
 const bottomPos = ["bottom-start", "bottom", "bottom-end"];
@@ -78,8 +78,7 @@ const flyout = (args) => {
             targetClone.style.width = width;
         }
     }
-    const rootNode = triggerEl?.getRootNode();
-    const shadowRoot = rootNode instanceof ShadowRoot ? rootNode : null;
+    const shadowRoot = getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();

package/dist/components/_private/Flyout/utilities/cooldown.d.ts

@@ -1,5 +1,5 @@
 declare class Cooldown {
-    status: "cold" | "warm" | "cooling";
+    status: "warming" | "warm" | "cooling" | "cold";
     timer?: ReturnType<typeof setTimeout>;
     warm: () => void;
     cool: () => void;

package/dist/components/_private/Flyout/utilities/cooldown.js

@@ -1,18 +1,30 @@
+import * as timeouts from "../Flyout.constants.js";
 class Cooldown {
     status = "cold";
     timer;
     warm = () => {
         clearTimeout(this.timer);
-        this.status = "warm";
+        if (this.status === "cooling") {
+            this.status = "warm";
+            return;
+        }
+        this.status = "warming";
+        this.timer = setTimeout(() => {
+            this.status = "warm";
+            this.timer = undefined;
+        }, timeouts.mouseEnterShort);
     };
     cool = () => {
+        clearTimeout(this.timer);
+        if (this.status === "warming") {
+            this.status = "cold";
+            return;
+        }
         this.status = "cooling";
-        const currentTimer = setTimeout(() => {
+        this.timer = setTimeout(() => {
             this.status = "cold";
-            if (currentTimer === this.timer)
-                this.timer = undefined;
+            this.timer = undefined;
         }, 500);
-        this.timer = currentTimer;
     };
 }
 export default new Cooldown();

package/dist/hooks/_private/useOnClickOutside.js

@@ -7,10 +7,11 @@ const useOnClickOutside = (refs, handler) => {
             return;
         const handleClick = (event) => {
             let isInside = false;
+            const clickedEl = event.composedPath()[0];
             refs.forEach((elRef) => {
                 if (!elRef.current ||
-                    elRef.current === event.target ||
-                    elRef.current.contains(event.target)) {
+                    elRef.current === clickedEl ||
+                    elRef.current.contains(clickedEl)) {
                     isInside = true;
                 }
             });

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -19,7 +19,7 @@ const getEventKey = (e) => {
     if (!e.key)
         return;
     // Having alt pressed modifies e.key value, so relying on e.code for it
-    if (e.altKey && e.key !== "Alt") {
+    if (e.altKey && /^[Key|Digit|Numpad]/.test(e.code)) {
         return e.code.toLowerCase().replace(/key|digit|numpad/, "");
     }
     return e.key.toLowerCase();
@@ -70,17 +70,20 @@ export class HotkeyStore {
         const hotkeyData = this.hotkeyMap[pressedId];
         /**
          * Support for `mod` that represents both Mac and Win keyboards
+         * We create the hotkeyId again to sort the mod key correctly
          */
-        const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
-            this.hotkeyMap[pressedId.replace("control", "mod")];
-        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
+        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
+        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
+        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
+        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
         [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
             if (!hotkeyData)
                 return;
             if (hotkeyData?.size) {
                 hotkeyData.forEach((data) => {
+                    const eventTarget = e.composedPath()[0];
                     if (data.ref?.current &&
-                        !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
+                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }
                     const resolvedEvent = pressedMap[pressedId];
@@ -146,14 +149,6 @@ export const SingletonHotkeysProvider = (props) => {
             return false;
         return true;
     };
-    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
-        return () => {
-            setHooksCount((prev) => prev - 1);
-            globalHotkeyStore.unbindHotkeys(hotkeys);
-        };
-    }, []);
     const handleWindowKeyDown = React.useCallback((e) => {
         // Browsers trigger keyboard event without passing e.key when you click on autocomplete
         if (!e.key)
@@ -166,6 +161,14 @@ export const SingletonHotkeysProvider = (props) => {
             return;
         removePressedKey(e);
     }, [removePressedKey]);
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
+        setHooksCount((prev) => prev + 1);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
+        return () => {
+            setHooksCount((prev) => prev - 1);
+            globalHotkeyStore.unbindHotkeys(hotkeys);
+        };
+    }, []);
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);
         window.addEventListener("keyup", handleWindowKeyUp);

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

@@ -6,10 +6,16 @@ function Example() {
         "shift + b + n": () => console.log("pressed"),
         "c + v": () => console.log(111),
         "Meta + v": () => console.log(222),
+        "control + enter": () => console.log("control + enter"),
+        "meta + enter": () => console.log("meta + enter"),
+        "mod + enter": () => console.log("mod + enter"),
         "mod + ArrowRight": () => console.log("right"),
         "mod + ArrowUp": () => console.log("top"),
         "shift + ArrowRight": () => console.log("right"),
         "shift + ArrowUp": () => console.log("top"),
+        "alt+shift+n": () => console.log("alt+shift+n"),
+        "shift+alt+n": () => console.log("shift+alt+n"),
+        "alt+shiftLeft+n": () => console.log("alt+shiftLeft+n"),
     });
     const active = checkHotkeyState("shift + b + n");
     const shiftActive = checkHotkeyState("shift");

package/dist/tests/ShadowDOM.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const behavior: () => React.JSX.Element;

package/dist/tests/ShadowDOM.stories.js

@@ -0,0 +1,110 @@
+import React, { useEffect, useState, useRef, forwardRef } from "react";
+import root from "react-shadow";
+import { Example } from "../utilities/storybook/index.js";
+import Autocomplete from "../components/Autocomplete/index.js";
+import View from "../components/View/index.js";
+import DropdownMenu from "../components/DropdownMenu/index.js";
+import Reshaped from "../components/Reshaped/index.js";
+import Select from "../components/Select/index.js";
+import Button from "../components/Button/index.js";
+import Tooltip from "../components/Tooltip/index.js";
+export default {
+    title: "Meta/ShadowDOM",
+};
+const getStylesData = () => {
+    const sourceStylesContainer = document.head;
+    return Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);
+};
+// Create a component to render inside the Shadow DOM
+const ShadowDiv = forwardRef((props, ref) => {
+    const shadowRef = useRef(null);
+    // Load styles
+    useEffect(() => {
+        if (!shadowRef?.current)
+            return;
+        // Add styles to the shadow DOM
+        // const shadowEl = shadowRef?.current.shadowRoot;
+        const shadowEl = shadowRef?.current.shadowRoot;
+        if (!shadowEl)
+            return;
+        const sourceStylesContainer = document.head;
+        const observer = new MutationObserver(getStylesData);
+        observer.observe(sourceStylesContainer, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+        let styleBlock = shadowEl.getElementById("custom-outer-style");
+        if (!styleBlock) {
+            styleBlock = document.createElement("span");
+            styleBlock.id = "custom-outer-style";
+            shadowEl.appendChild(styleBlock);
+        }
+        else {
+            styleBlock.innerHTML = "";
+        }
+        styleBlock.append(...getStylesData() // finds all <style> tags containing your web component ID
+            .map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.
+        );
+        return () => observer.disconnect();
+    }, []);
+    return (<Reshaped>
+			<root.div className="quote" ref={shadowRef}>
+				<div ref={ref}>
+					{/*
+            Adding padding here since otherwise mouseenter won't trigger on contents
+            when mouse is switching from outside the shadow dom
+        */}
+					<View padding={4}>{props.children}</View>
+				</div>
+			</root.div>
+		</Reshaped>);
+});
+// Main Component
+const Component = () => {
+    const [valueAutoShadow, setValueAutoShadow] = useState("");
+    const [valueDropdownShadow, setValueDropdownShadow] = useState("");
+    const optionsAuto = ["Pizza", "Pie", "Ice-cream"];
+    const optionsDropdown = ["Turtle", "Cat", "Long-necked giraffe"];
+    const handleChangeAutoShadow = (args) => {
+        console.log("Autocomlete shadow value=", args);
+        setValueAutoShadow(args.value);
+    };
+    const handleChangeDropdownShadow = (val) => {
+        console.log("Dropdown shadow value=", val);
+        setValueDropdownShadow(val);
+    };
+    return (<View paddingBottom={50}>
+			<ShadowDiv>
+				<View gap={4} direction="row" wrap={false}>
+					<Autocomplete name="fruit-shadow" placeholder="Pick your food" value={valueAutoShadow} onChange={handleChangeAutoShadow}>
+						{optionsAuto.map((option) => (<Autocomplete.Item key={option} value={option} onClick={() => handleChangeAutoShadow({ value: option, name: "fruit-auto" })}>
+								{option}
+							</Autocomplete.Item>))}
+					</Autocomplete>
+
+					<DropdownMenu>
+						<DropdownMenu.Trigger>
+							{(attributes) => (<Select placeholder="Pick your animal" name="font" inputAttributes={attributes}>
+									{valueDropdownShadow}
+								</Select>)}
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content>
+							{optionsDropdown.map((option) => (<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>
+									{option}
+								</DropdownMenu.Item>))}
+						</DropdownMenu.Content>
+					</DropdownMenu>
+
+					<Tooltip text="Tooltip for button">
+						{(attributes) => <Button attributes={attributes}>Hover me</Button>}
+					</Tooltip>
+				</View>
+			</ShadowDiv>
+		</View>);
+};
+export const behavior = () => (<Example>
+		<Example.Item title="base">
+			<Component />
+		</Example.Item>
+	</Example>);

package/dist/themes/_generator/tests/themes.stories.js

@@ -13,7 +13,7 @@ import Link from "../../../components/Link/index.js";
 import Text from "../../../components/Text/index.js";
 import { getThemeCSS, generateThemeColors, baseThemeDefinition } from "../../index.js";
 export default {
-    title: "Themes",
+    title: "Meta/Themes",
     parameters: {
         iframe: { url: "https://reshaped.so/docs/tokens/theming/runtime-theming" },
     },

package/dist/utilities/a11y/TrapFocus.js

@@ -2,6 +2,7 @@ import Chain from "../Chain.js";
 import * as keys from "../../constants/keys.js";
 import TrapScreenReader from "./TrapScreenReader.js";
 import { getActiveElement, getFocusableElements, focusElement, getFocusData } from "./focus.js";
+import { getShadowRoot } from "../dom.js";
 import { checkKeyboardMode } from "./keyboardMode.js";
 class TrapFocus {
     static chain = new Chain();
@@ -34,7 +35,7 @@ class TrapFocus {
         const isDown = navigationMode === "arrows" && key === keys.DOWN;
         const isPrev = (isBackTab && navigationMode === "tabs") || isUp;
         const isNext = (isNextTab && navigationMode === "tabs") || isDown;
-        const isFocusedOnTrigger = getActiveElement() === this.trigger;
+        const isFocusedOnTrigger = getActiveElement(this.root) === this.trigger;
         const focusData = getFocusData({
             root: this.root,
             target: isPrev ? "prev" : "next",
@@ -61,15 +62,23 @@ class TrapFocus {
             return;
         focusElement(focusData.el, { pseudoFocus });
     };
-    addListeners = () => document.addEventListener("keydown", this.handleKeyDown);
-    removeListeners = () => document.removeEventListener("keydown", this.handleKeyDown);
+    addListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.addEventListener("keydown", this.handleKeyDown);
+    };
+    removeListeners = () => {
+        const shadowRoot = getShadowRoot(this.root);
+        const el = shadowRoot ?? document;
+        el.removeEventListener("keydown", this.handleKeyDown);
+    };
     /**
      * Trap the focus, add observer and keyboard event listeners
      * and create a chain item
      */
     trap = (options = {}) => {
         const { mode = "dialog", includeTrigger, initialFocusEl } = options;
-        const trigger = getActiveElement();
+        const trigger = getActiveElement(this.root);
         const focusable = getFocusableElements(this.root, {
             additionalElement: includeTrigger ? trigger : undefined,
         });
@@ -77,7 +86,7 @@ class TrapFocus {
         this.options = { ...options, pseudoFocus };
         this.trigger = trigger;
         this.mutationObserver = new MutationObserver(() => {
-            const currentActiveElement = getActiveElement();
+            const currentActiveElement = getActiveElement(this.root);
             // Focus stayed inside the wrapper, no need to refocus
             if (this.root.contains(currentActiveElement))
                 return;

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

@@ -1,6 +1,6 @@
 import type { FocusableElement } from "./types";
 export declare const focusableSelector = "a,button,input:not([type=\"hidden\"]),textarea,select,details,[tabindex]:not([tabindex=\"-1\"])";
-export declare const getActiveElement: () => HTMLButtonElement;
+export declare const getActiveElement: (originEl?: HTMLElement | null) => HTMLButtonElement;
 export declare const focusElement: (el: FocusableElement, options?: {
     pseudoFocus?: boolean;
 }) => void;

package/dist/utilities/a11y/focus.js

@@ -1,11 +1,16 @@
+import { getShadowRoot } from "../dom.js";
 const pseudoFocusAttribute = "data-rs-focus";
 export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex]:not([tabindex="-1"])';
-export const getActiveElement = () => {
-    const pseudoFocusedEl = document.querySelector(`[${pseudoFocusAttribute}]`);
-    return (pseudoFocusedEl || document.activeElement);
+export const getActiveElement = (originEl) => {
+    const shadowRoot = originEl ? getShadowRoot(originEl) : null;
+    const rootEl = shadowRoot ?? document;
+    const pseudoFocusedEl = rootEl.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || rootEl.activeElement);
 };
 export const focusElement = (el, options) => {
-    document.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
+    const shadowRoot = getShadowRoot(el);
+    const rootEl = shadowRoot ?? document;
+    rootEl.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
     if (options?.pseudoFocus) {
         el.setAttribute(pseudoFocusAttribute, "true");
     }
@@ -59,7 +64,7 @@ export const getFocusData = (args) => {
     const { root, target, options } = args;
     const focusable = getFocusableElements(root, { additionalElement: options?.additionalElement });
     const focusableLimit = focusable.length - 1;
-    const currentElement = getActiveElement();
+    const currentElement = getActiveElement(root);
     const currentIndex = focusable.indexOf(currentElement);
     const positions = {
         next: currentIndex + 1,

package/dist/utilities/dom.d.ts

@@ -1,5 +1,6 @@
-export declare const getClosestFlyoutTarget: (el: HTMLElement | null) => HTMLElement;
+export declare const getClosestFlyoutTarget: (el: HTMLElement | null, iteration?: number) => HTMLElement;
 export declare const disableUserSelect: () => void;
 export declare const enableUserSelect: () => void;
 export declare const disableScroll: () => void;
 export declare const enableScroll: () => void;
+export declare const getShadowRoot: (el: HTMLElement | null) => ShadowRoot | null;