reshaped 3.10.0-canary.6 → 3.10.0-canary.8

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

@@ -1,35 +0,0 @@
-import React from "react";
-/**
- * Types
- */
-type Callback = (e?: KeyboardEvent) => void;
-type PressedMap = Map<string, KeyboardEvent>;
-export type Hotkeys = Record<string, Callback | null>;
-type HotkeyOptions = {
-    preventDefault?: boolean;
-};
-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, Set<HotkeyData>>;
-    getSize: () => number;
-    bindHotkeys: (hotkeys: Hotkeys, ref: React.RefObject<HTMLElement | null>, options: HotkeyOptions) => void;
-    unbindHotkeys: (hotkeys: Hotkeys) => void;
-    handleKeyDown: (pressedMap: PressedMap, e: KeyboardEvent) => void;
-}
-/**
- * Components / Hooks
- */
-export declare const HotkeyContext: React.Context<Context>;
-export declare const SingletonHotkeysProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-declare const useSingletonHotkeys: () => Context;
-export default useSingletonHotkeys;

package/dist/hooks/_private/useSingletonHotkeys.js

@@ -1,191 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-/**
- * Utilities
- */
-const COMBINATION_DELIMETER = "+";
-const pressedMap = new Map();
-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 && /^[Key|Digit|Numpad]/.test(e.code)) {
-        return e.code.toLowerCase().replace(/key|digit|numpad/, "");
-    }
-    return e.key.toLowerCase();
-};
-// Removing the unknown gets highlighted an invalid syntax
-// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
-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 {
-    hotkeyMap = {};
-    getSize = () => Object.keys(this.hotkeyMap).length;
-    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 });
-        });
-    };
-    unbindHotkeys = (hotkeys) => {
-        walkHotkeys(hotkeys, (id, hotkeyCallback) => {
-            if (!hotkeyCallback)
-                return;
-            this.hotkeyMap[id]?.forEach((data) => {
-                if (data.callback === hotkeyCallback) {
-                    this.hotkeyMap[id].delete(data);
-                }
-            });
-            if (!this.hotkeyMap[id]?.size) {
-                delete this.hotkeyMap[id];
-            }
-        });
-    };
-    handleKeyDown = (pressedMap, e) => {
-        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];
-        /**
-         * Support for `mod` that represents both Mac and Win keyboards
-         * We create the hotkeyId again to sort the mod key correctly
-         */
-        const controlToModPressedId = getHotkeyId(pressedId.replace("control", "mod"));
-        const metaToModPressedId = getHotkeyId(pressedId.replace("meta", "mod"));
-        const hotkeyControlModData = pressedFormattedKeys.includes("control") && this.hotkeyMap[controlToModPressedId];
-        const hotkeyMetaModData = pressedFormattedKeys.includes("meta") && this.hotkeyMap[metaToModPressedId];
-        [hotkeyData, hotkeyControlModData, hotkeyMetaModData].forEach((hotkeyData) => {
-            if (!hotkeyData)
-                return;
-            if (hotkeyData?.size) {
-                hotkeyData.forEach((data) => {
-                    const eventTarget = e.composedPath()[0];
-                    if (data.ref.current &&
-                        !(eventTarget === data.ref.current || data.ref.current.contains(eventTarget))) {
-                        return;
-                    }
-                    const resolvedEvent = pressedMap.get(pressedId);
-                    if (data.options.preventDefault) {
-                        resolvedEvent?.preventDefault();
-                        e.preventDefault();
-                    }
-                    data.callback(e);
-                });
-            }
-        });
-    };
-}
-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.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(...pressedMap.keys());
-        if (pressedMap.has("Meta"))
-            modifiedKeys.push(eventKey);
-    }, [hooksCount]);
-    const removePressedKey = React.useCallback((e) => {
-        if (hooksCount === 0)
-            return;
-        const eventKey = getEventKey(e);
-        if (!eventKey)
-            return;
-        pressedMap.delete(eventKey);
-        if (eventKey === "meta" || eventKey === "control") {
-            pressedMap.delete("mod");
-        }
-        if (eventKey === "meta") {
-            modifiedKeys.forEach((key) => {
-                if (!pressedMap.has(key))
-                    return;
-                pressedMap.delete(key);
-            });
-            modifiedKeys = [];
-        }
-        setTriggerCount(pressedMap.size);
-    }, [hooksCount]);
-    const isPressed = (hotkey) => {
-        const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
-        if (keys.some((key) => !pressedMap.has(key)))
-            return false;
-        return true;
-    };
-    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]);
-    const handleWindowBlur = React.useCallback(() => {
-        pressedMap.clear();
-        modifiedKeys = [];
-    }, []);
-    const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
-        globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
-        return () => {
-            setHooksCount((prev) => prev - 1);
-            globalHotkeyStore.unbindHotkeys(hotkeys);
-        };
-    }, []);
-    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, handleWindowBlur]);
-    return (_jsx(HotkeyContext.Provider, { value: { addHotkeys, isPressed }, children: children }));
-};
-const useSingletonHotkeys = () => React.useContext(HotkeyContext);
-export default useSingletonHotkeys;

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

