@adaptabletools/adaptable 23.1.0-canary.2 → 24.0.0-canary.0

package/vendor/components/Combobox/index.js

@@ -0,0 +1,764 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxSearchHeader, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, useFilteredItems, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from '../ui/combobox';
+import { cn } from '../lib/utils';
+import { ChevronDownIcon, Loader2Icon, PlusIcon } from 'lucide-react';
+import { useMemo } from 'react';
+import { InputGroupAddon, InputGroupButton } from '../ui/input-group';
+import { getItemTextLabel, toStringValue, toStringValues, valueToItem, valueToItems, } from './comboboxUtils';
+import { VirtualizedList } from './VirtualizedList';
+import { CheckBox } from '../CheckBox';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { mergeOverlayHostHandlers, useOverlayHost } from '../overlayHost';
+import { useScrollNearEnd } from './useScrollNearEnd';
+const ComboboxLoadingMoreIndicator = () => (_jsxs("div", { "data-slot": "combobox-loading-more", "data-adaptable-combobox-loading-more": "", role: "status", "aria-live": "polite", className: "twa:pointer-events-none twa:absolute twa:inset-x-0 twa:bottom-0 twa:z-10 twa:flex twa:items-center twa:justify-center twa:gap-2 twa:border-t twa:border-popover-foreground/10 twa:bg-popover/90 twa:px-2 twa:py-2 twa:text-sm twa:text-muted-foreground", children: [_jsx(Loader2Icon, { className: "twa:size-4 twa:animate-spin", "aria-hidden": "true" }), _jsx("span", { children: "Loading..." })] }));
+function getSelectAllCheckboxState(selectedItems, filteredItems) {
+    if (filteredItems.length === 0) {
+        return false;
+    }
+    if (selectedItems.length === 0) {
+        return false;
+    }
+    const selectedValues = new Set(selectedItems.map((item) => item.value));
+    let selectedVisibleCount = 0;
+    let unselectedVisibleCount = 0;
+    for (const item of filteredItems) {
+        if (selectedValues.has(item.value)) {
+            selectedVisibleCount += 1;
+        }
+        else {
+            unselectedVisibleCount += 1;
+        }
+        // Mixed selection — no need to scan the rest of a large list.
+        if (selectedVisibleCount > 0 && unselectedVisibleCount > 0) {
+            return null;
+        }
+    }
+    if (selectedVisibleCount === 0) {
+        return false;
+    }
+    return true;
+}
+function applySelectAllToSelection(options) {
+    const { checked, filteredItems, currentValues, itemByValue } = options;
+    // Every Set here is sized by the current selection — never by the filtered
+    // list, which can hold 100k+ entries with lazy-loaded IN filter values.
+    // The big list is only ever walked once, with cheap small-set lookups.
+    const currentSet = new Set(currentValues);
+    if (!checked) {
+        // Deselect the visible items; keep the rest in their existing order.
+        for (const item of filteredItems) {
+            currentSet.delete(item.value);
+        }
+        const values = currentValues.filter((value) => currentSet.has(value));
+        return { values, items: valueToItems(values, itemByValue) ?? [] };
+    }
+    // Selections hidden by the current search keep their place up front;
+    // the visible items follow in display order.
+    const visibleSelected = new Set();
+    for (const item of filteredItems) {
+        if (currentSet.has(item.value)) {
+            visibleSelected.add(item.value);
+        }
+    }
+    const hiddenValues = currentValues.filter((value) => !visibleSelected.has(value));
+    const hiddenItems = valueToItems(hiddenValues, itemByValue) ?? [];
+    return {
+        values: [...hiddenItems.map((item) => item.value), ...filteredItems.map((item) => item.value)],
+        items: [...hiddenItems, ...filteredItems],
+    };
+}
+const getContentStyle = ({ maxLabelLength }) => {
+    const labelWidth = `${maxLabelLength + 6}ch`;
+    return {
+        width: `max(${labelWidth}, calc(var(--ab-base-space) * 25), var(--anchor-width))`,
+        minWidth: `min(var(--anchor-width), var(--available-width), 80vw)`,
+    };
+};
+/**
+ * The element the popup is positioned against and sized from (base-ui's
+ * `--anchor-width`). Defaults to the trigger. A function form receives the
+ * trigger element once mounted and returns the anchor — handy for anchoring to
+ * an ancestor the trigger sits in.
+ */
+function usePopupAnchor(popupAnchor) {
+    const resolvedRef = React.useRef(null);
+    const setTriggerElement = React.useCallback((node) => {
+        resolvedRef.current =
+            typeof popupAnchor === 'function' && node ? popupAnchor(node) ?? node : node;
+    }, [popupAnchor]);
+    const anchor = popupAnchor && typeof popupAnchor !== 'function' ? popupAnchor : resolvedRef;
+    return { anchor, setTriggerElement };
+}
+function assignRef(ref, node) {
+    if (typeof ref === 'function') {
+        ref(node);
+    }
+    else if (ref) {
+        ref.current = node;
+    }
+}
+const getEmptyText = (props) => {
+    if (props.isLoading) {
+        return 'Loading...';
+    }
+    return props.emptyText ?? 'No items found.';
+};
+const AdaptableComboboxList = (props) => {
+    const virtualizerRef = React.useRef(null);
+    const nonVirtualizedScrollRef = React.useRef(null);
+    const loadingClassName = props.isLoading ? 'twa:opacity-50' : undefined;
+    // Must run under Combobox Root — returns items matching the current search.
+    const filteredItems = useFilteredItems();
+    useScrollNearEnd(nonVirtualizedScrollRef, props.onScrollNearEnd, {
+        offsetPx: props.scrollNearEndOffset,
+        enabled: props.open && !props.virtualized && !props.groups && !!props.onScrollNearEnd,
+        contentVersion: filteredItems.length,
+    });
+    const renderItem = (item) => {
+        const isUncreatedCreatable = item.creatable && !item.created;
+        const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
+        const itemLabel = props.renderItemLabel ? props.renderItemLabel(label, item) : label;
+        const itemContent = isUncreatedCreatable ? (_jsxs(_Fragment, { children: [_jsx(PlusIcon, {}), " ", itemLabel] })) : (itemLabel);
+        const itemText = getItemTextLabel(item);
+        const tooltipText = props.showItemTooltip && itemText != null
+            ? isUncreatedCreatable
+                ? `Create "${itemText}"`
+                : itemText
+            : undefined;
+        // The Tooltip must wrap the item's inner content rather than the
+        // `ComboboxItem` itself: when the tooltip trigger renders the option element
+        // it overwrites the option's `id`, which breaks base-ui's
+        // `aria-activedescendant` (`${rootId}-${index}`) link and silences screen
+        // readers as you navigate the list.
+        return (_jsx(ComboboxItem, { value: item, "aria-label": itemText ?? undefined, className: 'ab-Combobox-Row', disabled: item.disabled, renderCheckboxIndicator: props.renderCheckboxIndicator, children: tooltipText != null ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "twa:flex twa:min-w-0 twa:flex-1 twa:items-center twa:gap-2" }), children: itemContent }), _jsx(TooltipContent, { side: "right", children: tooltipText })] })) : (itemContent) }, item.value));
+    };
+    const list = props.groups ? (_jsx(ComboboxList, { className: loadingClassName, children: (group, index) => (_jsxs(React.Fragment, { children: [_jsxs(ComboboxGroup, { items: group.items, children: [group.label && _jsx(ComboboxLabel, { children: group.label }), _jsx(ComboboxCollection, { children: renderItem })] }), index < (props.groups?.length || 0) - 1 && _jsx(ComboboxSeparator, {})] }, typeof group.label === 'string' ? group.label : `${index}`)) })) : props.virtualized ? (_jsx(ComboboxPrimitive.List, { className: cn(loadingClassName, RESIZABLE_VIRTUALIZED_LIST_CLASS), children: _jsx(VirtualizedList, { open: props.open, renderItemLabel: props.renderItemLabel, virtualizerRef: virtualizerRef, showItemTooltip: props.showItemTooltip, renderCheckboxIndicator: props.renderCheckboxIndicator, onScrollNearEnd: props.onScrollNearEnd, scrollNearEndOffset: props.scrollNearEndOffset }) })) : (_jsx(ComboboxList, { ref: nonVirtualizedScrollRef, className: loadingClassName, children: renderItem }));
+    return (_jsxs(_Fragment, { children: [props.showSelectAllCheckbox && (_jsx(ComboboxValue, { children: (selectedItems) => {
+                    const allChecked = props.selectAllCheckboxValue !== undefined
+                        ? props.selectAllCheckboxValue
+                        : getSelectAllCheckboxState(selectedItems, filteredItems);
+                    return (_jsx(CheckBox, { checked: allChecked, onChange: (checked) => {
+                            props.onCheckAllChange?.(checked, filteredItems);
+                        }, onKeyDown: (e) => {
+                            if (e.key === 'Enter') {
+                                // Indeterminate → select visible items.
+                                props.onCheckAllChange?.(allChecked !== true, filteredItems);
+                            }
+                        }, onMouseDown: (e) => {
+                            // Prevent focus from moving to the checkbox input;
+                            // keeps focus on the combobox input so arrow-key navigation still works.
+                            // while still allowing the checkbox to be checked/unchecked as usual
+                            // either by clicking or by using the keyboard
+                            e.preventDefault();
+                        }, className: cn('twa:m-0 twa:px-3 twa:py-1 twa:text-sm twa:font-normal twa:w-full twa:bg-primary twa:text-muted-foreground twa:rounded-b-standard', {
+                            'twa:border-t twa:border-input/50': props.searchable === 'menulist',
+                            'twa:opacity-50': props.isLoading,
+                        }), children: "Select All" }));
+                } })), _jsx(ComboboxEmpty, { children: props.emptyText }), list, props.isLoadingMore ? _jsx(ComboboxLoadingMoreIndicator, {}) : null] }));
+};
+export const SingleCombobox = (props) => {
+    // A custom trigger is a button that opens the list — search belongs in the popup.
+    const searchable = props.renderTrigger
+        ? 'menulist'
+        : props.searchable === false
+            ? false
+            : props.searchable === 'menulist'
+                ? 'menulist'
+                : 'inline';
+    const isOpenControlled = props.open !== undefined;
+    const [open, setOpen] = React.useState(props.open ?? props.defaultOpen ?? false);
+    const resolvedOpen = isOpenControlled ? props.open : open;
+    const onOpenChange = (nextOpen) => {
+        if (!isOpenControlled)
+            setOpen(nextOpen);
+        props.onOpenChange?.(nextOpen);
+    };
+    const showItemTooltip = props.showItemTooltip ?? !!props.virtualized;
+    // Narrower single-select onValueChange is not assignable to the shared
+    // AdaptableComboboxProps handler (which also accepts multi values).
+    const sharedProps = props;
+    return searchable === 'menulist' ? (_jsx(SingleCombobox_MenuListSearchable, { ...sharedProps, multiple: false, open: resolvedOpen, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip })) : (_jsx(SingleCombobox_SimpleSearchable, { ...sharedProps, multiple: false, open: resolvedOpen, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip }));
+};
+const isItemEqualToValue = (a, b) => a?.value === b?.value;
+const AdaptableCombobox_Root = (props) => {
+    const allItems = props.allItems;
+    const itemByValue = props.itemByValue;
+    const resolvedValue = props.multiple
+        ? valueToItems(props.value, itemByValue)
+        : valueToItem(props.value, itemByValue);
+    // When props.value is defined, always pass null (not undefined) to keep base-ui in controlled mode,
+    // even if the item isn't in the lookup yet (e.g. async item loading).
+    const internalValue = props.value !== undefined ? resolvedValue ?? null : resolvedValue;
+    const internalDefaultValue = props.multiple
+        ? valueToItems(props.defaultValue, itemByValue)
+        : valueToItem(props.defaultValue, itemByValue);
+    const handleValueChange = (next, eventDetails) => {
+        if (!props.onValueChange)
+            return;
+        // base-ui clears the selected value when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
+        if (Array.isArray(next)) {
+            props.onValueChange(toStringValues(next), next);
+        }
+        else {
+            props.onValueChange(toStringValue(next), next);
+        }
+    };
+    const handleInputValueChange = (next, eventDetails) => {
+        // base-ui blanks the input text (and then the selected value) when Escape is pressed
+        // we only want to allow this if the clearOnEscape prop is true
+        if (eventDetails?.reason === 'escape-key' && !props.clearOnEscape) {
+            eventDetails.cancel?.();
+            return;
+        }
+        // base-ui clears the in-popup filter input after each item press in multiple
+        // mode; keep the menulist filter while the popup stays open so users can
+        // select several filtered values without retyping. With
+        // `persistFilterOnReopen`, also swallow the clear base-ui fires when the
+        // popup closes, so the filter is still there on the next open.
+        if (props.searchable === 'menulist' &&
+            eventDetails?.reason === 'input-clear' &&
+            (props.open || props.persistFilterOnReopen)) {
+            eventDetails.cancel?.();
+            return;
+        }
+        props.onInputValueChange?.(next);
+    };
+    let comboboxItems = props.groups ?? props.items;
+    if (props.isCreatable && allItems[allItems.length - 1]?.creatable) {
+        // let's detect all "creatable" items and add them to the combobox items
+        const creatableItems = [];
+        for (let len = allItems.length - 1; len >= 0; len--) {
+            const item = allItems[len];
+            if (item.creatable) {
+                creatableItems.unshift(item);
+            }
+            else {
+                break;
+            }
+        }
+        comboboxItems = [...comboboxItems, ...creatableItems];
+    }
+    return (_jsx(Combobox, { ...props, items: comboboxItems, isItemEqualToValue: isItemEqualToValue, itemToStringLabel: getItemTextLabel, value: internalValue, defaultValue: internalDefaultValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], disabled: props.disabled, open: props.open, onOpenChange: props.onOpenChange, multiple: props.multiple, filter: props.filter, autoHighlight: true, children: props.children }));
+};
+const useMenulistFilterInput = (props, creatableInput) => {
+    // Creatable comboboxes already control inputValue in useCreatable (filter text
+    // also drives the synthesized "Create …" row), so only add filter state here
+    // for plain menulist comboboxes.
+    const isMenulistFilter = props.searchable === 'menulist' && !props.isCreatable;
+    const [filterValue, setFilterValue] = React.useState(props.inputValue ?? props.defaultInputValue ?? '');
+    if (!isMenulistFilter) {
+        return creatableInput;
+    }
+    const inputValue = props.inputValue !== undefined ? props.inputValue : filterValue;
+    const onInputValueChange = (value) => {
+        if (props.inputValue === undefined) {
+            setFilterValue(value);
+        }
+        props.onInputValueChange?.(value);
+    };
+    return { inputValue, onInputValueChange };
+};
+const useGetAllItems = (props) => {
+    const allItems = props.groups
+        ? props.groups.flatMap((g) => g.items)
+        : props.isCreatable
+            ? // for creatable, let's clone the items
+                // as we'll push to the "allItems" array
+                [...props.items]
+            : props.items;
+    const lookupItems = props.lookupItems;
+    const itemByValue = useMemo(() => {
+        const map = new Map(allItems.map((item) => [item.value, item]));
+        if (lookupItems) {
+            for (const item of lookupItems) {
+                if (!map.has(item.value)) {
+                    map.set(item.value, item);
+                }
+            }
+        }
+        return map;
+    }, [allItems, lookupItems]);
+    const creatableInput = useCreatable(props, allItems, itemByValue);
+    const { inputValue, onInputValueChange } = useMenulistFilterInput(props, {
+        inputValue: creatableInput.inputValue,
+        onInputValueChange: creatableInput.onInputValueChange,
+    });
+    const { onValueChange, value } = creatableInput;
+    return {
+        value,
+        itemByValue,
+        inputValue,
+        onInputValueChange,
+        onValueChange,
+        allItems,
+        maxLabelLength: allItems.reduce((max, item) => Math.max(max, typeof item.label === 'string' || typeof item.label === 'number'
+            ? String(item.label).length
+            : typeof item.textLabel === 'string' || typeof item.textLabel === 'number'
+                ? String(item.textLabel).length
+                : 0), 0),
+    };
+};
+function useCreatable(props, allItems, itemByValue) {
+    // thse are items that the user has already hit "Enter" or selected
+    // so they should be reflected as normal items in the combobox
+    const [alreadySavedCreatableItems, setAlreadySavedCreatableItems] = React.useState([]);
+    const itemByValueRef = React.useRef(itemByValue);
+    itemByValueRef.current = itemByValue;
+    if (props.isCreatable && alreadySavedCreatableItems.length > 0) {
+        alreadySavedCreatableItems.forEach((item) => {
+            itemByValue.set(item.value, item);
+            allItems.push(item);
+        });
+    }
+    const handleValueChange = (value, item) => {
+        const itemsToCreate = Array.isArray(item)
+            ? item.filter((item) => item.creatable && !item.created)
+            : item && item.creatable && !item.created
+                ? [item]
+                : [];
+        let savingCreatableItem = false;
+        let itemsAllNumeric = false;
+        let newCreatedItems = [];
+        if (props.isCreatable && itemsToCreate.length > 0) {
+            savingCreatableItem = true;
+            itemsAllNumeric = allItems.every((item) => !item.creatable ? typeof item.value === 'number' : true);
+            newCreatedItems = itemsToCreate.map((item) => ({
+                ...item,
+                creatable: true,
+                created: true,
+                // if all other items are numeric, and the value for the created item is a valid number, then convert the value to a number
+                // we'll also have to correctly call onValueChange with the new value
+                value: itemsAllNumeric && !Number.isNaN(Number(item.value)) ? Number(item.value) : item.value,
+            }));
+            setAlreadySavedCreatableItems((current) => {
+                const mergedItems = [...current, ...newCreatedItems];
+                const seenValues = new Set();
+                return mergedItems.filter((item) => {
+                    const key = `${item.value}`;
+                    if (seenValues.has(key)) {
+                        return false;
+                    }
+                    seenValues.add(key);
+                    return true;
+                });
+            });
+        }
+        if (savingCreatableItem) {
+            if (props.multiple) {
+                // Replace the "creatable-not-yet-created" items in the full selection
+                // with their newly-created counterparts so existing values are preserved.
+                const createdByOriginalValue = new Map();
+                itemsToCreate.forEach((it, idx) => {
+                    createdByOriginalValue.set(it.value, newCreatedItems[idx]);
+                });
+                const mergedItems = item.map((existing) => {
+                    return createdByOriginalValue.get(existing.value) ?? existing;
+                });
+                const mergedValues = mergedItems.map((i) => i.value);
+                props.onValueChange?.(mergedValues, mergedItems);
+            }
+            else {
+                props.onValueChange?.(newCreatedItems[0].value, newCreatedItems[0]);
+            }
+        }
+        else {
+            props.onValueChange?.(value, item);
+        }
+    };
+    const [defaultControlledValue, setDefaultControlledValue] = React.useState(props.defaultValue ?? (props.multiple ? [] : null));
+    const value = props.value === undefined ? defaultControlledValue : props.value;
+    let initialInputValue = props.inputValue ?? props.defaultInputValue ?? undefined;
+    if (initialInputValue === undefined) {
+        if (!props.multiple && value != undefined) {
+            const item = itemByValue.get(value);
+            if (item) {
+                initialInputValue = getItemTextLabel(item);
+            }
+            else if (props.isCreatable) {
+                // For a creatable combobox, surface a controlled value that doesn't
+                // match any item as the input so the trigger displays it instead of
+                // falling back to the placeholder. The value is also re-added below
+                // as a creatable item, so base-ui can resolve it back to a row.
+                initialInputValue = `${value}`;
+            }
+        }
+        if (initialInputValue === undefined) {
+            initialInputValue = '';
+        }
+    }
+    const [inputValue, setInputValue] = React.useState(initialInputValue ? `${initialInputValue}` : '');
+    React.useEffect(() => {
+        if (!props.multiple) {
+            const item = itemByValueRef.current.get(props.value);
+            if (item) {
+                setInputValue(getItemTextLabel(item));
+            }
+            else if (props.isCreatable && props.value != undefined) {
+                setInputValue(`${props.value}`);
+            }
+        }
+    }, [props.value, props.multiple, props.isCreatable]);
+    if (props.isCreatable) {
+        if (inputValue) {
+            const newValue = inputValue.trim();
+            const normalized = newValue.toLocaleLowerCase().replace(/\s+/g, '-');
+            const exactExists = allItems.some((item) => {
+                const normalizedItemValue = `${item.value}`.trim().toLocaleLowerCase().replace(/\s+/g, '-');
+                return normalizedItemValue === normalized;
+            });
+            if (newValue !== '' && !exactExists) {
+                // When the creatable input is mirroring the controlled `props.value`
+                // (e.g. an unknown numeric value), use the original value's type for
+                // the synthesized item so `valueToItem(props.value, itemByValue)` can
+                // resolve back to it. Otherwise fall back to the typed string.
+                const creatableValue = !props.multiple && props.value != undefined && `${props.value}` === newValue
+                    ? props.value
+                    : newValue;
+                const creatableItem = {
+                    creatable: true,
+                    created: false,
+                    value: creatableValue,
+                    label: newValue,
+                };
+                itemByValue.set(creatableValue, creatableItem);
+                allItems.push(creatableItem);
+            }
+        }
+    }
+    const onValueChange = (value, item) => {
+        if (props.value === undefined) {
+            setDefaultControlledValue(value);
+        }
+        if (!props.isCreatable) {
+            props.onValueChange?.(value, item);
+        }
+        else {
+            handleValueChange(value, item);
+        }
+    };
+    const handleInputValueChange = (value) => {
+        setInputValue(value);
+        props.onInputValueChange?.(value);
+    };
+    const result = !props.isCreatable
+        ? {
+            inputValue: undefined,
+            onInputValueChange: props.onInputValueChange,
+            onValueChange,
+            value,
+        }
+        : {
+            inputValue,
+            onInputValueChange: handleInputValueChange,
+            onValueChange,
+            value,
+        };
+    return result;
+}
+const SingleCombobox_MenuListSearchable = (props) => {
+    const { stopMouseDownPropagation } = useOverlayHost();
+    const shouldStopPropagation = stopMouseDownPropagation ?? false;
+    const emptyText = getEmptyText(props);
+    const isDisabled = props.disabled;
+    const showClear = props.showClear ?? true;
+    const hasCustomTrigger = props.renderTrigger != null;
+    const { anchor, setTriggerElement } = usePopupAnchor(props.popupAnchor);
+    const triggerClassName = cn('ab-ComboBox', 'twa:bg-input-background', props.className);
+    const searchInputClassName = cn('ab-ComboBox', props.searchInputClassName ?? 'twa:bg-input-background');
+    const triggerRef = React.useRef(null);
+    const setTriggerRef = React.useCallback((node) => {
+        triggerRef.current = node;
+        setTriggerElement(node);
+    }, [setTriggerElement]);
+    const searchInputRef = React.useRef(null);
+    const contentElRef = React.useRef(null);
+    const contentRefCallback = React.useCallback((el) => {
+        contentElRef.current = el;
+    }, []);
+    const hasFocusRef = React.useRef(false);
+    const handleFocus = props.onFocus
+        ? () => {
+            if (!hasFocusRef.current) {
+                hasFocusRef.current = true;
+                props.onFocus();
+            }
+        }
+        : undefined;
+    const handleBlur = props.onBlur
+        ? (e) => {
+            const relatedTarget = e.relatedTarget;
+            const isInternal = triggerRef.current?.contains(relatedTarget) ||
+                relatedTarget === searchInputRef.current ||
+                contentElRef.current?.contains(relatedTarget);
+            if (!isInternal) {
+                hasFocusRef.current = false;
+                props.onBlur();
+            }
+        }
+        : undefined;
+    const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
+    const selectedItem = hasCustomTrigger && value != null && !Array.isArray(value) ? itemByValue.get(value) : undefined;
+    // NOTE: keep this element mounted in a stable position for the lifetime of the
+    // component. The popup is anchored to it (or to what `popupAnchor` resolves
+    // from it), so remounting it while the popup is open/closing detaches the
+    // anchor and the popup jumps to the viewport origin.
+    const trigger = (_jsx(ComboboxPrimitive.Trigger, { ref: setTriggerRef, render: _jsx("div", {}), nativeButton: false, "data-slot": "combobox-menulist-trigger", tabIndex: 0, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], className: hasCustomTrigger
+            ? cn('twa:flex twa:items-center twa:gap-1.5 twa:outline-none', props.className)
+            : cn(
+            // we intentially replaced :focus-visible with :focus
+            // because when the user clicked an item and the combobox closed
+            // the focus ring would not be displayed properly
+            // in this specific case of SingleCombobox_MenuListSearchable
+            'twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-transparent twa:py-2 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:select-none twa:focus:border-ring twa:focus:ring-3 twa:focus:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:data-placeholder:text-muted-foreground twa:h-9', triggerClassName), disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: mergeOverlayHostHandlers(shouldStopPropagation, undefined), onClick: hasCustomTrigger
+            ? mergeOverlayHostHandlers(shouldStopPropagation, (e) => {
+                // the clear button lives inside the trigger — clearing must not open
+                if (e.target.closest('[data-slot=combobox-clear]')) {
+                    return;
+                }
+                // base-ui doesn't reliably open on the first click of a custom
+                // (non-input-looking) trigger — open explicitly, never toggle-close
+                // here so base-ui's own close-on-click still works.
+                if (!props.open) {
+                    props.onOpenChange(true);
+                }
+            })
+            : mergeOverlayHostHandlers(shouldStopPropagation, undefined), children: hasCustomTrigger ? (_jsxs(React.Fragment, { children: [showClear && selectedItem ? (props.clearTooltip != null ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { className: "twa:inline-flex twa:shrink-0" }), children: _jsx(ComboboxClear, { className: "twa:my-0", disabled: isDisabled, onMouseDown: (e) => {
+                                    e.preventBaseUIHandler();
+                                } }) }), _jsx(TooltipContent, { children: props.clearTooltip })] })) : (_jsx(ComboboxClear, { className: "twa:my-0", disabled: isDisabled, onMouseDown: (e) => {
+                        e.preventBaseUIHandler();
+                    } }))) : null, props.renderTrigger(selectedItem)] })) : (_jsx(ComboboxValue, { placeholder: _jsx("span", { children: props.placeholder }), children: (value) => {
+                return (_jsxs(React.Fragment, { children: [_jsx("span", { className: "twa:flex twa:flex-1 twa:truncate twa:text-left", "data-slot": "combobox-value", children: _jsx(ComboboxValue, { placeholder: _jsx("span", { children: props.placeholder }) }) }), _jsx("input", { type: "hidden", "data-slot": "combobox-value-input", readOnly: true, value: value ? getItemTextLabel(value) : '' }), props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), value && showClear ? (_jsx(ComboboxClear, { disabled: isDisabled, onMouseDown: (e) => {
+                                e.preventBaseUIHandler();
+                            } })) : props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", className: 'twa:min-h-auto!', children: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:shrink-0 twa:text-muted-foreground" }) })) : null] }));
+            } })) }));
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, children: [trigger, _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, className: props.contentClassName, children: [_jsx(ComboboxSearchHeader, { children: _jsx(ComboboxInput, { className: searchInputClassName, placeholder: props.searchPlaceholder ?? props.placeholder, showClear: false, showTrigger: false, disabled: isDisabled, ref: searchInputRef, onFocus: handleFocus, onBlur: handleBlur }) }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, searchable: props.searchable, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading, isLoadingMore: props.isLoadingMore, onScrollNearEnd: props.onScrollNearEnd, scrollNearEndOffset: props.scrollNearEndOffset })] })] }));
+};
+const SingleCombobox_SimpleSearchable = (props) => {
+    const emptyText = getEmptyText(props);
+    const anchor = useComboboxAnchor();
+    const className = cn('ab-ComboBox', 'twa:bg-input-background', props.className);
+    const showClear = props.showClear ?? true;
+    const searchable = props.searchable === false ? false : 'inline';
+    const isDisabled = props.disabled;
+    const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, allItems: allItems, children: [_jsx(ComboboxInput, { className: className, groupRef: anchor, placeholder: props.placeholder, showClear: showClear, showTrigger: props.showTrigger !== false, isLoading: props.isLoading, disabled: isDisabled, readOnly: searchable === false, "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onFocus: props.onFocus, onBlur: props.onBlur }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, renderItemLabel: props.renderItemLabel, emptyText: emptyText, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading, isLoadingMore: props.isLoadingMore, onScrollNearEnd: props.onScrollNearEnd, scrollNearEndOffset: props.scrollNearEndOffset }) })] }));
+};
+const MultiCombobox_SimpleSearchable = (props) => {
+    const anchor = useComboboxAnchor();
+    const emptyText = getEmptyText(props);
+    const showClear = props.showClear ?? true;
+    const isDisabled = props.disabled;
+    const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
+    const onCheckAllChange = props.onSelectAllCheckboxChange != null
+        ? (checked) => {
+            props.onSelectAllCheckboxChange(checked);
+        }
+        : (checked, filteredItems) => {
+            const currentValues = (value ?? []);
+            const next = applySelectAllToSelection({
+                checked,
+                filteredItems,
+                currentValues,
+                itemByValue,
+            });
+            onValueChange?.(next.values, next.items);
+        };
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const onOpenChange = (open) => {
+        setMenuOpen(open);
+        props.onOpenChange(open);
+    };
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [_jsx(ComboboxChips, { "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], onClick: (e) => {
+                    // ignore clicks that originate from the right-side controls (chevron / clear),
+                    // since those buttons already toggle the combobox themselves. without this guard,
+                    // clicking the chevron while the popup is open would first close it (via the
+                    // base-ui trigger) and then the bubbled click would re-open it here.
+                    if (e.target.closest('[data-slot="input-group"]')) {
+                        return;
+                    }
+                    if (!menuOpen) {
+                        onOpenChange(true);
+                    }
+                }, ref: anchor, className: cn('twa:relative', props.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
+                        const shouldKeepTrigger = props.searchable === false && selectedItems.length > 0;
+                        return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsxs(_Fragment, { children: [_jsx(ComboboxChipsInput, { placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: props.searchable === false, onFocus: props.onFocus, onBlur: props.onBlur, className: props.searchable === false && selectedItems.length > 0
+                                                ? 'twa:absolute! twa:inset-0 twa:min-h-auto! twa:max-h-auto!' // so we fill the parent container and on click we can open the combobox as usual
+                                                : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", 
+                                            // [&_button]:my-0 — InputGroupButton's my-1 is meant to inset it inside a
+                                            // real InputGroup; here the ComboboxChips wrapper already has py-1, so the
+                                            // extra margins would push the trigger past min-h-input (h-input).
+                                            className: "twa:group/input-group twa:z-10 twa:[&_button]:my-0", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: cn(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
+                                                            ? ''
+                                                            : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
+                    } }) }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, renderCheckboxIndicator: props.renderCheckboxIndicator !== undefined ? props.renderCheckboxIndicator : true, onCheckAllChange: onCheckAllChange, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading, isLoadingMore: props.isLoadingMore, onScrollNearEnd: props.onScrollNearEnd, scrollNearEndOffset: props.scrollNearEndOffset }) })] }));
+};
+const MultiComboboxChips = (props) => {
+    return (_jsx(_Fragment, { children: props.selectedItems.map((item) => (_jsx(ComboboxChip, { showRemove: props.showClear, onMouseDown: (e) => {
+                // this prevents showing the list when the user simply wants to remove a chip
+                e.preventBaseUIHandler?.();
+            }, className: 'twa:overflow-hidden', "aria-label": typeof item.label === 'string' ? item.label : undefined, children: item.label }, item.value))) }));
+};
+const MultiComboboxEmptyPlaceholder = (props) => {
+    if (!props.placeholder) {
+        return null;
+    }
+    return (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: props.placeholder }));
+};
+const MultiCombobox_MenuListSearchable = (props) => {
+    const { anchor, setTriggerElement } = usePopupAnchor(props.popupAnchor);
+    const emptyText = getEmptyText(props);
+    const showClear = props.showClear ?? true;
+    const isDisabled = props.disabled;
+    const chipsInputRef = React.useRef(null);
+    const chevronRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
+    const contentElRef = React.useRef(null);
+    const contentRefCallback = React.useCallback((el) => {
+        contentElRef.current = el;
+    }, []);
+    const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
+    const onCheckAllChange = props.onSelectAllCheckboxChange != null
+        ? (checked) => {
+            props.onSelectAllCheckboxChange(checked);
+        }
+        : (checked, filteredItems) => {
+            const currentValues = (value ?? []);
+            const next = applySelectAllToSelection({
+                checked,
+                filteredItems,
+                currentValues,
+                itemByValue,
+            });
+            onValueChange?.(next.values, next.items);
+        };
+    const hasFocusRef = React.useRef(false);
+    const containerElRef = React.useRef(null);
+    const isInternalFocusTarget = (target) => {
+        return (containerElRef.current?.contains(target) ||
+            contentElRef.current?.contains(target));
+    };
+    const onOpenChange = (open) => {
+        props.onOpenChange(open);
+        if (!open && hasFocusRef.current) {
+            requestAnimationFrame(() => {
+                if (!isInternalFocusTarget(document.activeElement) && hasFocusRef.current) {
+                    hasFocusRef.current = false;
+                    props.onBlur?.();
+                }
+            });
+        }
+    };
+    const handleFocus = props.onFocus
+        ? () => {
+            if (!hasFocusRef.current) {
+                hasFocusRef.current = true;
+                props.onFocus();
+            }
+        }
+        : undefined;
+    const handleBlur = props.onBlur
+        ? (e) => {
+            if (!isInternalFocusTarget(e.relatedTarget)) {
+                hasFocusRef.current = false;
+                props.onBlur();
+            }
+        }
+        : undefined;
+    const renderChips = (_props) => {
+        return (_jsx(ComboboxChips, { "aria-label": props.ariaLabel || props['aria-label'], "data-name": props['data-name'], ..._props, 
+            // `_props.ref` is the trigger ref (spread above) — keep it, and also
+            // resolve the popup anchor from this element.
+            ref: (node) => {
+                setTriggerElement(node);
+                assignRef(_props?.ref, node);
+            }, onFocus: (e) => {
+                containerElRef.current = e.currentTarget;
+                _props?.onFocus?.(e);
+                handleFocus?.();
+            }, onBlur: (event) => {
+                _props?.onBlur?.(event);
+                const newFocusedTarget = event.relatedTarget;
+                const container = event.currentTarget;
+                const isInternal = container.contains(newFocusedTarget) ||
+                    contentElRef.current?.contains(newFocusedTarget);
+                if (isInternal) {
+                    // if we don't have this logic here,
+                    // the popup wont collapse when focus is lost
+                    return;
+                }
+                // if the focused target is not inside the combobox, close the combobox
+                onOpenChange(false);
+                if (hasFocusRef.current) {
+                    hasFocusRef.current = false;
+                    props.onBlur?.();
+                }
+            }, className: cn('twa:relative', props.className, _props?.className), children: _jsx(ComboboxValue, { children: (selectedItems) => {
+                    return (_jsxs(React.Fragment, { children: [props.renderInputValues ? (props.renderInputValues(selectedItems)) : (_jsx(MultiComboboxChips, { selectedItems: selectedItems, showClear: showClear })), props.renderInput !== false ? (_jsx(_Fragment, { children: _jsx(ComboboxChipsInput, { ref: chipsInputRef, placeholder: selectedItems.length > 0 ? '' : props.placeholder, readOnly: true, value: '', className: 'twa:flex-1' }) })) : (_jsx("div", { className: "twa:flex-1", children: selectedItems.length === 0 && !props.renderInputValues ? (_jsx(MultiComboboxEmptyPlaceholder, { placeholder: props.placeholder })) : null })), _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:[&_button]:my-0", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!", ref: chevronRef, "data-slot": "combobox-toggle", 
+                                                // we already have the role="combobox" on the parent
+                                                // so we want to avoid the same role twice in the component,
+                                                // hence we use the role="widget" here.
+                                                role: "widget" }), "data-slot": "combobox-toggle", className: cn(`twa:data-pressed:bg-transparent`, 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] }));
+                } }) }));
+    };
+    return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? (_jsx(ComboboxTrigger, { nativeButton: false, render: renderChips, icon: props.showTrigger !== false ? undefined : null })) : (renderChips(undefined)), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [_jsx(ComboboxSearchHeader, { children: _jsx(ComboboxInput, { placeholder: props.searchPlaceholder ?? 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:bg-muted', children: typeof props.renderSearchInputTrailing === 'function'
+                                ? props.renderSearchInputTrailing()
+                                : undefined }) }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, emptyText: emptyText, searchable: props.searchable, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator !== undefined ? props.renderCheckboxIndicator : true, onCheckAllChange: onCheckAllChange, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading, isLoadingMore: props.isLoadingMore, onScrollNearEnd: props.onScrollNearEnd, scrollNearEndOffset: props.scrollNearEndOffset })] })] }));
+};
+export const MultiCombobox = (props) => {
+    const searchable = props.searchable === false ? false : props.searchable === 'menulist' ? 'menulist' : 'inline';
+    const [open, setOpen] = React.useState(props.open ?? props.defaultOpen ?? false);
+    const onOpenChange = (open) => {
+        setOpen(open);
+        props.onOpenChange?.(open);
+    };
+    const showItemTooltip = props.showItemTooltip ?? !!props.virtualized;
+    return searchable === 'menulist' ? (_jsx(MultiCombobox_MenuListSearchable, { renderInput: false, ...props, multiple: true, open: open, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip })) : (_jsx(MultiCombobox_SimpleSearchable, { ...props, open: open, multiple: true, onOpenChange: onOpenChange, searchable: searchable, showItemTooltip: showItemTooltip }));
+};
+export const GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME = cn(
+// remove the border/shadow and position it properly
+// to adjust for outline on the input
+'twa:[.ab-FloatingFilter_&]:border-none twa:[.ab-FloatingFilter_&]:inset-y-0.5 twa:[.ab-FloatingFilter_&]:inset-x-0 twa:[.ab-FloatingFilter_&]:absolute twa:[.ab-FloatingFilter_&]:shadow-none twa:[.ab-FloatingFilter_&]:min-h-auto!', 
+// more adjustments for very compact ag grid themes
+'twa:[.ab-FloatingFilter_&]:[line-height:1]', 'twa:[.ab-FloatingFilter_[data-slot=combobox-trigger]]:py-0', 
+// also for very compact ag grid themes
+// make the floating-filter combobox a size container so the toggle can
+// shrink purely via CSS when the control is small in height (see ColumnFilter/base.css)
+'twa:[.ab-FloatingFilter_&]:[container-type:size]');
+export const GridFilterCombobox = (props) => {
+    const { showSelectedCount = false, placeholder = 'Select...', renderInputValues: renderInputValuesProp, ...comboboxProps } = props;
+    const sharedProps = {
+        placeholder,
+        showSelectAllCheckbox: true,
+        searchable: 'menulist',
+        renderInput: false,
+        items: props.items ?? [],
+        virtualized: true,
+        resizable: true,
+        showClear: false,
+        // don't show a chevron icon in the grid filter combobox
+        showTrigger: false,
+        renderInputValues: (items) => {
+            let children = renderInputValuesProp
+                ? renderInputValuesProp(items)
+                : items.map((item) => getItemTextLabel(item)).join(', ');
+            if (items.length === 0) {
+                children = (_jsx("span", { "data-name": "placeholder", className: "twa:text-muted-foreground", children: placeholder }));
+            }
+            return (_jsx(_Fragment, { children: _jsxs("div", { className: "twa:text-ellipsis twa:overflow-hidden twa:whitespace-nowrap twa:flex-1000", "data-slot": "combobox-selected-values", children: [showSelectedCount && !renderInputValuesProp && items.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("span", { "data-name": "multiple-values-count", children: ["(", items.length, ")"] }), ' '] })), children] }) }));
+        },
+    };
+    const className = cn(GRID_FILTER_COMBBOX_ADJUSTMENTS_CLASSNAME, comboboxProps.className);
+    const mergedProps = {
+        ...sharedProps,
+        ...comboboxProps,
+        className,
+    };
+    return _jsx(MultiCombobox, { ...mergedProps });
+};
+//# sourceMappingURL=index.js.map