reshaped 2.11.12 → 3.0.1

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

@@ -1,183 +0,0 @@
-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 React from "react";
-import { Example } from "../../../../utilities/storybook/index.js";
-import View from "../../../View/index.js";
-import Theme from "../../../Theme/index.js";
-import Button from "../../../Button/index.js";
-import Flyout from "../index.js";
-export default { title: "Utilities/Internal/Flyout" };
-const Demo = (props) => {
-    const { position = "bottom-start", children } = props, rest = __rest(props, ["position", "children"]);
-    return (<Flyout triggerType="click" position={position} {...rest}>
-			<Flyout.Trigger>
-				{(attributes) => <Button attributes={attributes}>{position}</Button>}
-			</Flyout.Trigger>
-			<Flyout.Content>
-				<div style={{
-            background: "var(--rs-color-background-elevation-overlay)",
-            padding: "var(--rs-unit-x4)",
-            height: 100,
-            width: 160,
-            borderRadius: "var(--rs-unit-radius-medium)",
-            border: "1px solid var(--rs-color-border-neutral-faded)",
-            boxSizing: "border-box",
-        }}>
-					{children || "Content"}
-				</div>
-			</Flyout.Content>
-		</Flyout>);
-};
-export const positions = () => (<div style={{ paddingTop: 200 }}>
-		<View gap={3} direction="row">
-			<Demo position="bottom-start"/>
-			<Demo position="bottom-end"/>
-			<Demo position="bottom"/>
-
-			<Demo position="top-start"/>
-			<Demo position="top-end"/>
-			<Demo position="top"/>
-
-			<Demo position="end"/>
-			<Demo position="end-top"/>
-			<Demo position="end-bottom"/>
-
-			<Demo position="start"/>
-			<Demo position="start-top"/>
-			<Demo position="start-bottom"/>
-		</View>
-	</div>);
-export const dynamicPosition = () => (<div style={{ position: "absolute", top: 0, left: "50%" }}>
-		<Demo position="top"/>
-	</div>);
-export const modeDialogClick = () => (<Demo position="bottom-start" trapFocusMode="dialog">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeActionMenuClick = () => (<Demo position="bottom-start" trapFocusMode="action-menu">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeContentMenuClick = () => (<Demo position="bottom-start" trapFocusMode="content-menu">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeDialogHover = () => (<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeActionMenuHover = () => (<Demo position="bottom-start" trapFocusMode="action-menu" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-export const modeContentMenuHover = () => (<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover">
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
-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 testInsideScrollArea = () => (<Example>
-		<Example.Item title="should move the content on area scroll">
-			<div style={{ overflow: "scroll", height: 200, margin: 40, position: "relative" }}>
-				<Flyout triggerType="click" position="bottom-start">
-					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
-					<Flyout.Content>
-						<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: "var(--rs-unit-x4)",
-        height: 100,
-        width: 160,
-        borderRadius: "var(--rs-unit-radius-medium)",
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}>
-							{"Content"}
-						</div>
-					</Flyout.Content>
-				</Flyout>
-				<View height="300px" backgroundColor="neutral-faded"/>
-			</div>
-			<div style={{ height: 2000 }}/>
-		</Example.Item>
-	</Example>);
-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}>
-				<Flyout triggerType="click" position="bottom-start">
-					<Flyout.Trigger>{(attributes) => <button {...attributes}>Foo</button>}</Flyout.Trigger>
-					<Flyout.Content>
-						<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: "var(--rs-unit-x4)",
-        height: 100,
-        width: 160,
-        borderRadius: "var(--rs-unit-radius-medium)",
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}>
-							{"Content"}
-						</div>
-					</Flyout.Content>
-				</Flyout>
-			</View>
-			<div style={{ height: 2000 }}/>
-		</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={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: "var(--rs-unit-x4)",
-        borderRadius: "var(--rs-unit-radius-medium)",
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}></div>
-		</Flyout.Content>
-	</Flyout>);
-export const scopedTheming = () => (<View gap={3} align="start">
-		<Button color="primary">Reshaped button</Button>
-		<Theme name="twitter">
-			<Flyout triggerType="click" active position="bottom-start">
-				<Flyout.Trigger>
-					{(attributes) => (<Button color="primary" attributes={attributes}>
-							Twitter button
-						</Button>)}
-				</Flyout.Trigger>
-				<Flyout.Content>
-					<div style={{
-        background: "var(--rs-color-background-elevation-overlay)",
-        padding: 8,
-        border: "1px solid var(--rs-color-border-neutral-faded)",
-        boxSizing: "border-box",
-    }}>
-						<View gap={1}>
-							<View.Item>Portal content, rendered in body</View.Item>
-							<Button color="primary">Twitter button</Button>
-						</View>
-					</div>
-				</Flyout.Content>
-			</Flyout>
-		</Theme>
-	</View>);

package/components/_private/Flyout/useFlyout.js

@@ -1,186 +0,0 @@
-import React from "react";
-import useRTL from "../../../hooks/useRTL.js";
-import { getClosestFlyoutTarget } from "../../../utilities/dom.js";
-import calculatePosition from "./utilities/calculatePosition.js";
-const topPos = ["top-start", "top", "top-end"];
-const bottomPos = ["bottom-start", "bottom", "bottom-end"];
-const startPos = ["start", "start-bottom", "start-top"];
-const endPos = ["end", "end-bottom", "end-top"];
-const order = {
-    top: [...topPos, ...bottomPos, ...endPos, ...startPos],
-    bottom: [...bottomPos, ...topPos, ...endPos, ...startPos],
-    start: [...startPos, ...endPos, ...topPos, ...bottomPos],
-    end: [...endPos, ...startPos, ...topPos, ...bottomPos],
-};
-/**
- * Get an order of positions to try to fit popover on the screen based on its starting position
- */
-const getPositionOrder = (position) => {
-    const types = ["top", "bottom", "start", "end"];
-    const type = types.find((type) => position.startsWith(type)) || "bottom";
-    return order[type];
-};
-/**
- * Check if element visually fits on the screen
- */
-const fullyVisible = (bounds) => {
-    const htmlEl = document.documentElement;
-    const pageLeft = htmlEl.scrollLeft;
-    const pageRight = pageLeft + htmlEl.clientWidth;
-    const pageTop = htmlEl.scrollTop;
-    const pageBottom = pageTop + htmlEl.clientHeight;
-    return (bounds.left >= pageLeft &&
-        bounds.left + bounds.width <= pageRight &&
-        bounds.top >= pageTop &&
-        bounds.top + bounds.height <= pageBottom);
-};
-/**
- * Order of keys here is responsible for the order of styles applied
- */
-const defaultStyles = {
-    left: 0,
-    top: 0,
-    width: "auto",
-    height: "auto",
-    // z-index doesn't accept strings
-    zIndex: "var(--rs-z-index-flyout)",
-};
-const resetStyles = {
-    left: 0,
-    top: 0,
-    position: "fixed",
-    // opacity: 0,
-    visibility: "hidden",
-    animation: "none",
-    transition: "none",
-    zIndex: "var(--rs-z-index-tooltip)",
-};
-/**
- * Set position of the target element to fit on the screen
- */
-const flyout = (triggerEl, flyoutEl, options) => {
-    const { position, forcePosition, width } = options;
-    const targetClone = flyoutEl.cloneNode(true);
-    const triggerBounds = triggerEl.getBoundingClientRect();
-    // Reset all styles applied on the previous hook execution
-    targetClone.style = "";
-    Object.keys(resetStyles).forEach((key) => {
-        const value = resetStyles[key];
-        targetClone.style[key] = value.toString();
-    });
-    if (width) {
-        if (width === "trigger") {
-            targetClone.style.width = `${triggerBounds.width}px`;
-        }
-        else if (width !== "full") {
-            targetClone.style.width = width;
-        }
-    }
-    document.body.appendChild(targetClone);
-    const flyoutBounds = targetClone.getBoundingClientRect();
-    const scrollableParent = getClosestFlyoutTarget(triggerEl);
-    const scopeBounds = scrollableParent.getBoundingClientRect();
-    const scopeOffset = {
-        top: scopeBounds.top + document.documentElement.scrollTop - scrollableParent.scrollTop,
-        left: scopeBounds.left + document.documentElement.scrollLeft - scrollableParent.scrollLeft,
-    };
-    let calculated = calculatePosition(Object.assign({ triggerBounds, flyoutBounds, scopeOffset }, options));
-    if (!fullyVisible(calculated.styles) && !forcePosition) {
-        const order = getPositionOrder(position);
-        const mobileOrder = order.filter((position) => position === "top" || position === "bottom");
-        const test = (testOrder, extraOptions = {}) => {
-            const { fullWidth } = extraOptions;
-            testOrder.some((currentPosition) => {
-                const calculateOptions = Object.assign(Object.assign({}, options), { width: fullWidth ? "full" : options.width, position: currentPosition });
-                const tested = calculatePosition(Object.assign({ triggerBounds,
-                    flyoutBounds,
-                    scopeOffset }, calculateOptions));
-                if (fullyVisible(tested.styles)) {
-                    calculated = tested;
-                    return true;
-                }
-                return false;
-            });
-        };
-        test(order);
-        if (!fullyVisible(calculated.styles)) {
-            test(mobileOrder, { fullWidth: true });
-        }
-    }
-    targetClone.parentNode.removeChild(targetClone);
-    return calculated;
-};
-const flyoutReducer = (state, action) => {
-    switch (action.type) {
-        case "render":
-            if (state.status !== "idle")
-                return state;
-            // Disable events before it's positioned to avoid mouseleave getting triggered
-            return Object.assign(Object.assign({}, state), { status: "rendered", styles: Object.assign({ pointerEvents: "none" }, resetStyles) });
-        case "position":
-            if (state.status !== "rendered")
-                return state;
-            return Object.assign(Object.assign({}, state), { status: "positioned", position: action.payload.position, styles: Object.assign(Object.assign({}, defaultStyles), action.payload.styles) });
-        case "show":
-            if (state.status !== "positioned")
-                return state;
-            return Object.assign(Object.assign({}, state), { status: "visible" });
-        case "hide":
-            if (state.status !== "visible")
-                return state;
-            return Object.assign(Object.assign({}, state), { status: "hidden" });
-        case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return Object.assign(Object.assign({}, state), { status: "idle", styles: resetStyles });
-        default:
-            throw new Error("Invalid reducer type");
-    }
-};
-const useFlyout = (originRef, targetRef, options) => {
-    const { position: defaultPosition = "bottom", forcePosition, width } = options;
-    const [isRTL] = useRTL();
-    const [state, dispatch] = React.useReducer(flyoutReducer, {
-        position: defaultPosition,
-        styles: defaultStyles,
-        status: "idle",
-    });
-    const render = React.useCallback(() => {
-        dispatch({ type: "render" });
-    }, []);
-    const show = React.useCallback(() => {
-        dispatch({ type: "show" });
-    }, []);
-    const hide = React.useCallback(() => {
-        dispatch({ type: "hide" });
-    }, []);
-    const remove = React.useCallback(() => {
-        dispatch({ type: "remove" });
-    }, []);
-    const updatePosition = React.useCallback(() => {
-        if (!originRef.current || !targetRef.current)
-            return;
-        const nextFlyoutData = flyout(originRef.current, targetRef.current, {
-            width,
-            position: defaultPosition,
-            forcePosition,
-            rtl: isRTL,
-        });
-        dispatch({ type: "position", payload: nextFlyoutData });
-    }, [originRef, targetRef, defaultPosition, isRTL, forcePosition, width]);
-    React.useEffect(() => {
-        if (state.status === "rendered")
-            updatePosition();
-    }, [state.status, updatePosition]);
-    return React.useMemo(() => ({
-        position: state.position,
-        styles: state.styles,
-        status: state.status,
-        updatePosition,
-        render,
-        hide,
-        remove,
-        show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
-};
-export default useFlyout;

package/components/_private/HiddenInput/HiddenInput.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../../utilities/helpers.js";
-import s from "./HiddenInput.module.css";
-const HiddenInput = (props) => {
-    const { name, value, type, onChange, onFocus, onBlur, checked, defaultChecked, disabled, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className);
-    return (_jsx("input", Object.assign({}, attributes, { className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: onChange, onFocus: onFocus || (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus), onBlur: onBlur || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur) })));
-};
-export default HiddenInput;

package/components/_private/Portal/Portal.js

@@ -1,34 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import ReactDOM from "react-dom";
-import Theme from "../../Theme/index.js";
-const PortalScopeContext = React.createContext({});
-export const usePortalScope = () => {
-    return React.useContext(PortalScopeContext);
-};
-/**
- * Disclaimer: Works only for components that don't show the portal immediately
- * That gives Portal time to receive scope on first render
- */
-const Portal = (props) => {
-    const { children, targetRef } = props;
-    /**
-     * Check for parent portal to render inside it
-     * To avoid z-iondex issues
-     * Example:
-     * Dropdown rendered on the page should render under the modal
-     * Dropdown inside the modal should render above it
-     */
-    const portal = usePortalScope();
-    const nextScopeRef = targetRef || portal.scopeRef;
-    /* Preserve the current theme when rendered in body */
-    return ReactDOM.createPortal(_jsx(Theme, { children: children }), (nextScopeRef === null || nextScopeRef === void 0 ? void 0 : nextScopeRef.current) || document.body);
-};
-function PortalScope(props) {
-    const { children } = props;
-    const ref = React.useRef(null);
-    return (_jsx(PortalScopeContext.Provider, { value: { scopeRef: ref }, children: children(ref) }));
-}
-Portal.Scope = PortalScope;
-export default Portal;

package/config/tailwind.d.ts

@@ -1,2 +0,0 @@
-import { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "textColor" | "borderColor" | "colors" | "borderRadius" | "spacing" | "boxShadow" | "screens", Record<string, string>>;

package/hooks/_private/useIsDismissible.js

@@ -1,45 +0,0 @@
-/**
- * Singleton hook to check if multiple elements can be dismissed and returns flag only for the latest one
- * Example: Use to only close the latest opened Flyout/Modal
- */
-import React from "react";
-import useElementId from "../useElementId.js";
-let queue = {};
-let latestId = null;
-const removeFromQueue = (id) => {
-    // Ignore removal of non-existing ids when called on component mount with active: false
-    if (!queue[id])
-        return;
-    if (id === latestId)
-        latestId = queue[id].parentId;
-    delete queue[id];
-    // Clear up all unused ids after the queue is resolved
-    if (latestId === null)
-        queue = {};
-};
-const addToQueue = (id, contentRef, triggerRef) => {
-    var _a;
-    const parentItem = latestId ? queue[latestId] : undefined;
-    const insideParent = (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) &&
-        parentItem &&
-        ((_a = parentItem.contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(triggerRef.current));
-    if (!insideParent && triggerRef && latestId) {
-        removeFromQueue(latestId);
-    }
-    queue[id] = { parentId: latestId, triggerRef, contentRef };
-    latestId = id;
-};
-const useIsDismissible = (active = false, contentRef, triggerRef) => {
-    const id = useElementId();
-    const isDismissible = React.useCallback(() => latestId === id, [id]);
-    React.useEffect(() => {
-        if (active) {
-            addToQueue(id, contentRef, triggerRef);
-        }
-        else {
-            removeFromQueue(id);
-        }
-    }, [active, id, contentRef, triggerRef]);
-    return isDismissible;
-};
-export default useIsDismissible;

package/hooks/_private/useSingletonHotkeys.js

@@ -1,183 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-/**
- * Utilities
- */
-const COMBINATION_DELIMETER = "+";
-const pressedMap = {};
-let modifiedKeys = [];
-const formatHotkey = (hotkey) => {
-    if (hotkey === " ")
-        return hotkey;
-    return hotkey.replace(/\s/g, "").toLowerCase();
-};
-// Normalize passed key combinations to turn them into a consistent ids
-const getHotkeyId = (hotkey) => {
-    return formatHotkey(hotkey).split(COMBINATION_DELIMETER).sort().join(COMBINATION_DELIMETER);
-};
-const getEventKey = (e) => {
-    if (!e.key)
-        return;
-    // Having alt pressed modifies e.key value, so relying on e.code for it
-    if (e.altKey && e.key !== "Alt") {
-        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
-    }
-    return e.key.toLowerCase();
-};
-const walkHotkeys = (hotkeys, cb) => {
-    Object.keys(hotkeys).forEach((key) => {
-        key.split(",").forEach((hotkey) => {
-            const data = hotkeys[key];
-            if (!data)
-                return;
-            cb(getHotkeyId(hotkey), data);
-        });
-    });
-};
-export class HotkeyStore {
-    constructor() {
-        this.hotkeyMap = {};
-        this.getSize = () => Object.keys(this.hotkeyMap).length;
-        this.bindHotkeys = (hotkeys, ref, options) => {
-            walkHotkeys(hotkeys, (id, hotkeyData) => {
-                if (!hotkeyData)
-                    return;
-                if (!this.hotkeyMap[id]) {
-                    this.hotkeyMap[id] = new Set();
-                }
-                this.hotkeyMap[id].add({ callback: hotkeyData, ref, options });
-            });
-        };
-        this.unbindHotkeys = (hotkeys) => {
-            walkHotkeys(hotkeys, (id, hotkeyCallback) => {
-                var _a, _b;
-                if (!hotkeyCallback)
-                    return;
-                (_a = this.hotkeyMap[id]) === null || _a === void 0 ? void 0 : _a.forEach((data) => {
-                    if (data.callback === hotkeyCallback) {
-                        this.hotkeyMap[id].delete(data);
-                    }
-                });
-                if (!((_b = this.hotkeyMap[id]) === null || _b === void 0 ? void 0 : _b.size)) {
-                    delete this.hotkeyMap[id];
-                }
-            });
-        };
-        this.handleKeyDown = (pressedMap, e) => {
-            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.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))) {
-                            return;
-                        }
-                        const resolvedEvent = pressedMap[pressedId];
-                        if (data.options.preventDefault) {
-                            resolvedEvent === null || resolvedEvent === void 0 ? void 0 : resolvedEvent.preventDefault();
-                        }
-                        data.callback(resolvedEvent);
-                    });
-                }
-            });
-        };
-    }
-}
-const globalHotkeyStore = new HotkeyStore();
-/**
- * Components / Hooks
- */
-export const HotkeyContext = React.createContext({});
-export const SingletonHotkeysProvider = (props) => {
-    const { children } = props;
-    // eslint-disable-next-line
-    const [_, setTriggerCount] = React.useState(0);
-    // Only handle key presses when there is at least one hook listening for hotkeys
-    const [hooksCount, setHooksCount] = React.useState(0);
-    const addPressedKey = React.useCallback((e) => {
-        if (e.repeat || hooksCount === 0)
-            return;
-        const eventKey = getEventKey(e);
-        if (!eventKey)
-            return;
-        pressedMap[eventKey] = 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 (e.metaKey)
-            modifiedKeys.push(...Object.keys(pressedMap));
-        if (pressedMap.Meta)
-            modifiedKeys.push(eventKey);
-    }, [hooksCount]);
-    const removePressedKey = React.useCallback((e) => {
-        if (hooksCount === 0)
-            return;
-        const eventKey = getEventKey(e);
-        if (!eventKey)
-            return;
-        delete pressedMap[eventKey];
-        if (eventKey === "meta" || eventKey === "control") {
-            delete pressedMap.mod;
-        }
-        if (eventKey === "meta") {
-            modifiedKeys.forEach((key) => {
-                if (!pressedMap[key])
-                    return;
-                delete pressedMap[key];
-            });
-            modifiedKeys = [];
-        }
-        setTriggerCount(Object.keys(pressedMap).length);
-    }, [hooksCount]);
-    const isPressed = (hotkey) => {
-        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
-        if (keys.some((key) => !pressedMap[key]))
-            return false;
-        return true;
-    };
-    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
-        return () => {
-            setHooksCount((prev) => prev - 1);
-            globalHotkeyStore.unbindHotkeys(hotkeys);
-        };
-    }, []);
-    const handleWindowKeyDown = React.useCallback((e) => {
-        // Browsers trigger keyboard event without passing e.key when you click on autocomplete
-        if (!e.key)
-            return;
-        addPressedKey(e);
-        globalHotkeyStore.handleKeyDown(pressedMap, e);
-    }, [addPressedKey]);
-    const handleWindowKeyUp = React.useCallback((e) => {
-        if (!e.key)
-            return;
-        removePressedKey(e);
-    }, [removePressedKey]);
-    React.useEffect(() => {
-        window.addEventListener("keydown", handleWindowKeyDown);
-        window.addEventListener("keyup", handleWindowKeyUp);
-        return () => {
-            window.removeEventListener("keydown", handleWindowKeyDown);
-            window.removeEventListener("keyup", handleWindowKeyUp);
-        };
-    }, [handleWindowKeyDown, handleWindowKeyUp]);
-    return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
-};
-const useSingletonHotkeys = () => React.useContext(HotkeyContext);
-export default useSingletonHotkeys;

