reshaped 2.10.10 → 2.10.11

package/components/Actionable/Actionable.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "../../utilities/helpers.js";
+import * as keys from "../../constants/keys.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
     const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
@@ -13,8 +14,9 @@ const Actionable = forwardRef((props, ref) => {
     const isButton = Boolean(hasClickHandler || hasFocusHandler || type);
     let TagName;
     if (isLink) {
-        rootAttributes.href = disabled ? undefined : href || (attributes === null || attributes === void 0 ? void 0 : attributes.href);
         TagName = "a";
+        rootAttributes.href = disabled ? undefined : href || (attributes === null || attributes === void 0 ? void 0 : attributes.href);
+        rootAttributes.role = hasClickHandler ? "button" : attributes === null || attributes === void 0 ? void 0 : attributes.role;
     }
     else if (isButton && (!as || as === "button")) {
         TagName = "button";
@@ -39,14 +41,12 @@ const Actionable = forwardRef((props, ref) => {
         (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onClick) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
     };
     const handleKeyDown = (event) => {
-        const simulatingButton = rootAttributes.role === "button";
-        // These cases are handled correctly by the browsers
-        if (simulatingButton || isLink)
-            return;
-        const isSpace = event.key === " ";
-        const isEnter = event.key === "Enter";
+        const isSpace = event.key === keys.SPACE;
+        const isEnter = event.key === keys.ENTER;
         if (!isSpace && !isEnter)
             return;
+        if (!hasClickHandler)
+            return;
         event.preventDefault();
         handlePress(event);
     };

package/components/Actionable/tests/Actionable.stories.d.ts

@@ -12,3 +12,4 @@ export declare const role: () => import("react").JSX.Element;
 export declare const disabled: () => import("react").JSX.Element;
 export declare const fullWidth: () => import("react").JSX.Element;
 export declare const focusRing: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;

package/components/Actionable/tests/Actionable.stories.js

@@ -61,3 +61,13 @@ export const focusRing = () => (<Example>
 			</Actionable>
 		</Example.Item>
 	</Example>);
+export const edgeCases = () => (<Example>
+		<Example.Item title="insetFocus">
+			<form onSubmit={(e) => {
+        e.preventDefault();
+        alert("Submitted");
+    }}>
+				<Actionable type="submit">Submit</Actionable>
+			</form>
+		</Example.Item>
+	</Example>);

package/components/Autocomplete/Autocomplete.js

@@ -28,7 +28,7 @@ const Autocomplete = (props) => {
     const handleClose = () => setActive(false);
     useHotkeys({
         [`${keys.UP},${keys.DOWN}`]: () => handleOpen(),
-    }, [handleOpen], { ref: inputRef });
+    }, [handleOpen], { ref: inputRef, preventDefault: true });
     const handleChange = (args) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(args);
         setLocked(false);

package/components/Calendar/useCalendarKeyboardNavigation.js

@@ -61,6 +61,6 @@ const useCalendarKeyboardNavigation = (props) => {
         [keys.RIGHT]: () => focusDate({ delta: 1, onMonthChange: changeToNextMonth }),
         [keys.UP]: () => focusDate({ delta: -verticalDelta, onMonthChange: changeToPreviousMonth }),
         [keys.DOWN]: () => focusDate({ delta: verticalDelta, onMonthChange: changeToNextMonth }),
-    }, [changeToNextMonth, changeToPreviousMonth, focusDate, verticalDelta], { ref: rootRef });
+    }, [changeToNextMonth, changeToPreviousMonth, focusDate, verticalDelta], { ref: rootRef, preventDefault: true });
 };
 export default useCalendarKeyboardNavigation;

package/components/DropdownMenu/DropdownMenu.js

@@ -72,7 +72,7 @@ const DropdownMenuSubTriggerItem = (props) => {
             var _a;
             (_a = subMenuInstance === null || subMenuInstance === void 0 ? void 0 : subMenuInstance.current) === null || _a === void 0 ? void 0 : _a.open();
         },
