@wix/site-ui 1.30.0 → 1.32.0

package/dist/1268.js

@@ -0,0 +1,99 @@
+import { useLabelableContext, useFieldRootContext, fieldValidityMapping } from "./1477.js";
+import { useLabelableId } from "./9048.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import { activeElement } from "./4549.js";
+import { ownerDocument } from "./9829.js";
+import { useControlled } from "./8527.js";
+import { useStableCallback } from "./7541.js";
+import { useRegisterFieldControl } from "./4281.js";
+import { useRenderElement } from "./8272.js";
+import { createChangeEventDetails } from "./4768.js";
+import * as __rspack_external_react from "react";
+const FieldControl_FieldControl = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, id: idProp, name: nameProp, value: valueProp, disabled: disabledProp = false, onValueChange, defaultValue, autoFocus = false, style, ...elementProps } = componentProps;
+    const { state: fieldState, name: fieldName, disabled: fieldDisabled, setTouched, setDirty, validityData, setFocused, setFilled, validationMode, validation } = useFieldRootContext();
+    const disabled = fieldDisabled || disabledProp;
+    const name = fieldName ?? nameProp;
+    const state = {
+        ...fieldState,
+        disabled
+    };
+    const { labelId } = useLabelableContext();
+    const id = useLabelableId({
+        id: idProp
+    });
+    useIsoLayoutEffect(()=>{
+        const hasExternalValue = null != valueProp;
+        if (validation.inputRef.current?.value || hasExternalValue && '' !== valueProp) setFilled(true);
+        else if (hasExternalValue && '' === valueProp) setFilled(false);
+    }, [
+        validation.inputRef,
+        setFilled,
+        valueProp
+    ]);
+    const inputRef = __rspack_external_react.useRef(null);
+    useIsoLayoutEffect(()=>{
+        if (autoFocus && inputRef.current === activeElement(ownerDocument(inputRef.current))) setFocused(true);
+    }, [
+        autoFocus,
+        setFocused
+    ]);
+    const [valueUnwrapped] = useControlled({
+        controlled: valueProp,
+        default: defaultValue,
+        name: 'FieldControl',
+        state: 'value'
+    });
+    const isControlled = void 0 !== valueProp;
+    const value = isControlled ? valueUnwrapped : void 0;
+    const getValueFromInput = useStableCallback(()=>validation.inputRef.current?.value);
+    useRegisterFieldControl(validation.inputRef, id, value, getValueFromInput);
+    const element = useRenderElement('input', componentProps, {
+        ref: [
+            forwardedRef,
+            inputRef
+        ],
+        state,
+        props: [
+            {
+                id,
+                disabled,
+                name,
+                ref: validation.inputRef,
+                'aria-labelledby': labelId,
+                autoFocus,
+                ...isControlled ? {
+                    value
+                } : {
+                    defaultValue
+                },
+                onChange (event) {
+                    const inputValue = event.currentTarget.value;
+                    onValueChange?.(inputValue, createChangeEventDetails("none", event.nativeEvent));
+                    setDirty(inputValue !== validityData.initialValue);
+                    setFilled('' !== inputValue);
+                },
+                onFocus () {
+                    setFocused(true);
+                },
+                onBlur (event) {
+                    setTouched(true);
+                    setFocused(false);
+                    if ('onBlur' === validationMode) validation.commit(event.currentTarget.value);
+                },
+                onKeyDown (event) {
+                    if ('INPUT' === event.currentTarget.tagName && 'Enter' === event.key) {
+                        setTouched(true);
+                        validation.commit(event.currentTarget.value);
+                    }
+                }
+            },
+            validation.getInputValidationProps(),
+            elementProps
+        ],
+        stateAttributesMapping: fieldValidityMapping
+    });
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) FieldControl_FieldControl.displayName = "FieldControl";
+export { FieldControl_FieldControl };

package/dist/1279.js

@@ -0,0 +1,7 @@
+import * as __rspack_external_react from "react";
+const RadioGroupContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) RadioGroupContext.displayName = "RadioGroupContext";
+function useRadioGroupContext() {
+    return __rspack_external_react.useContext(RadioGroupContext);
+}
+export { RadioGroupContext, useRadioGroupContext };

package/dist/1457.js

