pixelize-design-library 2.4.2-beta.47 → 2.4.2-beta.48

package/CHANGELOG.md

@@ -63,6 +63,59 @@ next major.
 
 ### Fixed
 
+- **`Table` — a column search only ever matched the page you were looking at.** The per-column
+  search ran on `filteredData`, which `useTable` had already sliced to the current page, so a match
+  on page 3 was invisible from page 1 and the pager still counted every row. The search now runs
+  before the slice: page count, the `1 - 20 of N` readout and the rendered rows all come from the
+  matched set, and typing a new search returns to page 1. Grouped mode already searched the whole
+  source and is unchanged; server pagination still searches only the loaded page, since the client
+  cannot see the rest.
+- **`Table` — an empty page was a dead end, and a page-size change left the body scrolled.** The
+  pager's step controls were hidden whenever the loaded rows were empty, so a server page that came
+  back with nothing stranded the user with no way back; stepping back now survives an empty result
+  and only stepping forward is disabled. A narrowing client-side result also clamps the current page
+  instead of leaving it past the end. Changing the page size at page 0 swaps the rows without moving
+  `startRow`, which used to leave the virtualized body scrolled into the old page — the scroll reset
+  now keys on the page size too.
+- **`Table` — a full-bleed status cell ignored `columns[].align`.** `align` is documented as aligning
+  the header label and the cells together, but a bleed status cell hardcoded centre. It now follows
+  `align` when the column sets one, and still centres when it does not, so existing tables look the
+  same.
+- **`Select` — the popup's filter field did not line up with the options under it.** Its wrapper
+  used a hardcoded `p={2}` while option rows inset by the size spec's `mx` (6px at `sm`, 4px at
+  `xs`), so the field's edges sat 2-4px inside the list's, and its text origin 2px further in. The
+  field was also fixed at `size="sm"` whatever the `Select`'s own size, so a `lg` picker got a small
+  search box. Both now follow the active size spec; measured edge- and text-aligned at every size.
+- **`Select` — a multi-select with chips rendered 2px taller than every other field.** The chip row's
+  vertical padding was computed against the control height without allowing for the trigger's own
+  1px rule top and bottom, which a border-box trigger adds on top. The sizing now lives in one
+  shared helper (`Common/chipTriggerSize`) that `Select` and the deprecated `SelectV2` both read.
+- **`SearchSelect` — infinite-scroll paging could duplicate a page, loop forever on an
+  exact-multiple total, leak a pending fetch into a closed/unmounted menu, and never scrolled the
+  keyboard-highlighted row into view.** `handleScroll` now reads the live option count at fire
+  time instead of the value captured when its 200ms debounce was scheduled, and won't re-request a
+  `startIndex` it already asked for. `hasMore` takes new optional `pagination.hasMore` /
+  `pagination.totalRecords` overrides, defaults `limit` to 10 (it used to never update when `limit`
+  was omitted), and stops after one page that doesn't grow `options`. The pending page timer is
+  cleared on close/unmount, and the active row now scrolls into view with `block: "nearest"`.
+- **`Table` — frozen columns sat at the wrong offset, and the pagination bar was misaligned.** The
+  sticky `left` was passed as a bare number, which Chakra reads off the space scale: a 48px offset
+  rendered as `12rem` (192px), and any cumulative frozen-column width landing on the scale jumped
+  4x. It stayed hidden because the old `CHECKBOX_SLOT_OFFSET = 50` is not a scale value — but 50
+  also missed the real 48px select-all cell by 2px, leaving a slit that scrolled content bled
+  through, and was wrong outright for `variant="studio"`'s 56px slot. The slot is now measured with
+  a `ResizeObserver`, and both offsets interpolate explicit pixels. The pager is one 24px row: the
+  `mt={3}` that faked centring is gone, the steps are `size="xs"` with 16px icons instead of
+  Chakra's 40px default, and the page-size select no longer fights `justify="flex-end"` with
+  `w="100%"`.
+- **`Table` — virtualized body jumped to the top on an appended page, and never scrolled on a real
+  page change below the virtualize threshold.** The scroll-reset effect now keys on `startRow`
+  actually changing instead of on the 30-row virtualize threshold flipping, so infinite-scroll and
+  grouped `groupLoadMore` appends no longer yank the user to the top, while a real page change
+  resets correctly at any size. A shrinking `data` set no longer strands the window past the end,
+  the offset-lookup binary-searches instead of scanning from 0, and measured row heights are
+  pruned per page instead of growing forever.
+
 - **`SegmentedControl` / `Switch` guessed the backdrop it was drawn on.** `brandSlide` painted an
   8% brand tint composited over `backgroundColor.main` and lifted its unselected-label ink against
   that same assumed canvas, so on a brand-filled bar the tint sank into the bar and the label

