@depup/react-aria-components 1.16.0-depup.0

package/dist/ComboBox.mjs

@@ -0,0 +1,309 @@
+import {ButtonContext as $d2b4bc8c273e7be6$export$24d547caef80ccd1} from "./Button.mjs";
+import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.mjs";
+import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.mjs";
+import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.mjs";
+import {GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.mjs";
+import {InputContext as $3985021b0ad6602f$export$37fb8590cf2c088c} from "./Input.mjs";
+import {LabelContext as $01b77f81d0f07f68$export$75b6ee27786ba447} from "./Label.mjs";
+import {ListBoxContext as $eed445e0843c11d0$export$7ff8f37d2d81a48d, ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.mjs";
+import {OverlayTriggerStateContext as $de32f1b87079253c$export$d2f961adcb0afbe} from "./Dialog.mjs";
+import {PopoverContext as $07b14b47974efb58$export$9b9a0cd73afb7ca4} from "./Popover.mjs";
+import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.mjs";
+import {useFilter as $cP7hC$useFilter, useComboBox as $cP7hC$useComboBox, useListFormatter as $cP7hC$useListFormatter} from "react-aria";
+import {useComboBoxState as $cP7hC$useComboBoxState} from "react-stately";
+import {CollectionBuilder as $cP7hC$CollectionBuilder, createHideableComponent as $cP7hC$createHideableComponent} from "@react-aria/collections";
+import {useResizeObserver as $cP7hC$useResizeObserver, filterDOMProps as $cP7hC$filterDOMProps} from "@react-aria/utils";
+import $cP7hC$react, {createContext as $cP7hC$createContext, forwardRef as $cP7hC$forwardRef, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback, useContext as $cP7hC$useContext} from "react";
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $d01f2c01039c0eec$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$c02625b26074192c = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)(function ComboBox(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$d414ccceff7063c3);
+    let { children: children, isDisabled: isDisabled = false, isInvalid: isInvalid = false, isRequired: isRequired = false } = props;
+    let content = (0, $cP7hC$useMemo)(()=>{
+        var _props_items;
+        return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $eed445e0843c11d0$export$7ff8f37d2d81a48d).Provider, {
+            value: {
+                items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
+            }
+        }, typeof children === 'function' ? children({
+            isOpen: false,
+            isDisabled: isDisabled,
+            isInvalid: isInvalid,
+            isRequired: isRequired,
+            defaultChildren: null
+        }) : children);
+    }, [
+        children,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        props.items,
+        props.defaultItems
+    ]);
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $cP7hC$CollectionBuilder), {
+        content: content
+    }, (collection)=>/*#__PURE__*/ (0, $cP7hC$react).createElement($d01f2c01039c0eec$var$ComboBoxInner, {
+            props: props,
+            collection: collection,
+            comboBoxRef: ref
+        }));
+});
+// Contexts to clear inside the popover.
+const $d01f2c01039c0eec$var$CLEAR_CONTEXTS = [
+    (0, $01b77f81d0f07f68$export$75b6ee27786ba447),
+    (0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
+    (0, $3985021b0ad6602f$export$37fb8590cf2c088c),
+    (0, $a049562f99e7db0e$export$f9c6924e160136d1),
+    (0, $514c0188e459b4c0$export$9afb8bc826b033ea)
+];
+function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
+    let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
+    if (allowsCustomValue) formValue = 'text';
+    let { validationBehavior: formValidationBehavior } = (0, $64fa3d84918910a7$export$fabf2dc03a41866e)((0, $d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
+    var _props_validationBehavior, _ref;
+    let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
+    let { contains: contains } = (0, $cP7hC$useFilter)({
+        sensitivity: 'base'
+    });
+    let state = (0, $cP7hC$useComboBoxState)({
+        ...props,
+        defaultFilter: props.defaultFilter || contains,
+        // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
+        items: props.items,
+        children: undefined,
+        collection: collection,
+        validationBehavior: validationBehavior
+    });
+    let buttonRef = (0, $cP7hC$useRef)(null);
+    let inputRef = (0, $cP7hC$useRef)(null);
+    let listBoxRef = (0, $cP7hC$useRef)(null);
+    let popoverRef = (0, $cP7hC$useRef)(null);
+    let [labelRef, label] = (0, $64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
+    let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, valueProps: valueProps, ...validation } = (0, $cP7hC$useComboBox)({
+        ...(0, $64fa3d84918910a7$export$ef03459518577ad4)(props),
+        label: label,
+        inputRef: inputRef,
+        buttonRef: buttonRef,
+        listBoxRef: listBoxRef,
+        popoverRef: popoverRef,
+        name: formValue === 'text' ? name : undefined,
+        validationBehavior: validationBehavior
+    }, state);
+    // Make menu width match input + button
+    let [menuWidth, setMenuWidth] = (0, $cP7hC$useState)(null);
+    let onResize = (0, $cP7hC$useCallback)(()=>{
+        if (inputRef.current) {
+            var _buttonRef_current;
+            let buttonRect = (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect();
+            let inputRect = inputRef.current.getBoundingClientRect();
+            let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
+            let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
+            setMenuWidth(maxX - minX + 'px');
+        }
+    }, [
+        buttonRef,
+        inputRef,
+        setMenuWidth
+    ]);
+    (0, $cP7hC$useResizeObserver)({
+        ref: inputRef,
+        onResize: onResize
+    });
+    // Only expose a subset of state to renderProps function to avoid infinite render loop
+    let renderPropsState = (0, $cP7hC$useMemo)(()=>({
+            isOpen: state.isOpen,
+            isDisabled: props.isDisabled || false,
+            isInvalid: validation.isInvalid || false,
+            isRequired: props.isRequired || false
+        }), [
+        state.isOpen,
+        props.isDisabled,
+        validation.isInvalid,
+        props.isRequired
+    ]);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...props,
+        values: renderPropsState,
+        defaultClassName: 'react-aria-ComboBox'
+    });
+    let DOMProps = (0, $cP7hC$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    let inputs = [];
+    if (name && formValue === 'key') {
+        let values = Array.isArray(state.value) ? state.value : [
+            state.value
+        ];
+        if (values.length === 0) values = [
+            null
+        ];
+        inputs = values.map((value, i)=>/*#__PURE__*/ (0, $cP7hC$react).createElement("input", {
+                key: i,
+                type: "hidden",
+                name: name,
+                form: props.form,
+                value: value !== null && value !== void 0 ? value : ''
+            }));
+    }
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
+        values: [
+            [
+                $d01f2c01039c0eec$export$c02625b26074192c,
+                state
+            ],
+            [
+                (0, $01b77f81d0f07f68$export$75b6ee27786ba447),
+                {
+                    ...labelProps,
+                    ref: labelRef
+                }
+            ],
+            [
+                (0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
+                {
+                    ...buttonProps,
+                    ref: buttonRef,
+                    isPressed: state.isOpen
+                }
+            ],
+            [
+                (0, $3985021b0ad6602f$export$37fb8590cf2c088c),
+                {
+                    ...inputProps,
+                    ref: inputRef
+                }
+            ],
+            [
+                (0, $de32f1b87079253c$export$d2f961adcb0afbe),
+                state
+            ],
+            [
+                (0, $07b14b47974efb58$export$9b9a0cd73afb7ca4),
+                {
+                    ref: popoverRef,
+                    triggerRef: inputRef,
+                    scrollRef: listBoxRef,
+                    placement: 'bottom start',
+                    isNonModal: true,
+                    trigger: 'ComboBox',
+                    style: {
+                        '--trigger-width': menuWidth
+                    },
+                    clearContexts: $d01f2c01039c0eec$var$CLEAR_CONTEXTS
+                }
+            ],
+            [
+                (0, $eed445e0843c11d0$export$7ff8f37d2d81a48d),
+                {
+                    ...listBoxProps,
+                    ref: listBoxRef
+                }
+            ],
+            [
+                (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
+                state
+            ],
+            [
+                (0, $514c0188e459b4c0$export$9afb8bc826b033ea),
+                {
+                    slots: {
+                        description: descriptionProps,
+                        errorMessage: errorMessageProps
+                    }
+                }
+            ],
+            [
+                (0, $a049562f99e7db0e$export$f9c6924e160136d1),
+                {
+                    isInvalid: validation.isInvalid,
+                    isDisabled: props.isDisabled || false
+                }
+            ],
+            [
+                (0, $ee014567cb39d3f0$export$ff05c3ac10437e03),
+                validation
+            ],
+            [
+                $d01f2c01039c0eec$export$5c804022b41722df,
+                valueProps
+            ]
+        ]
+    }, /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
+        ...DOMProps,
+        ...renderProps,
+        ref: ref,
+        slot: props.slot || undefined,
+        "data-focused": state.isFocused || undefined,
+        "data-open": state.isOpen || undefined,
+        "data-disabled": props.isDisabled || undefined,
+        "data-invalid": validation.isInvalid || undefined,
+        "data-required": props.isRequired || undefined
+    }, renderProps.children, inputs));
+}
+const $d01f2c01039c0eec$export$5c804022b41722df = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$3527949051a2d3a = /*#__PURE__*/ (0, $cP7hC$createHideableComponent)(function ComboBoxValue(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$5c804022b41722df);
+    let state = (0, $cP7hC$useContext)($d01f2c01039c0eec$export$c02625b26074192c);
+    let formatter = (0, $cP7hC$useListFormatter)();
+    let selectedText = (0, $cP7hC$useMemo)(()=>formatter.format(state.selectedItems.map((item)=>(item === null || item === void 0 ? void 0 : item.textValue) || '').filter((v)=>v !== '')), [
+        formatter,
+        state.selectedItems
+    ]);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...props,
+        defaultChildren: selectedText || props.placeholder,
+        defaultClassName: 'react-aria-ComboBoxValue',
+        values: {
+            selectedItems: (0, $cP7hC$useMemo)(()=>state.selectedItems.map((item)=>{
+                    var _item_value;
+                    return (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : null;
+                }), [
+                state.selectedItems
+            ]),
+            selectedText: selectedText,
+            isPlaceholder: state.selectedItems.length === 0,
+            state: state
+        }
+    });
+    let DOMProps = (0, $cP7hC$filterDOMProps)(props, {
+        global: true
+    });
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
+        ref: ref,
+        ...DOMProps,
+        ...renderProps,
+        "data-placeholder": state.selectedItems.length === 0 || undefined
+    });
+});
+
+
+export {$d01f2c01039c0eec$export$d414ccceff7063c3 as ComboBoxContext, $d01f2c01039c0eec$export$c02625b26074192c as ComboBoxStateContext, $d01f2c01039c0eec$export$72b9695b8216309a as ComboBox, $d01f2c01039c0eec$export$5c804022b41722df as ComboBoxValueContext, $d01f2c01039c0eec$export$3527949051a2d3a as ComboBoxValue};
+//# sourceMappingURL=ComboBox.module.js.map

