@reshaped/headless 3.10.1 → 3.11.0-canary.1

package/dist/hooks/tests/useElementId.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const id: StoryObj;

package/dist/hooks/tests/useElementId.stories.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { expect, waitFor } from "storybook/test";
+import useElementId from "../useElementId.js";
+export default {
+    title: "Hooks/useElementId",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+const Component = (props) => {
+    const id = useElementId(props.id);
+    return _jsx("div", { id: id, children: id });
+};
+export const id = {
+    name: "passed id",
+    render: () => {
+        return _jsx(Component, { id: "hey" });
+    },
+    play: async () => {
+        waitFor(() => {
+            expect(document.querySelector("#hey")).toBeTruthy();
+        });
+    },
+};

package/dist/hooks/useElementId.d.ts

@@ -0,0 +1,2 @@
+declare const useElementId: (id?: string) => string;
+export default useElementId;

package/dist/hooks/useElementId.js

@@ -0,0 +1,8 @@
+import React from "react";
+const useElementId = (id) => {
+    const generatedId = React.useId();
+    if (id)
+        return id;
+    return generatedId;
+};
+export default useElementId;

package/dist/hooks/useIsDismissible.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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";
+type Ref = React.RefObject<HTMLElement | null>;
+declare const useIsDismissible: (args: {
+    active?: boolean;
+    contentRef: Ref;
+    triggerRef?: Ref;
+}) => () => boolean;
+export default useIsDismissible;

package/dist/hooks/useIsDismissible.js

@@ -0,0 +1,47 @@
+/**
+ * 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) => {
+    queue[id] = { parentId: latestId, triggerRef, contentRef };
+    latestId = id;
+};
+const useIsDismissible = (args) => {
+    const { active, contentRef, triggerRef } = args;
+    const id = useElementId();
+    React.useEffect(() => {
+        if (!active)
+            return;
+        addToQueue(id, contentRef, triggerRef);
+        return () => removeFromQueue(id);
+    }, [active, id, contentRef, triggerRef]);
+    return React.useCallback(() => {
+        if (!active)
+            return true;
+        const latest = latestId ? queue[latestId] : undefined;
+        const latestTrigger = latest?.triggerRef?.current;
+        const prev = latest?.parentId ? queue[latest.parentId] : undefined;
+        const prevContent = prev?.contentRef.current;
+        const nested = prevContent && latestTrigger && prevContent.contains(latestTrigger);
+        // Don't block independently rendered components that are not nested in each other
+        if (triggerRef?.current && !nested)
+            return true;
+        return !latestId || latestId === id;
+    }, [id, active, triggerRef]);
+};
+export default useIsDismissible;

package/dist/index.d.ts

@@ -10,5 +10,7 @@ export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayou
 export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
 export { default as useScrollLock } from "./hooks/useScrollLock";
 export { default as useToggle } from "./hooks/useToggle";
+export { default as useElementId } from "./hooks/useElementId";
+export { default as useIsDismissible } from "./hooks/useIsDismissible";
 export type { ClassName } from "@reshaped/utilities";
 export type { Attributes, CSSVariable, StyleAttribute } from "./types/global";

package/dist/index.js

@@ -13,3 +13,5 @@ export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayou
 export { default as useOnClickOutside } from "./hooks/useOnClickOutside.js";
 export { default as useScrollLock } from "./hooks/useScrollLock.js";
 export { default as useToggle } from "./hooks/useToggle.js";
+export { default as useElementId } from "./hooks/useElementId.js";
+export { default as useIsDismissible } from "./hooks/useIsDismissible.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@reshaped/headless",
   "description": "Headless components and utilities for React",
-  "version": "3.10.1",
+  "version": "3.11.0-canary.1",
   "license": "MIT",
   "homepage": "https://reshaped.so",
   "repository": {
@@ -39,7 +39,7 @@
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@reshaped/utilities": "3.10.1"
+    "@reshaped/utilities": "3.11.0-canary.1"
   },
   "scripts": {
     "clean": "rm -rf dist",