npm - reshaped - Versions diffs - 4.2.0 → 4.3.0-canary.1 - Mend

reshaped 4.2.0 → 4.3.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (704) hide show

package/dist/hooks/tests/useScrollLock.stories.js CHANGED Viewed

@@ -1,42 +1,36 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testContainerAsync = exports.container = exports.origin = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const useScrollLock_1 = __importDefault(require("../useScrollLock"));
-exports.default = {
+import React from "react";
+import { expect, userEvent } from "storybook/test";
+import useScrollLock from "../useScrollLock.js";
+export default {
     title: "Hooks/useScrollLock",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
     render: () => {
-        const { lockScroll, unlockScroll, scrollLocked } = (0, useScrollLock_1.default)();
-        return (<react_1.default.Fragment>
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();
+        return (<React.Fragment>
 				<button onClick={scrollLocked ? unlockScroll : lockScroll}>
 					{scrollLocked ? "Unlock" : "Lock"}
 				</button>
 				<div style={{ height: "150vh" }}/>
-			</react_1.default.Fragment>);
+			</React.Fragment>);
     },
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.documentElement).toHaveStyle("overflow: hidden");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.documentElement).not.toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.documentElement).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.documentElement).not.toHaveStyle("overflow: hidden");
     },
 };
-exports.origin = {
+export const origin = {
     name: "originRef",
     render: () => {
-        const originRef = react_1.default.useRef(null);
-        const { lockScroll, unlockScroll, scrollLocked } = (0, useScrollLock_1.default)({ originRef });
+        const originRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });
         return (<div style={{ overflow: "auto", height: 100 }} ref={originRef} data-testid="root">
 				<div style={{ height: 200, padding: 15, backgroundColor: "#1f1f1f", borderRadius: 8 }}>
 					<button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</button>
@@ -46,18 +40,18 @@ exports.origin = {
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
         const root = canvas.getByTestId("root");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.body).not.toHaveStyle("overflow: hidden");
-        (0, test_1.expect)(root).toHaveStyle("overflow: hidden");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(root).not.toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
     },
 };
-exports.container = {
+export const container = {
     name: "containerRef",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        const { lockScroll, unlockScroll, scrollLocked } = (0, useScrollLock_1.default)({ containerRef });
+        const containerRef = React.useRef(null);
+        const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });
         return (<div style={{ overflow: "auto", height: 100 }} ref={containerRef} data-testid="root">
 				<button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</button>
 			</div>);
@@ -65,19 +59,19 @@ exports.container = {
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
         const root = canvas.getByTestId("root");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.body).not.toHaveStyle("overflow: hidden");
-        (0, test_1.expect)(root).toHaveStyle("overflow: hidden");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(root).not.toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(document.body).not.toHaveStyle("overflow: hidden");
+        expect(root).toHaveStyle("overflow: hidden");
+        await userEvent.click(button);
+        expect(root).not.toHaveStyle("overflow: hidden");
     },
 };