package/COMPONENT-GOTCHAS.md

@@ -434,6 +434,37 @@ set the required state on your own wrapping `FormControl`. Note the obvious one-
 component is not neutral: Chakra's `useFormControl` also emits native `required`, which would add
 browser validation to a *filter* input that was never submitted before.
 
+### `Select` with `onSearchChange` no longer filters locally (beta.48)
+
+Passing `onSearchChange` means the server owns matching, so `Select` stops applying its own
+substring filter to `options`. Before this, a fuzzy or ranked server result whose label did not
+literally contain the typed text was fetched and then hidden. Pass `filterOptions={true}` to keep
+the local pass on top, or `filterOptions={false}` to drop it even without `onSearchChange`.
+
+**Apply:** if a server-backed `Select` suddenly shows more rows than it used to, that is this fix,
+not a regression. Paged `Select`s should also pass `hasMore={false}` once the last page lands —
+without it, `onLoadMore` fires again every time the user reaches the bottom.
+
+### `Select` with `isMulti` keeps picks that leave `options` (beta.48)
+
+`onChange` used to be built from the options currently in the list, so replacing `options` with a
+server-search result silently dropped every earlier pick the new page did not contain — the chips
+vanished and the next selection emitted a truncated array. Selected options are now remembered
+independently of `options`.
+
+**Apply:** nothing to change. If you worked around this by merging the old selection back in
+yourself, that workaround is now redundant.
+
+### `Table`'s column search covers every page (beta.48)
+
+The per-column search box used to run after the page slice, so it matched only the rows on screen
+while the pager still counted the whole data set. It now runs first: the page count, the
+`1 - 20 of N` readout and the rows all come from the matched set, and a new search returns to page
+1. Under `paginationMode="server"` the client still only sees the loaded page — filter on the
+server there.
+
+**Apply:** a client-side table that looked like it had "no matches" past page 1 now finds them.
+
 ### `Select`'s `onChange` never fires for the built-in placeholder
 
 `Select` resolves the changed value against its `options` list and calls `onChange` only on a hit.
@@ -1219,14 +1250,16 @@ configured has no visible effect at all.
 **Apply:** to change the main field's height, change `size`; `height` only matters when
 `insideSelect` is also passed.
 
-### `SearchSelect`'s `pagination.limit` also drives a "has more" guess, not just page size
+### `SearchSelect`'s `pagination` now takes an explicit "has more" signal — prefer it at an exact-multiple total
 
-`hasMore` is computed as `options.length % pagination.limit === 0` — there is no real end-of-data
-signal from the consumer. A total result count that happens to be an exact multiple of `limit`
-looks indistinguishable from "more pages exist," firing one extra, empty `onScroll` call.
+Without `pagination.hasMore`/`pagination.totalRecords`, `hasMore` still falls back to guessing from
+`options.length % (pagination.limit ?? 10) === 0`. A total that's an exact multiple of `limit`
+(30 items, limit 10) still looks like "more pages exist" for the *first* extra scroll, firing one
+empty `onScroll` call — after that empty response, `SearchSelect` stops asking (it no longer loops
+forever the way earlier versions did).
 