@@ -0,0 +1,10 @@
+import * as __rspack_external_react from "react";
+const FieldItemContext = /*#__PURE__*/ __rspack_external_react.createContext({
+    disabled: false
+});
+if ("production" !== process.env.NODE_ENV) FieldItemContext.displayName = "FieldItemContext";
+function useFieldItemContext() {
+    const context = __rspack_external_react.useContext(FieldItemContext);
+    return context;
+}
+export { FieldItemContext, useFieldItemContext };

package/dist/1477.js

@@ -0,0 +1,106 @@
+import { NOOP, esm_formatErrorMessage, EMPTY_OBJECT } from "./8272.js";
+import * as __rspack_external_react from "react";
+let FieldControlDataAttributes_FieldControlDataAttributes = /*#__PURE__*/ function(FieldControlDataAttributes) {
+    FieldControlDataAttributes["disabled"] = "data-disabled";
+    FieldControlDataAttributes["valid"] = "data-valid";
+    FieldControlDataAttributes["invalid"] = "data-invalid";
+    FieldControlDataAttributes["touched"] = "data-touched";
+    FieldControlDataAttributes["dirty"] = "data-dirty";
+    FieldControlDataAttributes["filled"] = "data-filled";
+    FieldControlDataAttributes["focused"] = "data-focused";
+    return FieldControlDataAttributes;
+}({});
+const DEFAULT_VALIDITY_STATE = {
+    badInput: false,
+    customError: false,
+    patternMismatch: false,
+    rangeOverflow: false,
+    rangeUnderflow: false,
+    stepMismatch: false,
+    tooLong: false,
+    tooShort: false,
+    typeMismatch: false,
+    valid: null,
+    valueMissing: false
+};
+const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+    valid: null,
+    touched: false,
+    dirty: false,
+    filled: false,
+    focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = {
+    disabled: false,
+    ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
+const fieldValidityMapping = {
+    valid (value) {
+        if (null === value) return null;
+        if (value) return {
+            [FieldControlDataAttributes_FieldControlDataAttributes.valid]: ''
+        };
+        return {
+            [FieldControlDataAttributes_FieldControlDataAttributes.invalid]: ''
+        };
+    }
+};
+const DEFAULT_FIELD_ROOT_CONTEXT = {
+    invalid: void 0,
+    name: void 0,
+    validityData: {
+        state: DEFAULT_VALIDITY_STATE,
+        errors: [],
+        error: '',
+        value: '',
+        initialValue: null
+    },
+    setValidityData: NOOP,
+    disabled: void 0,
+    touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+    setTouched: NOOP,
+    dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+    setDirty: NOOP,
+    filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+    setFilled: NOOP,
+    focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+    setFocused: NOOP,
+    validate: ()=>null,
+    validationMode: 'onSubmit',
+    validationDebounceTime: 0,
+    shouldValidateOnChange: ()=>false,
+    state: DEFAULT_FIELD_ROOT_STATE,
+    markedDirtyRef: {
+        current: false
+    },
+    registerFieldControl: NOOP,
+    validation: {
+        getValidationProps: (props = EMPTY_OBJECT)=>props,
+        getInputValidationProps: (props = EMPTY_OBJECT)=>props,
+        inputRef: {
+            current: null
+        },
+        commit: async ()=>{}
+    }
+};
+const FieldRootContext = /*#__PURE__*/ __rspack_external_react.createContext(DEFAULT_FIELD_ROOT_CONTEXT);
+if ("production" !== process.env.NODE_ENV) FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+    const context = __rspack_external_react.useContext(FieldRootContext);
+    if (context.setValidityData === NOOP && !optional) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : esm_formatErrorMessage(28));
+    return context;
+}
+const LabelableContext = /*#__PURE__*/ __rspack_external_react.createContext({
+    controlId: void 0,
+    registerControlId: NOOP,
+    labelId: void 0,
+    setLabelId: NOOP,
+    messageIds: [],
+    setMessageIds: NOOP,
+    getDescriptionProps: (externalProps)=>externalProps
+});
+if ("production" !== process.env.NODE_ENV) LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+    return __rspack_external_react.useContext(LabelableContext);
+}
+export { DEFAULT_FIELD_ROOT_CONTEXT, DEFAULT_FIELD_STATE_ATTRIBUTES, DEFAULT_VALIDITY_STATE, FieldRootContext, LabelableContext, fieldValidityMapping, useFieldRootContext, useLabelableContext };

