reshaped 2.11.9 → 2.11.11

package/components/_private/Flyout/utilities/calculatePosition.d.ts

@@ -0,0 +1,18 @@
+import type * as T from "../Flyout.types";
+/**
+ * Calculate styles for the current position
+ */
+declare const calculatePosition: (args: T.Options & {
+    triggerBounds: DOMRect;
+    flyoutBounds: DOMRect;
+    scopeOffset: Record<"left" | "top", number>;
+}) => {
+    styles: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+    position: T.Position;
+};
+export default calculatePosition;

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

@@ -0,0 +1,97 @@
+const SCREEN_OFFSET = 16;
+const getRTLPosition = (position) => {
+    if (position.includes("start"))
+        return position.replace("start", "end");
+    if (position.includes("end"))
+        return position.replace("end", "start");
+    return position;
+};
+/**
+ * Get a position value which centers 2 elements vertically or horizontally
+ */
+const centerBySize = (originSize, targetSize) => {
+    return Math.floor(originSize / 2 - targetSize / 2);
+};
+/**
+ * Calculate styles for the current position
+ */
+const calculatePosition = (args) => {
+    const { triggerBounds, flyoutBounds, scopeOffset, position: passedPosition, rtl, width } = args;
+    let left = 0;
+    let top = 0;
+    let position = passedPosition;
+    if (rtl)
+        position = getRTLPosition(position);
+    if (width === "full" || width === "trigger") {
+        position = position.includes("top") ? "top" : "bottom";
+    }
+    switch (position) {
+        case "bottom":
+        case "top":
+            left = centerBySize(triggerBounds.width, flyoutBounds.width) + triggerBounds.left;
+            break;
+        case "start":
+        case "start-top":
+        case "start-bottom":
+            left = triggerBounds.left - triggerBounds.width;
+            break;
+        case "end":
+        case "end-top":
+        case "end-bottom":
+            left = triggerBounds.right;
+            break;
+        case "top-start":
+        case "bottom-start":
+            left = triggerBounds.left;
+            break;
+        case "top-end":
+        case "bottom-end":
+            left = triggerBounds.right - flyoutBounds.width;
+            break;
+        default:
+            break;
+    }
+    switch (position) {
+        case "top":
+        case "top-start":
+        case "top-end":
+            top = triggerBounds.top - flyoutBounds.height;
+            break;
+        case "bottom":
+        case "bottom-start":
+        case "bottom-end":
+            top = triggerBounds.bottom;
+            break;
+        case "start":
+        case "end":
+            top = centerBySize(triggerBounds.height, flyoutBounds.height) + triggerBounds.top;
+            break;
+        case "start-top":
+        case "end-top":
+            top = triggerBounds.top;
+            break;
+        case "start-bottom":
+        case "end-bottom":
+            top = triggerBounds.bottom - triggerBounds.height;
+            break;
+        default:
+            break;
+    }
+    if (top === undefined || left === undefined) {
+        throw Error(`[Reshaped, flyout]: ${position} position is not valid`);
+    }
+    top = Math.round(top + (window.scrollY || 0) - scopeOffset.top);
+    left = Math.round(left + (window.scrollX || 0) - scopeOffset.left);
+    let widthStyle = Math.ceil(flyoutBounds.width);
+    const height = Math.ceil(flyoutBounds.height);
+    if (width === "full") {
+        left = SCREEN_OFFSET;
+        widthStyle = window.innerWidth - SCREEN_OFFSET * 2;
+    }
+    else if (width === "trigger") {
+        widthStyle = triggerBounds.width;
+    }
+    const styles = { left, top, width: widthStyle, height };
+    return { styles, position };
+};
+export default calculatePosition;

package/hooks/_private/useSingletonHotkeys.d.ts

@@ -3,7 +3,7 @@ import React from "react";
  * Types
  */
 type Callback = (e: KeyboardEvent) => void;