-**Apply:** if exact pagination boundaries matter, pad or report a real "no more results" state some
-other way; don't rely on `hasMore` being accurate at a page boundary.
+**Apply:** pass `pagination.hasMore` (a boolean) or `pagination.totalRecords` (a count) so the field
+never fires that one avoidable empty request; both take precedence over the `limit` guess.
 
 ### `RolesPermission`'s `RoleData.permission`/`designation`/`makeSuperAdmin`/`automation`/`trackLocation`/`show_records` are dead weight in this component
 

package/dist/Components/Common/chipTriggerSize.d.ts

@@ -0,0 +1,10 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type ChipSize = "xs" | "sm";
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+export declare const chipTriggerSizeStyles: (size: ControlSize, hasChips: boolean, chipSize?: ChipSize) => {
+    minH: string;
+    fontSize: string;
+    px: string;
+    h?: string;
+    py?: string;
+};

package/dist/Components/Common/chipTriggerSize.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipTriggerSizeStyles = void 0;
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const CONTROL_BORDER_PX = 2;
+const controlHeightPx = (size) => parseFloat(controlSizes_1.CONTROL_SIZES[size].height) * 16;
+const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize] - CONTROL_BORDER_PX) / 2 / 16}rem`;
+/** Sizes a select trigger so a chip row lands on the same height as a plain one. */
+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 };
+};
+exports.chipTriggerSizeStyles = chipTriggerSizeStyles;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -91,6 +91,9 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     const dropdownMenuRef = (0, react_1.useRef)(null);
     const [dropdownPos, setDropdownPos] = (0, react_1.useState)({ top: 0, left: 0, width: 0 });
     const scrollTimeoutRef = (0, react_1.useRef)(null);
+    const optionsLengthRef = (0, react_1.useRef)(options.length);
+    const lastPageStartRef = (0, react_1.useRef)(null);
+    const optionsListRef = (0, react_1.useRef)(null);
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [customSelectOpen, setCustomSelectOpen] = (0, react_1.useState)(false);
     const customSelectRef = (0, react_1.useRef)(null);
@@ -141,10 +144,22 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         return () => clearTimeout(delayDebounce);
     }, [inputValue]);
     (0, react_1.useEffect)(() => {
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
-            setHasMore(options.length % pagination.limit === 0);
+        optionsLengthRef.current = options.length;
+    }, [options.length]);
+    (0, react_1.useEffect)(() => {
+        if ((pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) !== undefined) {
+            setHasMore(pagination.hasMore);
+            return;
+        }
+        if ((pagination === null || pagination === void 0 ? void 0 : pagination.totalRecords) !== undefined) {
+            setHasMore(options.length < pagination.totalRecords);
+            return;
         }
-    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.limit]);
+        if (!(pagination === null || pagination === void 0 ? void 0 : pagination.onScroll))
+            return;
+        const limit = pagination.limit || 10;
+        setHasMore(options.length % limit === 0);
+    }, [options.length, pagination === null || pagination === void 0 ? void 0 : pagination.hasMore, pagination === null || pagination === void 0 ? void 0 : pagination.totalRecords, pagination === null || pagination === void 0 ? void 0 : pagination.limit, pagination === null || pagination === void 0 ? void 0 : pagination.onScroll]);
     const handleSelect = (option) => {
         var _a;
         if (isMultiple && insideSelect) {
@@ -324,6 +339,13 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         }
         setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
     }, [isOpen, filteredOptions.length]);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!isOpen || activeIndex < 0 || !optionsListRef.current)
+            return;
+        (_b = (_a = optionsListRef.current
+            .querySelector(`[data-index="${activeIndex}"]`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+    }, [isOpen, activeIndex]);
     // NOTE: only restores focus when a keyboard close actually unmounted Input and dropped focus to body.
     (0, react_1.useEffect)(() => {
         var _a, _b, _c, _d;
@@ -354,11 +376,30 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                 clearTimeout(scrollTimeoutRef.current);
             scrollTimeoutRef.current = setTimeout(() => {
                 var _a;
-                const startIndex = options.length + 1;
+                scrollTimeoutRef.current = null;
+                const startIndex = optionsLengthRef.current + 1;
+                if (lastPageStartRef.current === startIndex) {
+                    setHasMore(false);
+                    return;
+                }
+                lastPageStartRef.current = startIndex;
                 (_a = pagination.onScroll) === null || _a === void 0 ? void 0 : _a.call(pagination, startIndex, pagination.limit || 10, inputValue);
             }, 200);
         }
-    }, [pagination, options.length, inputValue, hasMore]);
+    }, [pagination, inputValue, hasMore]);
+    (0, react_1.useEffect)(() => {
+        if (isOpen)
+            return;
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = null;
+        }
+        lastPageStartRef.current = null;
+    }, [isOpen]);
+    (0, react_1.useEffect)(() => () => {
+        if (scrollTimeoutRef.current)
+            clearTimeout(scrollTimeoutRef.current);
+    }, []);
     (0, react_2.useOutsideClick)({
         ref: customSelectRef,
         handler: (e) => {
@@ -536,10 +577,10 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                                         else {
                                             openMenu();
                                         }
-                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
+                                    }, "aria-label": "toggle-dropdown", display: "flex", alignItems: "center", borderRadius: "sm", color: theme.colors.textMuted, cursor: isDisabled ? "not-allowed" : "pointer", sx: (0, focusRing_styles_1.focusVisibleStyles)(theme.colors), children: isOpen ? ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: s.chevronSize })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && ((0, jsx_runtime_1.jsx)(react_2.Portal, { children: (0, jsx_runtime_1.jsxs)(react_2.Box, { ref: setDropdownMenuRef, id: listboxId, role: "listbox", "aria-multiselectable": isMultiple || undefined, position: "fixed", top: `${dropdownPos.top}px`, left: `${dropdownPos.left}px`, width: `${dropdownPos.width}px`, zIndex: 1500, maxH: "20rem", borderWidth: 1, borderColor: theme.colors.boxborder[200], borderRadius: "xl", overflow: "hidden", bg: theme.colors.surfaceRaised, boxShadow: theme.shadows.lg, display: "flex", flexDirection: "column", children: [isMultiple && isSelectAll && ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", onClick: handleSelectAll, display: "flex", alignItems: "center", gap: spec.gap, color: theme.colors.text[700], borderBottom: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: optionsListRef, flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: s.spinnerSize }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredOptions.map((option, index) => {
                                         const selected = isSelected(option.id);
                                         const singleSelected = selected && !isMultiple;
-                                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { id: getOptionId(index), "data-index": index, role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
                                                 ? index === activeIndex
                                                     ? rowBackgrounds.selectedActive
                                                     : rowBackgrounds.selected

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -81,10 +81,14 @@ export type SearchSelectProps = {
     pagination?: {
         /** startIndex is 1-based (current options.length + 1), not a 0-based offset. */
         onScroll?: (startIndex: number, limit: number, query: string) => void;
-        /** Also used to guess whether more pages exist (options.length % limit === 0) — an exact-multiple total triggers one extra scroll fetch. */
+        /** Also used to guess whether more pages exist (options.length % limit === 0, refined once a page returns no new rows). Defaults to 10 when omitted. */
         limit?: number;
         /** Set this synchronously while a page request is in flight, or fast scrolling can re-fire onScroll for the same page. */
         scrollLoading?: boolean;
+        /** Explicit stop signal; overrides the limit-based heuristic when set. */
+        hasMore?: boolean;
+        /** Total row count; when set, hasMore is derived as options.length < totalRecords instead of the limit heuristic. */
+        totalRecords?: number;
     };
     /** Not implemented — the option list always renders unvirtualized; use `pagination` to page in large datasets instead. */
     virtualization?: boolean;

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

@@ -38,12 +38,14 @@ declare const SelectNative: React.ForwardRefExoticComponent<{
     defaultSearchValue?: string;
     onSearchChange?: (query: string) => void;
     searchDebounceMs?: number;
+    filterOptions?: boolean;
     isClearable?: boolean;
     onClear?: () => void;
     isLoading?: boolean;
     loadingText?: string;
     noOptionsMessage?: React.ReactNode;
     onLoadMore?: () => void;
+    hasMore?: boolean;
     renderOption?: (option: OptionProp, state: {
         isSelected: boolean;
         isActive: boolean;

package/dist/Components/Select/SelectPopup.js

@@ -49,6 +49,7 @@ 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 chipTriggerSize_1 = require("../Common/chipTriggerSize");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const useFieldIds_1 = require("../Common/useFieldIds");
 const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
@@ -61,14 +62,6 @@ const PAGE_STEP = 8;
 const LOAD_MORE_THRESHOLD_PX = 8;
 const DEFAULT_MAX_VISIBLE_CHIPS = 6;
 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, "-")}`;