@@ -1,13 +0,0 @@
-import React from "react";
-type ContextProps = {
-    disabledRef: React.RefObject<boolean> | null;
-    disable: () => void;
-    enable: () => void;
-    activate: () => void;
-    deactivate: () => void;
-};
-export declare const SingletonKeyboardModeContext: React.Context<ContextProps>;
-export declare const SingletonKeyboardModeProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-export {};

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,58 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { activateKeyboardMode, deactivateKeyboardMode } from "@reshaped/utilities/internal";
-import React from "react";
-import * as keys from "../../constants/keys.js";
-export const SingletonKeyboardModeContext = React.createContext({
-    disabledRef: null,
-    disable: () => { },
-    enable: () => { },
-    activate: () => { },
-    deactivate: () => { },
-});
-export const SingletonKeyboardModeProvider = (props) => {
-    const disabledRef = React.useRef(false);
-    const disable = React.useCallback(() => {
-        disabledRef.current = true;
-    }, []);
-    const enable = React.useCallback(() => {
-        disabledRef.current = false;
-    }, []);
-    const activate = React.useCallback(() => {
-        if (disabledRef.current)
-            return;
-        activateKeyboardMode();
-    }, []);
-    const deactivate = React.useCallback(() => {
-        if (disabledRef.current)
-            return;
-        deactivateKeyboardMode();
-    }, []);
-    const handleKeyDown = React.useCallback((e) => {
-        if (e.metaKey || e.altKey || e.ctrlKey)
-            return;
-        // Prevent focus ring from appearing when using mouse but closing with esc
-        if (e.key === keys.ESC)
-            return;
-        activate();
-    }, [activate]);
-    const handleClick = React.useCallback(() => {
-        deactivate();
-    }, [deactivate]);
-    React.useEffect(() => {
-        window.addEventListener("keydown", handleKeyDown);
-        window.addEventListener("mousedown", handleClick);
-        return () => {
-            window.removeEventListener("keydown", handleKeyDown);
-            window.removeEventListener("mousedown", handleClick);
-        };
-    }, [handleClick, handleKeyDown]);
-    const value = React.useMemo(() => ({
-        disabledRef,
-        disable,
-        enable,
-        activate,
-        deactivate,
-    }), [disable, enable, activate, deactivate]);
-    return (_jsx(SingletonKeyboardModeContext.Provider, { value: value, children: props.children }));
-};

package/dist/hooks/useHandlerRef.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-/**
- * Hook for wrapping event handlers passed as props with a ref
- * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
- * While also making sure that function implementation stays up-to-date
- */
-declare const useHandlerRef: <T>(cb: T) => React.RefObject<T>;
-export default useHandlerRef;

package/dist/hooks/useHandlerRef.js

@@ -1,16 +0,0 @@
-import React from "react";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
-/**
- * Hook for wrapping event handlers passed as props with a ref
- * This way we can keep the instance of the ref the same and pass this ref to the effects dependency array
- * While also making sure that function implementation stays up-to-date
- */
-const useHandlerRef = (cb) => {
-    const ref = React.useRef(cb);
-    // Update the callback on every render, keeping the ref instance the same
-    useIsomorphicLayoutEffect(() => {
-        ref.current = cb;
-    }, [cb]);
-    return ref;
-};
-export default useHandlerRef;

package/dist/hooks/useHotkeys.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { type Hotkeys } from "./_private/useSingletonHotkeys";
-declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
-    ref?: React.RefObject<Element | null>;
-    disabled?: boolean;
-    preventDefault?: boolean;
-}) => {
-    ref: React.RefObject<Element | null>;
-    checkHotkeyState: (key: string) => boolean;
-};
-export default useHotkeys;

package/dist/hooks/useHotkeys.js

@@ -1,27 +0,0 @@
-"use client";
-import React from "react";
-import useSingletonHotkey from "./_private/useSingletonHotkeys.js";
-const useHotkeys = (hotkeys, deps = [], options) => {
-    const { addHotkeys, isPressed } = useSingletonHotkey();
-    const generatedRef = React.useRef(null);
-    const elementRef = options?.ref || generatedRef;
-    React.useEffect(() => {
-        if (options?.disabled)
-            return;
-        const remove = addHotkeys(hotkeys, elementRef, {
-            preventDefault: options?.preventDefault,
-        });
-        return () => remove?.();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        addHotkeys,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        Object.keys(hotkeys).join(","),
-        options?.disabled,
-        options?.preventDefault,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        ...deps,
-    ]);
-    return { ref: elementRef, checkHotkeyState: isPressed };
-};
-export default useHotkeys;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const useIsomorphicLayoutEffect: typeof React.useEffect;
-export default useIsomorphicLayoutEffect;

