@wix/site-ui 1.30.0 → 1.31.0

package/dist/Accordion/index.js

@@ -1,9 +1,424 @@
 import { jsx } from "react/jsx-runtime";
-import { Accordion } from "@base-ui/react/accordion";
 import { ChevronDown } from "@wix/wix-ui-icons-common";
 import clsx from "clsx";
+import { resolveStyle, warn, useMergedRefs, useRenderElement, esm_formatErrorMessage } from "../8272.js";
+import { CollapsibleRootContext, useCollapsibleRootContext, collapsibleOpenStateMapping, triggerOpenStateMapping, useCollapsiblePanel, useCollapsibleRoot } from "../8052.js";
+import { transitionStatusMapping } from "../880.js";
+import { useCompositeListItem } from "../3021.js";
+import { useBaseUiId } from "../6046.js";
+import { useStableCallback } from "../7541.js";
+import { isElementDisabled } from "../3140.js";
+import { useButton } from "../9189.js";
+import { useIsoLayoutEffect } from "../6499.js";
+import { ARROW_LEFT, ARROW_UP, COMPOSITE_KEYS, ARROW_DOWN, ARROW_RIGHT } from "../1500.js";
+import { stopEvent } from "../6330.js";
+import { useDirection } from "../9863.js";
+import { useControlled } from "../8527.js";
+import { createChangeEventDetails } from "../4768.js";
+import { CompositeList } from "../9255.js";
 import { Typography } from "../Typography/index.js";
 import * as __rspack_external_react from "react";
