@reshaped/headless 3.10.0-canary.10

package/dist/hooks/useHandlerRef.js

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+import React from "react";
+import { type Hotkeys } from "./_internal/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

@@ -0,0 +1,27 @@
+"use client";
+import React from "react";
+import { useSingletonHotkeys } from "./_internal/useSingletonHotkeys.js";
+const useHotkeys = (hotkeys, deps = [], options) => {
+    const { addHotkeys, isPressed } = useSingletonHotkeys();
+    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

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

package/dist/hooks/useIsomorphicLayoutEffect.js

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

package/dist/hooks/useKeyboardArrowNavigation.d.ts

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,2 @@
+import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode";
+export default useSingletonKeyboardMode;

package/dist/hooks/useKeyboardMode.js

@@ -0,0 +1,2 @@
+import { useSingletonKeyboardMode } from "./_internal/useSingletonKeyboardMode.js";
+export default useSingletonKeyboardMode;

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,63 @@
+import { keys } from "@reshaped/utilities";
+import React from "react";
+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

@@ -0,0 +1,2 @@
+import { useSingletonRTL } from "./_internal/useSingletonRTL";
+export default useSingletonRTL;

package/dist/hooks/useRTL.js

@@ -0,0 +1,2 @@
+import { useSingletonRTL } from "./_internal/useSingletonRTL.js";
+export default useSingletonRTL;

package/dist/hooks/useScrollLock.d.ts

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,25 @@
+"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

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

package/dist/hooks/useToggle.js

@@ -0,0 +1,19 @@
+"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;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { classNames, TrapFocus } from "@reshaped/utilities";
+export { default as Actionable, type ActionableRef, type ActionableProps, } from "./components/Actionable";
+export { default as Reshaped, type ReshapedProps } from "./components/Reshaped";
+export { default as useHandlerRef } from "./hooks/useHandlerRef";
+export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
+export { default as useRTL } from "./hooks/useRTL";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
+export { default as useScrollLock } from "./hooks/useScrollLock";
+export { default as useToggle } from "./hooks/useToggle";
+export type { ClassName } from "@reshaped/utilities";
+export type { Attributes, CSSVariable, StyleAttribute } from "./types/global";

package/dist/index.js

@@ -0,0 +1,15 @@
+// Utilities
+export { classNames, TrapFocus } from "@reshaped/utilities";
+// Components
+export { default as Actionable, } from "./components/Actionable/index.js";
+export { default as Reshaped } from "./components/Reshaped/index.js";
+// Hooks
+export { default as useHandlerRef } from "./hooks/useHandlerRef.js";
+export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useKeyboardArrowNavigation } from "./hooks/useKeyboardArrowNavigation.js";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
+export { default as useRTL } from "./hooks/useRTL.js";
+export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
+export { default as useScrollLock } from "./hooks/useScrollLock.js";
+export { default as useToggle } from "./hooks/useToggle.js";

package/dist/internal.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Internal utilities re-used in other Reshaped components but not meant to be used as a public API
+ * Their API is subject to change without a major version bump.
+ *
+ * If you want to use one of these utilities, open an issue or a PR about moving it to the public API file
+ */
+export { Flyout } from "@reshaped/utilities";
+export { disableScroll, enableScroll, rafThrottle, checkKeyboardMode, findParent, getFocusableElements, focusableSelector, type FocusableElement, type TrapMode, type Coordinates, } from "@reshaped/utilities/internal";

package/dist/internal.js

@@ -0,0 +1,8 @@
+/**
+ * Internal utilities re-used in other Reshaped components but not meant to be used as a public API
+ * Their API is subject to change without a major version bump.
+ *
+ * If you want to use one of these utilities, open an issue or a PR about moving it to the public API file
+ */
+export { Flyout } from "@reshaped/utilities";
+export { disableScroll, enableScroll, rafThrottle, checkKeyboardMode, findParent, getFocusableElements, focusableSelector, } from "@reshaped/utilities/internal";

package/dist/types/global.d.ts

@@ -0,0 +1,7 @@
+export type CSSVariable = `--${string}`;
+export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
+type DataAttributes = object | Record<`data-${string}`, string | boolean>;
+export type Attributes<TagName extends keyof React.JSX.IntrinsicElements | void = void> = (TagName extends keyof React.JSX.IntrinsicElements ? React.JSX.IntrinsicElements[TagName] : React.HTMLAttributes<HTMLElement>) & DataAttributes & {
+    style?: StyleAttribute;
+};
+export {};

package/dist/types/global.js

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@reshaped/headless",
+  "description": "Headless components and utilities for React",
+  "version": "3.10.0-canary.10",
+  "license": "MIT",
+  "homepage": "https://reshaped.so",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/reshaped-ui/reshaped.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/reshaped-ui/reshaped/issues"
+  },
+  "author": {
+    "name": "Dmitry Belyaev",
+    "email": "blv.dmitry@gmail.com",
+    "url": "https://reshaped.so"
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./internal": {
+      "types": "./dist/internal.d.ts",
+      "import": "./dist/internal.js",
+      "default": "./dist/internal.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@reshaped/utilities": "3.10.0-canary.10"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "tsc-watch --onSuccess \"resolve-tspaths\"",
+    "build": "tsc && resolve-tspaths"
+  }
+}