pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.45

package/dist/Components/Select/SelectPopup.js

@@ -0,0 +1,423 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+const fieldStyles_1 = require("../Common/fieldStyles");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
+const FormLabel_1 = require("../Common/FormLabel");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color", "color"]);
+const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform"], "base");
+const PAGE_STEP = 8;
+const LOAD_MORE_THRESHOLD_PX = 8;
+const DEFAULT_MAX_VISIBLE_CHIPS = 6;
+// NOTE: approximate single-row height (px 2.5 + ~13px text); used only to window `virtualizeAfter`, never for layout.
+const VIRTUAL_ROW_HEIGHT_PX = 34;
+const VIRTUAL_OVERSCAN = 4;
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const controlHeightPx = (size) => parseFloat(controlSizes_1.CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize]) / 2 / 16}rem`;
+const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = controlSizes_1.CONTROL_SIZES[size];
+    const base = { minH: spec.height, fontSize: spec.fontSize, px: spec.paddingX };
+    return hasChips ? { ...base, py: chipRowPaddingY(size, chipSize) } : { ...base, h: spec.height };
+};
+const asIdSet = (values) => new Set((values !== null && values !== void 0 ? values : []).map((v) => v.toString()));
+/** Regression-guarded id scheme — tickets e2e (`e2e/tests/helpers/selectV2.ts`) resolves it verbatim. */
+const optionDomId = (listboxId, id) => `${listboxId}-option-${id.toString().replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+const parseRemToPx = (value, fallbackPx) => {
+    const match = /^(\d*\.?\d+)rem$/.exec(value);
+    return match ? parseFloat(match[1]) * 16 : fallbackPx;
+};
+const OptionRow = react_1.default.memo(function OptionRow({ option, index, listboxId, isSelected, isActive, isMulti, theme, backgrounds, renderOption, onSelect, onActivate, }) {
+    const isSingleSelected = isSelected && !isMulti;
+    const selectedBg = isActive ? backgrounds.selectedActive : backgrounds.selected;
+    const restBg = isActive ? backgrounds.active : "transparent";
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", fontWeight: isSingleSelected ? 600 : 400, color: isSingleSelected ? theme.colors.accentText : theme.colors.text[700], bg: isSingleSelected ? selectedBg : restBg, transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), children: [isMulti ? ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1 })) : null, renderOption ? ((0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [option.icon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, isTruncated: true, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: option.label }), option.description ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "block", fontSize: "0.75rem", color: theme.colors.textMuted, isTruncated: true, children: option.description })) : null] })] }))] }));
+});
+const buildGroupedRows = (options) => {
+    const rows = [];
+    let currentGroup;
+    options.forEach((option, index) => {
+        if (option.group !== currentGroup) {
+            currentGroup = option.group;
+            if (option.group)
+                rows.push({ kind: "header", key: `group-${option.group}-${index}`, group: option.group });
+        }
+        rows.push({ kind: "option", key: option.id, option, index });
+    });
+    return rows;
+};
+/** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
+const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
+    var _a, _b, _c, _d;
+    const { options = [], id, name, placeholder = "Select Option", label, error = false, errorMessage, helperText, isDisabled = false, isReadOnly = false, isRequired = false, isInformation = false, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, isSearchable = true, width, formControlStyle, onBlur, onFocus, renderOption, renderValue, maxMenuHeight = "16rem", defaultOpen = false, isLoading = false, loadingText = "Loading...", onLoadMore, onSearchChange, searchValue, defaultSearchValue, searchDebounceMs = 0, isClearable = false, onClear, noOptionsMessage, onCreate, createLabel, virtualizeAfter, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = props;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const { colors } = theme;
+    const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)({ defaultIsOpen: defaultOpen });
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, onClose);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
+    const triggerRef = (0, react_1.useRef)(null);
+    const mergedTriggerRef = (0, react_2.useMergeRefs)(triggerRef, ref);
+    const filterInputRef = (0, react_1.useRef)(null);
+    const listRef = (0, react_1.useRef)(null);
+    const [triggerWidth, setTriggerWidth] = (0, react_1.useState)(0);
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const listboxId = `${ids.inputId}-listbox`;
+    const filterInputId = `${listboxId}-filter`;
+    const createRowId = `${listboxId}-create`;
+    const isInteractive = !isDisabled && !isReadOnly;
+    const isValueControlled = props.value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = (0, react_1.useState)(props.defaultValue);
+    const currentValue = isValueControlled ? props.value : uncontrolledValue;
+    const isSearchControlled = searchValue !== undefined;
+    const [uncontrolledSearch, setUncontrolledSearch] = (0, react_1.useState)(defaultSearchValue !== null && defaultSearchValue !== void 0 ? defaultSearchValue : "");
+    const currentSearch = isSearchControlled ? searchValue : uncontrolledSearch;
+    const searchDebounceTimer = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => () => clearTimeout(searchDebounceTimer.current), []);
+    const selectedIds = (0, react_1.useMemo)(() => props.isMulti
+        ? asIdSet(currentValue)
+        : asIdSet(currentValue !== undefined ? [currentValue] : undefined), [props.isMulti, currentValue]);
+    const selectedOptions = (0, react_1.useMemo)(() => options.filter((option) => selectedIds.has(option.id.toString())), [options, selectedIds]);
+    const filteredOptions = (0, react_1.useMemo)(() => {
+        if (!isSearchable || !currentSearch.trim())
+            return options;
+        const needle = currentSearch.trim().toLowerCase();
+        return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
+    }, [options, currentSearch, isSearchable]);
+    const hasGroups = (0, react_1.useMemo)(() => options.some((option) => option.group), [options]);
+    const resetAndClose = (0, react_1.useCallback)((opts) => {
+        if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
+            return;
+        onClose();
+        if (!isSearchControlled)
+            setUncontrolledSearch("");
+        setActiveIndex(-1);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [onClose, onBlur, props.isMulti, isSearchControlled]);
+    const handleOpen = () => {
+        if (!isInteractive)
+            return;
+        requestExclusiveOpen();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+        onOpen();
+        const firstSelected = props.isMulti
+            ? currentValue === null || currentValue === void 0 ? void 0 : currentValue[0]
+            : currentValue;
+        setActiveIndex(filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString())));
+    };
+    const handleSelect = (0, react_1.useCallback)((option) => {
+        var _a, _b;
+        if (option.isDisabled)
+            return;
+        if (props.isMulti) {
+            const alreadySelected = selectedIds.has(option.id.toString());
+            const next = alreadySelected
+                ? selectedOptions.filter((selected) => selected.id.toString() !== option.id.toString())
+                : [...selectedOptions, option];
+            if (!isValueControlled)
+                setUncontrolledValue(next.map((o) => o.id));
+            props.onChange(next);
+            resetAndClose({ keepOpenForMulti: true });
+            (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            return;
+        }
+        if (!isValueControlled)
+            setUncontrolledValue(option.id);
+        props.onChange(option);
+        resetAndClose();
+        (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [props.isMulti, props.onChange, selectedIds, selectedOptions, resetAndClose, isValueControlled]);
+    const handleCreate = (0, react_1.useCallback)(() => {
+        if (!onCreate)
+            return;
+        onCreate(currentSearch.trim());
+        resetAndClose();
+    }, [onCreate, currentSearch, resetAndClose]);
+    const handleClear = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        if (!isInteractive)
+            return;
+        if (props.isMulti) {
+            if (!isValueControlled)
+                setUncontrolledValue([]);
+            props.onChange([]);
+        }
+        else {
+            if (!isValueControlled)
+                setUncontrolledValue(undefined);
+            props.onChange(undefined);
+        }
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isInteractive, props.isMulti, props.onChange, isValueControlled, onClear]);
+    // The panel grows past the trigger to fit long labels, so it cannot inherit the anchor width.
+    (0, react_1.useEffect)(() => {
+        const node = triggerRef.current;
+        if (!isOpen || !node)
+            return;
+        setTriggerWidth(node.getBoundingClientRect().width);
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => {
+        if (!isOpen || !isSearchable)
+            return;
+        const frame = requestAnimationFrame(() => { var _a; return (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+        return () => cancelAnimationFrame(frame);
+    }, [isOpen, isSearchable]);
+    const maxMenuHeightPx = (0, react_1.useMemo)(() => parseRemToPx(maxMenuHeight, 256), [maxMenuHeight]);
+    const shouldVirtualize = !!virtualizeAfter && !hasGroups && filteredOptions.length > virtualizeAfter;
+    const [scrollTop, setScrollTop] = (0, react_1.useState)(0);
+    const visibleCount = Math.ceil(maxMenuHeightPx / VIRTUAL_ROW_HEIGHT_PX) + VIRTUAL_OVERSCAN * 2;
+    const startIndex = shouldVirtualize
+        ? Math.max(0, Math.floor(scrollTop / VIRTUAL_ROW_HEIGHT_PX) - VIRTUAL_OVERSCAN)
+        : 0;
+    const endIndex = shouldVirtualize
+        ? Math.min(filteredOptions.length, startIndex + visibleCount)
+        : filteredOptions.length;
+    const renderedOptions = shouldVirtualize ? filteredOptions.slice(startIndex, endIndex) : filteredOptions;
+    const topPadPx = shouldVirtualize ? startIndex * VIRTUAL_ROW_HEIGHT_PX : 0;
+    const bottomPadPx = shouldVirtualize ? (filteredOptions.length - endIndex) * VIRTUAL_ROW_HEIGHT_PX : 0;
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (activeIndex < 0 || !listRef.current)
+            return;
+        const el = listRef.current;
+        if (shouldVirtualize) {
+            const targetTop = activeIndex * VIRTUAL_ROW_HEIGHT_PX;
+            const targetBottom = targetTop + VIRTUAL_ROW_HEIGHT_PX;
+            if (targetTop < el.scrollTop) {
+                el.scrollTop = targetTop;
+                setScrollTop(targetTop);
+            }
+            else if (targetBottom > el.scrollTop + maxMenuHeightPx) {
+                const next = targetBottom - maxMenuHeightPx;
+                el.scrollTop = next;
+                setScrollTop(next);
+            }
+            return;
+        }
+        (_b = (_a = el.querySelector(`[data-index="${activeIndex}"]`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [activeIndex, shouldVirtualize, maxMenuHeightPx]);
+    const moveActive = (delta) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => {
+            const next = current + delta;
+            if (next < 0)
+                return filteredOptions.length - 1;
+            if (next >= filteredOptions.length)
+                return 0;
+            return next;
+        });
+    };
+    const moveActiveBy = (delta) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex((current) => Math.min(Math.max(current + delta, 0), filteredOptions.length - 1));
+    };
+    const moveActiveToEdge = (edge) => {
+        if (!filteredOptions.length)
+            return;
+        setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
+    };
+    const showCreateRow = !!onCreate && isSearchable && currentSearch.trim() !== "" && filteredOptions.length === 0 && !isLoading;
+    const handleListKeyDown = (event) => {
+        var _a, _b;
+        const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                moveActive(1);
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                moveActive(-1);
+                break;
+            case "Home":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("start");
+                break;
+            case "End":
+                if (isTextInput)
+                    break;
+                event.preventDefault();
+                moveActiveToEdge("end");
+                break;
+            case "PageUp":
+                event.preventDefault();
+                moveActiveBy(-PAGE_STEP);
+                break;
+            case "PageDown":
+                event.preventDefault();
+                moveActiveBy(PAGE_STEP);
+                break;
+            case "Enter": {
+                event.preventDefault();
+                const activeOption = filteredOptions[activeIndex];
+                if (activeOption)
+                    handleSelect(activeOption);
+                else if (showCreateRow)
+                    handleCreate();
+                break;
+            }
+            case "Escape":
+                event.preventDefault();
+                resetAndClose();
+                (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case "Tab":
+                resetAndClose();
+                break;
+            default:
+                break;
+        }
+    };
+    const handleTriggerKeyDown = (event) => {
+        if (!isInteractive)
+            return;
+        if (props.isMulti && !isOpen && event.key === "Backspace" && selectedOptions.length) {
+            event.preventDefault();
+            handleSelect(selectedOptions[selectedOptions.length - 1]);
+            return;
+        }
+        if (isOpen) {
+            handleListKeyDown(event);
+            return;
+        }
+        if (["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) {
+            event.preventDefault();
+            handleOpen();
+        }
+    };
+    const handleListScroll = (event) => {
+        const { scrollTop: nextScrollTop, clientHeight, scrollHeight } = event.currentTarget;
+        if (shouldVirtualize)
+            setScrollTop(nextScrollTop);
+        if (!onLoadMore || isLoading)
+            return;
+        if (nextScrollTop + clientHeight >= scrollHeight - LOAD_MORE_THRESHOLD_PX)
+            onLoadMore();
+    };
+    const handleFilterChange = (event) => {
+        const nextText = event.target.value;
+        if (!isSearchControlled)
+            setUncontrolledSearch(nextText);
+        setActiveIndex(0);
+        if (!onSearchChange)
+            return;
+        if (!searchDebounceMs) {
+            onSearchChange(nextText);
+            return;
+        }
+        clearTimeout(searchDebounceTimer.current);
+        searchDebounceTimer.current = setTimeout(() => onSearchChange(nextText), searchDebounceMs);
+    };
+    const activeOption = filteredOptions[activeIndex];
+    const activeDescendantId = activeOption
+        ? optionDomId(listboxId, activeOption.id)
+        : showCreateRow
+            ? createRowId
+            : undefined;
+    const listScrollStyles = (0, react_1.useMemo)(() => (0, scrollbar_1.scrollbarStyles)(colors, "overlay"), [colors]);
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(colors), [colors]);
+    const showChips = !!props.isMulti && !renderValue && selectedOptions.length > 0;
+    const chipSize = size === "xs" ? "xs" : "sm";
+    const maxVisibleChips = props.isMulti ? ((_a = props.maxVisibleChips) !== null && _a !== void 0 ? _a : DEFAULT_MAX_VISIBLE_CHIPS) : 0;
+    const visibleChipOptions = showChips ? selectedOptions.slice(0, maxVisibleChips) : [];
+    const overflowChipCount = showChips ? selectedOptions.length - visibleChipOptions.length : 0;
+    const showClear = isClearable && isInteractive && selectedOptions.length > 0;
+    const triggerSx = (0, react_1.useMemo)(() => ({
+        ...(0, fieldStyles_1.fieldControlStyles)(colors),
+        ...chipTriggerSizeStyles(size, showChips, chipSize),
+        ...(selectedOptions.length ? {} : { color: colors.textMuted }),
+        ...(isOpen
+            ? { borderColor: error ? colors.semanticText.error : colors.primary[500], boxShadow: (0, focusRing_styles_1.focusGlowShadow)(colors) }
+            : {}),
+        ...(0, motion_2.reducedMotionSx)(),
+    }), [colors, size, showChips, chipSize, selectedOptions.length, isOpen, error]);
+    const defaultTriggerContent = () => {
+        var _a;
+        if (props.isMulti) {
+            const max = (_a = props.maxLabelsBeforeSummary) !== null && _a !== void 0 ? _a : 2;
+            if (selectedOptions.length === 0)
+                return placeholder;
+            if (selectedOptions.length > max)
+                return `${selectedOptions.length} selected`;
+            return selectedOptions.map((o) => o.label).join(", ");
+        }
+        return selectedOptions[0] ? selectedOptions[0].label : placeholder;
+    };
+    const triggerAriaLabel = () => {
+        const base = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : label;
+        if (!showChips)
+            return base;
+        const summary = defaultTriggerContent();
+        return base ? `${base}: ${summary}` : `${summary}`;
+    };
+    const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
+    const selectedValueIds = selectedOptions.map((option) => option.id.toString());
+    const hiddenValues = !name ? [] : props.isMulti ? selectedValueIds : [(_c = selectedValueIds[0]) !== null && _c !== void 0 ? _c : ""];
+    const groupedRows = (0, react_1.useMemo)(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
+    return ((0, jsx_runtime_1.jsxs)(react_2.FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverAnchor, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "div", ref: mergedTriggerRef, ...ids.controlProps, role: "combobox", tabIndex: isDisabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-owns": `${listboxId} ${filterInputId}`, "aria-activedescendant": activeDescendantId, "aria-disabled": isDisabled || undefined, "data-readonly": isReadOnly || undefined, "aria-required": isRequired || undefined, "aria-label": triggerAriaLabel(), "aria-labelledby": ariaLabelledBy, onClick: handleOpen, onKeyDown: handleTriggerKeyDown, display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", textAlign: "left", cursor: isDisabled ? "not-allowed" : isReadOnly ? "default" : "pointer", "data-testid": dataTestId, sx: triggerSx, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexWrap: showChips ? "wrap" : "nowrap", alignItems: "center", gap: showChips ? 1 : 1.5, minW: 0, flex: 1, isTruncated: !showChips, children: showChips ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [visibleChipOptions.map((option) => ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: String(option.label), size: chipSize, variant: "subtle", icon: isInteractive ? lucide_react_1.X : undefined, onIconClick: isInteractive ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerIcon ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": "Clear selection", onClick: handleClear, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: controlSizes_1.CONTROL_SIZES[size].iconSize }) })), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: controlSizes_1.CONTROL_SIZES[size].iconSize }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.PopoverContent, { width: "max-content", minWidth: triggerWidth ? `${triggerWidth}px` : undefined, maxWidth: "min(24rem, calc(100vw - 2rem))", borderRadius: "xl", boxShadow: theme.shadows.lg, overflow: "hidden", onKeyDown: handleListKeyDown, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, display: isSearchable ? undefined : "none", children: (0, jsx_runtime_1.jsx)(react_2.Input, { ref: filterInputRef, id: filterInputId, size: "sm", placeholder: "Type to filter...", value: currentSearch, onChange: handleFilterChange, "aria-activedescendant": activeDescendantId, "aria-controls": listboxId, "aria-label": "Filter options", tabIndex: isSearchable ? undefined : -1 }) }), (0, jsx_runtime_1.jsxs)(react_2.Box, { id: listboxId, ref: listRef, role: "listbox", "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, "aria-multiselectable": props.isMulti || undefined, "aria-busy": isLoading || undefined, maxH: maxMenuHeight, overflowY: "auto", py: 1, sx: listScrollStyles, onScroll: handleListScroll, children: [filteredOptions.length === 0 && !isLoading && !showCreateRow && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, py: 2, fontSize: "0.8125rem", color: colors.textMuted, children: noOptionsMessage !== null && noOptionsMessage !== void 0 ? noOptionsMessage : "No Options" })), showCreateRow && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: createRowId, role: "option", "aria-selected": false, "data-index": -1, onClick: handleCreate, mx: 1.5, px: 2.5, py: 1.5, borderRadius: "md", cursor: "pointer", fontSize: "0.8125rem", fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), hasGroups
+                                            ? groupedRows.map((row) => {
+                                                var _a;
+                                                return row.kind === "header" ? ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pt: 2, pb: 1, fontSize: "0.6875rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.03em", color: colors.textMuted, children: row.group }, row.key)) : ((0, jsx_runtime_1.jsx)(OptionRow, { option: row.option, index: row.index, listboxId: listboxId, isSelected: selectedIds.has(row.option.id.toString()), isActive: row.index === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, row.key));
+                                            })
+                                            : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [topPadPx > 0 && (0, jsx_runtime_1.jsx)(react_2.Box, { height: `${topPadPx}px` }), renderedOptions.map((option, i) => {
+                                                        var _a;
+                                                        return ((0, jsx_runtime_1.jsx)(OptionRow, { option: option, index: startIndex + i, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: startIndex + i === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
+                                                    }), bottomPadPx > 0 && (0, jsx_runtime_1.jsx)(react_2.Box, { height: `${bottomPadPx}px` })] })), isLoading && ((0, jsx_runtime_1.jsxs)(react_2.Box, { px: 3, py: 2, display: "flex", alignItems: "center", gap: 2, fontSize: "0.8125rem", color: colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs" }), loadingText] }))] })] }) })] }), hiddenValues.map((value) => ((0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: value }, value))), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+});
+exports.default = SelectPopup;

package/dist/Components/Select/SelectProps.d.ts

@@ -1,25 +1,131 @@
-import { SelectProps } from "@chakra-ui/react";
-/** Props for `Select`; named lowercase to avoid clashing with Chakra's own imported `SelectProps`. */
-export type chakraSelectProps = Pick<SelectProps, "placeholder" | "size" | "variant" | "icon" | "bg" | "borderColor" | "color" | "onBlur" | "onFocus" | "errorBorderColor" | "isDisabled" | "isReadOnly" | "isRequired" | "value" | "colorScheme"> & {
-    label?: string;
+import type { SelectProps as ChakraNativeSelectProps } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Select option; icon/description/group/isDisabled are popup-mode extras, all optional and additive. */
+export type OptionProp = {
+    id: string | number;
+    label: string | number;
+    /** Popup mode only — leading icon/avatar for this option's row (and the trigger, when selected). */
+    icon?: ReactNode;
+    /** Popup mode only — secondary line under the label; not matched by the search filter. */
+    description?: string;
+    /** Row is dimmed and unselectable. Native mode emits a disabled `<option>`. */
+    isDisabled?: boolean;
+    /** Group heading. Options group in the order they appear; emitted as `<optgroup>` in native mode. */
+    group?: string;
+};
+type SelectCommonProps = {
+    options: OptionProp[];
+    /** Renders a themed popup instead of a real `<select>` when false. Defaults to true — today's `Select`, unchanged. */
+    native?: boolean;
+    /** DOM id of the control; auto-generated when omitted, so the label and messages always associate. */
     id?: string;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
+    name?: string;
+    label?: string;
+    /** Native: the built-in placeholder `<option>`. Popup: trigger text when nothing is selected. Defaults to "Select Option". */
+    placeholder?: string;
+    /** Height on the shared control scale (xs 24 · sm 32 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
+    /** Applied to the wrapping FormControl. */
+    width?: string | number;
+    /** Native mode only — overrides the size-driven height (sets both `h` and `minH`). */
+    height?: string | number;
+    /** Marks the field invalid and swaps `helperText` for `errorMessage`. */
     error?: boolean;
+    /** Rendered only while `error` is true. */
     errorMessage?: string;
+    /** Hint under the field; hidden while `error` is true. */
     helperText?: string;
-    options: OptionProp[];
-    width?: string | number;
-    height?: string | number;
-    /** Selecting the built-in placeholder (value="") never fires this unless `options` has an explicit `id: ""` entry. */
-    onChange: (selectedOption: OptionProp | undefined) => void;
-    formControlStyle?: React.CSSProperties;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    /** Shows an info icon beside the label; needs `label` and `informationMessage` too. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Inline style on the wrapping FormControl (label + control + message). */
+    formControlStyle?: React.CSSProperties;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    /** Popup mode only — forwarded to the trigger, the same node as `role="combobox"`. */
+    "data-testid"?: string;
+    variant?: ChakraNativeSelectProps["variant"];
+    colorScheme?: ChakraNativeSelectProps["colorScheme"];
+    icon?: ChakraNativeSelectProps["icon"];
+    bg?: ChakraNativeSelectProps["bg"];
+    borderColor?: ChakraNativeSelectProps["borderColor"];
+    color?: ChakraNativeSelectProps["color"];
+    errorBorderColor?: ChakraNativeSelectProps["errorBorderColor"];
+    /** Native mode only — inline style on the `<select>` element itself. */
     selectStyle?: React.CSSProperties;
+    /** Native: real DOM blur. Popup: fires when the popup closes (SelectV2's existing behaviour). */
+    onBlur?: (event?: React.FocusEvent<HTMLElement>) => void;
+    /** Native: real DOM focus. Popup: fires when the popup opens (SelectV2's existing behaviour). */
+    onFocus?: (event?: React.FocusEvent<HTMLElement>) => void;
+    /** Shows a type-ahead filter input at the top of the popup. Defaults to true. Popup mode only. */
+    isSearchable?: boolean;
+    /** Controlled filter text — a second axis, independent of `value`. Popup mode only. */
+    searchValue?: string;
+    /** Seeds an uncontrolled filter text; ignored once `searchValue` is passed. Popup mode only. */
+    defaultSearchValue?: string;
+    /** Fires with the filter text, debounced by `searchDebounceMs`. Popup mode only. */
+    onSearchChange?: (query: string) => void;
+    /** Debounce for `onSearchChange`, in ms. Defaults to 0 — every keystroke, matching SelectV2 today. */
+    searchDebounceMs?: number;
+    /** Shows a clear (x) control once a value is selected. Popup mode only. */
+    isClearable?: boolean;
+    /** Fires after a clear action, in addition to `onChange`. Popup mode only. */
+    onClear?: () => void;
+    /** Shows a loading row under the options and marks the listbox aria-busy. Popup mode only. */
+    isLoading?: boolean;
+    /** Text of the loading row. Defaults to "Loading...". Popup mode only. */
+    loadingText?: string;
+    /** Empty-list message. Native mode stringifies it (plain `<option>` text); popup mode accepts any node. */
+    noOptionsMessage?: ReactNode;
+    /** Fires when the list is scrolled to its end and not loading — append the next page. Popup mode only. */
+    onLoadMore?: () => void;
+    /** Full control over an option row; receives isSelected/isActive. Popup mode only. */
+    renderOption?: (option: OptionProp, state: {
+        isSelected: boolean;
+        isActive: boolean;
+    }) => ReactNode;
+    /** Custom trigger content once a value is selected. Popup mode only. */
+    renderValue?: (selected: OptionProp[]) => ReactNode;
+    /** Shows a "Create …" row when the filter matches no option; fires with the trimmed query. Popup mode only. */
+    onCreate?: (label: string) => void;
+    /** Overrides the default `Create "«query»"` row content. Popup mode only. */
+    createLabel?: (query: string) => ReactNode;
+    /** Max popup height before the option list scrolls. Defaults to "16rem". Popup mode only. */
+    maxMenuHeight?: string;
+    /** Opens the popup on mount, for inline-edit cells. Popup mode only. */
+    defaultOpen?: boolean;
+    /** Windows the list once it holds more options than this. Off by default; ignored when any option has a `group`. */
+    virtualizeAfter?: number;
 };
-/** Single Select option: id/label pair used in `options` and passed back via `onChange`. */
-export type OptionProp = {
-    id: string | number;
-    label: string | number;
+/** Single-select arm of `SelectFieldProps`; `isMulti` false/absent discriminates it from the multi variant. */
+export type SelectSingleProps = SelectCommonProps & {
+    isMulti?: false;
+    /** Controlled selected option id. */
+    value?: string | number;
+    /** Seeds an uncontrolled selection; ignored once `value` is passed (even `""`). */
+    defaultValue?: string | number;
+    /** Canonical change callback. Never fires for the native placeholder; gate a reset behind `isClearable`. */
+    onChange: (selectedOption: OptionProp | undefined) => void;
+};
+/** Multi-select arm of `SelectFieldProps`; `isMulti: true` discriminates it and makes `value` an array. */
+export type SelectMultiProps = SelectCommonProps & {
+    /** Multi-select requires the popup — rendered even if `native` is left true, with a dev warning. */
+    isMulti: true;
+    value?: (string | number)[];
+    defaultValue?: (string | number)[];
+    onChange: (selectedOptions: OptionProp[]) => void;
+    /** Chips shown before the rest collapse into a "+N" chip. Defaults to 6. */
+    maxVisibleChips?: number;
+    /** Feeds the trigger's aria-label summary once chips collapse. Defaults to 2. */
+    maxLabelsBeforeSummary?: number;
 };
+/** Props for the unified `Select` — a discriminated union on `isMulti` between the single and multi variants. */
+export type SelectFieldProps = SelectSingleProps | SelectMultiProps;
+/** @deprecated historical export name — `src/index.ts` re-exports this as the public `SelectProps`. */
+export type chakraSelectProps = SelectFieldProps;
+export {};

package/dist/Components/SelectSearch/SelectSearch.d.ts

@@ -1,3 +1,3 @@
 import { SelectSearchProps } from "./SelectSearchProps";
-/** Search-as-you-type combobox with avatar/color/email rows — Enter only picks on an exact label match, not the highlighted option. */
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): import("react/jsx-runtime").JSX.Element;
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText, boxStyle, placeholder, searchQuery, isInformation, informationMessage, rightIcon, rightElementStyle, isMultipleSelect, isRequired, onOptionMultiSelect, error, isProfile, isBottomIcon, errorMessage, helperText, size, BottomIcon, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }: Readonly<SelectSearchProps>): import("react/jsx-runtime").JSX.Element;