package/dist/hooks/useIsomorphicLayoutEffect.js

@@ -1,4 +0,0 @@
-"use client";
-import React from "react";
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-export default useIsomorphicLayoutEffect;

package/dist/hooks/useKeyboardArrowNavigation.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-type Props = {
-    ref: React.RefObject<HTMLElement | null>;
-    disabled?: boolean;
-    orientation?: "vertical" | "horizontal";
-    circular?: boolean;
-};
-declare const useKeyboardArrowNavigation: (props: Props) => void;
-export default useKeyboardArrowNavigation;

package/dist/hooks/useKeyboardArrowNavigation.js

@@ -1,62 +0,0 @@
-import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "@reshaped/utilities/internal";
-import React, { useEffect } from "react";
-import useHotkeys from "./useHotkeys.js";
-const useKeyboardArrowNavigation = (props) => {
-    const { ref, disabled, orientation, circular } = props;
-    const backHotkeys = [];
-    const forwardHotkeys = [];
-    if (!orientation || orientation === "vertical") {
-        backHotkeys.push("ArrowUp");
-        forwardHotkeys.push("ArrowDown");
-    }
-    if (!orientation || orientation === "horizontal") {
-        backHotkeys.push("ArrowLeft");
-        forwardHotkeys.push("ArrowRight");
-    }
-    const updateTabIndex = React.useCallback((options) => {
-        const { el, focusableElements } = options;
-        const initialEl = focusableElements.find((el) => el.getAttribute("tabindex") !== "-1");
-        const activeEl = el ?? initialEl ?? focusableElements[0];
-        focusableElements.forEach((el) => el.setAttribute("tabindex", "-1"));
-        activeEl?.setAttribute("tabindex", "0");
-    }, []);
-    useEffect(() => {
-        if (!ref.current)
-            return;
-        if (disabled)
-            return;
-        const focusableElements = getFocusableElements(ref.current);
-        updateTabIndex({ focusableElements });
-    }, [ref, updateTabIndex, disabled]);
-    useHotkeys({
-        [backHotkeys.join(", ")]: () => {
-            if (!ref.current)
-                return;
-            const data = focusPreviousElement(ref.current, { circular });
-            updateTabIndex(data);
-        },
-        [forwardHotkeys.join(", ")]: () => {
-            if (!ref.current)
-                return;
-            const data = focusNextElement(ref.current, { circular });
-            updateTabIndex(data);
-        },
-        Home: () => {
-            if (!ref.current)
-                return;
-            const data = focusFirstElement(ref.current);
-            updateTabIndex(data);
-        },
-        End: () => {
-            if (!ref.current)
-                return;
-            const data = focusLastElement(ref.current);
-            updateTabIndex(data);
-        },
-    }, [updateTabIndex, circular], {
-        ref,
-        preventDefault: true,
-        disabled,
-    });
-};
-export default useKeyboardArrowNavigation;

package/dist/hooks/useKeyboardMode.d.ts

@@ -1,7 +0,0 @@
-declare const useKeyboardMode: () => {
-    enable: () => void;
-    disable: () => void;
-    activate: () => void;
-    deactivate: () => void;
-};
-export default useKeyboardMode;

package/dist/hooks/useKeyboardMode.js

@@ -1,13 +0,0 @@
-"use client";
-import React from "react";
-import { SingletonKeyboardModeContext } from "./_private/useSingletonKeyboardMode.js";
-const useKeyboardMode = () => {
-    const singletonKeyboardMode = React.useContext(SingletonKeyboardModeContext);
-    return React.useMemo(() => ({
-        enable: singletonKeyboardMode.enable,
-        disable: singletonKeyboardMode.disable,
-        activate: singletonKeyboardMode.activate,
-        deactivate: singletonKeyboardMode.deactivate,
-    }), [singletonKeyboardMode]);
-};
-export default useKeyboardMode;

package/dist/hooks/useOnClickOutside.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const useOnClickOutside: (refs: React.RefObject<HTMLElement | null>[], handler: (event: Event) => void, options?: {
-    disabled?: boolean;
-}) => void;
-export default useOnClickOutside;

package/dist/hooks/useOnClickOutside.js

