@reshaped/headless 3.10.0-canary.9 → 3.10.0

package/dist/components/Accordion/Accordion.context.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionContext: React.Context<T.ContextProps>;
+export default AccordionContext;

package/dist/components/Accordion/Accordion.context.js

@@ -0,0 +1,10 @@
+"use client";
+import React from "react";
+const AccordionContext = React.createContext({
+    active: false,
+    disabled: false,
+    onToggle: () => { },
+    triggerId: "",
+    contentId: "",
+});
+export default AccordionContext;

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const Accordion: React.FC<T.Props>;
+export default Accordion;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import AccordionControlled from "./AccordionControlled.js";
+import AccordionUncontrolled from "./AccordionUncontrolled.js";
+const Accordion = (props) => {
+    const { active } = props;
+    if (active !== undefined)
+        return _jsx(AccordionControlled, { ...props });
+    return _jsx(AccordionUncontrolled, { ...props });
+};
+Accordion.displayName = "Headless.Accordion";
+export default Accordion;

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,87 @@
+import type { Attributes } from "../../types/global";
+import type { ClassName } from "@reshaped/utilities";
+import type React from "react";
+/**
+ * Render attributes and props
+ */
+export type TriggerRenderProps = {
+    active: boolean;
+    disabled: boolean;
+};
+export type TriggerAttributes = Attributes<"button"> & {
+    className?: ClassName;
+    "aria-expanded": boolean;
+    "aria-controls": string;
+    id: string;
+    "data-active": string;
+    disabled?: boolean;
+    onClick: () => void;
+};
+export type ContentRenderProps = {
+    active: boolean;
+};
+export type ContentAttributes = Attributes<"div"> & {
+    "data-active": string;
+    "aria-labelledby": string;
+    id: string;
+    role: "region";
+    hidden: boolean;
+};
+/**
+ * Context
+ */
+export type ContextProps = {
+    triggerId: string;
+    contentId: string;
+    active: boolean;
+    disabled: boolean;
+    onToggle?: (active: boolean) => void;
+};
+/**
+ * Props
+ */
+export type BaseProps = {
+    /** Node for inserting the trigger and the content */
+    children?: React.ReactNode;
+    /** Callback when the accordion is expanded or collapsed */
+    onToggle?: (active: boolean) => void;
+    /** Disable the accordion from user interaction */
+    disabled?: boolean;
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"div">;
+};
+export type TriggerProps = {
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"button">;
+    /** Node or render function for inserting the trigger */
+    children?: React.ReactNode;
+    /** Render function for custom trigger rendering */
+    render?: (attributes: TriggerAttributes, props: TriggerRenderProps) => React.ReactNode;
+};
+export type ContentProps = {
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"div">;
+    /** Node for inserting the expandable content */
+    children?: React.ReactNode;
+    /** Render function for custom content rendering */
+    render?: (attributes: ContentAttributes, props: ContentRenderProps) => React.ReactNode;
+};
+export type ControlledProps = BaseProps & {
+    /** Control whether the accordion is expanded or collapsed, enables controlled mode */
+    active: boolean;
+    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
+    defaultActive?: never;
+};
+export type UncontrolledProps = BaseProps & {
+    /** Control whether the accordion is expanded or collapsed, enables controlled mode */
+    active?: never;
+    /** Control whether the accordion is expanded or collapsed by default, enables uncontrolled mode */
+    defaultActive?: boolean;
+};
+export type Props = ControlledProps | UncontrolledProps;

package/dist/components/Accordion/Accordion.types.js

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

package/dist/components/Accordion/AccordionContent.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Accordion.types";
+declare const AccordionContent: React.FC<T.ContentProps>;
+export default AccordionContent;

package/dist/components/Accordion/AccordionContent.js

@@ -0,0 +1,25 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import React from "react";
+import AccordionContext from "./Accordion.context.js";
+const AccordionContent = (props) => {
+    const { children, render, className, attributes } = props;
+    const { active, triggerId, contentId } = React.useContext(AccordionContext);
+    const contentAttributes = {
+        ...attributes,
+        className: classNames(className),
+        "data-active": active ? "true" : "false",
+        "aria-labelledby": triggerId,
+        id: contentId,
+        role: "region",
+        hidden: !active,
+    };
+    const renderProps = { active };
+    if (render) {
+        return _jsx(_Fragment, { children: render(contentAttributes, renderProps) });
+    }
+    return _jsx("div", { ...contentAttributes, children: children });
+};
+AccordionContent.displayName = "Headless.Accordion.Content";
+export default AccordionContent;

package/dist/components/Accordion/AccordionControlled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionControlled: React.FC<T.ControlledProps>;
+export default AccordionControlled;

package/dist/components/Accordion/AccordionControlled.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import React from "react";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import AccordionContext from "./Accordion.context.js";
+const AccordionControlled = (props) => {
+    const { children, onToggle, active, disabled = false, className, attributes } = props;
+    const id = React.useId();
+    const onToggleRef = useHandlerRef(onToggle);
+    const value = React.useMemo(() => ({
+        triggerId: `${id}-trigger`,
+        contentId: `${id}-content`,
+        active,
+        disabled,
+        onToggle: onToggleRef.current,
+    }), [active, disabled, id, onToggleRef]);
+    return (_jsx("div", { ...attributes, className: classNames(className), children: _jsx(AccordionContext.Provider, { value: value, children: children }) }));
+};
+AccordionControlled.displayName = "Headless.AccordionControlled";
+export default AccordionControlled;

package/dist/components/Accordion/AccordionTrigger.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionTrigger: React.FC<T.TriggerProps>;
+export default AccordionTrigger;