+const AccordionRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) AccordionRootContext.displayName = "AccordionRootContext";
+function useAccordionRootContext() {
+    const context = __rspack_external_react.useContext(AccordionRootContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: AccordionRootContext is missing. Accordion parts must be placed within <Accordion.Root>.' : esm_formatErrorMessage(10));
+    return context;
+}
+const AccordionItemContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) AccordionItemContext.displayName = "AccordionItemContext";
+function useAccordionItemContext() {
+    const context = __rspack_external_react.useContext(AccordionItemContext);
+    if (void 0 === context) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>.' : esm_formatErrorMessage(9));
+    return context;
+}
+let AccordionItemDataAttributes_AccordionItemDataAttributes = /*#__PURE__*/ function(AccordionItemDataAttributes) {
+    AccordionItemDataAttributes["index"] = "data-index";
+    AccordionItemDataAttributes["disabled"] = "data-disabled";
+    AccordionItemDataAttributes["open"] = "data-open";
+    return AccordionItemDataAttributes;
+}({});
+const accordionStateAttributesMapping = {
+    ...collapsibleOpenStateMapping,
+    index: (value)=>Number.isInteger(value) ? {
+            [AccordionItemDataAttributes_AccordionItemDataAttributes.index]: String(value)
+        } : null,
+    ...transitionStatusMapping,
+    value: ()=>null
+};
+const AccordionItem_AccordionItem = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, disabled: disabledProp = false, onOpenChange: onOpenChangeProp, render, value: valueProp, style, ...elementProps } = componentProps;
+    const { ref: listItemRef, index } = useCompositeListItem();
+    const mergedRef = useMergedRefs(forwardedRef, listItemRef);
+    const { disabled: contextDisabled, handleValueChange, state: rootState, value: openValues } = useAccordionRootContext();
+    const fallbackValue = useBaseUiId();
+    const value = valueProp ?? fallbackValue;
+    const disabled = disabledProp || contextDisabled;
+    const isOpen = __rspack_external_react.useMemo(()=>{
+        if (!openValues) return false;
+        for(let i = 0; i < openValues.length; i += 1)if (openValues[i] === value) return true;
+        return false;
+    }, [
+        openValues,
+        value
+    ]);
+    const onOpenChange = useStableCallback((nextOpen, eventDetails)=>{
+        onOpenChangeProp?.(nextOpen, eventDetails);
+        if (eventDetails.isCanceled) return;
+        handleValueChange(value, nextOpen);
+    });
+    const collapsible = useCollapsibleRoot({
+        open: isOpen,
+        onOpenChange,
+        disabled
+    });
+    const collapsibleState = __rspack_external_react.useMemo(()=>({
+            open: collapsible.open,
+            disabled: collapsible.disabled,
+            transitionStatus: collapsible.transitionStatus
+        }), [
+        collapsible.open,
+        collapsible.disabled,
+        collapsible.transitionStatus
+    ]);
+    const collapsibleContext = __rspack_external_react.useMemo(()=>({
+            ...collapsible,
+            onOpenChange,
+            state: collapsibleState
+        }), [
+        collapsible,
+        collapsibleState,
+        onOpenChange
+    ]);
+    const state = __rspack_external_react.useMemo(()=>({
+            ...rootState,
+            hidden: !isOpen && !collapsible.mounted,
+            index,
+            disabled,
+            open: isOpen
+        }), [
+        collapsible.mounted,
+        disabled,
+        index,
+        isOpen,
+        rootState
+    ]);
+    const defaultTriggerId = useBaseUiId();
+    const [triggerId, setTriggerId] = __rspack_external_react.useState(defaultTriggerId);
+    const accordionItemContext = __rspack_external_react.useMemo(()=>({
+            open: isOpen,
+            state,
+            setTriggerId,
+            triggerId
+        }), [
+        isOpen,
+        state,
+        setTriggerId,
+        triggerId
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: mergedRef,
+        props: elementProps,
+        stateAttributesMapping: accordionStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(CollapsibleRootContext.Provider, {
+        value: collapsibleContext,
+        children: /*#__PURE__*/ jsx(AccordionItemContext.Provider, {
+            value: accordionItemContext,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) AccordionItem_AccordionItem.displayName = "AccordionItem";
+const AccordionHeader_AccordionHeader = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, ...elementProps } = componentProps;
+    const { state } = useAccordionItemContext();
+    const element = useRenderElement('h3', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: elementProps,
+        stateAttributesMapping: accordionStateAttributesMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) AccordionHeader_AccordionHeader.displayName = "AccordionHeader";
+function getActiveTriggers(accordionItemRefs) {
+    const { current: accordionItemElements } = accordionItemRefs;
+    const output = [];
+    for(let i = 0; i < accordionItemElements.length; i += 1){
+        const section = accordionItemElements[i];
+        if (!isElementDisabled(section)) {
+            const trigger = section?.querySelector('[type="button"], [role="button"]');
+            if (trigger && !isElementDisabled(trigger)) output.push(trigger);
+        }
+    }
+    return output;
+}
+const AccordionTrigger_AccordionTrigger = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { disabled: disabledProp, className, id: idProp, render, nativeButton = true, style, ...elementProps } = componentProps;
+    const { panelId, open, handleTrigger, disabled: contextDisabled } = useCollapsibleRootContext();
+    const disabled = disabledProp ?? contextDisabled;
+    const { getButtonProps, buttonRef } = useButton({
+        disabled,
+        focusableWhenDisabled: true,
+        native: nativeButton,
+        composite: true
+    });
+    const { accordionItemRefs, direction, loopFocus, orientation } = useAccordionRootContext();
+    const isRtl = 'rtl' === direction;
+    const isHorizontal = 'horizontal' === orientation;
+    const { state, setTriggerId, triggerId: id } = useAccordionItemContext();
+    useIsoLayoutEffect(()=>{
+        if (idProp) setTriggerId(idProp);
+        return ()=>{
+            setTriggerId(void 0);
+        };
+    }, [
+        idProp,
+        setTriggerId
+    ]);
+    const props = {
+        'aria-controls': open ? panelId : void 0,
+        'aria-expanded': open,
+        id,
+        tabIndex: 0,
+        onClick: handleTrigger,
+        onKeyDown (event) {
+            if (!COMPOSITE_KEYS.has(event.key)) return;
+            stopEvent(event);
+            const triggers = getActiveTriggers(accordionItemRefs);
+            const numOfEnabledTriggers = triggers.length;
+            const lastIndex = numOfEnabledTriggers - 1;
+            let nextIndex = -1;
+            const thisIndex = triggers.indexOf(event.currentTarget);
+            function toNext() {
+                nextIndex = loopFocus ? thisIndex + 1 > lastIndex ? 0 : thisIndex + 1 : Math.min(thisIndex + 1, lastIndex);
+            }
+            function toPrev() {
+                nextIndex = loopFocus ? 0 === thisIndex ? lastIndex : thisIndex - 1 : thisIndex - 1;
+            }
+            switch(event.key){
+                case ARROW_DOWN:
+                    if (!isHorizontal) toNext();
+                    break;
+                case ARROW_UP:
+                    if (!isHorizontal) toPrev();
+                    break;
+                case ARROW_RIGHT:
+                    if (isHorizontal) if (isRtl) toPrev();
+                    else toNext();
+                    break;
+                case ARROW_LEFT:
+                    if (isHorizontal) if (isRtl) toNext();
+                    else toPrev();
+                    break;
+                case 'Home':
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    nextIndex = lastIndex;
+                    break;
+                default:
+                    break;
+            }
+            if (nextIndex > -1) triggers[nextIndex].focus();
+        }
+    };
+    const element = useRenderElement('button', componentProps, {
+        state,
+        ref: [
+            forwardedRef,
+            buttonRef
+        ],
+        props: [
+            props,
+            elementProps,
+            getButtonProps
+        ],
+        stateAttributesMapping: triggerOpenStateMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) AccordionTrigger_AccordionTrigger.displayName = "AccordionTrigger";
+let AccordionPanelCssVars_AccordionPanelCssVars = /*#__PURE__*/ function(AccordionPanelCssVars) {
+    AccordionPanelCssVars["accordionPanelHeight"] = "--accordion-panel-height";
+    AccordionPanelCssVars["accordionPanelWidth"] = "--accordion-panel-width";
+    return AccordionPanelCssVars;
+}({});
+const AccordionPanel_AccordionPanel = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { className, hiddenUntilFound: hiddenUntilFoundProp, keepMounted: keepMountedProp, id: idProp, render, style, ...elementProps } = componentProps;
+    const { hiddenUntilFound: contextHiddenUntilFound, keepMounted: contextKeepMounted } = useAccordionRootContext();
+    const { mounted, onOpenChange, open, panelId, setMounted, setOpen, setPanelIdState, transitionStatus } = useCollapsibleRootContext();
+    const hiddenUntilFound = hiddenUntilFoundProp ?? contextHiddenUntilFound;
+    const keepMounted = keepMountedProp ?? contextKeepMounted;
+    if ('production' !== process.env.NODE_ENV) useIsoLayoutEffect(()=>{
+        if (false === keepMountedProp && hiddenUntilFound) warn('The `keepMounted={false}` prop on an `Accordion.Panel` is ignored when `hiddenUntilFound` is enabled on the panel or root, since the panel must remain mounted while closed.');
+    }, [
+        hiddenUntilFound,
+        keepMountedProp
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (idProp) {
+            setPanelIdState(idProp);
+            return ()=>{
+                setPanelIdState(void 0);
+            };
+        }
+    }, [
+        idProp,
+        setPanelIdState
+    ]);
+    const { height, props, ref, shouldPreventOpenAnimation, shouldRender, transitionStatus: panelTransitionStatus, width } = useCollapsiblePanel({
+        externalRef: forwardedRef,
+        hiddenUntilFound,
+        id: idProp ?? panelId,
+        keepMounted,
+        mounted,
+        onOpenChange,
+        open,
+        setMounted,
+        setOpen,
+        transitionStatus
+    });
+    const { state, triggerId } = useAccordionItemContext();
+    const panelState = {
+        ...state,
+        transitionStatus: panelTransitionStatus
+    };
+    const resolvedStyle = resolveStyle(style, panelState);
+    const element = useRenderElement('div', {
+        ...componentProps,
+        style: void 0
+    }, {
+        state: panelState,
+        ref,
+        props: [
+            props,
+            {
+                'aria-labelledby': triggerId,
+                role: 'region',
+                style: {
+                    [AccordionPanelCssVars_AccordionPanelCssVars.accordionPanelHeight]: void 0 === height ? 'auto' : `${height}px`,
+                    [AccordionPanelCssVars_AccordionPanelCssVars.accordionPanelWidth]: void 0 === width ? 'auto' : `${width}px`
+                }
+            },
+            elementProps,
+            resolvedStyle ? {
+                style: resolvedStyle
+            } : void 0,
+            shouldPreventOpenAnimation ? {
+                style: {
+                    animationName: 'none'
+                }
+            } : void 0
+        ],
+        stateAttributesMapping: accordionStateAttributesMapping
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) AccordionPanel_AccordionPanel.displayName = "AccordionPanel";
+const rootStateAttributesMapping = {
+    value: ()=>null
+};
+const AccordionRoot_AccordionRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, disabled = false, hiddenUntilFound: hiddenUntilFoundProp, keepMounted: keepMountedProp, loopFocus = true, onValueChange, multiple = false, orientation = 'vertical', value: valueProp, defaultValue: defaultValueProp, style, ...elementProps } = componentProps;
+    const direction = useDirection();
+    if ('production' !== process.env.NODE_ENV) useIsoLayoutEffect(()=>{
+        if (hiddenUntilFoundProp && false === keepMountedProp) warn('The `keepMounted={false}` prop on `Accordion.Root` is ignored when `hiddenUntilFound` is enabled, since panels must remain mounted while closed.');
+    }, [
+        hiddenUntilFoundProp,
+        keepMountedProp
+    ]);
+    const defaultValue = __rspack_external_react.useMemo(()=>{
+        if (void 0 === valueProp) return defaultValueProp ?? [];
+    }, [
+        valueProp,
+        defaultValueProp
+    ]);
+    const accordionItemRefs = __rspack_external_react.useRef([]);
+    const [value, setValue] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'Accordion',
+        state: 'value'
+    });
+    const handleValueChange = useStableCallback((newValue, nextOpen)=>{
+        const details = createChangeEventDetails("none");
+        if (multiple) if (nextOpen) {
+            const nextOpenValues = value.slice();
+            nextOpenValues.push(newValue);
+            onValueChange?.(nextOpenValues, details);
+            if (details.isCanceled) return;
+            setValue(nextOpenValues);
+        } else {
+            const nextOpenValues = value.filter((v)=>v !== newValue);
+            onValueChange?.(nextOpenValues, details);
+            if (details.isCanceled) return;
+            setValue(nextOpenValues);
+        }
+        else {
+            const nextValue = value[0] === newValue ? [] : [
+                newValue
+            ];
+            onValueChange?.(nextValue, details);
+            if (details.isCanceled) return;
+            setValue(nextValue);
+        }
+    });
+    const state = __rspack_external_react.useMemo(()=>({
+            value,
+            disabled,
+            orientation
+        }), [
+        value,
+        disabled,
+        orientation
+    ]);
+    const contextValue = __rspack_external_react.useMemo(()=>({
+            accordionItemRefs,
+            direction,
+            disabled,
+            handleValueChange,
+            hiddenUntilFound: hiddenUntilFoundProp ?? false,
+            keepMounted: keepMountedProp ?? false,
+            loopFocus,
+            orientation,
+            state,
+            value
+        }), [
+        direction,
+        disabled,
+        handleValueChange,
+        hiddenUntilFoundProp,
+        keepMountedProp,
+        loopFocus,
+        orientation,
+        state,
+        value
+    ]);
+    const element = useRenderElement('div', componentProps, {
+        state,
+        ref: forwardedRef,
+        props: [
+            {
+                dir: direction,
+                role: 'region'
+            },
+            elementProps
+        ],
+        stateAttributesMapping: rootStateAttributesMapping
+    });
+    return /*#__PURE__*/ jsx(AccordionRootContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx(CompositeList, {
+            elementsRef: accordionItemRefs,
+            children: element
+        })
+    });
+});
+if ("production" !== process.env.NODE_ENV) AccordionRoot_AccordionRoot.displayName = "AccordionRoot";
 const Accordion_module = {
     root: "root-jseiNO",
     line: "line-t3NkfO",
@@ -27,28 +442,28 @@ const AccordionVariant = {
     line: 'line',
     box: 'box'
 };
-const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Item, {
+const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AccordionItem_AccordionItem, {
         ref: ref,
         className: clsx(Accordion_module.item, className),
         ...props
     }));