@@ -1,63 +0,0 @@
-import React from "react";
-import * as keys from "../constants/keys.js";
-import useHandlerRef from "./useHandlerRef.js";
-const useOnClickOutside = (refs, handler, options) => {
-    const { disabled } = options || {};
-    const handlerRef = useHandlerRef(handler);
-    /**
-     * We're checking the element position in the DOM on mousedown to make sure
-     * it happens before any other click events that could potentially remove the clicked el
-     * before we checked if it's inside the refs
-     */
-    const isMouseDownInsideRef = React.useRef(false);
-    React.useEffect(() => {
-        /**
-         * Not checking for disabled here since some components can enable the hook
-         * after it was clicked
-         */
-        const handleMouseDown = (event) => {
-            isMouseDownInsideRef.current = false;
-            const clickedEl = event.composedPath()[0];
-            refs.forEach((elRef) => {
-                if (!elRef.current)
-                    return;
-                if (elRef.current === clickedEl || elRef.current.contains(clickedEl)) {
-                    isMouseDownInsideRef.current = true;
-                }
-            });
-        };
-        const handleKeyDown = (event) => {
-            if (![keys.ENTER, keys.SPACE].includes(event.key))
-                return;
-            handleMouseDown(event);
-        };
-        document.addEventListener("mousedown", handleMouseDown, { passive: true });
-        document.addEventListener("touchstart", handleMouseDown, { passive: true });
-        document.addEventListener("keydown", handleKeyDown, { passive: true });
-        return () => {
-            document.removeEventListener("mousedown", handleMouseDown);
-            document.removeEventListener("touchstart", handleMouseDown);
-            document.removeEventListener("keydown", handleKeyDown);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [...refs]);
-    React.useEffect(() => {
-        if (!handlerRef.current)
-            return;
-        if (disabled)
-            return;
-        const handleClick = (event) => {
-            if ("button" in event && event.button === 2)
-                return;
-            if (isMouseDownInsideRef.current)
-                return;
-            handlerRef.current?.(event);
-        };
-        document.addEventListener("click", handleClick);
-        return () => {
-            document.removeEventListener("click", handleClick);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [handlerRef, disabled, ...refs]);
-};
-export default useOnClickOutside;

package/dist/hooks/useRTL.d.ts

@@ -1,2 +0,0 @@
-declare const useRTL: () => [boolean, (state: boolean) => void];
-export default useRTL;

package/dist/hooks/useRTL.js

@@ -1,7 +0,0 @@
-"use client";
-import React from "react";
-import { SingletonEnvironmentContext } from "./_private/useSingletonEnvironment.js";
-const useRTL = () => {
-    return React.useContext(SingletonEnvironmentContext).rtl;
-};
-export default useRTL;

package/dist/hooks/useScrollLock.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-declare const useScrollLock: (options?: {
-    containerRef?: React.RefObject<HTMLElement | null>;
-    originRef?: React.RefObject<HTMLElement | null>;
-}) => {
-    scrollLocked: boolean;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-};
-export default useScrollLock;

package/dist/hooks/useScrollLock.js

@@ -1,25 +0,0 @@
-"use client";
-import { lockScroll } from "@reshaped/utilities";
-import React from "react";
-const useScrollLock = (options) => {
-    const { containerRef, originRef } = options || {};
-    const [locked, setLocked] = React.useState(false);
-    const unlockScrollRef = React.useRef(null);
-    const handleLockScroll = React.useCallback(() => {
-        unlockScrollRef.current = lockScroll({
-            containerEl: containerRef?.current,
-            originEl: originRef?.current,
-            callback: () => setLocked(true),
-        });
-    }, [containerRef, originRef]);
-    const handleUnlockScroll = React.useCallback(() => {
-        unlockScrollRef.current?.({ callback: () => setLocked(false) });
-        unlockScrollRef.current = null;
-    }, []);
-    return React.useMemo(() => ({
-        scrollLocked: locked,
-        lockScroll: handleLockScroll,
-        unlockScroll: handleUnlockScroll,
-    }), [locked, handleLockScroll, handleUnlockScroll]);
-};
-export default useScrollLock;

package/dist/hooks/useToggle.d.ts

@@ -1,7 +0,0 @@
-declare const useToggle: (defaultValue?: boolean) => {
-    active: boolean;
-    activate: () => void;
-    deactivate: () => void;
-    toggle: (targetValue?: any) => void;
-};
-export default useToggle;

package/dist/hooks/useToggle.js

@@ -1,19 +0,0 @@
-"use client";
-import React from "react";
-const useToggle = (defaultValue) => {
-    const [active, setActive] = React.useState(defaultValue || false);
-    const activate = React.useCallback(() => {
-        setActive(true);
-    }, []);
-    const deactivate = React.useCallback(() => {
-        setActive(false);
-    }, []);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const toggle = React.useCallback((targetValue) => {
-        // Checking the targetValue type for backwards compatibility if something like handler events
-        // are passed automatically e.g. onClick={toggle}
-        setActive(typeof targetValue === "boolean" ? targetValue : (active) => !active);
-    }, []);
-    return React.useMemo(() => ({ active, activate, deactivate, toggle }), [activate, deactivate, toggle, active]);
-};
-export default useToggle;