package/hooks/tests/useHotkeys.stories.js

@@ -1,24 +0,0 @@
-import useHotkeys from "../useHotkeys.js";
-import View from "../../components/View/index.js";
-export default { title: "Hooks/useHotkeys" };
-function Example() {
-    const { checkHotkeyState } = useHotkeys({
-        "shift + b + n": null,
-    });
-    const active = checkHotkeyState("shift + b + n");
-    const shiftActive = checkHotkeyState("shift");
-    const bActive = checkHotkeyState("b");
-    const nActive = checkHotkeyState("n");
-    return (<View animated gap={2} direction="row" backgroundColor={active ? "positive-faded" : undefined} padding={2} borderRadius="small">
-			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={shiftActive ? "neutral-faded" : "elevation-raised"} shadow={shiftActive ? undefined : "raised"}>
-				Shift
-			</View>
-			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={bActive ? "neutral-faded" : "elevation-raised"} shadow={bActive ? undefined : "raised"}>
-				b
-			</View>
-			<View paddingInline={4} paddingBlock={2} borderRadius="small" borderColor="neutral-faded" animated backgroundColor={nActive ? "neutral-faded" : "elevation-raised"} shadow={nActive ? undefined : "raised"}>
-				n
-			</View>
-		</View>);
-}
-export const state = () => <Example />;