reshaped 3.2.0-canary.3 → 3.2.0-canary.5

package/dist/components/Theme/Theme.utilities.js

@@ -0,0 +1 @@
+export const getRootThemeEl = () => document.querySelector("[data-rs-root]") || document.documentElement;

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

@@ -1,4 +1,4 @@
-export { default } from "./Theme";
+export { default, PrivateTheme } from "./Theme";
 export { default as GlobalColorMode } from "./GlobalColorMode";
 export { useTheme } from "./useTheme";
 export type { Props as ThemeProps, GlobalColorModeProps } from "./Theme.types";

package/dist/components/Theme/index.js

@@ -1,3 +1,3 @@
-export { default } from "./Theme.js";
+export { default, PrivateTheme } from "./Theme.js";
 export { default as GlobalColorMode } from "./GlobalColorMode.js";
 export { useTheme } from "./useTheme.js";

package/dist/components/Tooltip/Tooltip.js

@@ -5,9 +5,9 @@ import Text from "../Text/index.js";
 import Flyout from "../_private/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { id, text, children, onOpen, onClose, position = "bottom", active, disabled, disableContentHover, } = 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, 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", 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/Tooltip/Tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;
 };

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

@@ -95,14 +95,12 @@ const FlyoutRoot = (props) => {
         if (
         // Empty flyouts don't move the focus so they have to be closed on blur
         focusedContent ||
-            // Content menu keeps the focus on the original trigger so moving the focus away from it shouldn't close it
-            (triggerType === "hover" && trapFocusMode === "content-menu") ||
             // Prevent from closing in case user interacts with items inside content
             lockedBlurEffects.current) {
             return;
         }
         handleClose();
-    }, [handleClose, triggerType, trapFocusMode]);
+    }, [handleClose]);
     const handleFocus = React.useCallback(() => {
         if (triggerType === "hover" && !checkKeyboardMode())
             return;
@@ -115,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/tests/Flyout.stories.js

@@ -91,6 +91,12 @@ export const modes = () => (<Example>
 			</Demo>
 		</Example.Item>
 
+		<Example.Item title="content-menu hover without buttons">
+			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
+				<div style={{ height: 50, width: 50, background: "tomato" }}/>
+			</Demo>
+		</Example.Item>
+
 		<Example.Item title="content-menu hover">
 			<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
 				<button type="button">Item 1</button>

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/hooks/useResponsiveClientValue.js

@@ -36,11 +36,11 @@ const useResponsiveClientValue = (value) => {
         return value;
     }
     if (viewport === "xl")
-        return value.xl || value.l || value.m || value.s;
+        return value.xl ?? value.l ?? value.m ?? value.s;
     if (viewport === "l")
-        return value.l || value.m || value.s;
+        return value.l ?? value.m ?? value.s;
     if (viewport === "m")
-        return value.m || value.s;
+        return value.m ?? value.s;
     return value.s;
 };
 export default useResponsiveClientValue;

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.3",
+	"version": "3.2.0-canary.5",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -29,6 +29,7 @@
 		"bin/cli.js",
 		"dist/**/*"
 	],
+	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
@@ -137,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",