reshaped 3.2.0-canary.4 → 3.2.0-canary.5

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/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/_private/Flyout/FlyoutControlled.js

@@ -113,6 +113,7 @@ const FlyoutRoot = (props) => {
     }, [triggerType]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
+        console.log("enter");
         if (hoverTriggeredWithTouchEventRef.current) {
             handleOpen();
             hoverTriggeredWithTouchEventRef.current = false;

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/Portal/Portal.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import ReactDOM from "react-dom";
 import Theme from "../../Theme/index.js";
+import { getShadowRoot } from "../../../utilities/dom.js";
 import s from "./Portal.module.css";
 const PortalScopeContext = React.createContext({});
 export const usePortalScope = () => {
@@ -15,9 +16,8 @@ export const usePortalScope = () => {
 const Portal = (props) => {
     const { children, targetRef } = props;
     const rootRef = React.useRef(null);
-    const rootNode = rootRef.current?.getRootNode();
-    const isShadowDom = rootNode instanceof ShadowRoot;
-    const defaultTargetEl = isShadowDom ? rootNode : document.body;
+    const shadowRoot = getShadowRoot(rootRef.current);
+    const defaultTargetEl = shadowRoot ?? document.body;
     /**
      * Check for parent portal to render inside it
      * To avoid z-iondex issues

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();
@@ -79,8 +79,9 @@ export class HotkeyStore {
                 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 +147,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 +159,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

@@ -10,6 +10,9 @@ function Example() {
         "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;

package/dist/utilities/dom.js

@@ -1,14 +1,20 @@
-export const getClosestFlyoutTarget = (el) => {
+export const getClosestFlyoutTarget = (el, iteration = 0) => {
     const style = el && window.getComputedStyle(el);
     const overflowY = style?.overflowY;
     const position = style?.position;
     const isScrollable = overflowY?.includes("scroll");
     const isFixed = position === "fixed" || position === "sticky";
+    // Only check shadow root on the first run
+    if (iteration === 0) {
+        const shadowRoot = getShadowRoot(el);
+        if (shadowRoot?.firstElementChild)
+            return shadowRoot.firstElementChild;
+    }
     if (el === document.body || !el)
         return document.body;
     if ((isScrollable && el.scrollHeight > el.clientHeight) || isFixed)
         return el;
-    return getClosestFlyoutTarget(el.parentElement);
+    return getClosestFlyoutTarget(el.parentElement, iteration + 1);
 };
 export const disableUserSelect = () => {
     document.body.style.userSelect = "none";
@@ -25,3 +31,7 @@ export const enableScroll = () => {
     window.removeEventListener("wheel", preventDefault);
     window.removeEventListener("touchmove", preventDefault);
 };
+export const getShadowRoot = (el) => {
+    const rootNode = el?.getRootNode();
+    return rootNode instanceof ShadowRoot ? rootNode : null;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.2.0-canary.4",
+	"version": "3.2.0-canary.5",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -138,8 +138,9 @@
 		"postcss-each": "1.1.0",
 		"postcss-nested": "6.2.0",
 		"prettier": "3.3.3",
-		"react": "18.3.1",
-		"react-dom": "18.3.1",
+		"react": "19.0.0-rc-e4953922-20240919",
+		"react-dom": "19.0.0-rc-e4953922-20240919",
+		"react-shadow": "^20.5.0",
 		"resolve-tspaths": "0.8.19",
 		"size-limit": "11.1.4",
 		"storybook": "8.2.8",