@seed-design/react-accordion 0.0.0-alpha-20260511052324

package/lib/Accordion-12s-BgNhuqRa.js

@@ -0,0 +1,356 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { elementProps, dataAttr, mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { useId, useCallback, useMemo, createContext, useContext, forwardRef } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCollapsible } from '@seed-design/react-collapsible';
+
+const getRootId = (id)=>`accordion:${id}:root`;
+const getTriggerId = (value, id)=>`accordion:${value}:${id}:trigger`;
+const getContentId = (value, id)=>`accordion:${value}:${id}:content`;
+function getRootElement(rootId) {
+    return document.querySelector(`[data-accordion-root="${rootId}"]`);
+}
+function getTriggerElements(rootId) {
+    const rootEl = getRootElement(rootId);
+    if (!rootEl) return [];
+    return Array.from(rootEl.querySelectorAll(`[data-ownedby="${rootId}"][data-value]`));
+}
+const getEnabledTriggerElements = (rootId)=>{
+    return getTriggerElements(rootId).filter((trigger)=>{
+        return !trigger.hasAttribute("disabled") && trigger.getAttribute("aria-disabled") !== "true";
+    });
+};
+const getEnabledValues = (rootId)=>{
+    return getEnabledTriggerElements(rootId).map((trigger)=>trigger.getAttribute("data-value")).filter((value)=>value != null);
+};
+const getTriggerByValue = (rootId, value)=>{
+    return getEnabledTriggerElements(rootId).find((trigger)=>{
+        return trigger.getAttribute("data-value") === value;
+    });
+};
+
+function useAccordion(props) {
+    const accordionId = useId();
+    const isMultiple = props.multiple === true;
+    const disabled = props.disabled ?? false;
+    const rootId = getRootId(accordionId);
+    const [rawValues, setValues] = useControllableState({
+        prop: props.values,
+        defaultProp: props.defaultValues ?? [],
+        onChange: props.onValuesChange
+    });
+    const values = isMultiple ? rawValues : rawValues.slice(0, 1);
+    const isOpen = useCallback((itemValue)=>values.includes(itemValue), [
+        values
+    ]);
+    const getEnabledValues$1 = useCallback(()=>{
+        return getEnabledValues(rootId);
+    }, [
+        rootId
+    ]);
+    const focusTriggerByValue = useCallback((value)=>{
+        getTriggerByValue(rootId, value)?.focus();
+    }, [
+        rootId
+    ]);
+    const focusPrev = useCallback((value)=>{
+        const enabledValues = getEnabledValues$1();
+        const currentIndex = enabledValues.indexOf(value);
+        if (currentIndex === -1) return;
+        const prevValue = enabledValues[currentIndex - 1 < 0 ? enabledValues.length - 1 : currentIndex - 1];
+        if (!prevValue) return;
+        focusTriggerByValue(prevValue);
+    }, [
+        focusTriggerByValue,
+        getEnabledValues$1
+    ]);
+    const focusNext = useCallback((value)=>{
+        const enabledValues = getEnabledValues$1();
+        const currentIndex = enabledValues.indexOf(value);
+        if (currentIndex === -1) return;
+        const nextValue = enabledValues[currentIndex + 1 >= enabledValues.length ? 0 : currentIndex + 1];
+        if (!nextValue) return;
+        focusTriggerByValue(nextValue);
+    }, [
+        focusTriggerByValue,
+        getEnabledValues$1
+    ]);
+    const focusFirst = useCallback(()=>{
+        const firstValue = getEnabledValues$1()[0];
+        if (!firstValue) return;
+        focusTriggerByValue(firstValue);
+    }, [
+        focusTriggerByValue,
+        getEnabledValues$1
+    ]);
+    const focusLast = useCallback(()=>{
+        const enabledValues = getEnabledValues$1();
+        const lastValue = enabledValues[enabledValues.length - 1];
+        if (!lastValue) return;
+        focusTriggerByValue(lastValue);
+    }, [
+        focusTriggerByValue,
+        getEnabledValues$1
+    ]);
+    const toggle = useCallback((itemValue)=>{
+        if (disabled) return;
+        if (!isMultiple) {
+            const isCurrentOpen = values[0] === itemValue;
+            if (isCurrentOpen) {
+                setValues([]);
+                return;
+            }
+            setValues([
+                itemValue
+            ]);
+            return;
+        }
+        setValues((prev)=>prev.includes(itemValue) ? prev.filter((v)=>v !== itemValue) : [
+                ...prev,
+                itemValue
+            ]);
+    }, [
+        disabled,
+        isMultiple,
+        setValues,
+        values
+    ]);
+    return useMemo(()=>({
+            accordionId,
+            rootId,
+            disabled,
+            values,
+            isOpen,
+            toggle,
+            focusPrev,
+            focusNext,
+            focusFirst,
+            focusLast,
+            rootProps: elementProps({
+                id: rootId,
+                "data-accordion-root": rootId,
+                "data-disabled": dataAttr(disabled)
+            })
+        }), [
+        accordionId,
+        disabled,
+        focusFirst,
+        focusLast,
+        focusNext,
+        focusPrev,
+        isOpen,
+        rootId,
+        toggle,
+        values
+    ]);
+}
+
+const AccordionContext = /*#__PURE__*/ createContext(null);
+const AccordionProvider = AccordionContext.Provider;
+function useAccordionContext({ strict = true } = {}) {
+    const context = useContext(AccordionContext);
+    if (!context && strict) {
+        throw new Error("useAccordionContext must be used within an AccordionRoot");
+    }
+    return context;
+}
+
+function useAccordionItem(props) {
+    const { value, disabled: itemDisabled } = props;
+    const accordion = useAccordionContext();
+    const triggerId = getTriggerId(value, accordion.accordionId);
+    const contentId = getContentId(value, accordion.accordionId);
+    const disabled = itemDisabled || accordion.disabled;
+    const open = accordion.isOpen(value);
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (nextOpen !== open) {
+            accordion.toggle(value);
+        }
+    }, [
+        accordion,
+        open,
+        value
+    ]);
+    const collapsible = useCollapsible({
+        open,
+        onOpenChange: handleOpenChange,
+        disabled
+    });
+    const stateProps = useMemo(()=>elementProps({
+            "data-disabled": dataAttr(disabled),
+            "data-open": dataAttr(open)
+        }), [
+        disabled,
+        open
+    ]);
+    const rootProps = useMemo(()=>mergeProps(collapsible.stateProps, {
+            "data-value": value
+        }), [
+        collapsible.stateProps,
+        value
+    ]);
+    const handleTriggerKeyDown = useCallback((event)=>{
+        if (event.defaultPrevented) return;
+        if (event.nativeEvent.isComposing) return;
+        switch(event.key){
+            case "ArrowDown":
+                event.preventDefault();
+                accordion.focusNext(value);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                accordion.focusPrev(value);
+                break;
+            case "Home":
+                event.preventDefault();
+                accordion.focusFirst();
+                break;
+            case "End":
+                event.preventDefault();
+                accordion.focusLast();
+                break;
+        }
+    }, [
+        accordion,
+        value
+    ]);
+    const triggerProps = useMemo(()=>mergeProps(stateProps, collapsible.triggerAriaProps, collapsible.triggerHandlers, {
+            id: triggerId,
+            disabled,
+            "data-value": value,
+            "data-ownedby": accordion.rootId,
+            "aria-controls": contentId,
+            onKeyDown: handleTriggerKeyDown
+        }), [
+        accordion.rootId,
+        collapsible.triggerAriaProps,
+        collapsible.triggerHandlers,
+        contentId,
+        disabled,
+        handleTriggerKeyDown,
+        stateProps,
+        triggerId,
+        value
+    ]);
+    const contentProps = useMemo(()=>mergeProps(collapsible.contentProps, {
+            id: contentId,
+            role: "region",
+            "aria-labelledby": triggerId
+        }), [
+        collapsible.contentProps,
+        contentId,
+        triggerId
+    ]);
+    return useMemo(()=>({
+            ...collapsible,
+            value,
+            open,
+            disabled,
+            triggerId,
+            stateProps,
+            rootProps,
+            triggerProps,
+            contentProps
+        }), [
+        collapsible,
+        contentProps,
+        disabled,
+        open,
+        rootProps,
+        stateProps,
+        triggerId,
+        triggerProps,
+        value
+    ]);
+}
+
+const AccordionItemContext = /*#__PURE__*/ createContext(null);
+const AccordionItemProvider = AccordionItemContext.Provider;
+function useAccordionItemContext({ strict = true } = {}) {
+    const context = useContext(AccordionItemContext);
+    if (!context && strict) {
+        throw new Error("useAccordionItemContext must be used within an AccordionItem");
+    }
+    return context;
+}
+
+const AccordionRoot = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { multiple, values, defaultValues, onValuesChange, disabled, ...otherProps } = props;
+    const api = useAccordion({
+        multiple,
+        values,
+        defaultValues,
+        onValuesChange,
+        disabled
+    });
+    return /*#__PURE__*/ jsx(AccordionProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...mergeProps(api.rootProps, otherProps)
+        })
+    });
+});
+AccordionRoot.displayName = "AccordionRoot";
+const AccordionItem = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { value, disabled: itemDisabled, ...rest } = props;
+    const itemApi = useAccordionItem({
+        value,
+        disabled: itemDisabled
+    });
+    return /*#__PURE__*/ jsx(AccordionItemProvider, {
+        value: itemApi,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...mergeProps(rest, itemApi.rootProps)
+        })
+    });
+});
+AccordionItem.displayName = "AccordionItem";
+/**
+ * `AccordionHeader` wraps the `AccordionTrigger` to provide a semantic heading
+ * level for screen readers and document outline.
+ *
+ * Renders as the requested native heading element. Defaults to `<h3>`.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/accordion/#wai-ariaroles%2Cstates%2Candproperties
+ *   — "The title of each accordion header is contained in an element with role `button`.
+ *   Each accordion header `button` is wrapped in an element with role `heading`..."
+ */ const AccordionHeader = /*#__PURE__*/ forwardRef(({ headingLevel = 3, ...props }, ref)=>{
+    const Comp = `h${headingLevel}`;
+    return /*#__PURE__*/ jsx(Comp, {
+        ref: ref,
+        ...props
+    });
+});
+AccordionHeader.displayName = "AccordionHeader";
+/**
+ * `AccordionTrigger` toggles the open/closed state of an `AccordionItem`.
+ * It should always be nested inside of an `AccordionHeader` to preserve the
+ * WAI-ARIA accordion pattern (heading > button).
+ *
+ * Renders as a native `<button>` with `aria-expanded`, `aria-controls`,
+ * `aria-disabled` automatically managed via the underlying collapsible.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+ */ const AccordionTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const itemApi = useAccordionItemContext();
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: ref,
+        ...mergeProps(props, itemApi.triggerProps)
+    });
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const itemApi = useAccordionItemContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(ref, itemApi.refs.content),
+        ...mergeProps(itemApi.contentProps, props)
+    });
+});
+AccordionContent.displayName = "AccordionContent";
+
+export { AccordionContent as A, AccordionHeader as a, AccordionItem as b, AccordionRoot as c, AccordionTrigger as d, useAccordionItem as e, useAccordionContext as f, AccordionProvider as g, useAccordionItemContext as h, AccordionItemProvider as i, useAccordion as u };