reshaped 3.2.5 → 3.2.6-rc.0

package/dist/components/Reshaped/Reshaped.js

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { classNames } from "../../utilities/helpers.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
 import { ToastProvider } from "../Toast/index.js";
+import { useGlobalColorMode } from "../Theme/useTheme.js";
 import useSingletonKeyboardMode from "../../hooks/_private/useSingletonKeyboardMode.js";
 import { SingletonEnvironmentContext, useSingletonRTL, } from "../../hooks/_private/useSingletonEnvironment.js";
 import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
@@ -17,6 +19,8 @@ const ReshapedInner = (props) => {
 const Reshaped = (props) => {
     const { theme, defaultTheme = "reshaped", defaultColorMode, scoped, className } = props;
     const rootClassNames = classNames(s.root, className);
-    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
+    const scopeRef = React.useRef(null);
+    const parentGlobalColorMode = useGlobalColorMode();
+    return (_jsx(GlobalColorMode, { defaultMode: defaultColorMode || parentGlobalColorMode.mode || "light", scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(PrivateTheme, { name: theme, defaultName: defaultTheme, className: rootClassNames, scoped: scoped, scopeRef: !!parentGlobalColorMode && scoped ? scopeRef : undefined, children: _jsx(ReshapedInner, { ...props, children: props.children }) }) }));
 };
 export default Reshaped;

package/dist/components/Tabs/TabsList.js

@@ -60,30 +60,21 @@ const TabsList = (props) => {
         };
     }, [elScrollableRef]);
     const { ref: hotkeysRef } = useHotkeys({
-        "ArrowLeft, ArrowUp": (e) => {
-            if (name)
-                return;
-            e.preventDefault();
+        "ArrowLeft, ArrowUp": () => {
             focusPreviousElement(elScrollableRef.current);
         },
-        "ArrowRight, ArrowDown": (e) => {
-            if (name)
-                return;
-            e.preventDefault();
+        "ArrowRight, ArrowDown": () => {
             focusNextElement(elScrollableRef.current);
         },
-        Home: (e) => {
-            if (name)
-                return;
-            e.preventDefault();
+        Home: () => {
             focusFirstElement(elScrollableRef.current);
         },
-        End: (e) => {
-            if (name)
-                return;
-            e.preventDefault();
+        End: () => {
             focusLastElement(elScrollableRef.current);
         },
+    }, [], {
+        preventDefault: true,
+        disabled: !!name,
     });
     useIsomorphicLayoutEffect(() => {
         if (value)

package/dist/components/Theme/GlobalColorMode.js

@@ -3,13 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { enableTransitions, disableTransitions, onNextFrame } from "../../utilities/animation.js";
+import { useGlobalColorMode } from "./useTheme.js";
 import { GlobalColorModeContext } from "./Theme.context.js";
 import { getRootThemeEl } from "./Theme.utilities.js";
 const GlobalColorMode = (props) => {
-    const { defaultMode, children } = props;
-    const [mode, setMode] = React.useState(defaultMode || "light");
+    const { defaultMode, scopeRef, children } = props;
+    const [mode, setMode] = React.useState(defaultMode);
+    const parentGlobalColorMode = useGlobalColorMode();
     const changeColorMode = React.useCallback((targetMode) => {
-        getRootThemeEl().setAttribute("data-rs-color-mode", targetMode);
+        getRootThemeEl(scopeRef?.current).setAttribute("data-rs-color-mode", targetMode);
+        if (parentGlobalColorMode.mode && !scopeRef) {
+            parentGlobalColorMode.setMode(targetMode);
+        }
         setMode((prevMode) => {
             if (prevMode !== targetMode) {
                 // Avoid components styles animating when switching to another color mode
@@ -17,7 +22,7 @@ const GlobalColorMode = (props) => {
             }
             return targetMode;
         });
-    }, []);
+    }, [scopeRef, parentGlobalColorMode]);
     useIsomorphicLayoutEffect(() => {
         onNextFrame(() => {
             enableTransitions();
@@ -28,10 +33,10 @@ const GlobalColorMode = (props) => {
      * This could happen if we're receiving the mode on the client but before React hydration
      */
     useIsomorphicLayoutEffect(() => {
-        const nextColorMode = getRootThemeEl().getAttribute("data-rs-color-mode");
+        const nextColorMode = getRootThemeEl(scopeRef?.current).getAttribute("data-rs-color-mode");
         if (nextColorMode)
             changeColorMode(nextColorMode);
-    }, []);
+    }, [changeColorMode, scopeRef]);
     const value = React.useMemo(() => ({
         mode,
         setMode: changeColorMode,

package/dist/components/Theme/Theme.context.js

@@ -1,16 +1,6 @@
 "use client";
 import React from "react";
 /* Context used to store data responsible for switching between modes of a theme */
-export const ThemeContext = React.createContext({
-    theme: "",
-    rootTheme: "",
-    colorMode: "light",
-    setTheme: () => { },
-    setRootTheme: () => { },
-});
+export const ThemeContext = React.createContext({});
 /* Context used to globally define mode, used only within the library */
-export const GlobalColorModeContext = React.createContext({
-    mode: "light",
-    setMode: () => { },
-    invertMode: () => { },
-});
+export const GlobalColorModeContext = React.createContext({});

package/dist/components/Theme/Theme.js

@@ -9,15 +9,15 @@ import { useTheme, useGlobalColorMode } from "./useTheme.js";
 import s from "./Theme.module.css";
 const Theme = (props) => _jsx(PrivateTheme, { ...props });
 export const PrivateTheme = (props) => {
-    const { name, defaultName, colorMode, scoped, children, className } = props;
+    const { name, defaultName, colorMode, scoped, scopeRef, children, className } = props;
     const [mounted, setMounted] = React.useState(false);
     const [stateTheme, setStateTheme] = React.useState(defaultName);
     const globalColorMode = useGlobalColorMode();
     const parentTheme = useTheme();
     const isRootProvider = !parentTheme.theme;
     const usedTheme = name || stateTheme || parentTheme.theme;
-    const rootTheme = isRootProvider ? usedTheme : parentTheme.rootTheme;
-    const parentColorMode = isRootProvider ? globalColorMode : parentTheme.colorMode;
+    const rootTheme = isRootProvider || scoped ? usedTheme : parentTheme.rootTheme;
+    const parentColorMode = isRootProvider || scoped ? globalColorMode.mode : parentTheme.colorMode;
     const invertedColorMode = parentColorMode === "light" ? "dark" : "light";
     const usedColorMode = colorMode === "inverted" ? invertedColorMode : colorMode || parentColorMode;
     const rootClassNames = classNames(s.root, className);
@@ -38,7 +38,7 @@ export const PrivateTheme = (props) => {
     useIsomorphicLayoutEffect(() => {
         if (!document || !isRootProvider)
             return;
-        const themeRootEl = getRootThemeEl();
+        const themeRootEl = getRootThemeEl(scopeRef?.current);
         const hasColorModeApplied = themeRootEl.getAttribute("data-rs-color-mode");
         themeRootEl.setAttribute("data-rs-theme", usedTheme);
         if (!hasColorModeApplied)
@@ -48,7 +48,7 @@ export const PrivateTheme = (props) => {
             if (!hasColorModeApplied)
                 themeRootEl.removeAttribute("data-rs-color-mode");
         };
-    }, [usedTheme, usedColorMode, isRootProvider]);
+    }, [usedTheme, usedColorMode, isRootProvider, scopeRef]);
     const value = React.useMemo(() => ({
         theme: usedTheme,
         rootTheme,
@@ -56,6 +56,6 @@ export const PrivateTheme = (props) => {
         setTheme,
         setRootTheme,
     }), [usedTheme, usedColorMode, setTheme, setRootTheme, rootTheme]);
-    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: rootClassNames, "data-rs-root": scoped ? true : undefined, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
+    return (_jsx(ThemeContext.Provider, { value: value, children: _jsx("div", { className: rootClassNames, ref: scopeRef, "data-rs-root": scoped ? true : undefined, "data-rs-theme": isRootProvider ? undefined : usedTheme, "data-rs-color-mode": isRootProvider || (!colorMode && !mounted) ? undefined : usedColorMode, children: children }) }));
 };
 export default Theme;

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

@@ -22,9 +22,10 @@ export type Props = {
 };
 export type PrivateProps = Props & {
     scoped?: boolean;
+    scopeRef?: React.RefObject<HTMLDivElement>;
 };
 export type GlobalColorModeProps = {
-    defaultMode?: ColorMode;
-    scoped?: boolean;
+    defaultMode: ColorMode;
+    scopeRef?: React.RefObject<HTMLDivElement>;
     children?: React.ReactNode;
 };

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

@@ -1 +1 @@
-export declare const getRootThemeEl: () => Element;
+export declare const getRootThemeEl: (scopeEl?: HTMLElement | null) => HTMLElement;

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

@@ -1 +1,10 @@
-export const getRootThemeEl = () => document.querySelector("[data-rs-root]") || document.documentElement;
+export const getRootThemeEl = (scopeEl) => {
+    if (!scopeEl)
+        return document.documentElement;
+    if (scopeEl.hasAttribute("data-rs-root") ||
+        scopeEl === document.documentElement ||
+        !scopeEl.parentElement) {
+        return scopeEl;
+    }
+    return getRootThemeEl(scopeEl.parentElement);
+};

package/dist/components/Theme/tests/Theme.stories.d.ts

@@ -9,4 +9,5 @@ declare const _default: {
 };
 export default _default;
 export declare const uncontrolled: () => import("react").JSX.Element;
+export declare const nestedReshaped: () => import("react").JSX.Element;
 export declare const edgeCases: () => import("react").JSX.Element;

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

@@ -4,6 +4,7 @@ import View from "../../View/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Theme, { useTheme } from "../index.js";
 import { Example } from "../../../utilities/storybook/index.js";
+import Reshaped from "../../Reshaped/index.js";
 export default {
     title: "Utilities/Theme",
     component: Theme,
@@ -15,7 +16,7 @@ export default {
 };
 const UncontrolledDemo = () => {
     const { setTheme, theme } = useTheme();
-    return (<Button color="primary" onClick={() => setTheme(theme === "reshaped" ? "fake" : "reshaped")}>
+    return (<Button color="primary" onClick={() => setTheme(theme === "reshaped" ? "slate" : "reshaped")}>
 			Toggle theme
 		</Button>);
 };
@@ -26,6 +27,38 @@ export const uncontrolled = () => {
 			</Example.Item>
 		</Example>);
 };
+const Nested = () => {
+    const { invertColorMode, colorMode } = useTheme();
+    return (<Button color="primary" variant="faded" onClick={invertColorMode}>
+			Slate: {colorMode}
+		</Button>);
+};
+export const nestedReshaped = () => {
+    const { invertColorMode, colorMode } = useTheme();
+    return (<Example>
+			<Example.Item title="reshaped + scoped slate">
+				<View gap={2} direction="row">
+					<Button color="primary" variant="faded" onClick={invertColorMode}>
+						Reshaped: {colorMode}
+					</Button>
+					<Reshaped theme="slate" scoped>
+						<Nested />
+					</Reshaped>
+				</View>
+			</Example.Item>
+
+			<Example.Item title="reshaped + not scoped slate">
+				<View gap={2} direction="row">
+					<Button color="primary" variant="faded" onClick={invertColorMode}>
+						Reshaped: {colorMode}
+					</Button>
+					<Reshaped theme="slate">
+						<Nested />
+					</Reshaped>
+				</View>
+			</Example.Item>
+		</Example>);
+};
 const Demo = () => {
     const { invertColorMode } = useTheme();
     return (<View gap={3}>

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

@@ -1,4 +1,4 @@
-export declare const useGlobalColorMode: () => import("./Theme.types").ColorMode;
+export declare const useGlobalColorMode: () => import("./Theme.types").GlobalColorModeContextData;
 export declare const useTheme: () => {
     theme: string;
     setTheme: (theme: string) => void;

package/dist/components/Theme/useTheme.js

@@ -2,8 +2,7 @@
 import React from "react";
 import { ThemeContext, GlobalColorModeContext } from "./Theme.context.js";
 export const useGlobalColorMode = () => {
-    const { mode } = React.useContext(GlobalColorModeContext);
-    return mode;
+    return React.useContext(GlobalColorModeContext);
 };
 export const useTheme = () => {
     const { colorMode, theme, setTheme, rootTheme, setRootTheme } = React.useContext(ThemeContext);

package/dist/hooks/_private/useSingletonHotkeys.d.ts

@@ -2,9 +2,9 @@ import React from "react";
 /**
  * Types
  */
-type Callback = (e: KeyboardEvent) => void;
-type PressedMap = Record<string, KeyboardEvent>;
-type Hotkeys = Record<string, Callback | null>;
+type Callback = (e?: KeyboardEvent) => void;
+type PressedMap = Map<string, KeyboardEvent>;
+export type Hotkeys = Record<string, Callback | null>;
 type HotkeyOptions = {
     preventDefault?: boolean;
 };

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -4,7 +4,7 @@ import React from "react";
  * Utilities
  */
 const COMBINATION_DELIMETER = "+";
-const pressedMap = {};
+const pressedMap = new Map();
 let modifiedKeys = [];
 const formatHotkey = (hotkey) => {
     if (hotkey === " ")
@@ -62,9 +62,9 @@ export class HotkeyStore {
         });
     };
     handleKeyDown = (pressedMap, e) => {
-        const pressedKeys = Object.keys(pressedMap);
-        if (!pressedKeys.length)
+        if (!pressedMap.size)
             return;
+        const pressedKeys = [...pressedMap.keys()];
         const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
         const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
         const hotkeyData = this.hotkeyMap[pressedId];
@@ -86,12 +86,12 @@ export class HotkeyStore {
                         !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
                         return;
                     }
-                    const resolvedEvent = pressedMap[pressedId];
+                    const resolvedEvent = pressedMap.get(pressedId);
                     if (data.options.preventDefault) {
                         resolvedEvent?.preventDefault();
                         e.preventDefault();
                     }
-                    data.callback(resolvedEvent);
+                    data.callback(e);
                 });
             }
         });
@@ -114,13 +114,13 @@ export const SingletonHotkeysProvider = (props) => {
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        pressedMap[eventKey] = e;
-        setTriggerCount(Object.keys(pressedMap).length);
+        pressedMap.set(eventKey, e);
+        setTriggerCount(pressedMap.size);
         // Key up won't trigger for other keys while Meta is pressed so we need to cache them
         // and remove on Meta keyup
         if (e.metaKey)
-            modifiedKeys.push(...Object.keys(pressedMap));
-        if (pressedMap.Meta)
+            modifiedKeys.push(...pressedMap.keys());
+        if (pressedMap.has("Meta"))
             modifiedKeys.push(eventKey);
     }, [hooksCount]);
     const removePressedKey = React.useCallback((e) => {
@@ -129,23 +129,23 @@ export const SingletonHotkeysProvider = (props) => {
         const eventKey = getEventKey(e);
         if (!eventKey)
             return;
-        delete pressedMap[eventKey];
+        pressedMap.delete(eventKey);
         if (eventKey === "meta" || eventKey === "control") {
-            delete pressedMap.mod;
+            pressedMap.delete("mod");
         }
         if (eventKey === "meta") {
             modifiedKeys.forEach((key) => {
-                if (!pressedMap[key])
+                if (!pressedMap.has(key))
                     return;
-                delete pressedMap[key];
+                pressedMap.delete(key);
             });
             modifiedKeys = [];
         }
-        setTriggerCount(Object.keys(pressedMap).length);
+        setTriggerCount(pressedMap.size);
     }, [hooksCount]);
     const isPressed = (hotkey) => {
         const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
-        if (keys.some((key) => !pressedMap[key]))
+        if (keys.some((key) => !pressedMap.has(key)))
             return false;
         return true;
     };
@@ -161,6 +161,10 @@ export const SingletonHotkeysProvider = (props) => {
             return;
         removePressedKey(e);
     }, [removePressedKey]);
+    const handleWindowBlur = React.useCallback(() => {
+        pressedMap.clear();
+        modifiedKeys = [];
+    }, []);
     const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
         setHooksCount((prev) => prev + 1);
         globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
@@ -172,11 +176,13 @@ export const SingletonHotkeysProvider = (props) => {
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);
         window.addEventListener("keyup", handleWindowKeyUp);
+        window.addEventListener("blur", handleWindowBlur);
         return () => {
             window.removeEventListener("keydown", handleWindowKeyDown);
             window.removeEventListener("keyup", handleWindowKeyUp);
+            window.removeEventListener("blur", handleWindowBlur);
         };
-    }, [handleWindowKeyDown, handleWindowKeyUp]);
+    }, [handleWindowKeyDown, handleWindowKeyUp, handleWindowBlur]);
     return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
 };
 const useSingletonHotkeys = () => React.useContext(HotkeyContext);

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

@@ -4,8 +4,11 @@ export default { title: "Hooks/useHotkeys" };
 function Example() {
     const { checkHotkeyState } = useHotkeys({
         "shift + b + n": () => console.log("pressed"),
-        "c + v": () => console.log(111),
-        "Meta + v": () => console.log(222),
+        "c + v": () => console.log("c + v"),
+        "Meta + k": () => console.log("meta + k"),
+        "Meta + f": () => console.log("meta + f"),
+        "Meta + v": () => console.log("meta + v"),
+        "Meta + b": () => console.log("meta + b"),
         "control + enter": () => console.log("control + enter"),
         "meta + enter": () => console.log("meta + enter"),
         "mod + enter": () => console.log("mod + enter"),

package/dist/hooks/useHotkeys.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
-declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
+import { type Hotkeys } from "./_private/useSingletonHotkeys";
+declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
     ref?: React.RefObject<Element>;
     disabled?: boolean;
     preventDefault?: boolean;

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.5",
+	"version": "3.2.6-rc.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",