package/dist/ComboBox.module.js

@@ -0,0 +1,309 @@
+import {ButtonContext as $d2b4bc8c273e7be6$export$24d547caef80ccd1} from "./Button.module.js";
+import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
+import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.module.js";
+import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.module.js";
+import {GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.module.js";
+import {InputContext as $3985021b0ad6602f$export$37fb8590cf2c088c} from "./Input.module.js";
+import {LabelContext as $01b77f81d0f07f68$export$75b6ee27786ba447} from "./Label.module.js";
+import {ListBoxContext as $eed445e0843c11d0$export$7ff8f37d2d81a48d, ListStateContext as $eed445e0843c11d0$export$7c5906fe4f1f2af2} from "./ListBox.module.js";
+import {OverlayTriggerStateContext as $de32f1b87079253c$export$d2f961adcb0afbe} from "./Dialog.module.js";
+import {PopoverContext as $07b14b47974efb58$export$9b9a0cd73afb7ca4} from "./Popover.module.js";
+import {TextContext as $514c0188e459b4c0$export$9afb8bc826b033ea} from "./Text.module.js";
+import {useFilter as $cP7hC$useFilter, useComboBox as $cP7hC$useComboBox, useListFormatter as $cP7hC$useListFormatter} from "react-aria";
+import {useComboBoxState as $cP7hC$useComboBoxState} from "react-stately";
+import {CollectionBuilder as $cP7hC$CollectionBuilder, createHideableComponent as $cP7hC$createHideableComponent} from "@react-aria/collections";
+import {useResizeObserver as $cP7hC$useResizeObserver, filterDOMProps as $cP7hC$filterDOMProps} from "@react-aria/utils";
+import $cP7hC$react, {createContext as $cP7hC$createContext, forwardRef as $cP7hC$forwardRef, useMemo as $cP7hC$useMemo, useRef as $cP7hC$useRef, useState as $cP7hC$useState, useCallback as $cP7hC$useCallback, useContext as $cP7hC$useContext} from "react";
+
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $d01f2c01039c0eec$export$d414ccceff7063c3 = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$c02625b26074192c = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwardRef)(function ComboBox(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$d414ccceff7063c3);
+    let { children: children, isDisabled: isDisabled = false, isInvalid: isInvalid = false, isRequired: isRequired = false } = props;
+    let content = (0, $cP7hC$useMemo)(()=>{
+        var _props_items;
+        return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $eed445e0843c11d0$export$7ff8f37d2d81a48d).Provider, {
+            value: {
+                items: (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems
+            }
+        }, typeof children === 'function' ? children({
+            isOpen: false,
+            isDisabled: isDisabled,
+            isInvalid: isInvalid,
+            isRequired: isRequired,
+            defaultChildren: null
+        }) : children);
+    }, [
+        children,
+        isDisabled,
+        isInvalid,
+        isRequired,
+        props.items,
+        props.defaultItems
+    ]);
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $cP7hC$CollectionBuilder), {
+        content: content
+    }, (collection)=>/*#__PURE__*/ (0, $cP7hC$react).createElement($d01f2c01039c0eec$var$ComboBoxInner, {
+            props: props,
+            collection: collection,
+            comboBoxRef: ref
+        }));
+});
+// Contexts to clear inside the popover.
+const $d01f2c01039c0eec$var$CLEAR_CONTEXTS = [
+    (0, $01b77f81d0f07f68$export$75b6ee27786ba447),
+    (0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
+    (0, $3985021b0ad6602f$export$37fb8590cf2c088c),
+    (0, $a049562f99e7db0e$export$f9c6924e160136d1),
+    (0, $514c0188e459b4c0$export$9afb8bc826b033ea)
+];
+function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
+    let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
+    if (allowsCustomValue) formValue = 'text';
+    let { validationBehavior: formValidationBehavior } = (0, $64fa3d84918910a7$export$fabf2dc03a41866e)((0, $d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
+    var _props_validationBehavior, _ref;
+    let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
+    let { contains: contains } = (0, $cP7hC$useFilter)({
+        sensitivity: 'base'
+    });
+    let state = (0, $cP7hC$useComboBoxState)({
+        ...props,
+        defaultFilter: props.defaultFilter || contains,
+        // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
+        items: props.items,
+        children: undefined,
+        collection: collection,
+        validationBehavior: validationBehavior
+    });
+    let buttonRef = (0, $cP7hC$useRef)(null);
+    let inputRef = (0, $cP7hC$useRef)(null);
+    let listBoxRef = (0, $cP7hC$useRef)(null);
+    let popoverRef = (0, $cP7hC$useRef)(null);
+    let [labelRef, label] = (0, $64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
+    let { buttonProps: buttonProps, inputProps: inputProps, listBoxProps: listBoxProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, valueProps: valueProps, ...validation } = (0, $cP7hC$useComboBox)({
+        ...(0, $64fa3d84918910a7$export$ef03459518577ad4)(props),
+        label: label,
+        inputRef: inputRef,
+        buttonRef: buttonRef,
+        listBoxRef: listBoxRef,
+        popoverRef: popoverRef,
+        name: formValue === 'text' ? name : undefined,
+        validationBehavior: validationBehavior
+    }, state);
+    // Make menu width match input + button
+    let [menuWidth, setMenuWidth] = (0, $cP7hC$useState)(null);
+    let onResize = (0, $cP7hC$useCallback)(()=>{
+        if (inputRef.current) {
+            var _buttonRef_current;
+            let buttonRect = (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect();
+            let inputRect = inputRef.current.getBoundingClientRect();
+            let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;
+            let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;
+            setMenuWidth(maxX - minX + 'px');
+        }
+    }, [
+        buttonRef,
+        inputRef,
+        setMenuWidth
+    ]);
+    (0, $cP7hC$useResizeObserver)({
+        ref: inputRef,
+        onResize: onResize
+    });
+    // Only expose a subset of state to renderProps function to avoid infinite render loop
+    let renderPropsState = (0, $cP7hC$useMemo)(()=>({
+            isOpen: state.isOpen,
+            isDisabled: props.isDisabled || false,
+            isInvalid: validation.isInvalid || false,
+            isRequired: props.isRequired || false
+        }), [
+        state.isOpen,
+        props.isDisabled,
+        validation.isInvalid,
+        props.isRequired
+    ]);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...props,
+        values: renderPropsState,
+        defaultClassName: 'react-aria-ComboBox'
+    });
+    let DOMProps = (0, $cP7hC$filterDOMProps)(props, {
+        global: true
+    });
+    delete DOMProps.id;
+    let inputs = [];
+    if (name && formValue === 'key') {
+        let values = Array.isArray(state.value) ? state.value : [
+            state.value
+        ];
+        if (values.length === 0) values = [
+            null
+        ];
+        inputs = values.map((value, i)=>/*#__PURE__*/ (0, $cP7hC$react).createElement("input", {
+                key: i,
+                type: "hidden",
+                name: name,
+                form: props.form,
+                value: value !== null && value !== void 0 ? value : ''
+            }));
+    }
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
+        values: [
+            [
+                $d01f2c01039c0eec$export$c02625b26074192c,
+                state
+            ],
+            [
+                (0, $01b77f81d0f07f68$export$75b6ee27786ba447),
+                {
+                    ...labelProps,
+                    ref: labelRef
+                }
+            ],
+            [
+                (0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
+                {
+                    ...buttonProps,
+                    ref: buttonRef,
+                    isPressed: state.isOpen
+                }
+            ],
+            [
+                (0, $3985021b0ad6602f$export$37fb8590cf2c088c),
+                {
+                    ...inputProps,
+                    ref: inputRef
+                }
+            ],
+            [
+                (0, $de32f1b87079253c$export$d2f961adcb0afbe),
+                state
+            ],
+            [
+                (0, $07b14b47974efb58$export$9b9a0cd73afb7ca4),
+                {
+                    ref: popoverRef,
+                    triggerRef: inputRef,
+                    scrollRef: listBoxRef,
+                    placement: 'bottom start',
+                    isNonModal: true,
+                    trigger: 'ComboBox',
+                    style: {
+                        '--trigger-width': menuWidth
+                    },
+                    clearContexts: $d01f2c01039c0eec$var$CLEAR_CONTEXTS
+                }
+            ],
+            [
+                (0, $eed445e0843c11d0$export$7ff8f37d2d81a48d),
+                {
+                    ...listBoxProps,
+                    ref: listBoxRef
+                }
+            ],
+            [
+                (0, $eed445e0843c11d0$export$7c5906fe4f1f2af2),
+                state
+            ],
+            [
+                (0, $514c0188e459b4c0$export$9afb8bc826b033ea),
+                {
+                    slots: {
+                        description: descriptionProps,
+                        errorMessage: errorMessageProps
+                    }
+                }
+            ],
+            [
+                (0, $a049562f99e7db0e$export$f9c6924e160136d1),
+                {
+                    isInvalid: validation.isInvalid,
+                    isDisabled: props.isDisabled || false
+                }
+            ],
+            [
+                (0, $ee014567cb39d3f0$export$ff05c3ac10437e03),
+                validation
+            ],
+            [
+                $d01f2c01039c0eec$export$5c804022b41722df,
+                valueProps
+            ]
+        ]
+    }, /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
+        ...DOMProps,
+        ...renderProps,
+        ref: ref,
+        slot: props.slot || undefined,
+        "data-focused": state.isFocused || undefined,
+        "data-open": state.isOpen || undefined,
+        "data-disabled": props.isDisabled || undefined,
+        "data-invalid": validation.isInvalid || undefined,
+        "data-required": props.isRequired || undefined
+    }, renderProps.children, inputs));
+}
+const $d01f2c01039c0eec$export$5c804022b41722df = /*#__PURE__*/ (0, $cP7hC$createContext)(null);
+const $d01f2c01039c0eec$export$3527949051a2d3a = /*#__PURE__*/ (0, $cP7hC$createHideableComponent)(function ComboBoxValue(props, ref) {
+    [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d01f2c01039c0eec$export$5c804022b41722df);
+    let state = (0, $cP7hC$useContext)($d01f2c01039c0eec$export$c02625b26074192c);
+    let formatter = (0, $cP7hC$useListFormatter)();
+    let selectedText = (0, $cP7hC$useMemo)(()=>formatter.format(state.selectedItems.map((item)=>(item === null || item === void 0 ? void 0 : item.textValue) || '').filter((v)=>v !== '')), [
+        formatter,
+        state.selectedItems
+    ]);
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...props,
+        defaultChildren: selectedText || props.placeholder,
+        defaultClassName: 'react-aria-ComboBoxValue',
+        values: {
+            selectedItems: (0, $cP7hC$useMemo)(()=>state.selectedItems.map((item)=>{
+                    var _item_value;
+                    return (_item_value = item.value) !== null && _item_value !== void 0 ? _item_value : null;
+                }), [
+                state.selectedItems
+            ]),
+            selectedText: selectedText,
+            isPlaceholder: state.selectedItems.length === 0,
+            state: state
+        }
+    });
+    let DOMProps = (0, $cP7hC$filterDOMProps)(props, {
+        global: true
+    });
+    return /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
+        ref: ref,
+        ...DOMProps,
+        ...renderProps,
+        "data-placeholder": state.selectedItems.length === 0 || undefined
+    });
+});
+
+
+export {$d01f2c01039c0eec$export$d414ccceff7063c3 as ComboBoxContext, $d01f2c01039c0eec$export$c02625b26074192c as ComboBoxStateContext, $d01f2c01039c0eec$export$72b9695b8216309a as ComboBox, $d01f2c01039c0eec$export$5c804022b41722df as ComboBoxValueContext, $d01f2c01039c0eec$export$3527949051a2d3a as ComboBoxValue};
+//# sourceMappingURL=ComboBox.module.js.map