-exports.testContainerAsync = {
+export const testContainerAsync = {
     name: "test: containerRef locked count",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        const globalLock = (0, useScrollLock_1.default)();
-        const scopedLock = (0, useScrollLock_1.default)({ containerRef });
+        const containerRef = React.useRef(null);
+        const globalLock = useScrollLock();
+        const scopedLock = useScrollLock({ containerRef });
         return (<div style={{ display: "flex", gap: 16, flexDirection: "row" }} ref={containerRef}>
 				<button onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}>
 					Toggle
@@ -89,10 +83,10 @@ exports.testContainerAsync = {
     },
     play: async ({ canvas }) => {
         const [buttonGlobal, buttonScoped] = canvas.getAllByRole("button");
-        await test_1.userEvent.click(buttonGlobal);
-        (0, test_1.expect)(document.documentElement).toHaveStyle("overflow: hidden");
-        await test_1.userEvent.click(buttonScoped);
-        await test_1.userEvent.click(buttonGlobal);
-        (0, test_1.expect)(document.documentElement).not.toHaveStyle("overflow: hidden");
+        await userEvent.click(buttonGlobal);
+        expect(document.documentElement).toHaveStyle("overflow: hidden");
+        await userEvent.click(buttonScoped);
+        await userEvent.click(buttonGlobal);
+        expect(document.documentElement).not.toHaveStyle("overflow: hidden");
     },
 };

package/dist/hooks/tests/useToggle.stories.js CHANGED Viewed

@@ -1,61 +1,55 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deactivate = exports.activate = exports.toggle = void 0;
-const test_1 = require("storybook/test");
-const useToggle_1 = __importDefault(require("../useToggle"));
-exports.default = {
+import { expect, userEvent } from "storybook/test";
+import useToggle from "../useToggle.js";
+export default {
     title: "Hooks/useToggle",
     parameters: {
         chromatic: { disableSnapshot: true },
     },
 };
-exports.toggle = {
+export const toggle = {
     name: "toggle",
     render: () => {
-        const { toggle, active } = (0, useToggle_1.default)();
+        const { toggle, active } = useToggle();
         return (<button onClick={() => toggle()} data-active={active}>
 				{active ? "Deactivate" : "Activate"}
 			</button>);
     },
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("false");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("true");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("false");
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
     },
 };
-exports.activate = {
+export const activate = {
     name: "activate",
     render: () => {
-        const { activate, active } = (0, useToggle_1.default)();
+        const { activate, active } = useToggle();
         return (<button onClick={activate} data-active={active}>
 				Activate
 			</button>);
     },
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("false");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("true");
+        expect(button.getAttribute("data-active")).toBe("false");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("true");
     },
 };
-exports.deactivate = {
+export const deactivate = {
     name: "deactivate",
     render: () => {
-        const { deactivate, active } = (0, useToggle_1.default)(true);
+        const { deactivate, active } = useToggle(true);
         return (<button onClick={deactivate} data-active={active}>
 				Deactivate
 			</button>);
     },
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("true");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button.getAttribute("data-active")).toBe("false");
+        expect(button.getAttribute("data-active")).toBe("true");
+        await userEvent.click(button);
+        expect(button.getAttribute("data-active")).toBe("false");
     },
 };

package/dist/hooks/useHandlerRef.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+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

package/dist/hooks/useHotkeys.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react";
-import { type Hotkeys } from "./_internal/useSingletonHotkeys";
+import { type Hotkeys } from "./_internal/useSingletonHotkeys.js";
 declare const useHotkeys: <Element extends HTMLElement>(hotkeys: Hotkeys, deps?: unknown[], options?: {
     ref?: React.RefObject<Element | null>;
     disabled?: boolean;

package/dist/hooks/useHotkeys.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import { useSingletonHotkeys } from "./_internal/useSingletonHotkeys";
+import { useSingletonHotkeys } from "./_internal/useSingletonHotkeys.js";
 const useHotkeys = (hotkeys, deps = [], options) => {
     const { addHotkeys, isPressed } = useSingletonHotkeys();
     const generatedRef = React.useRef(null);

package/dist/hooks/useIsDismissible.js CHANGED Viewed

@@ -3,7 +3,7 @@
  * Example: Use to only close the latest opened Flyout/Modal
  */
 import React from "react";
-import useElementId from "../hooks/useElementId";
+import useElementId from "../hooks/useElementId.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {

package/dist/hooks/useKeyboardArrowNavigation.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { focusFirstElement, focusLastElement, focusNextElement, focusPreviousElement, getFocusableElements, } from "@reshaped/utilities/internal";
-import useHotkeys from "./useHotkeys";
+import useHotkeys from "./useHotkeys.js";
 const useKeyboardArrowNavigation = (props) => {
     const { ref, disabled, orientation, circular } = props;
     const backHotkeys = [];

package/dist/hooks/useKeyboardMode.d.ts CHANGED Viewed

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

package/dist/hooks/useKeyboardMode.js CHANGED Viewed

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

package/dist/hooks/useOnClickOutside.js CHANGED Viewed

@@ -1,15 +1,16 @@
 import React from "react";
 import { keys } from "@reshaped/utilities";
-import useHandlerRef from "./useHandlerRef";
+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
+     * before we checked if it's inside the refs.
+     * Null means there was no mousedown since the hook got enabled
      */
-    const isMouseDownInsideRef = React.useRef(false);
+    const isMouseDownInsideRef = React.useRef(null);
     const checkEventInsideRefs = (event) => {
         const eventEl = event.composedPath()[0];
         if (!eventEl)
@@ -17,10 +18,13 @@ const useOnClickOutside = (refs, handler, options) => {
         return refs.some((elRef) => !!elRef.current && (elRef.current === eventEl || elRef.current.contains(eventEl)));
     };
     React.useEffect(() => {
+        if (disabled)
+            return;
         /**
-         * Not checking for disabled here since some components can enable the hook
-         * after it was clicked
+         * Some components can enable the hook after the mousedown of the click,
+         * e.g. Flyout with focus trigger, so the click target is checked until the next mousedown
          */
+        isMouseDownInsideRef.current = null;
         const handleMouseDown = (event) => {
             isMouseDownInsideRef.current = checkEventInsideRefs(event);
         };
@@ -38,32 +42,32 @@ const useOnClickOutside = (refs, handler, options) => {
             document.removeEventListener("keydown", handleKeyDown);
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
-    }, [...refs]);
+    }, [disabled, ...refs]);
     React.useEffect(() => {
         if (!handlerRef.current)
             return;
         if (disabled)
             return;
         const handleClick = (event) => {
-            if (event.type === "contextmenu") {
-                /**
-                 * Context menu events can be claimed by a handler that opens a menu of its own,
-                 * which prevents the default browser behavior. Such events open a new flyout
-                 * instead of dismissing the current one, so they're not outside clicks
-                 */
-                if (event.defaultPrevented)
-                    return;
-                isMouseDownInsideRef.current = checkEventInsideRefs(event);
-            }
-            if (isMouseDownInsideRef.current)
+            if (isMouseDownInsideRef.current ?? checkEventInsideRefs(event))
+                return;
+            handlerRef.current?.(event);
+        };
+        /**
+         * Capture phase closes the content before another context menu opens on the same event,
+         * while the content opened by this event subscribes too late to get closed by it.
+         * Target is checked directly since the context menu key doesn't trigger mousedown
+         */
+        const handleContextMenu = (event) => {
+            if (checkEventInsideRefs(event))
                 return;
             handlerRef.current?.(event);
         };
         document.addEventListener("click", handleClick);
-        document.addEventListener("contextmenu", handleClick);
+        document.addEventListener("contextmenu", handleContextMenu, { capture: true });
         return () => {
             document.removeEventListener("click", handleClick);
-            document.removeEventListener("contextmenu", handleClick);
+            document.removeEventListener("contextmenu", handleContextMenu, { capture: true });
         };
         // oxlint-disable-next-line react-hooks/exhaustive-deps
     }, [handlerRef, disabled, ...refs]);

package/dist/hooks/useRTL.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { useSingletonRTL } from "./_internal/useSingletonRTL";
-export default useSingletonRTL;
+declare const useRTL: () => [boolean, (state: boolean) => void];
+export default useRTL;

package/dist/hooks/useRTL.js CHANGED Viewed

@@ -1,2 +1,4 @@
-import { useSingletonRTL } from "./_internal/useSingletonRTL";
-export default useSingletonRTL;
+import React from "react";
+import { SingletonRTLContext } from "./_internal/useSingletonRTL.js";
+const useRTL = () => React.useContext(SingletonRTLContext).rtl;
+export default useRTL;

package/dist/hooks/useResponsiveClientValue.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
-import type * as G from "../types/global";
+import type * as G from "../types/global.js";
 declare const useResponsiveClientValue: <T>(value: G.Responsive<T>) => T | undefined;
 export default useResponsiveClientValue;

package/dist/hooks/useResponsiveClientValue.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use client";
 import { useMemo } from "react";
-import useViewport from "../hooks/useViewport";
+import useViewport from "../hooks/useViewport.js";
 const useResponsiveClientValue = (value) => {
     const viewport = useViewport();
     return useMemo(() => {

package/dist/hooks/useViewport.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-declare const useViewport: () => import("../types/global").Viewport;
+declare const useViewport: () => import("../types/global.js").Viewport;
 export default useViewport;

package/dist/hooks/useViewport.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import useSingletonViewport from "../hooks/_internal/useSingletonViewport";
+import useSingletonViewport from "../hooks/_internal/useSingletonViewport.js";
 const useViewport = () => {
     const { viewport } = useSingletonViewport();
     return viewport;