-    }, [], { ref: attributes === null || attributes === void 0 ? void 0 : attributes.ref });
+    }, [], { ref: attributes === null || attributes === void 0 ? void 0 : attributes.ref, preventDefault: true });
     return (_jsx(DropdownMenuItem, Object.assign({}, menuItemProps, { attributes: Object.assign(Object.assign({}, attributes), { ref }), endSlot: _jsx(Icon, { autoWidth: true, svg: IconChevronRight, className: s.arrow }), children: children })));
 };
 const DropdownMenuSubTrigger = (props) => {

package/components/FormControl/FormControl.context.js

@@ -1,15 +1,6 @@
 "use client";
 import React from "react";
-const FormControlContext = React.createContext({
-    attributes: {
-        id: "",
-        "aria-describedby": "",
-    },
-    required: undefined,
-    hasError: false,
-    errorRef: () => { },
-    helperRef: () => { },
-});
+const FormControlContext = React.createContext({ attributes: {} });
 export const Provider = FormControlContext.Provider;
 export const useFormControlPrivate = () => React.useContext(FormControlContext);
 export const useFormControl = () => {

package/components/PinField/PinField.constants.d.ts

@@ -0,0 +1,3 @@
+export declare const regExpNumericChar = "\\d";
+export declare const regExpAlphabeticChar = "[a-zA-Z]";
+export declare const regExpAlphaNumericChar = "(\\d|[a-zA-Z])";

package/components/PinField/PinField.constants.js

@@ -0,0 +1,3 @@
+export const regExpNumericChar = "\\d";
+export const regExpAlphabeticChar = "[a-zA-Z]";
+export const regExpAlphaNumericChar = `(${regExpNumericChar}|${regExpAlphabeticChar})`;

package/components/PinField/PinField.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./PinField.types";
+declare const PinField: (props: T.Props) => import("react/jsx-runtime").JSX.Element;
+export default PinField;

package/components/PinField/PinField.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import PinFieldControlled from "./PinFieldControlled.js";
+import PinFieldUncontrolled from "./PinFieldUncontrolled.js";
+const PinField = (props) => {
+    const { value } = props;
+    if (value !== undefined)
+        return _jsx(PinFieldControlled, Object.assign({}, props));
+    return _jsx(PinFieldUncontrolled, Object.assign({}, props));
+};
+export default PinField;

package/components/PinField/PinField.module.css

@@ -0,0 +1 @@
+.root{display:inline-flex;margin:-1px 0;overflow-y:clip;padding:1px 0}.input,.root{vertical-align:top}.input{background:transparent;border:transparent;caret-color:transparent;color:transparent;font-size:16px;inset:0;outline:none;padding-left:100%;position:absolute}.item{cursor:text}.item--focused{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.item--focused:empty:before{animation:rs-pin-field-caret 1s ease-out infinite;background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";height:var(--rs-font-size-body-2);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:1px}@media (hover:hover){.root:hover .input{pointer-events:none}}@keyframes rs-pin-field-caret{0%,49.9%,to{opacity:1}50%,99.9%{opacity:0}}

package/components/PinField/PinField.types.d.ts

@@ -0,0 +1,23 @@
+import type * as G from "../../types/global";
+export type Size = "medium" | "large" | "xlarge";
+type BaseProps = {
+    name: string;
+    valueLength?: number;
+    charPattern?: "alphabetic" | "numeric" | "alphanumeric";
+    size?: G.Responsive<Size>;
+    variant?: "outline" | "faded";
+    onChange?: G.ChangeHandler<string>;
+    inputAttributes?: G.Attributes<"input", BaseProps>;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", BaseProps>;
+};
+export type ControlledProps = BaseProps & {
+    value: string;
+    defaultValue?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    value?: never;
+    defaultValue?: string;
+};
+export type Props = ControlledProps | UncontrolledProps;
+export {};

package/components/PinField/PinField.types.js

@@ -0,0 +1 @@
+export {};

package/components/PinField/PinFieldControlled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./PinField.types";
+declare const PinFieldControlled: (props: T.ControlledProps) => import("react/jsx-runtime").JSX.Element;
+export default PinFieldControlled;

package/components/PinField/PinFieldControlled.js

@@ -0,0 +1,163 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { responsivePropDependency } from "../../utilities/helpers.js";
+import View from "../View/index.js";
+import Text from "../Text/index.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import { useFormControl } from "../FormControl/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import * as keys from "../../constants/keys.js";
+import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";
+import s from "./PinField.module.css";
+const sizeMap = {
+    medium: 9,
+    large: 12,
+    xlarge: 14,
+};
+const patternMap = {
+    numeric: regExpNumericChar,
+    alphabetic: regExpAlphabeticChar,
+    alphanumeric: regExpAlphaNumericChar,
+};
+const PinFieldControlled = (props) => {
+    const { valueLength = 4, value, onChange, name, charPattern = "numeric", size = "medium", variant = "outline", className, attributes, inputAttributes, } = props;
+    const pattern = patternMap[charPattern];
+    const responsiveInputSize = responsivePropDependency(size, (value) => sizeMap[value]);
+    const responsiveTextVariant = responsivePropDependency(size, (value) => value === "medium" ? "body-3" : "body-2");
+    const responsiveRadius = responsivePropDependency(size, (value) => value === "xlarge" ? "medium" : "small");
+    const [focusedIndex, setFocusedIndex] = React.useState(null);
+    const formControl = useFormControl();
+    /**
+     * Most of the logic works based on this mode parameter
+     * `edit` mode means user has selected an already filled item and is changing its value,
+     * so caret position is related to the value rendered before it
+     * `type` means user is typing a new value in an empty item,
+     * so caret is positioned before the value that's going to be added
+     */
+    const modeRef = React.useRef("type");
+    const inputRef = React.useRef(null);
+    const nodes = [];
+    /**
+     * Update displayed item focus based on the current caret position and current mode
+     */
+    const syncSelection = React.useCallback((index) => {
+        var _a;
+        const el = inputRef.current;
+        if (!el || el.selectionStart === null)
+            return;
+        const mode = modeRef.current;
+        const selectionStart = (_a = index !== null && index !== void 0 ? index : el.selectionStart) !== null && _a !== void 0 ? _a : 0;
+        const nextSelectionStart = Math.min(mode === "type" ? el.value.length : el.value.length - 1, Math.max(0, selectionStart));
+        if (modeRef.current === "type") {
+            el.selectionStart = nextSelectionStart;
+            el.selectionEnd = nextSelectionStart;
+        }
+        else {
+            el.selectionStart = nextSelectionStart;
+            el.selectionEnd = nextSelectionStart + 1;
+        }
+        setFocusedIndex(el.selectionStart);
+    }, []);
+    /**
+     * Using onNextFrame here to wait for the native behavior first
+     */
+    useHotkeys({
+        [`${keys.LEFT},${keys.UP}`]: () => {
+            onNextFrame(() => {
+                const el = inputRef.current;
+                if (!el || el.selectionStart === null)
+                    return;
+                const mode = modeRef.current;
+                const nextMode = !value.length ? "type" : "edit";
+                modeRef.current = nextMode;
+                syncSelection(mode === "type" && nextMode === "edit" ? el.selectionStart : el.selectionStart - 1);
+            });
+        },
+        [`${keys.RIGHT},${keys.DOWN}`]: () => {
+            onNextFrame(() => {
+                const el = inputRef.current;
+                if (!el || el.selectionStart === null)
+                    return;
+                const nextMode = el.selectionStart === value.length && el.selectionStart !== valueLength
+                    ? "type"
+                    : "edit";
+                modeRef.current = nextMode;
+                syncSelection(el.selectionStart);
+            });
+        },
+    }, [value, syncSelection, valueLength], {
+        ref: inputRef,
+    });
+    const handleFocus = () => {
+        /**
+         * Tabing into the input might select the whole value
+         * so we're resetting that behavior
+         */
+        syncSelection(value.length);
+    };
+    const handleBlur = () => {
+        setFocusedIndex(null);
+    };
+    const handlePaste = (e) => {
+        if (focusedIndex === null || !inputRef.current)
+            return;
+        /**
+         * Input might not have enough space for pasting the value so we free up space based on the pasted value length
+         */
+        const data = e.clipboardData.getData("text");
+        const updatedValue = value.slice(0, focusedIndex) + value.slice(focusedIndex + data.length);
+        /**
+         * Manually update the value and selection to preserve all not affected values and keep caret in the correct position
+         */
+        inputRef.current.value = updatedValue;
+        inputRef.current.selectionEnd = focusedIndex;
+        inputRef.current.selectionStart = inputRef.current.selectionStart;
+    };
+    const handleInput = (event) => {
+        const el = event.target;
+        const nextValue = el.value;
+        const matcher = new RegExp(`^${pattern}+$`);
+        if (nextValue && !nextValue.match(matcher))
+            return;
+        if (el.selectionStart === null)
+            return;
+        const nextMode = 
+        // Finished editing the last character
+        nextValue.length === valueLength ||
+            // Staying inside the sequence
+            nextValue.length > el.selectionStart
+            ? "edit"
+            : "type";
+        modeRef.current = nextMode;
+        onChange === null || onChange === void 0 ? void 0 : onChange({ event, name, value: nextValue });
+        onNextFrame(() => {
+            syncSelection();
+        });
+    };
+    /**
+     * Manually handle correct caret position when any of the items are clicked
+     */
+    const handleItemClick = (event, index) => {
+        if (!inputRef.current)
+            return;
+        event.preventDefault();
+        inputRef.current.focus();
+        modeRef.current = index >= value.length ? "type" : "edit";
+        syncSelection(index);
+    };
+    for (let i = 0; i < valueLength; i++) {
+        nodes.push(_jsx(View, { height: responsiveInputSize, width: responsiveInputSize, borderRadius: responsiveRadius, borderColor: variant === "faded" ? "transparent" : "neutral", backgroundColor: variant === "faded" ? "neutral-faded" : "elevation-base", align: "center", justify: "center", className: [s.item, focusedIndex === i && s["item--focused"]], attributes: {
+                onMouseDown: (e) => {
+                    handleItemClick(e, i);
+                },
+                onTouchStart: (e) => {
+                    handleItemClick(e, i);
+                },
+            }, children: value[i] && _jsx(Text, { variant: responsiveTextVariant, children: value[i] }) }, i));
+    }
+    return (_jsxs(View, { gap: 2, direction: "row", className: [s.root, className], attributes: attributes, children: [nodes, _jsx("input", Object.assign({}, inputAttributes, formControl.attributes, { type: "text", 
+                // className={s.input}
+                onFocus: handleFocus, onBlur: handleBlur, onPaste: handlePaste, onInput: handleInput, value: value, name: name, maxLength: valueLength, ref: inputRef, autoComplete: (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.autoComplete) || "one-time-code", inputMode: charPattern === "numeric" ? "numeric" : undefined, pattern: `${pattern}{${valueLength}}` }))] }));
+};
+export default PinFieldControlled;

package/components/PinField/PinFieldUncontrolled.d.ts

@@ -0,0 +1,3 @@
+import type * as T from "./PinField.types";
+declare const PinFieldUncontrolled: (props: T.UncontrolledProps) => import("react/jsx-runtime").JSX.Element;
+export default PinFieldUncontrolled;

package/components/PinField/PinFieldUncontrolled.js

@@ -0,0 +1,25 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import PinFieldControlled from "./PinFieldControlled.js";
+const PinFieldUncontrolled = (props) => {
+    const { defaultValue, onChange } = props, controlledProps = __rest(props, ["defaultValue", "onChange"]);
+    const [value, setValue] = React.useState(defaultValue || "");
+    const handleChange = (args) => {
+        setValue(args.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(args);
+    };
+    return _jsx(PinFieldControlled, Object.assign({}, controlledProps, { value: value, onChange: handleChange }));
+};
+export default PinFieldUncontrolled;

package/components/PinField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./PinField";
+export type { Props as PinFieldProps } from "./PinField.types";

package/components/PinField/index.js

@@ -0,0 +1 @@
+export { default } from "./PinField.js";

package/components/PinField/tests/PinField.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    title: string;
+    component: (props: import("./..").PinFieldProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
+};
+export default _default;
+export declare const base: () => import("react").JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const formControl: () => import("react").JSX.Element;

package/components/PinField/tests/PinField.stories.js

@@ -0,0 +1,63 @@
+import { Example } from "../../../utilities/storybook/index.js";
+import PinField from "../index.js";
+import FormControl from "../../FormControl/index.js";
+export default {
+    title: "Components/PinField",
+    component: PinField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/pin-field",
+        },
+    },
+};
+export const base = () => (<Example>
+		<Example.Item title="no value">
+			<PinField name="pin"/>
+		</Example.Item>
+
+		<Example.Item title="defaultValue: 12">
+			<PinField name="pin2" defaultValue="12"/>
+		</Example.Item>
+
+		<Example.Item title="value: 12">
+			<PinField name="pin3" value="12"/>
+		</Example.Item>
+
+		<Example.Item title="defaultValue: 12, valueLength: 6">
+			<PinField name="pin4" defaultValue="12" valueLength={6}/>
+		</Example.Item>
+
+		<Example.Item title="defaultValue: ab, charPattern: alphabetic">
+			<PinField name="pin5" defaultValue="ab" charPattern="alphabetic"/>
+		</Example.Item>
+
+		<Example.Item title="defaultValue: ab, charPattern: alphanumeric">
+			<PinField name="pin6" defaultValue="ab" charPattern="alphanumeric"/>
+		</Example.Item>
+	</Example>);
+export const variant = () => (<Example>
+		<Example.Item title="variant: faded">
+			<PinField name="pin" variant="faded"/>
+		</Example.Item>
+	</Example>);
+export const size = () => (<Example>
+		<Example.Item title="size: large">
+			<PinField name="pin" size="large"/>
+		</Example.Item>
+
+		<Example.Item title="size: xlarge">
+			<PinField name="pin" size="xlarge"/>
+		</Example.Item>
+
+		<Example.Item title="size: responsive, s: medium, m+: xlarge">
+			<PinField name="pin" size={{ s: "medium", m: "xlarge" }}/>
+		</Example.Item>
+	</Example>);
+export const formControl = () => (<Example>
+		<Example.Item title="with form control">
+			<FormControl>
+				<FormControl.Label>Label</FormControl.Label>
+				<PinField name="pin"/>
+			</FormControl>
+		</Example.Item>
+	</Example>);

package/hooks/_private/useSingletonHotkeys.d.ts

@@ -5,20 +5,24 @@ import React from "react";
 type Callback = (e: KeyboardEvent) => void;
 type PressedKeys = Record<string, KeyboardEvent>;
 type Hotkeys = Record<string, Callback | null>;
+type HotkeyOptions = {
+    preventDefault?: boolean;
+};
 type Context = {
     isPressed: (key: string) => boolean;
-    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => (() => void) | undefined;
+    addHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options?: HotkeyOptions) => (() => void) | undefined;
 };
 export declare class HotkeyStore {
     hotkeyMap: Record<string, {
         data: Set<{
             callback: Callback;
             ref: React.RefObject<HTMLElement | null>;
+            options: HotkeyOptions;
         }>;
         used: boolean;
     }>;
     getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>) => void;
+    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;

package/hooks/_private/useSingletonHotkeys.js

@@ -5,7 +5,7 @@ import React from "react";
  */
 const COMBINATION_DELIMETER = "+";
 const pressedMap = {};
-const modifiedKeys = [];
+let modifiedKeys = [];
 const formatHotkey = (hotkey) => {
     if (hotkey === " ")
         return hotkey;
@@ -61,14 +61,14 @@ export class HotkeyStore {
     constructor() {
         this.hotkeyMap = {};
         this.getSize = () => Object.keys(this.hotkeyMap).length;
-        this.bindHotkeys = (hotkeys, ref) => {
+        this.bindHotkeys = (hotkeys, ref, options) => {
             walkHotkeys(hotkeys, (id, hotkeyData) => {
                 if (!hotkeyData)
                     return;
                 if (!this.hotkeyMap[id]) {
                     this.hotkeyMap[id] = { data: new Set(), used: false };
                 }
-                this.hotkeyMap[id].data.add({ callback: hotkeyData, ref });
+                this.hotkeyMap[id].data.add({ callback: hotkeyData, ref, options });
             });
         };
         this.unbindHotkeys = (hotkeys) => {
@@ -99,9 +99,16 @@ export class HotkeyStore {
                             return;
                         }
                         const resolvedEvent = pressedMap[pressedId];
-                        resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
+                        if (data.options.preventDefault) {
+                            resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
+                        }
                         data.callback(resolvedEvent);
-                        this.hotkeyMap[pressedId].used = true;
+                        /**
+                         * 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;
                     });
                 }
             });
@@ -140,7 +147,7 @@ export const SingletonHotkeysProvider = (props) => {
         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") {
+        if (eventKey === "meta" || e.metaKey) {
             modifiedKeys.push(...Object.keys(pressedMap));
         }
         if (pressedMap.Meta) {
@@ -159,8 +166,12 @@ export const SingletonHotkeysProvider = (props) => {
         }
         if (eventKey === "meta") {
             modifiedKeys.forEach((key) => {
+                if (!pressedMap[key])
+                    return;
+                globalHotkeyStore.handleKeyUp(pressedMap[key]);
                 delete pressedMap[key];
             });
+            modifiedKeys = [];
         }
         setTriggerCount(Object.keys(pressedMap).length);
     }, [hooksCount]);
@@ -170,9 +181,9 @@ export const SingletonHotkeysProvider = (props) => {
             return false;
         return true;
     };
-    const addHotkeys = React.useCallback((hotkeys, ref) => {
+    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
         setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref);
+        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
         return () => {
             setHooksCount((prev) => prev - 1);
             globalHotkeyStore.unbindHotkeys(hotkeys);

package/hooks/useHotkeys.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 declare const useHotkeys: <Element_1 extends HTMLElement>(hotkeys: Record<string, ((e: KeyboardEvent) => void) | null>, deps?: unknown[], options?: {
     ref?: React.RefObject<Element_1> | undefined;
     disabled?: boolean | undefined;
+    preventDefault?: boolean | undefined;
 } | undefined) => {
     ref: React.RefObject<Element_1>;
     checkHotkeyState: (key: string) => boolean;

package/hooks/useHotkeys.js

@@ -8,10 +8,18 @@ const useHotkeys = (hotkeys, deps = [], options) => {
     React.useEffect(() => {
         if (options === null || options === void 0 ? void 0 : options.disabled)
             return;
-        const remove = addHotkeys(hotkeys, elementRef);
+        const remove = addHotkeys(hotkeys, elementRef, { preventDefault: options === null || options === void 0 ? void 0 : options.preventDefault });
         return () => remove === null || remove === void 0 ? void 0 : remove();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [addHotkeys, Object.keys(hotkeys).join(","), options === null || options === void 0 ? void 0 : options.disabled, ...deps]);
+    }, [
+        addHotkeys,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        Object.keys(hotkeys).join(","),
+        options === null || options === void 0 ? void 0 : options.disabled,
+        options === null || options === void 0 ? void 0 : options.preventDefault,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        ...deps,
+    ]);
     return { ref: elementRef, checkHotkeyState: isPressed };
 };
 export default useHotkeys;

package/index.d.ts

@@ -63,6 +63,8 @@ export { default as Overlay } from "./components/Overlay";
 export type { OverlayProps } from "./components/Overlay";
 export { default as Pagination } from "./components/Pagination";
 export type { PaginationProps } from "./components/Pagination";
+export { default as PinField } from "./components/PinField";
+export type { PinFieldProps } from "./components/PinField";
 export { default as Popover } from "./components/Popover";
 export type { PopoverProps } from "./components/Popover";
 export { default as Progress } from "./components/Progress";

package/index.js

@@ -32,6 +32,7 @@ export { default as MenuItem } from "./components/MenuItem/index.js";
 export { default as Modal } from "./components/Modal/index.js";
 export { default as Overlay } from "./components/Overlay/index.js";
 export { default as Pagination } from "./components/Pagination/index.js";
+export { default as PinField } from "./components/PinField/index.js";
 export { default as Popover } from "./components/Popover/index.js";
 export { default as Progress } from "./components/Progress/index.js";
 export { default as Radio } from "./components/Radio/index.js";

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.10.10",
+	"version": "2.10.11",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",