package/dist/1500.js

@@ -0,0 +1,111 @@
+import { isHTMLElement } from "./3829.js";
+const ARROW_UP = 'ArrowUp';
+const ARROW_DOWN = 'ArrowDown';
+const ARROW_LEFT = 'ArrowLeft';
+const ARROW_RIGHT = 'ArrowRight';
+const HOME = 'Home';
+const END = 'End';
+const PAGE_DOWN = 'PageDown';
+const HORIZONTAL_KEYS = new Set([
+    ARROW_LEFT,
+    ARROW_RIGHT
+]);
+const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([
+    ARROW_LEFT,
+    ARROW_RIGHT,
+    HOME,
+    END
+]);
+const VERTICAL_KEYS = new Set([
+    ARROW_UP,
+    ARROW_DOWN
+]);
+const VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([
+    ARROW_UP,
+    ARROW_DOWN,
+    HOME,
+    END
+]);
+const ARROW_KEYS = new Set([
+    ...HORIZONTAL_KEYS,
+    ...VERTICAL_KEYS
+]);
+const COMPOSITE_KEYS = new Set([
+    ...ARROW_KEYS,
+    HOME,
+    END
+]);
+const SHIFT = 'Shift';
+const CONTROL = 'Control';
+const ALT = 'Alt';
+const META = 'Meta';
+const MODIFIER_KEYS = new Set([
+    SHIFT,
+    CONTROL,
+    ALT,
+    META
+]);
+function isInputElement(element) {
+    return isHTMLElement(element) && 'INPUT' === element.tagName;
+}
+function isNativeInput(element) {
+    if (isInputElement(element) && null != element.selectionStart) return true;
+    if (isHTMLElement(element) && 'TEXTAREA' === element.tagName) return true;
+    return false;
+}
+function scrollIntoViewIfNeeded(scrollContainer, element, direction, orientation) {
+    if (!scrollContainer || !element || !element.scrollTo) return;
+    let targetX = scrollContainer.scrollLeft;
+    let targetY = scrollContainer.scrollTop;
+    const isOverflowingX = scrollContainer.clientWidth < scrollContainer.scrollWidth;
+    const isOverflowingY = scrollContainer.clientHeight < scrollContainer.scrollHeight;
+    if (isOverflowingX && 'vertical' !== orientation) {
+        const elementOffsetLeft = getOffset(scrollContainer, element, 'left');
+        const containerStyles = getStyles(scrollContainer);
+        const elementStyles = getStyles(element);
+        if ('ltr' === direction) {
+            if (elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight > scrollContainer.scrollLeft + scrollContainer.clientWidth - containerStyles.scrollPaddingRight) targetX = elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight - scrollContainer.clientWidth + containerStyles.scrollPaddingRight;
+            else if (elementOffsetLeft - elementStyles.scrollMarginLeft < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) targetX = elementOffsetLeft - elementStyles.scrollMarginLeft - containerStyles.scrollPaddingLeft;
+        }
+        if ('rtl' === direction) {
+            if (elementOffsetLeft - elementStyles.scrollMarginRight < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft) targetX = elementOffsetLeft - elementStyles.scrollMarginLeft - containerStyles.scrollPaddingLeft;
+            else if (elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight > scrollContainer.scrollLeft + scrollContainer.clientWidth - containerStyles.scrollPaddingRight) targetX = elementOffsetLeft + element.offsetWidth + elementStyles.scrollMarginRight - scrollContainer.clientWidth + containerStyles.scrollPaddingRight;
+        }
+    }
+    if (isOverflowingY && 'horizontal' !== orientation) {
+        const elementOffsetTop = getOffset(scrollContainer, element, 'top');
+        const containerStyles = getStyles(scrollContainer);
+        const elementStyles = getStyles(element);
+        if (elementOffsetTop - elementStyles.scrollMarginTop < scrollContainer.scrollTop + containerStyles.scrollPaddingTop) targetY = elementOffsetTop - elementStyles.scrollMarginTop - containerStyles.scrollPaddingTop;
+        else if (elementOffsetTop + element.offsetHeight + elementStyles.scrollMarginBottom > scrollContainer.scrollTop + scrollContainer.clientHeight - containerStyles.scrollPaddingBottom) targetY = elementOffsetTop + element.offsetHeight + elementStyles.scrollMarginBottom - scrollContainer.clientHeight + containerStyles.scrollPaddingBottom;
+    }
+    scrollContainer.scrollTo({
+        left: targetX,
+        top: targetY,
+        behavior: 'auto'
+    });
+}
+function getOffset(ancestor, element, side) {
+    const propName = 'left' === side ? 'offsetLeft' : 'offsetTop';
+    let result = 0;
+    while(element.offsetParent){
+        result += element[propName];
+        if (element.offsetParent === ancestor) break;
+        element = element.offsetParent;
+    }
+    return result;
+}
+function getStyles(element) {
+    const styles = getComputedStyle(element);
+    return {
+        scrollMarginTop: parseFloat(styles.scrollMarginTop) || 0,
+        scrollMarginRight: parseFloat(styles.scrollMarginRight) || 0,
+        scrollMarginBottom: parseFloat(styles.scrollMarginBottom) || 0,
+        scrollMarginLeft: parseFloat(styles.scrollMarginLeft) || 0,
+        scrollPaddingTop: parseFloat(styles.scrollPaddingTop) || 0,
+        scrollPaddingRight: parseFloat(styles.scrollPaddingRight) || 0,
+        scrollPaddingBottom: parseFloat(styles.scrollPaddingBottom) || 0,
+        scrollPaddingLeft: parseFloat(styles.scrollPaddingLeft) || 0
+    };
+}
+export { ARROW_DOWN, ARROW_KEYS, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, COMPOSITE_KEYS, HORIZONTAL_KEYS, HORIZONTAL_KEYS_WITH_EXTRA_KEYS, MODIFIER_KEYS, PAGE_DOWN, VERTICAL_KEYS, VERTICAL_KEYS_WITH_EXTRA_KEYS, isNativeInput, scrollIntoViewIfNeeded };