-type PressedKeys = Record<string, KeyboardEvent>;
+type PressedMap = Record<string, KeyboardEvent>;
 type Hotkeys = Record<string, Callback | null>;
 type HotkeyOptions = {
     preventDefault?: boolean;
@@ -12,20 +12,17 @@ type Context = {
     isPressed: (key: string) => boolean;
     addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
 };
+type HotkeyData = {
+    callback: Callback;
+    ref: React.RefObject<HTMLElement | null>;
+    options: HotkeyOptions;
+};
 export declare class HotkeyStore {
-    hotkeyMap: Record<string, {
-        data: Set<{
-            callback: Callback;
-            ref: React.RefObject<HTMLElement | null>;
-            options: HotkeyOptions;
-        }>;
-        used: boolean;
-    }>;
+    hotkeyMap: Record<string, Set<HotkeyData>>;
     getSize: () => number;
     bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
     unbindHotkeys: (hotkeys: Hotkeys) => void;
-    handleKeyDown: (pressedMap: PressedKeys, e: KeyboardEvent) => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
+    handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
 }
 /**
  * Components / Hooks

package/hooks/_private/useSingletonHotkeys.js

@@ -24,29 +24,6 @@ const getEventKey = (e) => {
     }
     return e.key.toLowerCase();
 };
-const getCombinations = (pressedKeys) => {
-    const result = [];
-    const hotkey = pressedKeys.join(COMBINATION_DELIMETER);
-    const id = getHotkeyId(hotkey);
-    const sortedKeys = id.split(COMBINATION_DELIMETER);
-    const f = (prefix, items) => {
-        items.forEach((item, i) => {
-            const nextId = prefix ? `${prefix}+${item}` : item;
-            result.push(nextId);
-            f(nextId, items.slice(i + 1));
-        });
-    };
-    f("", sortedKeys);
-    return result;
-};
-const walkPressedCombinations = (pressed, cb) => {
-    const pressedKeys = Object.keys(pressed);
-    if (!pressedKeys.length)
-        return;
-    getCombinations(pressedKeys).forEach((pressedId) => {
-        cb(pressedId);
-    });
-};
 const walkHotkeys = (hotkeys, cb) => {
     Object.keys(hotkeys).forEach((key) => {
         key.split(",").forEach((hotkey) => {
@@ -66,9 +43,9 @@ export class HotkeyStore {
                 if (!hotkeyData)
                     return;
                 if (!this.hotkeyMap[id]) {
-                    this.hotkeyMap[id] = { data: new Set(), used: false };
+                    this.hotkeyMap[id] = new Set();
                 }
-                this.hotkeyMap[id].data.add({ callback: hotkeyData, ref, options });
+                this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
             });
         };
         this.unbindHotkeys = (hotkeys) => {
@@ -76,23 +53,34 @@ export class HotkeyStore {
                 var _a, _b;
                 if (!hotkeyCallback)
                     return;
-                (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.data.forEach((data) => {
+                (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.forEach((data) => {
                     if (data.callback === hotkeyCallback) {
-                        this.hotkeyMap[id].data.delete(data);
+                        this.hotkeyMap[id].delete(data);
                     }
                 });
-                if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.data.size)) {
+                if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.size)) {
                     delete this.hotkeyMap[id];
                 }
             });
         };
         this.handleKeyDown = (pressedMap, e) => {
-            walkPressedCombinations(pressedMap, (pressedId) => {
-                const hotkeyData = this.hotkeyMap[pressedId];
-                if (!hotkeyData || hotkeyData.used)
+            const pressedKeys = Object.keys(pressedMap);
+            if (!pressedKeys.length)
+                return;
+            const pressedId = getHotkeyId(pressedKeys.join(COMBINATION_DELIMETER));
+            const pressedFormattedKeys = pressedId.split(COMBINATION_DELIMETER);
+            const hotkeyData = this.hotkeyMap[pressedId];
+            /**
+             * Support for `mod` that represents both Mac and Win keyboards
+             */
+            const hotkeyControlModData = pressedFormattedKeys.includes("control") &&
+                this.hotkeyMap[pressedId.replace("control", "mod")];
+            const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[pressedId.replace("meta", "mod")];
+            [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
+                if (!hotkeyData)
                     return;
-                if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.data.size) {
-                    hotkeyData.data.forEach((data) => {
+                if (hotkeyData === null || hotkeyData === void 0 ? void 0 : hotkeyData.size) {
+                    hotkeyData.forEach((data) => {
                         var _a;
                         if (((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) &&
                             !(e.target === data.ref.current || data.ref.current.contains(e.target))) {
@@ -103,24 +91,10 @@ export class HotkeyStore {
                             resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
                         }
                         data.callback(resolvedEvent);
-                        /**
-                         * While meta is pressed - other keys keyup won't trigger and
-                         * we want to allow calling the same shortcut multiple times while meta was pressed
-                         */
-                        if (!(resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.metaKey))
-                            this.hotkeyMap[pressedId].used = true;
                     });
                 }
             });
         };
-        this.handleKeyUp = (e) => {
-            const id = getHotkeyId(e.key);
-            walkHotkeys(this.hotkeyMap, (hotkeyId, data) => {
-                const hotkeyIds = hotkeyId.split(COMBINATION_DELIMETER);
-                if (hotkeyIds.includes(id))
-                    data.used = false;
-            });
-        };
     }
 }
 const globalHotkeyStore = new HotkeyStore();
@@ -141,18 +115,13 @@ export const SingletonHotkeysProvider = (props) => {
         if (!eventKey)
             return;
         pressedMap[eventKey] = e;
-        if (eventKey === "meta" || eventKey === "control") {
-            pressedMap.mod = e;
-        }
         setTriggerCount(Object.keys(pressedMap).length);
         // Key up won't trigger for other keys while Meta is pressed so we need to cache them
         // and remove on Meta keyup
-        if (eventKey === "meta" || e.metaKey) {
+        if (e.metaKey)
             modifiedKeys.push(...Object.keys(pressedMap));
-        }
-        if (pressedMap.Meta) {
+        if (pressedMap.Meta)
             modifiedKeys.push(eventKey);
-        }
     }, [hooksCount]);
     const removePressedKey = React.useCallback((e) => {
         if (hooksCount === 0)
@@ -168,7 +137,6 @@ export const SingletonHotkeysProvider = (props) => {
             modifiedKeys.forEach((key) => {
                 if (!pressedMap[key])
                     return;
-                globalHotkeyStore.handleKeyUp(pressedMap[key]);
                 delete pressedMap[key];
             });
             modifiedKeys = [];
@@ -200,7 +168,6 @@ export const SingletonHotkeysProvider = (props) => {
         if (!e.key)
             return;
         removePressedKey(e);
-        globalHotkeyStore.handleKeyUp(e);
     }, [removePressedKey]);
     React.useEffect(() => {
         window.addEventListener("keydown", handleWindowKeyDown);

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

package/utilities/a11y/TrapFocus.d.ts

@@ -7,6 +7,7 @@ type ReleaseOptions = {
 type TrapOptions = {
     onNavigateOutside?: () => void;
     includeTrigger?: boolean;
+    initialFocusEl?: FocusableElement;
     mode?: TrapMode;
 };
 declare class TrapFocus {

package/utilities/a11y/TrapFocus.js

@@ -60,7 +60,7 @@ class TrapFocus {
          * and create a chain item
          */
         this.trap = (options = {}) => {
-            const { mode = "dialog", includeTrigger } = options;
+            const { mode = "dialog", includeTrigger, initialFocusEl } = options;
             const trigger = getActiveElement();
             const focusable = getFocusableElements(this.root, {
                 additionalElement: includeTrigger ? trigger : undefined,
@@ -84,14 +84,14 @@ class TrapFocus {
             if (mode === "dialog")
                 this.screenReaderTrap.trap();
             this.mutationObserver.observe(this.root, { childList: true, subtree: true });
-            if (!focusable.length)
+            if (!focusable.length && !initialFocusEl)
                 return;
             this.addListeners();
             // Don't add back to the chain if we're traversing back
             const tailItem = TrapFocus.chain.tailId && TrapFocus.chain.get(TrapFocus.chain.tailId);
             if (!tailItem || this.root !== tailItem.data.root) {
                 this.chainId = TrapFocus.chain.add(this);
-                focusElement(focusable[0], { pseudoFocus });
+                focusElement(initialFocusEl || focusable[0], { pseudoFocus });
             }
             this.trapped = true;
         };

package/hooks/_private/useFlyout.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-/**
- * Typings
- */
-export type FlyoutPosition = "bottom" | "bottom-start" | "bottom-end" | "top" | "top-start" | "top-end" | "start" | "start-top" | "start-bottom" | "end" | "end-top" | "end-bottom";
-export type FlyoutWidth = "trigger" | string;
-type ElementRef = React.RefObject<HTMLElement>;
-type PassedFlyoutOptions = {
-    width?: FlyoutWidth;
-    position?: FlyoutPosition;
-    defaultActive?: boolean;
-    forcePosition?: boolean;
-};
-type FlyoutStyles = React.CSSProperties;
-type FlyoutState = {
-    styles: FlyoutStyles;
-    position?: FlyoutPosition;
-    status: "idle" | "rendered" | "positioned" | "visible" | "hidden";
-};
-type UseFlyout = (originRef: ElementRef, targetRef: ElementRef, options: PassedFlyoutOptions) => Pick<FlyoutState, "styles" | "position" | "status"> & {
-    updatePosition: () => void;
-    render: () => void;
-    hide: () => void;
-    remove: () => void;
-};
-declare const useFlyout: UseFlyout;
-export default useFlyout;