package/dist/ComboBox.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaComboBoxProps, useComboBox, useFilter, useListFormatter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {\n  ClassNameOrFunction,\n  ContextValue,\n  dom,\n  Provider,\n  RACValidation,\n  removeDataAttributes,\n  RenderProps,\n  SlotProps,\n  useContextProps,\n  useRenderProps,\n  useSlot,\n  useSlottedContext\n} from './utils';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder, createHideableComponent} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, Key, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\ntype SelectionMode = 'single' | 'multiple';\n\nexport interface ComboBoxRenderProps {\n  /**\n   * Whether the combobox is currently open.\n   * @selector [data-open]\n   */\n  isOpen: boolean,\n  /**\n   * Whether the combobox is disabled.\n   * @selector [data-disabled]\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the combobox is invalid.\n   * @selector [data-invalid]\n   */\n  isInvalid: boolean,\n  /**\n   * Whether the combobox is required.\n   * @selector [data-required]\n   */\n  isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object, M extends SelectionMode = 'single'> extends Omit<AriaComboBoxProps<T, M>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n  /**\n   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n   * @default 'react-aria-ComboBox'\n   */\n  className?: ClassNameOrFunction<ComboBoxRenderProps>,\n  /** The filter function used to determine if a option should be included in the combo box list. */\n  defaultFilter?: (textValue: string, inputValue: string) => boolean,\n  /**\n   * Whether the text or key of the selected item is submitted as part of an HTML form.\n   * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n   * @default 'key'\n   */\n  formValue?: 'text' | 'key',\n  /** Whether the combo box allows the menu to be open when the collection is empty. */\n  allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any, SelectionMode>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any, SelectionMode> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object, M extends SelectionMode = 'single'>(props: ComboBoxProps<T, M>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ComboBoxContext);\n  let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n  let content = useMemo(() => (\n    <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n      {typeof children === 'function'\n        ? children({\n          isOpen: false,\n          isDisabled,\n          isInvalid,\n          isRequired,\n          defaultChildren: null\n        })\n        : children}\n    </ListBoxContext.Provider>\n  ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n  return (\n    <CollectionBuilder content={content}>\n      {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n    </CollectionBuilder>\n  );\n});\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];\n\ninterface ComboBoxInnerProps<T extends object> {\n  props: ComboBoxProps<T, SelectionMode>,\n  collection: Collection<Node<T>>,\n  comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n  let {\n    name,\n    formValue = 'key',\n    allowsCustomValue\n  } = props;\n  if (allowsCustomValue) {\n    formValue = 'text';\n  }\n\n  let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n  let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n  let {contains} = useFilter({sensitivity: 'base'});\n  let state = useComboBoxState({\n    ...props,\n    defaultFilter: props.defaultFilter || contains,\n    // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n    items: props.items,\n    children: undefined,\n    collection,\n    validationBehavior\n  });\n\n  let buttonRef = useRef<HTMLButtonElement>(null);\n  let inputRef = useRef<HTMLInputElement>(null);\n  let listBoxRef = useRef<HTMLDivElement>(null);\n  let popoverRef = useRef<HTMLDivElement>(null);\n  let [labelRef, label] = useSlot(\n    !props['aria-label'] && !props['aria-labelledby']\n  );\n  let {\n    buttonProps,\n    inputProps,\n    listBoxProps,\n    labelProps,\n    descriptionProps,\n    errorMessageProps,\n    valueProps,\n    ...validation\n  } = useComboBox({\n    ...removeDataAttributes(props),\n    label,\n    inputRef,\n    buttonRef,\n    listBoxRef,\n    popoverRef,\n    name: formValue === 'text' ? name : undefined,\n    validationBehavior\n  }, state);\n\n  // Make menu width match input + button\n  let [menuWidth, setMenuWidth] = useState<string | null>(null);\n  let onResize = useCallback(() => {\n    if (inputRef.current) {\n      let buttonRect = buttonRef.current?.getBoundingClientRect();\n      let inputRect = inputRef.current.getBoundingClientRect();\n      let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n      let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n      setMenuWidth((maxX - minX) + 'px');\n    }\n  }, [buttonRef, inputRef, setMenuWidth]);\n\n  useResizeObserver({\n    ref: inputRef,\n    onResize: onResize\n  });\n\n  // Only expose a subset of state to renderProps function to avoid infinite render loop\n  let renderPropsState = useMemo(() => ({\n    isOpen: state.isOpen,\n    isDisabled: props.isDisabled || false,\n    isInvalid: validation.isInvalid || false,\n    isRequired: props.isRequired || false\n  }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n  let renderProps = useRenderProps({\n    ...props,\n    values: renderPropsState,\n    defaultClassName: 'react-aria-ComboBox'\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n  delete DOMProps.id;\n\n  let inputs: ReactElement[] = [];\n  if (name && formValue === 'key') {\n    let values: (Key | null)[] = Array.isArray(state.value) ? state.value : [state.value];\n    if (values.length === 0) {\n      values = [null];\n    }\n\n    inputs = values.map((value, i) => (\n      <input key={i} type=\"hidden\" name={name} form={props.form} value={value ?? ''} />\n    ));\n  }\n\n  return (\n    <Provider\n      values={[\n        [ComboBoxStateContext, state],\n        [LabelContext, {...labelProps, ref: labelRef}],\n        [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n        [InputContext, {...inputProps, ref: inputRef}],\n        [OverlayTriggerStateContext, state],\n        [PopoverContext, {\n          ref: popoverRef,\n          triggerRef: inputRef,\n          scrollRef: listBoxRef,\n          placement: 'bottom start',\n          isNonModal: true,\n          trigger: 'ComboBox',\n          style: {'--trigger-width': menuWidth} as React.CSSProperties,\n          clearContexts: CLEAR_CONTEXTS\n        }],\n        [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n        [ListStateContext, state],\n        [TextContext, {\n          slots: {\n            description: descriptionProps,\n            errorMessage: errorMessageProps\n          }\n        }],\n        [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n        [FieldErrorContext, validation],\n        [ComboBoxValueContext, valueProps]\n      ]}>\n      <dom.div\n        {...DOMProps}\n        {...renderProps}\n        ref={ref}\n        slot={props.slot || undefined}\n        data-focused={state.isFocused || undefined}\n        data-open={state.isOpen || undefined}\n        data-disabled={props.isDisabled || undefined}\n        data-invalid={validation.isInvalid || undefined}\n        data-required={props.isRequired || undefined}>\n        {renderProps.children}\n        {inputs}\n      </dom.div>\n    </Provider>\n  );\n}\n\nexport interface ComboBoxValueRenderProps<T> {\n  /**\n   * Whether the value is a placeholder.\n   * @selector [data-placeholder]\n   */\n  isPlaceholder: boolean,\n  /** The object values of the currently selected items. */\n  selectedItems: (T | null)[],\n  /** The textValue of the currently selected items. */\n  selectedText: string,\n  /** The state of the ComboBox. */\n  state: ComboBoxState<T, 'single' | 'multiple'>\n}\n\nexport interface ComboBoxValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<ComboBoxValueRenderProps<T>, 'div'> {\n  /**\n   * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n   * @default 'react-aria-ComboBoxValue'\n   */\n  className?: ClassNameOrFunction<ComboBoxValueRenderProps<T>>,\n  /** A value to display when no items are selected. */\n  placeholder?: ReactNode\n}\n\nexport const ComboBoxValueContext = createContext<ContextValue<ComboBoxValueProps<any>, HTMLDivElement>>(null);\n\n/**\n * ComboBoxValue renders the selected values of a ComboBox, or a placeholder if no value is selected.\n * By default, the items are rendered as a comma separated list. Use the render function to customize this.\n */\nexport const ComboBoxValue = /*#__PURE__*/ createHideableComponent(function ComboBoxValue<T extends object>(props: ComboBoxValueProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n  [props, ref] = useContextProps(props, ref, ComboBoxValueContext);\n  let state = useContext(ComboBoxStateContext)!;\n  let formatter = useListFormatter();\n  let selectedText = useMemo(() => formatter.format(state.selectedItems.map(item => item?.textValue || '').filter(v => v !== '')), [formatter, state.selectedItems]);\n\n  let renderProps = useRenderProps({\n    ...props,\n    defaultChildren: selectedText || props.placeholder,\n    defaultClassName: 'react-aria-ComboBoxValue',\n    values: {\n      selectedItems: useMemo(() => state.selectedItems.map(item => item.value as T ?? null), [state.selectedItems]),\n      selectedText,\n      isPlaceholder: state.selectedItems.length === 0,\n      state\n    }\n  });\n\n  let DOMProps = filterDOMProps(props, {global: true});\n\n  return (\n    <dom.div\n      ref={ref}\n      {...DOMProps}\n      {...renderProps}\n      data-placeholder={state.selectedItems.length === 0 || undefined} />\n  );\n});\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}