package/dist/167.js

@@ -0,0 +1,6 @@
+import { isReactVersionAtLeast } from "./8272.js";
+function inertValue(value) {
+    if (isReactVersionAtLeast(19)) return value;
+    return value ? 'true' : void 0;
+}
+export { inertValue };

package/dist/2274.js

@@ -0,0 +1,34 @@
+import { useCompositeRootContext } from "./8724.js";
+import { useCompositeListItem } from "./3021.js";
+import { useMergedRefs } from "./8272.js";
+import * as __rspack_external_react from "react";
+function useCompositeItem(params = {}) {
+    const { highlightItemOnHover, highlightedIndex, onHighlightedIndexChange } = useCompositeRootContext();
+    const { ref, index } = useCompositeListItem(params);
+    const isHighlighted = highlightedIndex === index;
+    const itemRef = __rspack_external_react.useRef(null);
+    const mergedRef = useMergedRefs(ref, itemRef);
+    const compositeProps = __rspack_external_react.useMemo(()=>({
+            tabIndex: isHighlighted ? 0 : -1,
+            onFocus () {
+                onHighlightedIndexChange(index);
+            },
+            onMouseMove () {
+                const item = itemRef.current;
+                if (!highlightItemOnHover || !item) return;
+                const disabled = item.hasAttribute('disabled') || 'true' === item.ariaDisabled;
+                if (!isHighlighted && !disabled) item.focus();
+            }
+        }), [
+        isHighlighted,
+        onHighlightedIndexChange,
+        index,
+        highlightItemOnHover
+    ]);
+    return {
+        compositeProps,
+        compositeRef: mergedRef,
+        index
+    };
+}
+export { useCompositeItem };

package/dist/2287.js