-const Header = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Header, {
+const Header = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AccordionHeader_AccordionHeader, {
         ref: ref,
         className: clsx(Accordion_module.header, className),
         ...props
     }));
-const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Trigger, {
+const Trigger = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AccordionTrigger_AccordionTrigger, {
         ref: ref,
         className: clsx(Accordion_module.trigger, className),
         ...props
     }));
-const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(Accordion.Panel, {
+const Panel = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(AccordionPanel_AccordionPanel, {
         ref: ref,
         className: clsx(Accordion_module.panel, className),
         ...props
     }));
 function Root({ className, size = AccordionSize.small, variant = AccordionVariant.line, ...props }) {
-    return /*#__PURE__*/ jsx(Accordion.Root, {
+    return /*#__PURE__*/ jsx(AccordionRoot_AccordionRoot, {
         ...props,
         className: clsx(Accordion_module.root, Accordion_module[size], Accordion_module[variant], className)
     });
@@ -75,7 +490,7 @@ const Suffix = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ..
         className: clsx(Accordion_module.suffix, className),
         ...props
     }));
-const Accordion_Accordion = {
+const Accordion = {
     Item: Item,
     Header: Header,
     Trigger: Trigger,
@@ -86,4 +501,4 @@ const Accordion_Accordion = {
     Subtitle: Subtitle,
     Suffix: Suffix
 };
-export { AccordionSize, AccordionVariant, Accordion_Accordion as Accordion };
+export { Accordion, AccordionSize, AccordionVariant };