@jobber/components 9.5.3 → 9.6.0

package/dist/Combobox-cjs.js

@@ -0,0 +1,675 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-cjs.js');
+var React = require('react');
+var jobberHooks = require('@jobber/hooks');
+var classnames = require('classnames');
+var getMappedBreakpointWidth = require('./getMappedBreakpointWidth-cjs.js');
+var Button = require('./Button-cjs.js');
+var buttonRenderAdapter = require('./buttonRenderAdapter-cjs.js');
+var ComboboxPrimitive = require('./ComboboxPrimitive-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var Icon = require('./Icon-cjs.js');
+var mergeClassName = require('./mergeClassName-cjs.js');
+var AtlantisContext = require('./AtlantisContext-cjs.js');
+var Glimmer = require('./Glimmer-cjs.js');
+var HelperText = require('./HelperText-cjs.js');
+var FieldDescription = require('./FieldDescription-cjs.js');
+
+function defaultIsItemEqual(candidateValue, selectedValue) {
+    return Object.is(candidateValue, selectedValue);
+}
+function isValueSelected(candidateValue, selectedValues, isItemEqual = (defaultIsItemEqual)) {
+    return selectedValues.some(selectedValue => isItemEqual(candidateValue, selectedValue));
+}
+function getSelectAllState({ candidateValues, isItemEqual = defaultIsItemEqual, selectedValues, }) {
+    const selectedCandidateCount = candidateValues.filter(candidateValue => isValueSelected(candidateValue, selectedValues, isItemEqual)).length;
+    const candidateCount = candidateValues.length;
+    return {
+        checked: candidateCount > 0 && selectedCandidateCount === candidateCount,
+        indeterminate: selectedCandidateCount > 0 && selectedCandidateCount < candidateCount,
+        selectedCandidateCount,
+        candidateCount,
+    };
+}
+function getNextSelectAllValues({ candidateValues, isItemEqual = defaultIsItemEqual, selectedValues, }) {
+    const nextSelectedValues = [...selectedValues];
+    for (const candidateValue of candidateValues) {
+        if (!isValueSelected(candidateValue, nextSelectedValues, isItemEqual)) {
+            nextSelectedValues.push(candidateValue);
+        }
+    }
+    return nextSelectedValues;
+}
+
+const DEFAULT_COMBOBOX_RESPONSIVE_CONFIG = {
+    defaultModal: false,
+    footerActionButtonRecipe: {
+        size: "small",
+        type: "secondary",
+        variation: "work",
+    },
+    positionerProps: {},
+    showChipRemove: true,
+};
+const MOBILE_COMBOBOX_RESPONSIVE_CONFIG = {
+    defaultModal: true,
+    footerActionButtonRecipe: {
+        size: "base",
+        type: "secondary",
+        variation: "work",
+    },
+    positionerProps: {
+        align: "center",
+        positionMethod: "fixed",
+        side: "bottom",
+        sideOffset: 0,
+        style: {
+            position: "fixed",
+            width: "100dvw",
+            maxWidth: "100dvw",
+            margin: 0,
+            transform: "none",
+            inset: "auto 0 0",
+        },
+    },
+    showChipRemove: false,
+};
+function getComboboxResponsiveConfig(width) {
+    if (width !== undefined && width <= getMappedBreakpointWidth.AtlantisBreakpoints.sm) {
+        return MOBILE_COMBOBOX_RESPONSIVE_CONFIG;
+    }
+    return DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+}
+
+const ComboboxContext = React.createContext(null);
+function useOptionalComboboxContext() {
+    return React.useContext(ComboboxContext);
+}
+function useComboboxContext() {
+    const context = React.useContext(ComboboxContext);
+    if (!context) {
+        throw new Error("Combobox components must be rendered inside Combobox");
+    }
+    return context;
+}
+
+function createComboboxSlotSystem(markerKey) {
+    function assignSlot(component, slot) {
+        return Object.assign(component, {
+            [markerKey]: slot,
+        });
+    }
+    function createSlot(slot) {
+        function ComboboxSlot(props) {
+            return null;
+        }
+        return assignSlot(ComboboxSlot, slot);
+    }
+    function isSlotElement(child) {
+        return (React.isValidElement(child) &&
+            typeof child.type !== "string" &&
+            markerKey in child.type);
+    }
+    return { assignSlot, createSlot, isSlotElement };
+}
+
+const comboboxContentSlotSystem = createComboboxSlotSystem("comboboxContentSlot");
+const assignComboboxContentSlot = comboboxContentSlotSystem.assignSlot;
+const isComboboxContentSlotElement = comboboxContentSlotSystem.isSlotElement;
+
+var styles = {"root":"B0QmBtwlnHs-","sizeBase":"RViH4KcR7S4-","sizeSmall":"PhTQQLSQRfU-","sizeLarge":"_2GAP0lCM9iU-","hasLabel":"dCxC3YMhuE8-","label":"_0Ro-CPw-pBk-","innerLabel":"DZ76oTE8arw-","screenReaderOnly":"g6OcEs38-W4-","labelNote":"glfCUzOoqRs-","description":"hJLDca6C4mg-","error":"Otz3vBkHwV4-","itemContent":"CU-nnrvSp74-","itemPrefix":"YSCJxqQHVik-","itemSuffix":"N-6lDLwoViE-","itemIndicator":"UBwTOYJSaBc-","itemText":"TysU0fU7VI0-","itemLabel":"oV92tIYbjmQ-","itemDescription":"xN4obreiDIQ-","clear":"wOdZIAytarU-","triggerIconRotate":"_0jDShCnQjxc-","trigger":"mKKJ60Qxxmw-","triggerValueControl":"v6DatDYO-gk-","triggerValue":"LyrziI4LY5w-","triggerValueText":"ayWSHF3Mwfc-","triggerValueIcon":"Glijnn9-fUw-","mobileBackdrop":"_-0af5xRGjJ8-","input":"-io5LRdyoKw-","actions":"QW4rICN6z4c-","action":"_5BO0h44F148-","actionPrefix":"Anagh40JJn8-","actionLabel":"h7YEFty4FKU-","footer":"_9lX7ptB9-fA-","selectedCount":"OrcuITnCXZk-","empty":"ba6Qla9fx-g-","loading":"_5zl8TjDQSnQ-","loadingRow":"eir2NHzbDEQ-","loadingGlimmer":"eCs-SVKfAYc-","multipleChips":"eGxgqB0y1PA-","multiplePlaceholder":"Z07vGalCLy0-","multipleChip":"d3M1dXi1qlU-","multipleInput":"_-3jWBOtOWpY-","content":"m417c1Vd--E-","list":"zKAmeSlRRN4-","spinning":"mqMvu8yxz2w-"};
+
+function renderFooterActionButton(_a) {
+    var { actionButtonRecipe, children, label } = _a, buttonProps = tslib_es6.__rest(_a, ["actionButtonRecipe", "children", "label"]);
+    if (children) {
+        return (React.createElement(Button.Button, Object.assign({}, buttonProps, actionButtonRecipe), children));
+    }
+    return React.createElement(Button.Button, Object.assign({}, buttonProps, actionButtonRecipe, { label: label }));
+}
+function renderFooterClearButton(_a) {
+    var { actionButtonRecipe, children, label } = _a, clearProps = tslib_es6.__rest(_a, ["actionButtonRecipe", "children", "label"]);
+    return baseUiProps => {
+        const _a = buttonRenderAdapter.normalizeBaseUiButtonProps(baseUiProps), baseButtonProps = tslib_es6.__rest(_a, ["children"]);
+        return renderFooterActionButton(Object.assign(Object.assign({}, useRenderElement.mergeProps(baseButtonProps, clearProps)), { actionButtonRecipe,
+            children,
+            label }));
+    };
+}
+function renderFooterChildren(children, multiple) {
+    if (typeof children !== "function")
+        return children;
+    return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => children(getComboboxFooterState(selectedValue, multiple))));
+}
+function getSelectedCountContent(selectedCount, children) {
+    if (children)
+        return children(selectedCount);
+    return `${selectedCount} selected`;
+}
+function shouldShowSelectAll({ onSelectAll, selectAllState, }) {
+    if (!selectAllState || !onSelectAll)
+        return false;
+    if (selectAllState.candidateCount === 0)
+        return false;
+    return !selectAllState.checked;
+}
+function getSelectedCount(value) {
+    if (Array.isArray(value))
+        return value.length;
+    if (value == null)
+        return 0;
+    return 1;
+}
+function getSelectedValues(value) {
+    if (Array.isArray(value))
+        return value;
+    if (value == null)
+        return [];
+    return [value];
+}
+function getComboboxFooterState(selectedValue, multiple) {
+    const selectedCount = getSelectedCount(selectedValue);
+    return {
+        selectedCount,
+        selectedValue,
+        selectedValues: getSelectedValues(selectedValue),
+        hasSelection: selectedCount > 0,
+        canClearSelection: Boolean(multiple) && selectedCount > 0,
+        multiple: Boolean(multiple),
+    };
+}
+function ComboboxFooterBase({ children, className, style, }) {
+    const { multiple } = useComboboxContext();
+    return (React.createElement("div", { className: classnames(styles.footer, className), style: style }, renderFooterChildren(children, multiple)));
+}
+const ComboboxFooter = assignComboboxContentSlot(ComboboxFooterBase, "footer");
+function ComboboxSelectedCount({ children, className, }) {
+    const { multiple } = useComboboxContext();
+    return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => {
+        const state = getComboboxFooterState(selectedValue, multiple);
+        if (!state.multiple || !state.hasSelection)
+            return null;
+        return (React.createElement("span", { className: classnames(styles.selectedCount, className) }, getSelectedCountContent(state.selectedCount, children)));
+    }));
+}
+const ComboboxSelectionFooter = assignComboboxContentSlot(function ComboboxSelectionFooter({ className, style, showSelectedCount = true, selectAllLabel = "Select all", selectAllState, onSelectAll, }) {
+    const { multiple } = useComboboxContext();
+    if (!multiple)
+        return null;
+    return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => {
+        const state = getComboboxFooterState(selectedValue, multiple);
+        const showSelectAll = shouldShowSelectAll({
+            onSelectAll,
+            selectAllState,
+        });
+        if (!state.hasSelection && !showSelectAll)
+            return null;
+        return (React.createElement(ComboboxFooter, { className: className, style: style },
+            showSelectedCount && React.createElement(ComboboxSelectedCount, null),
+            React.createElement(ComboboxClearSelection, null),
+            showSelectAll && (React.createElement(ComboboxSelectAll, { label: selectAllLabel, onClick: onSelectAll }))));
+    }));
+}, "footer");
+function ComboboxClearSelection(_a) {
+    var { children, label = "Clear", tabIndex } = _a, clearProps = tslib_es6.__rest(_a, ["children", "label", "tabIndex"]);
+    const { multiple, responsive } = useComboboxContext();
+    return (React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValue) => {
+        const state = getComboboxFooterState(selectedValue, multiple);
+        if (!state.multiple || !state.hasSelection)
+            return null;
+        return (React.createElement(ComboboxPrimitive.ComboboxClear, { render: renderFooterClearButton(Object.assign(Object.assign({}, clearProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
+                label })), tabIndex: tabIndex }));
+    }));
+}
+function ComboboxSelectAll(_a) {
+    var { children, label = "Select all" } = _a, buttonProps = tslib_es6.__rest(_a, ["children", "label"]);
+    const { multiple, responsive } = useComboboxContext();
+    if (!multiple)
+        return null;
+    return renderFooterActionButton(Object.assign(Object.assign({}, buttonProps), { actionButtonRecipe: responsive.footerActionButtonRecipe, children,
+        label }));
+}
+
+function getFallbackChildren(children) {
+    if (children.length === 0)
+        return null;
+    if (children.length === 1)
+        return children[0];
+    return children;
+}
+const comboboxItemSlotSystem = createComboboxSlotSystem("comboboxItemSlot");
+const comboboxActionSlotSystem = createComboboxSlotSystem("comboboxActionSlot");
+const createComboboxItemSlot = comboboxItemSlotSystem.createSlot;
+const createComboboxActionSlot = comboboxActionSlotSystem.createSlot;
+function isComboboxItemSlotElement(child) {
+    return comboboxItemSlotSystem.isSlotElement(child);
+}
+function isComboboxActionSlotElement(child) {
+    return comboboxActionSlotSystem.isSlotElement(child);
+}
+function parseSlottedChildren(children, isSlotElement, getSlotName) {
+    const slots = {};
+    const unslottedChildren = [];
+    React.Children.forEach(children, child => {
+        if (!isSlotElement(child)) {
+            unslottedChildren.push(child);
+            return;
+        }
+        slots[getSlotName(child)] = {
+            children: child.props.children,
+            className: child.props.className,
+            style: child.props.style,
+        };
+    });
+    return { slots, unslottedChildren };
+}
+function parseComboboxItemChildren(children) {
+    const { slots, unslottedChildren } = parseSlottedChildren(children, isComboboxItemSlotElement, child => child.type.comboboxItemSlot);
+    if (!slots.label && unslottedChildren.length > 0) {
+        slots.label = {
+            children: getFallbackChildren(unslottedChildren),
+        };
+    }
+    return slots;
+}
+function parseComboboxActionChildren(children) {
+    const { slots, unslottedChildren } = parseSlottedChildren(children, isComboboxActionSlotElement, child => child.type.comboboxActionSlot);
+    return { actionSlots: slots, unslottedChildren };
+}
+function getActionLabelChildren(actionSlots, unslottedChildren) {
+    if (actionSlots.label)
+        return actionSlots.label.children;
+    return getFallbackChildren(unslottedChildren);
+}
+function getActionPrefixChildren(actionSlots) {
+    if (actionSlots.prefix)
+        return actionSlots.prefix.children;
+    return (React.createElement(Icon.Icon, { color: "interactive", name: "add", UNSAFE_style: { svg: { width: 24, height: 24 } } }));
+}
+function renderActionPrefix(actionSlots) {
+    var _a, _b;
+    return (React.createElement("span", { "aria-hidden": "true", className: classnames(styles.actionPrefix, (_a = actionSlots.prefix) === null || _a === void 0 ? void 0 : _a.className), style: (_b = actionSlots.prefix) === null || _b === void 0 ? void 0 : _b.style }, getActionPrefixChildren(actionSlots)));
+}
+function renderActionLabel(actionSlots, labelChildren) {
+    var _a, _b;
+    if (!labelChildren)
+        return null;
+    return (React.createElement("span", { className: classnames(styles.actionLabel, (_a = actionSlots.label) === null || _a === void 0 ? void 0 : _a.className), style: (_b = actionSlots.label) === null || _b === void 0 ? void 0 : _b.style }, labelChildren));
+}
+function ComboboxList(_a) {
+    var { className } = _a, listProps = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(ComboboxPrimitive.ComboboxList, Object.assign({}, listProps, { className: mergeClassName.mergeClassName(styles.list, className) })));
+}
+function ComboboxItem(_a) {
+    var { children } = _a, itemProps = tslib_es6.__rest(_a, ["children"]);
+    const itemSlots = parseComboboxItemChildren(children);
+    return (React.createElement(ComboboxPrimitive.ComboboxItem, Object.assign({}, itemProps),
+        React.createElement("div", { className: styles.itemContent },
+            itemSlots.prefix && (React.createElement("div", { className: classnames(styles.itemPrefix, itemSlots.prefix.className), style: itemSlots.prefix.style }, itemSlots.prefix.children)),
+            React.createElement("div", { className: styles.itemText },
+                itemSlots.label && (React.createElement("div", { className: classnames(styles.itemLabel, itemSlots.label.className), style: itemSlots.label.style }, itemSlots.label.children)),
+                itemSlots.description && (React.createElement("div", { className: classnames(styles.itemDescription, itemSlots.description.className), style: itemSlots.description.style }, itemSlots.description.children))),
+            itemSlots.suffix && (React.createElement("div", { className: classnames(styles.itemSuffix, itemSlots.suffix.className), style: itemSlots.suffix.style }, itemSlots.suffix.children))),
+        React.createElement(ComboboxItemIndicator, { className: styles.itemIndicator },
+            React.createElement(Icon.Icon, { color: "icon", name: "checkmark", size: "base" }))));
+}
+function ComboboxItemIndicator(_a) {
+    var { className } = _a, itemIndicatorProps = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(ComboboxPrimitive.ComboboxItemIndicator, Object.assign({}, itemIndicatorProps, { className: mergeClassName.mergeClassName(styles.itemIndicator, className) })));
+}
+const ComboboxItemPrefixComponent = createComboboxItemSlot("prefix");
+const ComboboxItemLabelComponent = createComboboxItemSlot("label");
+const ComboboxItemDescriptionComponent = createComboboxItemSlot("description");
+const ComboboxItemSuffixComponent = createComboboxItemSlot("suffix");
+const ComboboxActionPrefixComponent = createComboboxActionSlot("prefix");
+const ComboboxActionLabelComponent = createComboboxActionSlot("label");
+function ComboboxRow(props) {
+    return React.createElement(ComboboxPrimitive.ComboboxRow, Object.assign({}, props));
+}
+function ComboboxCollection(props) {
+    return React.createElement(ComboboxPrimitive.ComboboxCollection, Object.assign({}, props));
+}
+function ComboboxGroup(props) {
+    return React.createElement(ComboboxPrimitive.ComboboxGroup, Object.assign({}, props));
+}
+function ComboboxGroupLabel(props) {
+    return React.createElement(ComboboxPrimitive.ComboboxGroupLabel, Object.assign({}, props));
+}
+function ComboboxSeparator(props) {
+    return React.createElement(ComboboxPrimitive.ComboboxSeparator, Object.assign({}, props));
+}
+const ComboboxActionsComponent = assignComboboxContentSlot(function ComboboxActions({ children, className, style, }) {
+    return (React.createElement("div", { className: classnames(styles.actions, className), style: style }, children));
+}, "actions");
+function ComboboxAction(_a) {
+    var { children, className, onClick } = _a, buttonProps = tslib_es6.__rest(_a, ["children", "className", "onClick"]);
+    const { actionSlots, unslottedChildren } = parseComboboxActionChildren(children);
+    const labelChildren = getActionLabelChildren(actionSlots, unslottedChildren);
+    return (React.createElement("button", Object.assign({}, buttonProps, { type: "button", className: classnames(styles.action, className), onClick: event => {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        } }),
+        renderActionPrefix(actionSlots),
+        renderActionLabel(actionSlots, labelChildren)));
+}
+
+const DEFAULT_LOADING_ROWS = 4;
+const DEFAULT_SIZE = "base";
+const DEFAULT_EMPTY_MESSAGE = "No results found";
+function getSizeClass(size) {
+    switch (size) {
+        case "small":
+            return styles.sizeSmall;
+        case "large":
+            return styles.sizeLarge;
+        case "base":
+        default:
+            return styles.sizeBase;
+    }
+}
+function useFilter(options) {
+    const { locale } = AtlantisContext.useAtlantisContext();
+    return ComboboxPrimitive.useFilter(Object.assign({ locale }, options));
+}
+function getIconSize(size) {
+    if (size === "small")
+        return "small";
+    return "base";
+}
+function shouldRenderInnerLabel(context) {
+    return Boolean((context === null || context === void 0 ? void 0 : context.label) && context.size !== "small");
+}
+function shouldRenderRecipeLabel(context) {
+    return Boolean(context === null || context === void 0 ? void 0 : context.label);
+}
+function parseComboboxContentChildren(children) {
+    const parsedChildren = {
+        content: [],
+        empty: [],
+        actions: [],
+        footer: [],
+        hasLoading: false,
+    };
+    React.Children.toArray(children).forEach(child => {
+        if (!isComboboxContentSlotElement(child)) {
+            parsedChildren.content.push(child);
+            return;
+        }
+        switch (child.type.comboboxContentSlot) {
+            case "empty":
+                parsedChildren.empty.push(child);
+                break;
+            case "actions":
+                parsedChildren.actions.push(child);
+                break;
+            case "footer":
+                parsedChildren.footer.push(child);
+                break;
+            case "loading":
+                parsedChildren.hasLoading = true;
+                parsedChildren.content.push(child);
+                break;
+        }
+    });
+    return parsedChildren;
+}
+function getDefaultEmptyChildren({ empty, hasLoading }, emptyContent) {
+    if (empty.length > 0)
+        return empty;
+    if (hasLoading)
+        return null;
+    if (emptyContent !== undefined) {
+        if (emptyContent === null)
+            return null;
+        return React.createElement(ComboboxEmpty, null, emptyContent);
+    }
+    return React.createElement(ComboboxEmpty, null, DEFAULT_EMPTY_MESSAGE);
+}
+function ComboboxRoot(_a) {
+    var { children, className, description, disabled, error, invalid, label, modal, style, multiple, readOnly, size = DEFAULT_SIZE } = _a, rootProps = tslib_es6.__rest(_a, ["children", "className", "description", "disabled", "error", "invalid", "label", "modal", "style", "multiple", "readOnly", "size"]);
+    const { width } = jobberHooks.useWindowDimensions();
+    const responsive = getComboboxResponsiveConfig(width);
+    const [positionerAnchor, setPositionerAnchor] = React.useState(null);
+    const contextValue = React.useMemo(() => ({
+        disabled: Boolean(disabled),
+        label,
+        multiple: Boolean(multiple),
+        positionerAnchor,
+        readOnly: Boolean(readOnly),
+        responsive,
+        setPositionerAnchor,
+        size,
+    }), [disabled, label, multiple, positionerAnchor, readOnly, responsive, size]);
+    return (React.createElement(FieldDescription.FieldRoot, { className: classnames(styles.root, className), "data-size": size, disabled: disabled, invalid: Boolean(error || invalid) || undefined, style: style },
+        React.createElement(ComboboxContext.Provider, { value: contextValue },
+            React.createElement(ComboboxPrimitive.ComboboxRoot, Object.assign({}, rootProps, { disabled: disabled, modal: modal !== null && modal !== void 0 ? modal : responsive.defaultModal, multiple: multiple, readOnly: readOnly }),
+                children,
+                description && (React.createElement(ComboboxDescription, null, description)),
+                error && React.createElement(ComboboxError, null, error)))));
+}
+function ComboboxRecipeLabel({ children, visuallyHidden, }) {
+    return (React.createElement(ComboboxLabel, { className: visuallyHidden ? styles.screenReaderOnly : styles.innerLabel }, children));
+}
+function ComboboxLabel(_a) {
+    var { className } = _a, labelProps = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(FieldDescription.FieldLabel, Object.assign({}, labelProps, { className: classnames(styles.label, className) })));
+}
+function ComboboxLabelNote(_a) {
+    var { className } = _a, labelNoteProps = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement("span", Object.assign({}, labelNoteProps, { className: classnames(styles.labelNote, className) })));
+}
+function ComboboxDescription(_a) {
+    var { children, className } = _a, descriptionProps = tslib_es6.__rest(_a, ["children", "className"]);
+    if (!children)
+        return null;
+    return (React.createElement(FieldDescription.FieldDescription, Object.assign({}, descriptionProps, { className: classnames(styles.description, className), render: React.createElement(HelperText.HelperText, { message: children }) })));
+}
+function ComboboxError(_a) {
+    var { children, className, match = true } = _a, errorProps = tslib_es6.__rest(_a, ["children", "className", "match"]);
+    if (!children)
+        return null;
+    return (React.createElement(FieldDescription.FieldError, Object.assign({}, errorProps, { className: classnames(styles.error, className), match: match, render: React.createElement(HelperText.HelperText, { message: children, status: "critical" }) })));
+}
+function ComboboxInputGroup(_a) {
+    var { className } = _a, inputGroupProps = tslib_es6.__rest(_a, ["className"]);
+    const context = useOptionalComboboxContext();
+    return (React.createElement(ComboboxPrimitive.ComboboxInputGroup, Object.assign({}, inputGroupProps, { className: mergeClassName.mergeClassName(getSizeClass(context === null || context === void 0 ? void 0 : context.size), className) })));
+}
+function ComboboxLabeledInputGroup({ children, inputGroupRef, }) {
+    const context = useOptionalComboboxContext();
+    const showLabel = shouldRenderInnerLabel(context);
+    const renderLabel = shouldRenderRecipeLabel(context);
+    return (React.createElement(ComboboxInputGroup, { className: showLabel ? styles.hasLabel : undefined, ref: inputGroupRef },
+        renderLabel && (React.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
+        children));
+}
+function ComboboxInput(_a) {
+    var { className } = _a, inputProps = tslib_es6.__rest(_a, ["className"]);
+    return (React.createElement(ComboboxPrimitive.ComboboxInput, Object.assign({}, inputProps, { className: mergeClassName.mergeClassName(styles.input, className) })));
+}
+function ComboboxTrigger(_a) {
+    var { className, render } = _a, triggerProps = tslib_es6.__rest(_a, ["className", "render"]);
+    const context = useOptionalComboboxContext();
+    const triggerClassName = render
+        ? className
+        : mergeClassName.mergeClassName(classnames(styles.trigger, getSizeClass(context === null || context === void 0 ? void 0 : context.size)), className);
+    return (React.createElement(ComboboxPrimitive.ComboboxTrigger, Object.assign({}, triggerProps, { render: render, className: triggerClassName })));
+}
+function ComboboxClear(_a) {
+    var { className } = _a, clearProps = tslib_es6.__rest(_a, ["className"]);
+    const context = useOptionalComboboxContext();
+    return (React.createElement(ComboboxPrimitive.ComboboxClear, Object.assign({}, clearProps, { className: mergeClassName.mergeClassName(classnames(styles.clear, getSizeClass(context === null || context === void 0 ? void 0 : context.size)), className) })));
+}
+function DefaultTriggerIcon({ size }) {
+    return (React.createElement(ComboboxPrimitive.ComboboxIcon, null,
+        React.createElement("span", { className: styles.triggerIconRotate },
+            React.createElement(Icon.Icon, { name: "arrowDown", color: "iconSecondary", size: getIconSize(size) }))));
+}
+function DefaultClearIcon() {
+    return React.createElement(Icon.Icon, { name: "cross", color: "icon", size: "small" });
+}
+function ComboboxTriggerInput(_a) {
+    var { className, clearLabel = "Clear selection", showOptionsLabel = "Open options" } = _a, inputProps = tslib_es6.__rest(_a, ["className", "clearLabel", "showOptionsLabel"]);
+    const context = useOptionalComboboxContext();
+    return (React.createElement(ComboboxLabeledInputGroup, null,
+        React.createElement(ComboboxInput, Object.assign({}, inputProps, { className: className })),
+        !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly) && (React.createElement(ComboboxClear, { "aria-label": clearLabel },
+            React.createElement(DefaultClearIcon, null))),
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+            React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
+}
+function ComboboxTriggerValue(_a) {
+    var { children, className, placeholder } = _a, triggerProps = tslib_es6.__rest(_a, ["children", "className", "placeholder"]);
+    const context = useOptionalComboboxContext();
+    const showLabel = shouldRenderInnerLabel(context);
+    const renderLabel = shouldRenderRecipeLabel(context);
+    return (React.createElement("div", { className: classnames(styles.triggerValueControl, getSizeClass(context === null || context === void 0 ? void 0 : context.size)) },
+        renderLabel && (React.createElement(ComboboxRecipeLabel, { visuallyHidden: !showLabel }, context === null || context === void 0 ? void 0 : context.label)),
+        React.createElement(ComboboxTrigger, Object.assign({}, triggerProps, { className: mergeClassName.mergeClassName(classnames(styles.triggerValue, getSizeClass(context === null || context === void 0 ? void 0 : context.size), showLabel && styles.hasLabel), className) }),
+            React.createElement("span", { className: styles.triggerValueText },
+                React.createElement(ComboboxPrimitive.ComboboxValue, { placeholder: placeholder }, children)),
+            React.createElement("span", { className: styles.triggerValueIcon },
+                React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size })))));
+}
+function getDefaultItemLabel(value) {
+    return String(value);
+}
+function hasPlaceholder(placeholder) {
+    return placeholder !== undefined && placeholder !== null;
+}
+function renderMultipleValueChips({ getItemLabel, renderChipContent, resolveRemoveLabel, selectedValues = [], showChipRemove, }) {
+    return selectedValues.map((selectedValue, index) => (React.createElement(ComboboxPrimitive.ComboboxChip, { className: styles.multipleChip, key: `${getItemLabel(selectedValue)}-${index}` },
+        renderChipContent(selectedValue),
+        showChipRemove && (React.createElement(ComboboxPrimitive.ComboboxChipRemove, { "aria-label": resolveRemoveLabel(selectedValue) },
+            React.createElement(Icon.Icon, { name: "cross", size: "small" }))))));
+}
+function ComboboxTriggerMultipleWithInput(_a) {
+    var _b;
+    var { className, getItemLabel = getDefaultItemLabel, getRemoveLabel, renderItem, showOptionsLabel = "Open options" } = _a, inputProps = tslib_es6.__rest(_a, ["className", "getItemLabel", "getRemoveLabel", "renderItem", "showOptionsLabel"]);
+    const context = useOptionalComboboxContext();
+    const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+    const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
+    return (React.createElement(ComboboxLabeledInputGroup, null,
+        React.createElement(ComboboxChips, null,
+            React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValues = []) => renderMultipleValueChips({
+                getItemLabel,
+                renderChipContent,
+                resolveRemoveLabel,
+                selectedValues,
+                showChipRemove,
+            })),
+            React.createElement(ComboboxPrimitive.ComboboxInput, Object.assign({}, inputProps, { className: mergeClassName.mergeClassName(styles.multipleInput, className) }))),
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+            React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
+}
+function ComboboxTriggerMultipleValue(_a) {
+    var _b;
+    var { getItemLabel = getDefaultItemLabel, getRemoveLabel, placeholder, renderItem, showOptionsLabel = "Open options" } = _a, chipsProps = tslib_es6.__rest(_a, ["getItemLabel", "getRemoveLabel", "placeholder", "renderItem", "showOptionsLabel"]);
+    const context = useOptionalComboboxContext();
+    const responsive = (_b = context === null || context === void 0 ? void 0 : context.responsive) !== null && _b !== void 0 ? _b : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+    const renderChipContent = renderItem !== null && renderItem !== void 0 ? renderItem : getItemLabel;
+    const resolveRemoveLabel = getRemoveLabel !== null && getRemoveLabel !== void 0 ? getRemoveLabel : ((value) => `Remove ${getItemLabel(value)}`);
+    const showChipRemove = responsive.showChipRemove && !(context === null || context === void 0 ? void 0 : context.disabled) && !(context === null || context === void 0 ? void 0 : context.readOnly);
+    const setPositionerAnchor = context === null || context === void 0 ? void 0 : context.setPositionerAnchor;
+    const inputGroupRef = React.useCallback((anchor) => setPositionerAnchor === null || setPositionerAnchor === void 0 ? void 0 : setPositionerAnchor(anchor), [setPositionerAnchor]);
+    return (React.createElement(ComboboxLabeledInputGroup, { inputGroupRef: inputGroupRef },
+        React.createElement(ComboboxChips, Object.assign({}, chipsProps),
+            React.createElement(ComboboxPrimitive.ComboboxValue, null, (selectedValues = []) => selectedValues.length > 0
+                ? renderMultipleValueChips({
+                    getItemLabel,
+                    renderChipContent,
+                    resolveRemoveLabel,
+                    selectedValues,
+                    showChipRemove,
+                })
+                : hasPlaceholder(placeholder) && (React.createElement("span", { className: styles.multiplePlaceholder }, placeholder)))),
+        React.createElement(ComboboxTrigger, { "aria-label": showOptionsLabel },
+            React.createElement(DefaultTriggerIcon, { size: context === null || context === void 0 ? void 0 : context.size }))));
+}
+function ComboboxContent({ ariaLabel, children, className, empty, style, }) {
+    var _a;
+    const context = useOptionalComboboxContext();
+    const responsive = (_a = context === null || context === void 0 ? void 0 : context.responsive) !== null && _a !== void 0 ? _a : DEFAULT_COMBOBOX_RESPONSIVE_CONFIG;
+    const contentChildren = parseComboboxContentChildren(children);
+    const emptyChildren = getDefaultEmptyChildren(contentChildren, empty);
+    return (React.createElement(ComboboxPrimitive.ComboboxPortal, null,
+        React.createElement(ComboboxPrimitive.ComboboxBackdrop, { className: styles.mobileBackdrop }),
+        React.createElement(ComboboxPrimitive.ComboboxPositioner, Object.assign({}, responsive.positionerProps, { anchor: context === null || context === void 0 ? void 0 : context.positionerAnchor }),
+            React.createElement(ComboboxPrimitive.ComboboxPopup, { "aria-label": ariaLabel, className: classnames(styles.content, className), style: style },
+                contentChildren.content,
+                emptyChildren,
+                contentChildren.actions,
+                contentChildren.footer))));
+}
+function ComboboxChips(_a) {
+    var { className } = _a, chipsProps = tslib_es6.__rest(_a, ["className"]);
+    const context = useOptionalComboboxContext();
+    return (React.createElement(ComboboxPrimitive.ComboboxChips, Object.assign({}, chipsProps, { className: mergeClassName.mergeClassName(classnames(styles.multipleChips, getSizeClass(context === null || context === void 0 ? void 0 : context.size)), className) })));
+}
+function ComboboxEmptyComponent({ children, className, style, }) {
+    return (React.createElement(ComboboxPrimitive.ComboboxEmpty, { className: classnames(styles.empty, className), style: style }, children));
+}
+const ComboboxEmpty = assignComboboxContentSlot(ComboboxEmptyComponent, "empty");
+function getLoadingRowCount(rows) {
+    if (!Number.isFinite(rows))
+        return DEFAULT_LOADING_ROWS;
+    return Math.max(0, Math.floor(rows));
+}
+function ComboboxLoadingComponent(_a) {
+    var { children, className, rows = DEFAULT_LOADING_ROWS, role = "status", "aria-label": ariaLabel = "Loading options" } = _a, loadingProps = tslib_es6.__rest(_a, ["children", "className", "rows", "role", "aria-label"]);
+    const rowCount = getLoadingRowCount(rows);
+    const content = children !== null && children !== void 0 ? children : Array.from({ length: rowCount }, (_, index) => (React.createElement("div", { "aria-hidden": "true", className: styles.loadingRow, key: `loading-row-${index}` },
+        React.createElement("div", { className: styles.loadingGlimmer },
+            React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "auto" })))));
+    return (React.createElement("div", Object.assign({}, loadingProps, { "aria-label": ariaLabel, className: classnames(styles.loading, className), role: role }), content));
+}
+const ComboboxLoading = assignComboboxContentSlot(ComboboxLoadingComponent, "loading");
+const Combobox = Object.assign(ComboboxRoot, {
+    Label: ComboboxLabel,
+    LabelNote: ComboboxLabelNote,
+    Description: ComboboxDescription,
+    Error: ComboboxError,
+    Value: ComboboxPrimitive.ComboboxValue,
+    InputGroup: ComboboxInputGroup,
+    Input: ComboboxInput,
+    Trigger: ComboboxTrigger,
+    TriggerInput: ComboboxTriggerInput,
+    TriggerValue: ComboboxTriggerValue,
+    TriggerMultipleWithInput: ComboboxTriggerMultipleWithInput,
+    TriggerMultipleValue: ComboboxTriggerMultipleValue,
+    Icon: ComboboxPrimitive.ComboboxIcon,
+    Clear: ComboboxClear,
+    Content: ComboboxContent,
+    List: ComboboxList,
+    Item: ComboboxItem,
+    ItemDescription: ComboboxItemDescriptionComponent,
+    ItemLabel: ComboboxItemLabelComponent,
+    ItemPrefix: ComboboxItemPrefixComponent,
+    ItemSuffix: ComboboxItemSuffixComponent,
+    ActionPrefix: ComboboxActionPrefixComponent,
+    ActionLabel: ComboboxActionLabelComponent,
+    Row: ComboboxRow,
+    Collection: ComboboxCollection,
+    Chips: ComboboxChips,
+    Chip: ComboboxPrimitive.ComboboxChip,
+    ChipRemove: ComboboxPrimitive.ComboboxChipRemove,
+    Group: ComboboxGroup,
+    GroupLabel: ComboboxGroupLabel,
+    Separator: ComboboxSeparator,
+    Status: ComboboxPrimitive.ComboboxStatus,
+    Empty: ComboboxEmpty,
+    Loading: ComboboxLoading,
+    Actions: ComboboxActionsComponent,
+    Action: ComboboxAction,
+    Footer: ComboboxFooter,
+    SelectionFooter: ComboboxSelectionFooter,
+    SelectedCount: ComboboxSelectedCount,
+    ClearSelection: ComboboxClearSelection,
+    SelectAll: ComboboxSelectAll,
+    useFilter,
+    getSelectAllState,
+    getNextSelectAllValues,
+});
+
+exports.Combobox = Combobox;