reshaped 3.2.4 → 3.2.6-rc.0

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -7,7 +7,6 @@ import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
 import TextField from "../../../TextField/index.js";
-import useToggle from "../../../../hooks/useToggle.js";
 export default { title: "Utilities/Internal/Flyout" };
 const Demo = (props) => {
     const { position = "bottom-start", children, ...rest } = props;
@@ -20,7 +19,7 @@ const Demo = (props) => {
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
             height: 150,
-            width: 160,
+            minWidth: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
             boxSizing: "border-box",
@@ -30,7 +29,7 @@ const Demo = (props) => {
 			</Flyout.Content>
 		</Flyout>);
 };
-export const positions = () => (<div style={{ paddingTop: 200 }}>
+export const position = () => (<div style={{ paddingTop: 200 }}>
 		<View gap={3} direction="row">
 			<Demo position="bottom-start"/>
 			<Demo position="bottom-end"/>
@@ -107,20 +106,35 @@ export const modes = () => (<Example>
 			</Demo>
 		</Example.Item>
 	</Example>);
-export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
-		<Flyout.Trigger>
-			{(attributes) => <button {...attributes}>Trigger with long text</button>}
-		</Flyout.Trigger>
-		<Flyout.Content>
-			<div style={{
+export const width = () => (<Example>
+		<Example.Item title="width: 300px">
+			<Demo width="300px" position="bottom"/>
+		</Example.Item>
+		<Example.Item title="width: trigger">
+			<Flyout triggerType="click" width="trigger" position="bottom">
+				<Flyout.Trigger>
+					{(attributes) => <Button attributes={attributes}>Trigger with long text</Button>}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",
         borderRadius: "var(--rs-radius-medium)",
         border: "1px solid var(--rs-color-border-neutral-faded)",
         boxSizing: "border-box",
     }}></div>
-		</Flyout.Content>
-	</Flyout>);
+				</Flyout.Content>
+			</Flyout>
+		</Example.Item>
+	</Example>);
+export const offset = () => (<Example>
+		<Example.Item title="contentGap: x10">
+			<Demo contentGap={10}/>
+		</Example.Item>
+		<Example.Item title="contentShift: x10">
+			<Demo contentShift={10}/>
+		</Example.Item>
+	</Example>);
 export const disableFlags = () => (<Example>
 		<Example.Item title="disableContentHover">
 			<Demo triggerType="hover" disableContentHover>
@@ -198,12 +212,6 @@ export const customPortalTarget = () => {
 			</Example.Item>
 		</Example>);
 };
-export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
-		Should work on mobile
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
 export const testInsideFixed = () => (<Example>
 		<Example.Item title="should move the content on page scroll">
 			<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
@@ -277,7 +285,6 @@ export const testDynamicBounds = () => {
 		</View>);
 };
 export const testDisableOutsideClick = () => {
-    const toggle = useToggle();
     return (<Example>
 			<Example.Item title="opening second flyout shouldn't block the first one from closing">
 				<View direction="row" gap={4}>
@@ -287,7 +294,7 @@ export const testDisableOutsideClick = () => {
 			</Example.Item>
 		</Example>);
 };
-export const scopedTheming = () => (<View gap={3} align="start">
+export const testScopedTheming = () => (<View gap={3} align="start">
 		<Button color="primary">Reshaped button</Button>
 		<Theme name="twitter">
 			<Flyout triggerType="click" active position="bottom-start">

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

@@ -16,6 +16,7 @@ type UseFlyout = (args: PassedFlyoutOptions & {
     flyoutElRef: ElementRef;
     triggerBoundsRef: React.RefObject<DOMRect | undefined>;
     contentGap?: number;
+    contentShift?: number;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

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

@@ -43,12 +43,12 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentGap = 0, ...options } = args;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, ...options } = args;
     const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
-    const contentGapModifier = baseUnit ? parseInt(baseUnit) : 0;
+    const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
     // Reset all styles applied on the previous hook execution
     targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
@@ -83,7 +83,8 @@ const flyout = (args) => {
             flyoutBounds,
             scopeOffset,
             position: currentPosition,
-            contentGap: contentGap * contentGapModifier,
+            contentGap: contentGap * unitModifier,
+            contentShift: contentShift * unitModifier,
         });
         const visible = fullyVisible(tested);
         const validPosition = visible || fallbackPositions?.length === 0;
@@ -135,7 +136,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
     const lastUsedFallbackRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -178,6 +179,7 @@ const useFlyout = (args) => {
             rtl: isRTL,
             container,
             contentGap,
+            contentShift,
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
@@ -191,6 +193,7 @@ const useFlyout = (args) => {
         triggerBoundsRef,
         width,
         contentGap,
+        contentShift,
         handleFallback,
     ]);
     React.useEffect(() => {

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

@@ -16,7 +16,7 @@ const centerBySize = (originSize, targetSize) => {
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, } = args;
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width, contentGap = 0, contentShift = 0, } = args;
     const isFullWidth = width === "full" || width === "100%";
     let left = 0;
     let top = 0;
@@ -33,7 +33,7 @@ const calculatePosition = (args) => {
     switch (position) {
         case "bottom":
         case "top":
-            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left;
+            left = centerBySize(triggerBounds.width, flyoutWidth) + triggerBounds.left + contentShift;
             break;
         case "start":
         case "start-top":
@@ -47,11 +47,11 @@ const calculatePosition = (args) => {
             break;
         case "top-start":
         case "bottom-start":
-            left = triggerBounds.left;
+            left = triggerBounds.left + contentShift + contentShift;
             break;
         case "top-end":
         case "bottom-end":
-            left = triggerBounds.right - flyoutWidth;
+            left = triggerBounds.right - flyoutWidth + contentShift;
             break;
         default:
             break;
@@ -69,15 +69,15 @@ const calculatePosition = (args) => {
             break;
         case "start":
         case "end":
-            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top;
+            top = centerBySize(triggerBounds.height, flyoutHeight) + triggerBounds.top + contentShift;
             break;
         case "start-top":
         case "end-top":
-            top = triggerBounds.top;
+            top = triggerBounds.top + contentShift;
             break;
         case "start-bottom":
         case "end-bottom":
-            top = triggerBounds.bottom - flyoutHeight;
+            top = triggerBounds.bottom - flyoutHeight + contentShift;
             break;
         default:
             break;

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