package/dist/components/Accordion/AccordionTrigger.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import React from "react";
+import Actionable from "../Actionable/index.js";
+import AccordionContext from "./Accordion.context.js";
+const AccordionTrigger = (props) => {
+    const { children, render, className, attributes } = props;
+    const { active, onToggle, triggerId, contentId, disabled } = React.useContext(AccordionContext);
+    const handleClick = () => {
+        if (disabled)
+            return;
+        onToggle?.(!active);
+    };
+    const triggerAttributes = {
+        ...attributes,
+        className: classNames(className),
+        "aria-expanded": active,
+        "aria-controls": contentId,
+        id: triggerId,
+        "data-active": active ? "true" : "false",
+        disabled: disabled ? true : undefined,
+        onClick: handleClick,
+    };
+    const renderProps = { active, disabled };
+    if (render)
+        return render(triggerAttributes, renderProps);
+    return (_jsx(Actionable, { onClick: handleClick, attributes: triggerAttributes, render: render, children: children }));
+};
+AccordionTrigger.displayName = "Headless.Accordion.Trigger";
+export default AccordionTrigger;

package/dist/components/Accordion/AccordionUncontrolled.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import * as T from "./Accordion.types";
+declare const AccordionUncontrolled: React.FC<T.UncontrolledProps>;
+export default AccordionUncontrolled;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import AccordionControlled from "./AccordionControlled.js";
+const AccordionUncontrolled = (props) => {
+    const { defaultActive, onToggle, ...controlledProps } = props;
+    const [active, setActive] = React.useState(defaultActive || false);
+    const handleToggle = (active) => {
+        setActive(active);
+        onToggle?.(active);
+    };
+    return _jsx(AccordionControlled, { ...controlledProps, onToggle: handleToggle, active: active });
+};
+AccordionUncontrolled.displayName = "Headless.AccordionUncontrolled";
+export default AccordionUncontrolled;

package/dist/components/Accordion/index.d.ts

@@ -0,0 +1,9 @@
+import Accordion from "./Accordion";
+import AccordionContent from "./AccordionContent";
+import AccordionTrigger from "./AccordionTrigger";
+declare const AccordionRoot: typeof Accordion & {
+    Trigger: typeof AccordionTrigger;
+    Content: typeof AccordionContent;
+};
+export default AccordionRoot;
+export type { Props as AccordionProps, TriggerProps as AccordionTriggerProps, TriggerAttributes as AccordionTriggerAttributes, ContentProps as AccordionContentProps, ContentAttributes as AccordionContentAttributes, } from "./Accordion.types";

package/dist/components/Accordion/index.js

@@ -0,0 +1,7 @@
+import Accordion from "./Accordion.js";
+import AccordionContent from "./AccordionContent.js";
+import AccordionTrigger from "./AccordionTrigger.js";
+const AccordionRoot = Accordion;
+AccordionRoot.Trigger = AccordionTrigger;
+AccordionRoot.Content = AccordionContent;
+export default AccordionRoot;

package/dist/components/Accordion/tests/Accordion.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 base: StoryObj;

package/dist/components/Accordion/tests/Accordion.stories.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Accordion } from "../../../index.js";
+export default {
+    title: "Headless/Components/Accordion",
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const base = {
+    name: "base",
+    render: () => (_jsxs(Accordion, { attributes: {
+            style: {
+                padding: 16,
+                border: "1px solid rgba(255, 255, 255, 0.08)",
+                borderRadius: 8,
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+            },
+        }, children: [_jsx(Accordion.Trigger, { attributes: {
+                    style: {
+                        background: "none",
+                        border: "none",
+                        width: "100%",
+                        textAlign: "start",
+                        cursor: "pointer",
+                        padding: 0,
+                    },
+                }, children: "Trigger" }), _jsx(Accordion.Content, { attributes: { style: { padding: 0, transition: "height 0.3s ease-in-out" } }, children: "Content" }), "r"] })),
+};

package/dist/components/Actionable/Actionable.js

@@ -68,5 +68,5 @@ const Actionable = forwardRef((props, ref) => {
         return render(tagAttributes);
     return _jsx(TagName, { ...tagAttributes });
 });
-Actionable.displayName = "Actionable";
+Actionable.displayName = "Headless.Actionable";
 export default Actionable;

package/dist/hooks/_internal/useSingletonHotkeys.js

@@ -107,27 +107,23 @@ const globalHotkeyStore = new HotkeyStore();
 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 hooksCountRef = React.useRef(0);
     const addPressedKey = React.useCallback((e) => {
-        if (e.repeat || hooksCount === 0)
+        if (e.repeat || hooksCountRef.current === 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)
+        if (hooksCountRef.current === 0)
             return;
         const eventKey = getEventKey(e);
         if (!eventKey)
@@ -144,8 +140,7 @@ export const SingletonHotkeysProvider = (props) => {
             });
             modifiedKeys = [];
         }
-        setTriggerCount(pressedMap.size);
-    }, [hooksCount]);
+    }, []);
     const isPressed = (hotkey) => {
         const keys = formatHotkey(hotkey).split(COMBINATION_DELIMETER);
         if (keys.some((key) => !pressedMap.has(key)))
@@ -169,10 +164,10 @@ export const SingletonHotkeysProvider = (props) => {
         modifiedKeys = [];
     }, []);
     const addHotkeys = React.useCallback((hotkeys, ref, options = {}) => {
-        setHooksCount((prev) => prev + 1);
+        hooksCountRef.current += 1;
         globalHotkeyStore.bindHotkeys(hotkeys, ref, options);
         return () => {
-            setHooksCount((prev) => prev - 1);
+            hooksCountRef.current -= 1;
             globalHotkeyStore.unbindHotkeys(hotkeys);
         };
     }, []);

package/package.json

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