@plexui/ui 0.2.0

package/dist/es/components/Select/Select.js

@@ -0,0 +1,848 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Popover } from "radix-ui";
+import React, { createContext, use, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { useEscCloseStack } from "../../hooks/useEscCloseStack";
+import { useLatestValue } from "../../hooks/useLatestValue";
+import { preventDefaultHandler, toCssVariables, waitForAnimationFrame } from "../../lib/helpers";
+import { Check, Info, Search } from "../Icon";
+import { Input } from "../Input";
+import { SelectControl } from "../SelectControl";
+import { Tooltip } from "../Tooltip";
+import { TransitionGroup } from "../Transition";
+import s from "./Select.module.css";
+const SelectContext = createContext(null);
+const useSelectContext = () => {
+    const context = use(SelectContext);
+    if (!context) {
+        throw new Error("Select components must be wrapped in <Select />");
+    }
+    return context;
+};
+const DefaultOptionView = ({ label }) => _jsx(_Fragment, { children: label });
+const DefaultSingleTriggerView = ({ label }) => _jsx(_Fragment, { children: label });
+const DefaultMultiTriggerView = ({ values, selectedAll, }) => {
+    const displayValue = selectedAll
+        ? "All selected"
+        : values.length === 0
+            ? // NOTE: Zero length is impossible - an empty option with `placeholder` is always returned
+                "Select..."
+            : values.length === 1
+                ? values[0].label
+                : `${values.length} selected`;
+    return _jsx(_Fragment, { children: displayValue });
+};
+export const Select = (props) => {
+    const { id, required, value, name, multiple, variant = "outline", size = "md", dropdownIconType = "dropdown", loading = false, clearable = false, disabled = false, placeholder = "Select...", loadingPlaceholder = "Loading...", pill = true, listWidth, options, actions: propActions = [], side = "bottom", avoidCollisions = true, onChange, optionClassName, OptionView = DefaultOptionView, TriggerStartIcon, triggerClassName, opticallyAlign, TriggerView: TriggerViewFromProps, searchPlaceholder = "", searchPredicate = defaultSearchPredicate, searchEmptyMessage = "No results found.", listMaxWidth = "auto", } = props;
+    // Block default is dynamic, based on `variant`
+    const block = props.block ?? variant !== "ghost";
+    // Align default is dynamic, based on `block`
+    const align = props.align ?? (block ? "center" : "start");
+    const alignOffset = props.alignOffset ?? (align === "center" ? 0 : -5);
+    // Default to "auto" for block selects and 300 for inline selects.
+    const listMinWidth = props.listMinWidth ?? (block ? "auto" : 300);
+    // Create stable, mutable references to avoid memoization requirements from consumers
+    const onSelectRef = useLatestValue((selectedOption, removeOption) => {
+        if (multiple) {
+            // When clearing values, the value is an
+            if (!selectedOption.value) {
+                onChange([]);
+                return;
+            }
+            if (removeOption) {
+                const nextValues = value.filter((v) => v !== selectedOption.value);
+                const currentSelectedOptions = getOptionsByValues(options, nextValues);
+                onChange(currentSelectedOptions);
+            }
+            else {
+                const currentSelectedOptions = getOptionsByValues(options, value);
+                onChange(currentSelectedOptions.concat(selectedOption));
+            }
+        }
+        else {
+            onChange(selectedOption);
+        }
+    });
+    const searchPredicateRef = useRef(searchPredicate);
+    searchPredicateRef.current = searchPredicate;
+    // It should be exceedingly uncommon to change actions dynamically, and they are unlikely to be a stable array reference from consumers
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentionally limiting when this stable value changes to length of actions
+    const actions = useMemo(() => propActions, [propActions.length]);
+    // We need to ensure that when action callbacks are called, we have fresh function references, even if the other action details did not change.
+    const propActionsRef = useRef(propActions);
+    propActionsRef.current = propActions;
+    const onActionSelect = useCallback((actionId) => {
+        propActionsRef.current.find((a) => a.id === actionId)?.onSelect(actionId);
+    }, []);
+    // Determine when custom selects should be used
+    const optionsCount = useMemo(() => isOptionGroupArray(options)
+        ? options.reduce((acc, group) => {
+            return acc + group.options.length;
+        }, 0)
+        : options.length, [options]);
+    // Using ID for DOM selection instead of passing around and merging a ref. Pick your poison.
+    const internalTriggerId = useId();
+    const triggerId = `select-trigger-${internalTriggerId}`;
+    // Locking down searchable count to a single value. Could make this customizable in the future, but would want guardrails.
+    const searchable = optionsCount > 15;
+    // Narrow known values for context
+    const dynamicContextProps = useMemo(() => {
+        if (multiple) {
+            return {
+                multiple: true,
+                value: value,
+                TriggerView: TriggerViewFromProps ?? DefaultMultiTriggerView,
+            };
+        }
+        return {
+            multiple: false,
+            value: value,
+            TriggerView: TriggerViewFromProps ?? DefaultSingleTriggerView,
+        };
+    }, [multiple, value, TriggerViewFromProps]);
+    const store = useMemo(() => ({
+        ...dynamicContextProps,
+        triggerId,
+        id,
+        // Forward props
+        name,
+        required,
+        options,
+        placeholder,
+        loadingPlaceholder,
+        loading,
+        clearable,
+        variant,
+        pill,
+        size,
+        dropdownIconType,
+        block,
+        align,
+        alignOffset,
+        side,
+        avoidCollisions,
+        listWidth,
+        listMinWidth,
+        listMaxWidth,
+        searchPlaceholder,
+        searchEmptyMessage,
+        TriggerStartIcon,
+        triggerClassName,
+        opticallyAlign,
+        optionClassName,
+        OptionView,
+        actions,
+        onActionSelect,
+        onSelectRef,
+        searchPredicateRef,
+        // Derived state
+        searchable,
+        disabled,
+    }), [
+        dynamicContextProps,
+        triggerId,
+        id,
+        required,
+        name,
+        options,
+        placeholder,
+        loadingPlaceholder,
+        loading,
+        clearable,
+        variant,
+        pill,
+        size,
+        dropdownIconType,
+        block,
+        align,
+        alignOffset,
+        side,
+        avoidCollisions,
+        listWidth,
+        listMinWidth,
+        listMaxWidth,
+        searchPlaceholder,
+        searchEmptyMessage,
+        TriggerStartIcon,
+        triggerClassName,
+        opticallyAlign,
+        optionClassName,
+        OptionView,
+        actions,
+        onActionSelect,
+        onSelectRef,
+        searchable,
+        disabled,
+    ]);
+    return (
+    // NOTE: Cannot peacefully coerce SelectContextValue into a generic, so casting to any here.
+    // This is safe because `store` is strongly typed above.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    _jsx(SelectContext.Provider, { value: store, children: _jsx(CustomSelect, {}) }));
+};
+export const SelectTrigger = (props) => {
+    const { triggerId, id, required, value, multiple, options, loading, disabled, clearable, name, variant, pill, size, dropdownIconType, placeholder, loadingPlaceholder, block, opticallyAlign, triggerClassName, TriggerStartIcon, TriggerView, onSelectRef, } = useSelectContext();
+    const { onOpenChange, 
+    // pass along props from Radix
+    ...restProps } = props;
+    const firstValue = multiple ? value[0] : value;
+    const placeholderValue = loading ? loadingPlaceholder : placeholder;
+    const selectedItem = useMemo(() => getOptionByValue(options, firstValue) || {
+        value: "",
+        label: placeholderValue,
+    }, [firstValue, options, placeholderValue]);
+    const hasSelectedValue = multiple ? value.length > 0 : !!value;
+    const isPlaceholder = loading || !hasSelectedValue;
+    const typeahead = useMemo(() => createTypeahead(), []);
+    const multipleTriggerViewProps = useMemo(() => {
+        if (!multiple) {
+            return { values: [], selectedAll: false };
+        }
+        const currentSelectedOptions = getOptionsByValues(options, value);
+        const flatOptions = options.flatMap((o) => ("options" in o ? o.options : o));
+        return {
+            values: currentSelectedOptions.length
+                ? currentSelectedOptions
+                : [
+                    {
+                        value: "",
+                        label: placeholderValue,
+                    },
+                ],
+            selectedAll: flatOptions.length <= value.length,
+        };
+    }, [multiple, options, value, placeholderValue]);
+    const handleKeyDown = (evt) => {
+        const key = evt.key;
+        // If not a command, check for typeahead
+        // NOTE: Typeahead not supported in multi-select
+        if (!multiple && isValidTypeaheadChar(key)) {
+            const currentTypeaheadValue = typeahead(key);
+            // Stop other listeners from reacting
+            evt.stopPropagation();
+            // Attempt to filter options based on the value
+            // NOTE: We don't look at current highlighted value as a means to start the search
+            const firstMatchingOption = getTypeaheadOption(options, currentTypeaheadValue, firstValue);
+            if (firstMatchingOption) {
+                onSelectRef.current(firstMatchingOption);
+            }
+        }
+    };
+    const handleClearClick = () => {
+        onSelectRef.current({ value: "", label: "" });
+        // Ensure open state is closed
+        onOpenChange?.(false);
+    };
+    return (_jsxs(SelectControl, { id: triggerId, className: triggerClassName, selected: !isPlaceholder, variant: variant, pill: pill, block: block, size: size, disabled: disabled, loading: loading, StartIcon: TriggerStartIcon, opticallyAlign: opticallyAlign, dropdownIconType: dropdownIconType, onClearClick: clearable ? handleClearClick : undefined, onInteract: onOpenChange, onKeyDown: handleKeyDown, ...restProps, children: [multiple ? _jsx(TriggerView, { ...multipleTriggerViewProps }) : _jsx(TriggerView, { ...selectedItem }), (name || id) && (_jsx("input", { id: id, name: name, value: firstValue, tabIndex: -1, onFocus: () => {
+                    document.getElementById(triggerId)?.focus();
+                }, 
+                // keep react from complaining - don't make this readOnly because that
+                // prevents the value from being required
+                onChange: () => { }, required: required, className: "sr-only w-full h-0 left-0 bottom-0 pointer-events-none", "aria-hidden": "true" }))] }));
+};
+// ============================================================
+// Custom Select
+// ============================================================
+const CustomSelect = () => {
+    const { triggerId, loading, side, align, alignOffset, avoidCollisions, listWidth, listMinWidth, listMaxWidth, } = useSelectContext();
+    const [open, setOpen] = useState(false);
+    const selectContentRef = useRef(null);
+    const handleOpenChange = (maybeNextState) => {
+        // Toggle the current state when called without a specific state
+        const nextState = maybeNextState === undefined ? !open : maybeNextState;
+        setOpen(nextState);
+        // When we're closing, manage focus back to trigger manually
+        if (!nextState) {
+            // Wait until the next tick to determine if another element has become focused
+            setTimeout(() => {
+                // This should never happen because TransitionGroup should keep the select content in the DOM long
+                // enough for this callback to run. However, in the event that the ref is null, not focusing is safer.
+                if (!selectContentRef.current) {
+                    return;
+                }
+                const activeElement = document.activeElement;
+                // Don't restore focus to the trigger if focus has moved outside of the select menu
+                if (activeElement && !selectContentRef.current.contains(activeElement)) {
+                    return;
+                }
+                document.getElementById(triggerId)?.focus();
+            });
+        }
+    };
+    useEscCloseStack(open, () => {
+        handleOpenChange(false);
+    });
+    return (_jsxs(Popover.Root, { open: open, onOpenChange: (nextState) => {
+            // Prevent opening while loading
+            if (loading && nextState) {
+                return;
+            }
+            handleOpenChange(nextState);
+        }, modal: false, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(SelectTrigger, { onOpenChange: handleOpenChange }) }), _jsx(Popover.Portal, { forceMount: true, children: _jsx(TransitionGroup, { className: s.Menu, enterDuration: 350, exitDuration: 200, disableAnimations: true, children: open && (_jsx(Popover.Content, { ref: selectContentRef, forceMount: true, className: s.MenuList, side: side, sideOffset: 5, align: align, alignOffset: alignOffset, avoidCollisions: avoidCollisions, collisionPadding: { bottom: 30, top: 30 }, 
+                        // Prevent Radix auto focus so we can handle our own from within <CustomSelectMenu />
+                        onOpenAutoFocus: preventDefaultHandler, 
+                        // Radix waits until the animation completes before directing focus, which is janky.
+                        onCloseAutoFocus: preventDefaultHandler, onEscapeKeyDown: preventDefaultHandler, style: toCssVariables({
+                            "select-list-width": listWidth,
+                            "select-list-min-width": listMinWidth,
+                            "select-list-max-width": listMaxWidth,
+                        }), children: _jsx(CustomSelectMenu, { onOpenChange: handleOpenChange }) }, "dropdown")) }) })] }));
+};
+const CustomSelectMenuContext = createContext(null);
+const useCustomSelectMenuContext = () => {
+    const context = use(CustomSelectMenuContext);
+    if (!context) {
+        throw new Error("CustomSelectMenu components must be wrapped in <CustomSelectMenu />");
+    }
+    return context;
+};
+const CustomSelectMenu = ({ onOpenChange }) => {
+    const { multiple, value, options, searchable, searchPredicateRef } = useSelectContext();
+    const requestCloseRef = useRef(() => onOpenChange(false));
+    const menuRef = useRef(null);
+    const listRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [highlightedValue, setHighlightedValue] = useState(() => {
+        const selectedValue = multiple ? value[0] : value;
+        return (selectedValue || getFirstValidOption(options)?.value) ?? "";
+    });
+    const typeahead = useMemo(() => createTypeahead(), []);
+    const internalListId = useId();
+    const listId = `select-list-${internalListId}`;
+    // Lock `value` for a given open to prevent janky change during close animation
+    // NOTE: This ref has no use in MultiSelect cases, set to empty string as a no-op
+    const valueRef = useRef(multiple ? "" : value);
+    // Trim and lowercase search value
+    const literalSearchTerm = useMemo(() => searchTerm.trim().toLocaleLowerCase(), [searchTerm]);
+    const filteredOptions = useMemo(() => filterOptions(options, literalSearchTerm, searchPredicateRef.current), [options, literalSearchTerm, searchPredicateRef]);
+    const firstOption = useMemo(() => getFirstValidOption(filteredOptions), [filteredOptions]);
+    // Regrettable requirement for running an effect *after* mount
+    const isMountStableRef = useRef(false);
+    const handleKeyDown = (evt) => {
+        const key = evt.key;
+        const firstValue = multiple ? value[0] : value;
+        const targetValue = highlightedValue || firstOption?.value || firstValue;
+        const isFocusedInSearch = document.activeElement === searchInputRef.current;
+        const menuElement = menuRef.current;
+        // Should be generally impossible for menuRef.current to not exist
+        // unless we've unmounted and manage to fire this handler.
+        if (!menuElement) {
+            return;
+        }
+        const triggerHighlightedOption = () => {
+            const pointerUpEvent = new PointerEvent("pointerup", {
+                bubbles: true,
+                cancelable: true,
+                pointerType: "mouse",
+            });
+            // Find the current highlighted option
+            const selectedOption = findOptionByValue(highlightedValue, menuElement);
+            selectedOption?.dispatchEvent(pointerUpEvent);
+        };
+        const highlightOption = (val, element) => {
+            setHighlightedValue(val);
+            element.scrollIntoView({ block: "nearest" });
+        };
+        const highlightSelectedOrFirstOption = () => {
+            // Attempt to move highlight to selected item
+            const maybeFirstValue = multiple ? value[0] : value;
+            if (maybeFirstValue) {
+                const selectedElement = findOptionByValue(maybeFirstValue, menuElement);
+                if (selectedElement) {
+                    highlightOption(maybeFirstValue, selectedElement);
+                    return;
+                }
+            }
+            // If value isn't set, or the selected node wasn't found in the DOM,
+            // attempt to move focus to the first valid option.
+            const firstValidOption = getFirstValidOption(options);
+            if (firstValidOption) {
+                const firstValidOptionElement = findOptionByValue(firstValidOption.value, menuElement);
+                if (firstValidOptionElement) {
+                    highlightOption(firstValidOption.value, firstValidOptionElement);
+                }
+            }
+        };
+        // Commands
+        switch (key) {
+            case "ArrowDown": {
+                evt.preventDefault();
+                // If there's no highlighted value, or the highlighted value is not in the DOM
+                if (!highlightedValue || !findOptionByValue(highlightedValue, menuElement)) {
+                    // Attempt to move highlight to selected item
+                    highlightSelectedOrFirstOption();
+                    // Short-circuit because we have no highlighted value to advance from
+                    return;
+                }
+                // Otherwise, move to the next option
+                const nextElement = findNextOption(highlightedValue, menuElement);
+                const nextValue = nextElement?.getAttribute("data-option-id");
+                if (nextElement && nextValue) {
+                    highlightOption(nextValue, nextElement);
+                }
+                return;
+            }
+            case "ArrowUp": {
+                evt.preventDefault();
+                // If there's no highlighted value, or the highlighted value is not in the DOM
+                if (!highlightedValue || !findOptionByValue(highlightedValue, menuElement)) {
+                    // Attempt to move highlight to selected item
+                    highlightSelectedOrFirstOption();
+                    // Short-circuit because we have no highlighted value to advance from
+                    return;
+                }
+                const previousElement = findPreviousOption(targetValue, menuElement);
+                const previousValue = previousElement?.getAttribute("data-option-id");
+                if (previousElement && previousValue) {
+                    highlightOption(previousValue, previousElement);
+                }
+                return;
+            }
+            case "Enter":
+                // Prevent default enter behavior from the search input, if present
+                evt.preventDefault();
+                // Send a pointerDown event into the currently highlighted option
+                triggerHighlightedOption();
+                return;
+            case " ":
+                // Allow spaces in search, and don't treat as enter
+                // if there is a valid literalSearchTerm.
+                if (literalSearchTerm && isFocusedInSearch) {
+                    return;
+                }
+                // Prevent space from entering search input
+                evt.preventDefault();
+                // Send a pointerDown event into the currently highlighted option
+                triggerHighlightedOption();
+                return;
+            default:
+                break;
+        }
+        // If not a command, check for typeahead
+        if (isValidTypeaheadChar(key)) {
+            // Skip typeahead logic when we're focused in the search input
+            if (isFocusedInSearch) {
+                return;
+            }
+            // Extend the current typeahead and get the latest value
+            const currentTypeaheadValue = typeahead(key);
+            // Stop other listeners from reacting
+            evt.stopPropagation();
+            // Attempt to filter options based on the value, starting at the highlighted value
+            const firstMatchingOption = getTypeaheadOption(options, currentTypeaheadValue, highlightedValue);
+            if (firstMatchingOption) {
+                const matchedNode = findOptionByValue(firstMatchingOption.value, menuElement);
+                // Only change the highlight if we found the actual node
+                if (matchedNode) {
+                    setHighlightedValue(firstMatchingOption.value);
+                    // Ensure the newly highlighted option is scrolled into view
+                    matchedNode.scrollIntoView({ block: "nearest" });
+                }
+            }
+        }
+    };
+    const store = useMemo(() => ({
+        valueRef,
+        listId,
+        highlightedValue,
+        setHighlightedValue,
+        requestCloseRef,
+        searchTerm,
+        setSearchTerm,
+        searchInputRef,
+        listRef,
+    }), [listId, highlightedValue, setHighlightedValue, searchTerm, setSearchTerm]);
+    // On mount behavior
+    useEffect(() => {
+        // Ensure initial highlighted option is in view
+        // NOTE: Allowing for a render frame ensures content is positioned correctly before scrolling it into view.
+        waitForAnimationFrame(() => {
+            if (!menuRef.current) {
+                return;
+            }
+            // Ensure the highlighted option is in view
+            const currentOption = findOptionByValue(highlightedValue, menuRef.current);
+            // Scroll the selected item into view, and its bottom edge.
+            currentOption?.scrollIntoView({ block: "center" });
+        });
+        // Send initial focus to the menu container or search input, to capture key events
+        const autoFocusTarget = searchInputRef.current || menuRef.current;
+        autoFocusTarget?.focus({ preventScroll: true });
+        // Required for <StrictMode>, because we need to unset this token
+        // when the hooks are re-run. It's an imperative effect that we need to manage.
+        return () => {
+            isMountStableRef.current = false;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- Intentionally an onMount effect
+    }, []);
+    // On search behavior
+    useLayoutEffect(() => {
+        // This effect will run on mount, but we want to skip it.
+        // The on mount effect is responsible for handling mount behavior,
+        // but this effect is specifically responsible for handling search changes
+        if (!isMountStableRef.current) {
+            isMountStableRef.current = true;
+            return;
+        }
+        // Impossible while mounted, list ref will exist
+        if (!listRef.current) {
+            return;
+        }
+        // Reset scroll position to the top
+        listRef.current.scrollTop = 0;
+        // Highlight first item in the list
+        const maybeFirstOption = getFirstValidOption(filteredOptions);
+        if (maybeFirstOption)
+            setHighlightedValue(maybeFirstOption.value);
+    }, [filteredOptions]);
+    return (_jsx(CustomSelectMenuContext, { value: store, children: _jsxs("div", { id: listId, className: s.MenuInner, onKeyDown: handleKeyDown, ref: menuRef, tabIndex: 0, children: [searchable && _jsx(CustomSelectSearch, { value: searchTerm, onChange: setSearchTerm }), _jsx(CustomSelectList, { filteredOptions: filteredOptions }), _jsx(CustomSelectActions, {})] }) }));
+};
+const CustomSelectSearch = ({ value, onChange }) => {
+    const { searchPlaceholder } = useSelectContext();
+    const { listId, searchInputRef } = useCustomSelectMenuContext();
+    const handleChange = (evt) => {
+        onChange(evt.target.value);
+    };
+    return (_jsx("div", { className: s.Search, children: _jsx(Input, { startAdornment: _jsx(Search, { width: 16, height: 16, className: "fill-secondary", fill: "var(--color-text-secondary)" }), ref: searchInputRef, value: value, placeholder: searchPlaceholder, onChange: handleChange, autoComplete: "off", autoCorrect: "off", spellCheck: false, "aria-autocomplete": "list", role: "combobox", "aria-controls": listId, "aria-expanded": true }) }));
+};
+const isOptionGroup = (mixedOption) => {
+    return "options" in mixedOption;
+};
+const isOptionGroupArray = (arr) => {
+    return arr[0] && isOptionGroup(arr[0]);
+};
+const HARD_OPTIONS_LIMIT = 300;
+const CustomSelectList = ({ filteredOptions, }) => {
+    const { searchEmptyMessage } = useSelectContext();
+    const { listRef } = useCustomSelectMenuContext();
+    if (!filteredOptions.length) {
+        return typeof searchEmptyMessage === "string" ? (_jsx("p", { className: s.SearchEmpty, "data-text-only": true, children: searchEmptyMessage })) : (_jsx("div", { className: s.SearchEmpty, children: searchEmptyMessage }));
+    }
+    // We hard limit within groups, so at this level we will only limit flat arrays
+    const isGrouped = isOptionGroupArray(filteredOptions);
+    const hasHardLimit = !isGrouped && filteredOptions.length > HARD_OPTIONS_LIMIT;
+    const options = isGrouped
+        ? filteredOptions.map((group) => _jsx(CustomSelectGroup, { ...group }, group.label))
+        : filteredOptions
+            .slice(0, HARD_OPTIONS_LIMIT)
+            .map((option) => _jsx(CustomSelectOption, { ...option }, option.value));
+    return (_jsxs("div", { className: s.OptionsList, ref: listRef, children: [options, hasHardLimit && (_jsx(CustomSelectHardLimit, { numHidden: filteredOptions.length - HARD_OPTIONS_LIMIT }))] }));
+};
+const DEFAULT_OPTIONS_LIMIT = {
+    limit: 100,
+    label: "Show all",
+};
+const CustomSelectGroup = ({ label, options, optionsLimit = DEFAULT_OPTIONS_LIMIT, }) => {
+    const groupId = useId();
+    const { searchTerm, setHighlightedValue } = useCustomSelectMenuContext();
+    const [limitExpanded, setLimitExpanded] = useState(false);
+    const hasExpandableLimit = optionsLimit.limit < options.length && !searchTerm && !limitExpanded;
+    const hasHardLimit = HARD_OPTIONS_LIMIT < options.length && !hasExpandableLimit;
+    let maybeLimitedOptions = options;
+    if (hasExpandableLimit) {
+        maybeLimitedOptions = options.slice(0, optionsLimit.limit);
+    }
+    else if (hasHardLimit) {
+        maybeLimitedOptions = options.slice(0, HARD_OPTIONS_LIMIT);
+    }
+    const handleLimitExpanded = () => {
+        // Expand options
+        setLimitExpanded(true);
+        // Set highlight to the first option from the newly expanded list
+        setHighlightedValue(options[optionsLimit.limit].value);
+    };
+    return (
+    // NOTE: Important for crawling that groups are flat
+    _jsxs(_Fragment, { children: [_jsxs("div", { className: s.OptionGroupHeading, children: [_jsx("div", { className: s.OptionIndicatorSlot }), label] }), maybeLimitedOptions.map((limitedOptions) => (_jsx(CustomSelectOption, { ...limitedOptions }, limitedOptions.value))), hasExpandableLimit && (_jsx(CustomSelectExpandableLimit, { value: `group-limit-${groupId}`, label: optionsLimit.label, onPointerUp: handleLimitExpanded })), hasHardLimit && _jsx(CustomSelectHardLimit, { numHidden: options.length - HARD_OPTIONS_LIMIT })] }));
+};
+const CustomSelectHardLimit = ({ numHidden }) => {
+    return (_jsxs("div", { className: s.OptionHardLimitHeading, children: [_jsx("div", { className: s.OptionIndicatorSlot }), `…and ${numHidden.toLocaleString()} more options. Use search to refine results further.`] }));
+};
+const CustomSelectExpandableLimit = ({ value, label, onPointerUp, }) => {
+    const { highlightedValue, setHighlightedValue } = useCustomSelectMenuContext();
+    const isHighlighted = value === highlightedValue;
+    const handlePointerMove = () => {
+        if (isHighlighted) {
+            return;
+        }
+        setHighlightedValue(value);
+    };
+    const handlePointerLeave = () => {
+        setHighlightedValue((currentHighlightedValue) => {
+            // If the current value is not this one, don't do anything
+            // Otherwise, clear the value, removing the active highlight on the menu.
+            return currentHighlightedValue !== value ? currentHighlightedValue : "";
+        });
+    };
+    // This component acts a LOT like an Option, but has enough bespoke behavior
+    // that it cannot literally be one. We copy the important parts of Option for
+    // keyboard navigation, UX, etc.
+    return (_jsx("div", { className: clsx(s.Option, s.OptionsLimit), "data-option-id": value, "data-highlight": isHighlighted ? "" : undefined, role: "option", "aria-selected": isHighlighted, onPointerUp: onPointerUp, onPointerMove: handlePointerMove, onPointerLeave: handlePointerLeave, children: _jsxs("div", { className: clsx(s.PressableInner, s.OptionInner), children: [_jsx("div", { className: s.OptionIndicatorSlot }), label] }) }));
+};
+const INTERNAL_DOM_SELECTION_DATA_ATTR = "data-option-id";
+const CustomSelectOption = (option) => {
+    const { optionClassName, OptionView, value: propsValue, multiple, onSelectRef, } = useSelectContext();
+    const { valueRef, requestCloseRef, highlightedValue, setHighlightedValue } = useCustomSelectMenuContext();
+    const { value, disabled, tooltip } = option;
+    // NOTE: SingleSelect mode looks at the ref instead of the live `propValue` intentionally
+    // to avoid selecting the item as the select closes.
+    const currentValue = valueRef.current;
+    const isSelected = multiple ? propsValue.includes(value) : value === currentValue;
+    const isHighlighted = value === highlightedValue;
+    const handlePointerUp = () => {
+        if (multiple) {
+            // Trigger the change ref, optionally as a remove
+            onSelectRef.current(option, isSelected);
+        }
+        else {
+            // Trigger the change ref
+            onSelectRef.current(option);
+            // Request the dropdown to close
+            requestCloseRef.current?.();
+        }
+    };
+    const handlePointerMove = () => {
+        if (isHighlighted) {
+            return;
+        }
+        setHighlightedValue(value);
+    };
+    const handlePointerLeave = () => {
+        setHighlightedValue((currentHighlightedValue) => {
+            // If the current value is not this one, don't do anything
+            // Otherwise, clear the value, removing the active highlight on the menu.
+            return currentHighlightedValue !== value ? currentHighlightedValue : "";
+        });
+    };
+    return (_jsx("div", { className: clsx(s.Option, optionClassName), "data-highlight": isHighlighted ? "" : undefined, role: "option", "aria-selected": isHighlighted, "data-selected": isSelected ? "" : undefined, [INTERNAL_DOM_SELECTION_DATA_ATTR]: value, 
+        // Allow options to behave like a native select, when you can open and select an item in a single click
+        onPointerUp: disabled ? undefined : handlePointerUp, 
+        // Pointer move allows us to prevent contention from keyboard presses and a still mouse
+        // which does trigger events like onMouseEnter, creating weird battles with mouse and keyboard focus.
+        onPointerMove: disabled ? undefined : handlePointerMove, onPointerLeave: disabled ? undefined : handlePointerLeave, "aria-disabled": disabled, "data-disabled": disabled ? "" : undefined, children: _jsxs("div", { className: s.PressableInner, children: [_jsxs("div", { className: s.OptionInner, children: [_jsx("div", { className: s.OptionIndicatorSlot, children: isSelected && _jsx(Check, { className: s.OptionCheck }) }), _jsx(OptionView, { ...option }), tooltip && (_jsx(Tooltip, { content: tooltip.content, maxWidth: tooltip.maxWidth, side: "right", children: _jsx(Info, {}) }))] }), option.description && (_jsxs("div", { className: s.OptionInner, children: [_jsx("div", { className: s.OptionIndicatorSlot }), option.description] }))] }) }));
+};
+const CustomSelectActions = () => {
+    const { actions } = useSelectContext();
+    if (actions.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: s.ActionsContainer, children: actions.map((action) => (_jsx(CustomSelectAction, { ...action }, action.id))) }));
+};
+const CustomSelectAction = ({ id, label, Icon, className }) => {
+    const { onActionSelect } = useSelectContext();
+    const { requestCloseRef } = useCustomSelectMenuContext();
+    const handleKeyDown = (evt) => {
+        const key = evt.key;
+        switch (key) {
+            case "Tab":
+                // Allow tabbing to pass propagation as normal,
+                // which bubbles up to the focus trap of Radix Popover
+                break;
+            case "Enter":
+            case " ":
+                evt.stopPropagation();
+                handlePointerUp();
+                break;
+            default:
+                evt.stopPropagation();
+        }
+    };
+    const handlePointerUp = () => {
+        // Trigger the action's through our context helper, not the method on this action (it may be a stale reference)
+        onActionSelect(id);
+        // Request to close the dropdown
+        requestCloseRef.current?.();
+    };
+    return (_jsx("div", { className: s.Action, onPointerUp: handlePointerUp, onKeyDown: handleKeyDown, tabIndex: 0, children: _jsxs("div", { className: clsx(s.ActionInner, className), children: [Icon && _jsx(Icon, { role: "presentation" }), label] }) }));
+};
+// ============================================================
+// Utilities
+// ============================================================
+const defaultSearchPredicate = (option, searchTerm) => option.label.toLowerCase().includes(searchTerm);
+const filterOptions = (options, searchTerm, searchIterator) => {
+    const searchValue = searchTerm.trim().toLocaleLowerCase();
+    if (!searchValue) {
+        return options;
+    }
+    const filterOption = (option) => searchIterator(option, searchValue);
+    if (isOptionGroupArray(options)) {
+        return options.reduce((acc, group) => {
+            const filtered = group.options.filter(filterOption);
+            if (filtered.length) {
+                acc.push({
+                    ...group,
+                    options: filtered,
+                });
+            }
+            return acc;
+        }, []);
+    }
+    else {
+        return options.reduce((acc, option) => {
+            if (filterOption(option))
+                acc.push(option);
+            return acc;
+        }, []);
+    }
+};
+const getFirstValidOption = (options) => {
+    if (!options.length) {
+        return undefined;
+    }
+    let found;
+    for (const opt of options) {
+        if (isOptionGroup(opt)) {
+            const firstNonDisabled = opt.options.find((i) => !i.disabled);
+            if (firstNonDisabled) {
+                found = firstNonDisabled;
+                break;
+            }
+        }
+        else {
+            if (!opt.disabled) {
+                found = opt;
+                break;
+            }
+        }
+    }
+    return found;
+};
+const getOptionByValue = (options, value) => {
+    let found;
+    for (const opt of options) {
+        if (isOptionGroup(opt)) {
+            const exists = opt.options.find((i) => i.value === value);
+            if (exists) {
+                found = exists;
+                break;
+            }
+        }
+        else {
+            if (opt.value === value) {
+                found = opt;
+                break;
+            }
+        }
+    }
+    return found;
+};
+const getOptionsByValues = (options, values) => {
+    let found = [];
+    const lookup = new Set(values);
+    for (const opt of options) {
+        if (isOptionGroup(opt)) {
+            const exists = opt.options.filter((i) => lookup.has(i.value));
+            found = found.concat(exists);
+        }
+        else {
+            if (lookup.has(opt.value)) {
+                found.push(opt);
+            }
+        }
+    }
+    return found;
+};
+const MAX_DOM_CRAWLS = 40;
+const findOptionByValue = (currentValue, container) => container.querySelector(`[data-option-id="${currentValue}"]`);
+const isValidOptionNode = (node) => node.matches("[data-option-id]:not([data-disabled])");
+const findNextOption = (currentValue, container) => {
+    const currentOption = findOptionByValue(currentValue, container);
+    let nextNode = currentOption?.nextElementSibling;
+    let maxSteps = 0;
+    while (nextNode && maxSteps < MAX_DOM_CRAWLS) {
+        if (isValidOptionNode(nextNode)) {
+            return nextNode;
+        }
+        nextNode = nextNode.nextElementSibling;
+        maxSteps += 1;
+    }
+};
+const findPreviousOption = (currentValue, container) => {
+    const currentOption = findOptionByValue(currentValue, container);
+    let nextNode = currentOption?.previousElementSibling;
+    let maxSteps = 0;
+    while (nextNode && maxSteps < MAX_DOM_CRAWLS) {
+        if (isValidOptionNode(nextNode)) {
+            return nextNode;
+        }
+        nextNode = nextNode.previousElementSibling;
+        maxSteps += 1;
+    }
+};
+const createTypeahead = () => {
+    let currentValue = "";
+    let timeoutId;
+    return (char) => {
+        // Searching is case-insensitive
+        char = char.toLowerCase();
+        // Add the new character to the current value
+        currentValue += char;
+        // Clear the previous timeout if there was one
+        if (timeoutId)
+            clearTimeout(timeoutId);
+        // Reset the value after a brief delay
+        timeoutId = setTimeout(() => {
+            currentValue = "";
+        }, 500);
+        // When a user is typing the same value, like "llll", assume they are cycling through items starting with "l"
+        // We continue to build up the string in case another letter is typed, and then release the full value.
+        // For example, if the user types "ooog", it will return "o", until "g" is typed, and then return the "ooog".
+        const isCycling = char.repeat(currentValue.length) === currentValue;
+        // Return the typeahead value
+        return isCycling ? char : currentValue;
+    };
+};
+const isValidTypeaheadChar = (char) => /^[a-zA-Z0-9]$/.test(char);
+const getTypeaheadOption = (options, typeaheadValue, currentHighlightValue) => {
+    // Ensure options actually exist
+    if (!options.length) {
+        return undefined;
+    }
+    let matchBeforeHighlight;
+    let matchAfterHighlight;
+    // If we' aren't provided a highlighted value, start from the top (e.g., act like it's found)
+    let foundHighlightedValue = !currentHighlightValue;
+    const optionValidAndMatches = ({ disabled, label, value }) => {
+        // Side effect of looping
+        if (value === currentHighlightValue) {
+            foundHighlightedValue = true;
+            // Don't return highlighted value
+            return false;
+        }
+        return !disabled && label.toLowerCase().startsWith(typeaheadValue);
+    };
+    for (const opt of options) {
+        if (isOptionGroup(opt)) {
+            for (const option of opt.options) {
+                if (optionValidAndMatches(option)) {
+                    if (foundHighlightedValue) {
+                        matchAfterHighlight = option;
+                        // We're done after we've found an after match
+                        break;
+                    }
+                    else {
+                        // Keep the first found "before" match
+                        matchBeforeHighlight = matchBeforeHighlight || option;
+                    }
+                }
+            }
+        }
+        else {
+            if (optionValidAndMatches(opt)) {
+                if (foundHighlightedValue) {
+                    matchAfterHighlight = opt;
+                    // We're done after we've found an after match
+                    break;
+                }
+                else {
+                    // Keep the first found "before" match
+                    matchBeforeHighlight = matchBeforeHighlight || opt;
+                }
+            }
+        }
+    }
+    return matchAfterHighlight || matchBeforeHighlight;
+};
+//# sourceMappingURL=Select.js.map