@@ -0,0 +1,17 @@
+import { __webpack_require__ } from "./rslib-runtime.js";
+import "./4586.js";
+import { NOOP } from "./8272.js";
+const use_sync_external_store = __webpack_require__("../../node_modules/use-sync-external-store/index.js");
+function subscribe() {
+    return NOOP;
+}
+function getSnapshot() {
+    return false;
+}
+function getServerSnapshot() {
+    return true;
+}
+function useIsHydrating() {
+    return (0, use_sync_external_store.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+export { useIsHydrating };

package/dist/2418.js

@@ -0,0 +1,31 @@
+const triggerPress = 'trigger-press';
+const triggerHover = 'trigger-hover';
+const triggerFocus = 'trigger-focus';
+const outsidePress = 'outside-press';
+const itemPress = 'item-press';
+const closePress = 'close-press';
+const linkPress = 'link-press';
+const clearPress = 'clear-press';
+const chipRemovePress = 'chip-remove-press';
+const trackPress = 'track-press';
+const incrementPress = 'increment-press';
+const decrementPress = 'decrement-press';
+const inputChange = 'input-change';
+const inputClear = 'input-clear';
+const inputBlur = 'input-blur';
+const inputPaste = 'input-paste';
+const inputPress = 'input-press';
+const focusOut = 'focus-out';
+const escapeKey = 'escape-key';
+const closeWatcher = 'close-watcher';
+const listNavigation = 'list-navigation';
+const keyboard = 'keyboard';
+const pointer = 'pointer';
+const cancelOpen = 'cancel-open';
+const siblingOpen = 'sibling-open';
+const disabled = 'disabled';
+const missing = 'missing';
+const initial = 'initial';
+const imperativeAction = 'imperative-action';
+const windowResize = 'window-resize';
+export { cancelOpen, chipRemovePress, clearPress, closePress, closeWatcher, decrementPress, disabled, escapeKey, focusOut, imperativeAction, incrementPress, initial, inputBlur, inputChange, inputClear, inputPaste, inputPress, itemPress, keyboard, linkPress, listNavigation, missing, outsidePress, pointer, siblingOpen, trackPress, triggerFocus, triggerHover, triggerPress, windowResize };

package/dist/2801.js

@@ -0,0 +1,20 @@
+import { useStableCallback } from "./7541.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import * as __rspack_external_react from "react";
+function useValueChanged(value, onChange) {
+    const valueRef = __rspack_external_react.useRef(value);
+    const onChangeCallback = useStableCallback(onChange);
+    useIsoLayoutEffect(()=>{
+        if (valueRef.current === value) return;
+        onChangeCallback(valueRef.current);
+    }, [
+        value,
+        onChangeCallback
+    ]);
+    useIsoLayoutEffect(()=>{
+        valueRef.current = value;
+    }, [
+        value
+    ]);
+}
+export { useValueChanged };

package/dist/285.js

@@ -0,0 +1,86 @@
+import * as __rspack_external_react from "react";
+import { jsx } from "react/jsx-runtime";
+import { useId } from "./6046.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import { useRefWithInit } from "./8272.js";
+function createEventEmitter() {
+    const map = new Map();
+    return {
+        emit (event, data) {
+            map.get(event)?.forEach((listener)=>listener(data));
+        },
+        on (event, listener) {
+            if (!map.has(event)) map.set(event, new Set());
+            map.get(event).add(listener);
+        },
+        off (event, listener) {
+            map.get(event)?.delete(listener);
+        }
+    };
+}
+class FloatingTreeStore {
+    nodesRef = {
+        current: []
+    };
+    events = createEventEmitter();
+    addNode(node) {
+        this.nodesRef.current.push(node);
+    }
+    removeNode(node) {
+        const index = this.nodesRef.current.findIndex((n)=>n === node);
+        if (-1 !== index) this.nodesRef.current.splice(index, 1);
+    }
+}
+const FloatingNodeContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
+if ("production" !== process.env.NODE_ENV) FloatingNodeContext.displayName = "FloatingNodeContext";
+const FloatingTreeContext = /*#__PURE__*/ __rspack_external_react.createContext(null);
+if ("production" !== process.env.NODE_ENV) FloatingTreeContext.displayName = "FloatingTreeContext";
+const useFloatingParentNodeId = ()=>__rspack_external_react.useContext(FloatingNodeContext)?.id || null;
+const useFloatingTree = (externalTree)=>{
+    const contextTree = __rspack_external_react.useContext(FloatingTreeContext);
+    return externalTree ?? contextTree;
+};
+function useFloatingNodeId(externalTree) {
+    const id = useId();
+    const tree = useFloatingTree(externalTree);
+    const parentId = useFloatingParentNodeId();
+    useIsoLayoutEffect(()=>{
+        if (!id) return;
+        const node = {
+            id,
+            parentId
+        };
+        tree?.addNode(node);
+        return ()=>{
+            tree?.removeNode(node);
+        };
+    }, [
+        tree,
+        id,
+        parentId
+    ]);
+    return id;
+}
+function FloatingNode(props) {
+    const { children, id } = props;
+    const parentId = useFloatingParentNodeId();
+    return /*#__PURE__*/ jsx(FloatingNodeContext.Provider, {
+        value: __rspack_external_react.useMemo(()=>({
+                id,
+                parentId
+            }), [
+            id,
+            parentId
+        ]),
+        children: children
+    });
+}
+function FloatingTree(props) {
+    const { children, externalTree } = props;
+    const tree = useRefWithInit(()=>externalTree ?? new FloatingTreeStore()).current;
+    return /*#__PURE__*/ jsx(FloatingTreeContext.Provider, {
+        value: tree,
+        children: children
+    });
+}
+export { FloatingNode, FloatingTree, FloatingTreeStore, createEventEmitter, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree };

package/dist/2861.js

@@ -0,0 +1,6 @@
+import * as __rspack_external_react from "react";
+const EMPTY = [];
+function useOnMount(fn) {
+    __rspack_external_react.useEffect(fn, EMPTY);
+}
+export { useOnMount };

package/dist/3020.js

@@ -0,0 +1,7 @@
+import { useRenderDialogRoot, IsDrawerContext } from "./6270.js";
+import * as __rspack_external_react from "react";
+function DialogRoot(props) {
+    const mode = __rspack_external_react.useContext(IsDrawerContext) ? 'drawer' : 'dialog';
+    return useRenderDialogRoot(props, mode);
+}
+export { DialogRoot };

package/dist/3021.js

@@ -0,0 +1,72 @@
+import { useCompositeListContext } from "./5036.js";
+import { useIsoLayoutEffect } from "./6499.js";
+import * as __rspack_external_react from "react";
+let useCompositeListItem_IndexGuessBehavior = /*#__PURE__*/ function(IndexGuessBehavior) {
+    IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
+    IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
+    return IndexGuessBehavior;
+}({});
+function useCompositeListItem(params = {}) {
+    const { label, metadata, textRef, indexGuessBehavior, index: externalIndex } = params;
+    const { register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef } = useCompositeListContext();
+    const indexRef = __rspack_external_react.useRef(-1);
+    const [index, setIndex] = __rspack_external_react.useState(externalIndex ?? (indexGuessBehavior === useCompositeListItem_IndexGuessBehavior.GuessFromOrder ? ()=>{
+        if (-1 === indexRef.current) {
+            const newIndex = nextIndexRef.current;
+            nextIndexRef.current += 1;
+            indexRef.current = newIndex;
+        }
+        return indexRef.current;
+    } : -1));
+    const componentRef = __rspack_external_react.useRef(null);
+    const ref = __rspack_external_react.useCallback((node)=>{
+        componentRef.current = node;
+        if (-1 !== index && null !== node) {
+            elementsRef.current[index] = node;
+            if (labelsRef) {
+                const isLabelDefined = void 0 !== label;
+                labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
+            }
+        }
+    }, [
+        index,
+        elementsRef,
+        labelsRef,
+        label,
+        textRef
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (null != externalIndex) return;
+        const node = componentRef.current;
+        if (node) {
+            register(node, metadata);
+            return ()=>{
+                unregister(node);
+            };
+        }
+    }, [
+        externalIndex,
+        register,
+        unregister,
+        metadata
+    ]);
+    useIsoLayoutEffect(()=>{
+        if (null != externalIndex) return;
+        return subscribeMapChange((map)=>{
+            const i = componentRef.current ? map.get(componentRef.current)?.index : null;
+            if (null != i) setIndex(i);
+        });
+    }, [
+        externalIndex,
+        subscribeMapChange,
+        setIndex
+    ]);
+    return __rspack_external_react.useMemo(()=>({
+            ref,
+            index
+        }), [
+        index,
+        ref
+    ]);
+}
+export { useCompositeListItem, useCompositeListItem_IndexGuessBehavior };