@@ -98,7 +91,7 @@ const buildGroupedRows = (options) => {
 /** 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 { 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, hasMore, onSearchChange, searchValue, defaultSearchValue, searchDebounceMs = 0, filterOptions, 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 });
@@ -108,6 +101,8 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
     const mergedTriggerRef = (0, react_2.useMergeRefs)(triggerRef, ref);
     const filterInputRef = (0, react_1.useRef)(null);
     const listRef = (0, react_1.useRef)(null);
+    const lastActiveIndex = (0, react_1.useRef)(-1);
+    const wasVirtualized = (0, react_1.useRef)(false);
     const [triggerWidth, setTriggerWidth] = (0, react_1.useState)(0);
     const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
     const listboxId = `${ids.inputId}-listbox`;
@@ -125,13 +120,28 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
     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 selectionCacheRef = (0, react_1.useRef)(new Map());
+    const selectedOptions = (0, react_1.useMemo)(() => {
+        const cache = selectionCacheRef.current;
+        options.forEach((option) => {
+            if (selectedIds.has(option.id.toString()))
+                cache.set(option.id.toString(), option);
+        });
+        Array.from(cache.keys()).forEach((cachedId) => {
+            if (!selectedIds.has(cachedId))
+                cache.delete(cachedId);
+        });
+        return Array.from(selectedIds)
+            .map((selectedId) => cache.get(selectedId))
+            .filter((option) => option !== undefined);
+    }, [options, selectedIds]);
+    const shouldFilterLocally = filterOptions !== null && filterOptions !== void 0 ? filterOptions : !onSearchChange;
     const filteredOptions = (0, react_1.useMemo)(() => {
-        if (!isSearchable || !currentSearch.trim())
+        if (!isSearchable || !currentSearch.trim() || !shouldFilterLocally)
             return options;
         const needle = currentSearch.trim().toLowerCase();
         return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
-    }, [options, currentSearch, isSearchable]);
+    }, [options, currentSearch, isSearchable, shouldFilterLocally]);
     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))
@@ -153,15 +163,19 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
             : currentValue;
         setActiveIndex(filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString())));
     };
+    const selectedIdsRef = (0, react_1.useRef)(selectedIds);
+    selectedIdsRef.current = selectedIds;
+    const selectedOptionsRef = (0, react_1.useRef)(selectedOptions);
+    selectedOptionsRef.current = selectedOptions;
     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 alreadySelected = selectedIdsRef.current.has(option.id.toString());
             const next = alreadySelected
-                ? selectedOptions.filter((selected) => selected.id.toString() !== option.id.toString())
-                : [...selectedOptions, option];
+                ? selectedOptionsRef.current.filter((selected) => selected.id.toString() !== option.id.toString())
+                : [...selectedOptionsRef.current, option];
             if (!isValueControlled)
                 setUncontrolledValue(next.map((o) => o.id));
             props.onChange(next);
@@ -176,7 +190,7 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
         (_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]);
+    [props.isMulti, props.onChange, resetAndClose, isValueControlled]);
     const handleCreate = (0, react_1.useCallback)(() => {
         if (!onCreate)
             return;
@@ -218,24 +232,47 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
     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 / spec.virtualRowHeightPx) + VIRTUAL_OVERSCAN * 2;
+    // A description, an avatar or a renderOption row outgrows the spec's single-line height.
+    const [rowHeightPx, setRowHeightPx] = (0, react_1.useState)(spec.virtualRowHeightPx);
+    const visibleCount = Math.ceil(maxMenuHeightPx / rowHeightPx) + VIRTUAL_OVERSCAN * 2;
     const startIndex = shouldVirtualize
-        ? Math.max(0, Math.floor(scrollTop / spec.virtualRowHeightPx) - VIRTUAL_OVERSCAN)
+        ? Math.max(0, Math.floor(scrollTop / rowHeightPx) - 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 * spec.virtualRowHeightPx : 0;
-    const bottomPadPx = shouldVirtualize ? (filteredOptions.length - endIndex) * spec.virtualRowHeightPx : 0;
+    const topPadPx = shouldVirtualize ? startIndex * rowHeightPx : 0;
+    const bottomPadPx = shouldVirtualize ? (filteredOptions.length - endIndex) * rowHeightPx : 0;
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        if (!isOpen)
+            return;
+        const row = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"]');
+        if (!row)
+            return;
+        const measured = row.getBoundingClientRect().height;
+        if (measured > 0 && Math.abs(measured - rowHeightPx) > 0.5)
+            setRowHeightPx(measured);
+    }, [isOpen, rowHeightPx, filteredOptions.length]);
+    // Windowing starts mid-list, so the window must open where the user already is.
+    (0, react_1.useLayoutEffect)(() => {
+        var _a, _b;
+        if (shouldVirtualize && !wasVirtualized.current)
+            setScrollTop((_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
+        wasVirtualized.current = shouldVirtualize;
+    }, [shouldVirtualize]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         if (activeIndex < 0 || !listRef.current)
             return;
+        if (lastActiveIndex.current === activeIndex)
+            return;
+        lastActiveIndex.current = activeIndex;
         const el = listRef.current;
         if (shouldVirtualize) {
-            const targetTop = activeIndex * spec.virtualRowHeightPx;
-            const targetBottom = targetTop + spec.virtualRowHeightPx;
+            const targetTop = activeIndex * rowHeightPx;
+            const targetBottom = targetTop + rowHeightPx;
             if (targetTop < el.scrollTop) {
                 el.scrollTop = targetTop;
                 setScrollTop(targetTop);
@@ -248,18 +285,44 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
             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, spec.virtualRowHeightPx]);
+    }, [activeIndex, shouldVirtualize, maxMenuHeightPx, rowHeightPx]);
+    const loadMoreInFlightRef = (0, react_1.useRef)(false);
+    const prevOptionsLengthRef = (0, react_1.useRef)(options.length);
+    const prevIsLoadingRef = (0, react_1.useRef)(isLoading);
+    (0, react_1.useEffect)(() => {
+        if (options.length !== prevOptionsLengthRef.current)
+            loadMoreInFlightRef.current = false;
+        prevOptionsLengthRef.current = options.length;
+    }, [options.length]);
+    (0, react_1.useEffect)(() => {
+        if (prevIsLoadingRef.current && !isLoading)
+            loadMoreInFlightRef.current = false;
+        prevIsLoadingRef.current = isLoading;
+    }, [isLoading]);
+    const canLoadMore = !!onLoadMore && hasMore !== false;
+    const triggerLoadMore = (0, react_1.useCallback)(() => {
+        if (!onLoadMore || hasMore === false || isLoading || loadMoreInFlightRef.current)
+            return;
+        loadMoreInFlightRef.current = true;
+        onLoadMore();
+    }, [onLoadMore, hasMore, isLoading]);
     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 next = activeIndex + delta;
+        if (delta > 0 && next >= filteredOptions.length) {
+            if (canLoadMore) {
+                triggerLoadMore();
+                return;
+            }
+            setActiveIndex(0);
+            return;
+        }
+        if (next < 0) {
+            setActiveIndex(filteredOptions.length - 1);
+            return;
+        }
+        setActiveIndex(next);
     };
     const moveActiveBy = (delta) => {
         if (!filteredOptions.length)
@@ -346,10 +409,8 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
         const { scrollTop: nextScrollTop, clientHeight, scrollHeight } = event.currentTarget;
         if (shouldVirtualize)
             setScrollTop(nextScrollTop);
-        if (!onLoadMore || isLoading)
-            return;
         if (nextScrollTop + clientHeight >= scrollHeight - LOAD_MORE_THRESHOLD_PX)
-            onLoadMore();
+            triggerLoadMore();
     };
     const handleFilterChange = (event) => {
         const nextText = event.target.value;
@@ -381,7 +442,7 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
     const showClear = isClearable && isInteractive && selectedOptions.length > 0;
     const triggerSx = (0, react_1.useMemo)(() => ({
         ...(0, fieldStyles_1.fieldControlStyles)(colors),
-        ...chipTriggerSizeStyles(size, showChips, chipSize),
+        ...(0, chipTriggerSize_1.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) }
@@ -411,7 +472,7 @@ const SelectPopup = (0, react_1.forwardRef)(function SelectPopup(props, ref) {
     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, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, 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: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, fontWeight: 600, color: colors.primary[600], bg: activeDescendantId === createRowId ? rowBackgrounds.active : "transparent", children: createLabel ? createLabel(currentSearch.trim()) : `Create "${currentSearch.trim()}"` })), hasGroups
+    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: spec.mx, 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: size, px: spec.px, 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, { mx: spec.mx, px: spec.px, py: spec.py, fontSize: spec.fontSize, 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: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", fontSize: spec.fontSize, 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, { mx: spec.mx, px: spec.px, 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, spec: spec, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, row.key));

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

@@ -72,6 +72,8 @@ type SelectCommonProps = {
     onSearchChange?: (query: string) => void;
     /** Debounce for `onSearchChange`, in ms. Defaults to 0 — every keystroke, matching SelectV2 today. */
     searchDebounceMs?: number;
+    /** Applies the local label-substring filter. Defaults to false once `onSearchChange` is set (server owns matching), true otherwise. */
+    filterOptions?: boolean;
     /** 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. */
@@ -84,6 +86,8 @@ type SelectCommonProps = {
     noOptionsMessage?: ReactNode;
     /** Fires when the list is scrolled to its end and not loading — append the next page. Popup mode only. */
     onLoadMore?: () => void;
+    /** Set explicitly to false once paging is exhausted, to stop further `onLoadMore` calls. Popup mode only. */
+    hasMore?: boolean;
     /** Full control over an option row; receives isSelected/isActive. Popup mode only. */
     renderOption?: (option: OptionProp, state: {
         isSelected: boolean;

package/dist/Components/SelectV2/SelectV2.d.ts

@@ -1,14 +1,7 @@
 import React from "react";
-import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize";
 import type { SelectV2Props } from "./SelectV2Props";
-type ChipSize = "xs" | "sm";
-export declare const chipTriggerSizeStyles: (size: ControlSize, hasChips: boolean, chipSize?: ChipSize) => {
-    minH: string;
-    fontSize: string;
-    px: string;
-    h?: string;
-    py?: string;
-};
+export { chipTriggerSizeStyles };
 /** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
 declare const SelectV2: React.ForwardRefExoticComponent<SelectV2Props & React.RefAttributes<HTMLDivElement>>;
 /** @deprecated Use `Select` with `native={false}`. */

package/dist/Components/SelectV2/SelectV2.js

@@ -7,16 +7,8 @@ exports.chipTriggerSizeStyles = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Select_1 = __importDefault(require("../Select/Select"));
-const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
-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 };
-};
-exports.chipTriggerSizeStyles = chipTriggerSizeStyles;
+const chipTriggerSize_1 = require("../Common/chipTriggerSize");
+Object.defineProperty(exports, "chipTriggerSizeStyles", { enumerable: true, get: function () { return chipTriggerSize_1.chipTriggerSizeStyles; } });
 /** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
 const SelectV2 = (0, react_1.forwardRef)(function SelectV2(props, ref) {
     return (0, jsx_runtime_1.jsx)(Select_1.default, { ...props, native: false, ref: ref });