reshaped 3.2.0-canary.5 → 3.2.0-canary.6

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/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;
@@ -113,17 +113,20 @@ const FlyoutRoot = (props) => {
     }, [triggerType]);
     const handleMouseEnter = React.useCallback(() => {
         clearTimer();
-        console.log("enter");
         if (hoverTriggeredWithTouchEventRef.current) {
             handleOpen();
             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();
@@ -181,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/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/components/_private/Portal/Portal.js

@@ -3,7 +3,6 @@ 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 = () => {
@@ -16,8 +15,9 @@ export const usePortalScope = () => {
 const Portal = (props) => {
     const { children, targetRef } = props;
     const rootRef = React.useRef(null);
-    const shadowRoot = getShadowRoot(rootRef.current);
-    const defaultTargetEl = shadowRoot ?? document.body;
+    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

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -70,10 +70,12 @@ 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;

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

@@ -6,6 +6,9 @@ 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"),

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.5",
+	"version": "3.2.0-canary.6",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -138,8 +138,8 @@
 		"postcss-each": "1.1.0",
 		"postcss-nested": "6.2.0",
 		"prettier": "3.3.3",
-		"react": "19.0.0-rc-e4953922-20240919",
-		"react-dom": "19.0.0-rc-e4953922-20240919",
+		"react": "18.3.1",
+		"react-dom": "18.3.1",
 		"react-shadow": "^20.5.0",
 		"resolve-tspaths": "0.8.19",
 		"size-limit": "11.1.4",