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

package/dist/Theme/tokens/primitives/controlSizes.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = void 0;
 /** One height scale for fields, selects and buttons, so controls side by side line up. */
 exports.CONTROL_SIZES = {
-    xs: { height: "1.5rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
-    sm: { height: "2rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
+    xs: { height: "1.75rem", fontSize: "0.75rem", paddingX: "0.5rem", iconSize: 12 },
+    sm: { height: "2.1875rem", fontSize: "0.8125rem", paddingX: "0.75rem", iconSize: 14 },
     md: { height: "2.5rem", fontSize: "0.875rem", paddingX: "1rem", iconSize: 16 },
     lg: { height: "3rem", fontSize: "1rem", paddingX: "1.5rem", iconSize: 18 },
 };

package/dist/esm/Components/Common/chipTriggerSize.js

@@ -0,0 +1,11 @@
+import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
+const CONTROL_BORDER_PX = 2;
+const controlHeightPx = (size) => parseFloat(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. */
+export const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
+    const spec = 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 };
+};

package/dist/esm/Components/SearchSelect/SearchSelect.js

@@ -53,6 +53,9 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
     const dropdownMenuRef = useRef(null);
     const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 });
     const scrollTimeoutRef = useRef(null);
+    const optionsLengthRef = useRef(options.length);
+    const lastPageStartRef = useRef(null);
+    const optionsListRef = useRef(null);
     const [focused, setFocused] = useState(false);
     const [customSelectOpen, setCustomSelectOpen] = useState(false);
     const customSelectRef = useRef(null);
@@ -103,10 +106,22 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         return () => clearTimeout(delayDebounce);
     }, [inputValue]);
     useEffect(() => {
-        if (pagination === null || pagination === void 0 ? void 0 : pagination.limit) {
-            setHasMore(options.length % pagination.limit === 0);
+        optionsLengthRef.current = options.length;
+    }, [options.length]);
+    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) {
@@ -286,6 +301,13 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         }
         setActiveIndex((prev) => (prev >= 0 && prev < filteredOptions.length ? prev : -1));
     }, [isOpen, filteredOptions.length]);
+    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.
     useEffect(() => {
         var _a, _b, _c, _d;
@@ -316,11 +338,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]);
+    useEffect(() => {
+        if (isOpen)
+            return;
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+            scrollTimeoutRef.current = null;
+        }
+        lastPageStartRef.current = null;
+    }, [isOpen]);
+    useEffect(() => () => {
+        if (scrollTimeoutRef.current)
+            clearTimeout(scrollTimeoutRef.current);
+    }, []);
     useOutsideClick({
         ref: customSelectRef,
         handler: (e) => {
@@ -498,10 +539,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: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(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 && (_jsxs(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: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(Box, { flex: "1", overflowY: "auto", onScroll: handleScroll, maxH: "15rem", borderBottom: "0.063rem solid", borderColor: theme.colors.boxborder[200], children: isOptionLoading && filteredOptions.length === 0 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_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: focusVisibleStyles(theme.colors), children: isOpen ? (_jsx(ChevronUp, { size: s.chevronSize })) : (_jsx(ChevronDown, { size: s.chevronSize })) }))] })] }) }), isOpen && (_jsx(Portal, { children: _jsxs(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 && (_jsxs(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: [_jsx(Checkbox, { isChecked: allFilteredSelected, sx: { pointerEvents: "none" }, size: s.checkboxSize }), _jsx(Text, { fontSize: spec.fontSize, children: allFilteredSelected ? "Unselect All" : "Select All" })] })), _jsx(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 ? (_jsxs(Box, { py: spec.py, px: spec.px, display: "flex", alignItems: "center", gap: spec.gap, minH: spec.minH, color: theme.colors.textMuted, children: [_jsx(Spinner, { size: s.spinnerSize }), _jsx(Text, { fontSize: spec.fontSize, children: loadingText })] })) : !isOptionLoading && filteredOptions.length === 0 ? (_jsx(Text, { p: 3, fontSize: spec.fontSize, color: theme.colors.textMuted, children: "No results found" })) : (_jsxs(_Fragment, { children: [filteredOptions.map((option, index) => {
                                         const selected = isSelected(option.id);
                                         const singleSelected = selected && !isMultiple;
-                                        return (_jsxs(Box, { id: getOptionId(index), role: "option", "aria-selected": selected, py: spec.py, px: spec.px, minH: spec.minH, cursor: "pointer", bg: selected
+                                        return (_jsxs(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/esm/Components/Select/SelectPopup.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Box, Checkbox, FormControl, Input, Popover, PopoverAnchor, PopoverContent, Portal, Spinner, useDisclosure, useMergeRefs, } from "@chakra-ui/react";
 import { Check, ChevronDown, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
@@ -11,6 +11,7 @@ import { scrollbarStyles } from "../../Theme/tokens/builders/scrollbar.js";
 import { CONTROL_SIZES, DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize.js";
 import { fieldControlStyles } from "../Common/fieldStyles.js";
 import { useFieldIds } from "../Common/useFieldIds.js";
 import FieldMessage from "../Common/FieldMessage.js";
@@ -23,14 +24,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(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 = 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, "-")}`;
@@ -60,7 +53,7 @@ const buildGroupedRows = (options) => {
 /** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
 const SelectPopup = 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 = 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 = 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 = useCustomTheme();
     const { colors } = theme;
     const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: defaultOpen });
@@ -70,6 +63,8 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const mergedTriggerRef = useMergeRefs(triggerRef, ref);
     const filterInputRef = useRef(null);
     const listRef = useRef(null);
+    const lastActiveIndex = useRef(-1);
+    const wasVirtualized = useRef(false);
     const [triggerWidth, setTriggerWidth] = useState(0);
     const ids = useFieldIds(id, { error, errorMessage, helperText });
     const listboxId = `${ids.inputId}-listbox`;
@@ -87,13 +82,28 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const selectedIds = useMemo(() => props.isMulti
         ? asIdSet(currentValue)
         : asIdSet(currentValue !== undefined ? [currentValue] : undefined), [props.isMulti, currentValue]);
-    const selectedOptions = useMemo(() => options.filter((option) => selectedIds.has(option.id.toString())), [options, selectedIds]);
+    const selectionCacheRef = useRef(new Map());
+    const selectedOptions = 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 = 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 = useMemo(() => options.some((option) => option.group), [options]);
     const resetAndClose = useCallback((opts) => {
         if (props.isMulti && (opts === null || opts === void 0 ? void 0 : opts.keepOpenForMulti))
@@ -115,15 +125,19 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
             : currentValue;
         setActiveIndex(filteredOptions.findIndex((option) => option.id.toString() === (firstSelected === null || firstSelected === void 0 ? void 0 : firstSelected.toString())));
     };
+    const selectedIdsRef = useRef(selectedIds);
+    selectedIdsRef.current = selectedIds;
+    const selectedOptionsRef = useRef(selectedOptions);
+    selectedOptionsRef.current = selectedOptions;
     const handleSelect = 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);
@@ -138,7 +152,7 @@ const SelectPopup = 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 = useCallback(() => {
         if (!onCreate)
             return;
@@ -180,24 +194,47 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const maxMenuHeightPx = useMemo(() => parseRemToPx(maxMenuHeight, 256), [maxMenuHeight]);
     const shouldVirtualize = !!virtualizeAfter && !hasGroups && filteredOptions.length > virtualizeAfter;
     const [scrollTop, setScrollTop] = 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] = 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;
+    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.
+    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]);
     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);
@@ -210,18 +247,44 @@ const SelectPopup = 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 = useRef(false);
+    const prevOptionsLengthRef = useRef(options.length);
+    const prevIsLoadingRef = useRef(isLoading);
+    useEffect(() => {
+        if (options.length !== prevOptionsLengthRef.current)
+            loadMoreInFlightRef.current = false;
+        prevOptionsLengthRef.current = options.length;
+    }, [options.length]);
+    useEffect(() => {
+        if (prevIsLoadingRef.current && !isLoading)
+            loadMoreInFlightRef.current = false;
+        prevIsLoadingRef.current = isLoading;
+    }, [isLoading]);
+    const canLoadMore = !!onLoadMore && hasMore !== false;
+    const triggerLoadMore = 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)
@@ -308,10 +371,8 @@ const SelectPopup = 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;
@@ -373,7 +434,7 @@ const SelectPopup = 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 = useMemo(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
-    return (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: String(option.label), size: chipSize, variant: "subtle", icon: isInteractive ? X : undefined, onIconClick: isInteractive ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(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: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) })] }) }), _jsx(Portal, { children: _jsxs(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: [_jsx(Box, { p: 2, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, display: isSearchable ? undefined : "none", children: _jsx(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 }) }), _jsxs(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 && (_jsx(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 && (_jsx(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 (_jsxs(FormControl, { isInvalid: error, isDisabled: isDisabled, isReadOnly: isReadOnly, style: formControlStyle, width: width, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsxs(Popover, { isOpen: isOpen, onClose: () => resetAndClose(), placement: "bottom-start", autoFocus: false, returnFocusOnClose: false, gutter: 4, children: [_jsx(PopoverAnchor, { children: _jsxs(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: [_jsx(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 ? (_jsxs(_Fragment, { children: [visibleChipOptions.map((option) => (_jsx(Tag, { label: String(option.label), size: chipSize, variant: "subtle", icon: isInteractive ? X : undefined, onIconClick: isInteractive ? () => handleSelect(option) : undefined }, option.id))), overflowChipCount > 0 && (_jsx(Tag, { label: `+${overflowChipCount}`, size: chipSize, variant: "subtle", colorScheme: "gray" }))] })) : (_jsxs(_Fragment, { children: [triggerIcon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: triggerIcon })) : null, _jsx(Box, { as: "span", isTruncated: true, children: renderValue ? renderValue(selectedOptions) : defaultTriggerContent() })] })) }), showClear && (_jsx(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: _jsx(X, { size: CONTROL_SIZES[size].iconSize }) })), _jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, ml: 2, transition: CHEVRON_TRANSITION, transform: isOpen ? "rotate(180deg)" : "rotate(0deg)", color: colors.textMuted, sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: CONTROL_SIZES[size].iconSize }) })] }) }), _jsx(Portal, { children: _jsxs(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: [_jsx(Box, { p: spec.mx, borderBottom: `0.063rem solid ${colors.boxborder[200]}`, display: isSearchable ? undefined : "none", children: _jsx(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 }) }), _jsxs(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 && (_jsx(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 && (_jsx(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" ? (_jsx(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)) : (_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/esm/Components/SelectV2/SelectV2.js

@@ -1,15 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Select from "../Select/Select.js";
-import { CONTROL_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
-const CHIP_TAG_HEIGHT_PX = { xs: 20, sm: 24 };
-const controlHeightPx = (size) => parseFloat(CONTROL_SIZES[size].height) * 16;
-const chipRowPaddingY = (size, chipSize) => `${(controlHeightPx(size) - CHIP_TAG_HEIGHT_PX[chipSize]) / 2 / 16}rem`;
-export const chipTriggerSizeStyles = (size, hasChips, chipSize = "sm") => {
-    const spec = 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 };
-};
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize.js";
+export { chipTriggerSizeStyles };
 /** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
 const SelectV2 = forwardRef(function SelectV2(props, ref) {
     return _jsx(Select, { ...props, native: false, ref: ref });

package/dist/esm/Components/Table/Table.js

@@ -77,7 +77,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         }
         return {};
     }, [tablePreferencesData]);
-    const { tableData, isContent, isLink, headerRefs, columnWidths, handleSort, handleCheckbox, filteredData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = useTable({
+    const { tableData, isContent, isLink, headerRefs, columnWidths, slotRef, slotWidth, handleSort, handleCheckbox, filteredData, searchedData, startRow, selection, columnsSort, currentPage, pages, rowsPerPage, handlePageSizeChange, setCurrentPage, columnsList, handleColumnPreferences, isSelecting, selectAllRowsRef, } = useTable({
         data,
         isPagination,
         selections,
@@ -90,6 +90,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         isServerPagination,
         onNoOfRowsPerPageChange,
         defaultVisibleColumns,
+        columnsSearch,
     });
     // Density + grouping are managed here so the Table Settings tabs can change +
     // persist them (seeded from the prop / saved preferences when they load).
@@ -172,9 +173,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
         setGroupByState(group);
         handleColumnPreferences(cols, { density: densityState, groupBy: group !== null && group !== void 0 ? group : null });
     };
-    const _filteredData = useMemo(() => {
-        return searchAndSortData(filteredData, columnsSearch);
-    }, [columnsSearch, filteredData]);
+    const _filteredData = filteredData;
     // --- Monday-style grouping. Active whenever the user has picked a group column
     // (in Settings > Group). When active, the numbered pager / infinite scroll are
     // hidden and the body renders colored, collapsible groups over the loaded rows.
@@ -279,7 +278,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
             : "Showing all records";
     const tablePaginationText = isServerPagination
         ? `${startRow + 1} - ${Math.min(startRow + rowsPerPage, totalRecords)} of ${totalRecords}`
-        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, tableData.length)} of ${tableData.length}`;
+        : `${startRow + 1} - ${Math.min(startRow + rowsPerPage, searchedData.length)} of ${searchedData.length}`;
     const rowHeight = rowHeightFor(densityState);
     const headerHeight = pxOf(variantTokens.header.height);
     const actualRows = isGrouped ? groupedSource.length : _filteredData.length;
@@ -400,7 +399,7 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                 headerActions && (_jsx(HeaderActions, { actions: headerActions, selections: selection }, "actions")),
                                             ]
                                                 .filter(Boolean)
-                                                .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VeritcalDivider, {}, `divider-${i}`), tool])), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && tableData.length > 0 && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
+                                                .flatMap((tool, i) => (i === 0 ? [tool] : [_jsx(VeritcalDivider, {}, `divider-${i}`), tool])), _jsx(ActiveFilters, { columns: columnsList, columnsSearch: columnsSearch, setColumnsSearch: setColumnsSearch }), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 2, children: [groupLoadMoreActive && loadMorePosition === "top" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flex: "0 0 auto", children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], whiteSpace: "nowrap", children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && !isCompactHeader && (_jsx("div", { children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) })), (isPagination || isServerPagination) && !isGrouped && !canInfinite && isCompactHeader && (_jsxs(Popover, { isOpen: isPaginationPopoverOpen, onClose: () => setIsPaginationPopoverOpen(false), placement: "bottom-end", children: [_jsx(PopoverTrigger, { children: _jsx(IconButton, { "aria-label": "Pagination", size: "sm", variant: "ghost", icon: _jsx(EllipsisVertical, { size: 18 }), color: theme.colors.text[500], _hover: {
                                                                         color: theme.colors.accentText,
                                                                     }, onClick: () => setIsPaginationPopoverOpen((open) => !open) }) }), _jsx(Portal, { children: _jsx(PopoverContent, { maxW: "22rem", p: 2, zIndex: 1600, bg: theme.colors.surfaceRaised, boxShadow: "lg", children: _jsx(PopoverBody, { p: 0, children: _jsx(Pagination, { currentPage: currentPage, setCurrentPage: setCurrentPage, rowsPerPage: rowsPerPage, pages: pages, paginationText: tablePaginationText, handlePageSizeChange: handlePageSizeChange, dataLength: tableData.length, isServerPagination: isServerPagination, paginationSelectOptions: paginationSelectOptions }) }) }) })] }))] })] }), _jsxs(TableContainer, { ref: tableContainerRef, position: "relative", h: isTableLoading ? tableMaxH : undefined, maxH: !isTableLoading ? tableMaxH : undefined, pb: isTableLoading ? 0 : compactScrollbarPadding, overflowY: isCompactRows ? "hidden" : "auto", overflowX: "auto", sx: {
                                             ...scrollShadowStyles(theme.colors.background[50]),
@@ -430,5 +429,5 @@ export default function Table({ data, columns, onSelection, isLoading, isCheckbo
                                                         backgroundColor: "transparent",
                                                         zIndex: 999,
                                                     },
-                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
+                                                }, children: [_jsx(Thead, { position: "sticky", top: 0, zIndex: 4, bg: variantTokens.header.bg, children: _jsx(TableHeader, { columns: columnsList, isCheckbox: isCheckbox, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleSort: handleSort, headerRefs: headerRefs, columnWidths: columnWidths, slotRef: slotRef, slotWidth: slotWidth, columnsSort: columnsSort, noBorders: noBorders, handleCheckbox: handleCheckbox, isLoading: isTableLoading, checked: headerChecked, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, setColumnsSearch: setColumnsSearch, columnsSearch: columnsSearch, isSelecting: isSelecting }) }), _jsx(Tbody, { children: _jsx(TableBody, { data: isGrouped ? groupedSource : _filteredData, groups: renderGroups, onAddItem: onAddItem, columns: columnsList, startRow: isGrouped ? 0 : startRow, rowsPerPage: rowsPerPage, scrollContainerRef: tableContainerRef, isCheckbox: isCheckbox, columnWidths: columnWidths, slotWidth: slotWidth, noBorders: noBorders, freezedBgColor: freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : theme.colors.backgroundColor.secondary, freezedTextColor: freezedTextColor !== null && freezedTextColor !== void 0 ? freezedTextColor : theme.colors.text[500], handleCheckbox: handleCheckbox, selections: selection, isLoading: isTableLoading, loadingSkeletonRows: loadingSkeletonRows, onRowClick: onRowClick, isContent: isContent, isLink: isLink, isActionFreeze: isActionFreeze, density: densityState, stripe: stripe, emptyState: emptyState }) })] }), canInfinite && isLoadingMore && (_jsxs(Flex, { justify: "center", align: "center", py: 3, gap: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: "Loading more\u2026" })] }))] }), groupLoadMoreActive && loadMorePosition === "bottom" && (groupLoadMoreCaption || canGroupLoadMore) && (_jsxs(Flex, { justify: "center", align: "center", gap: 3, py: 3, borderTop: `0.063rem solid ${theme.colors.boxborder[200]}`, children: [groupLoadMoreCaption && (_jsx(Box, { fontSize: "0.75rem", color: theme.colors.text[500], children: groupLoadMoreCaption })), canGroupLoadMore && (_jsx(Button, { size: "xs", variant: "outline", colorScheme: "gray", isLoading: isLoadingMore, loadingText: loadMoreText, onClick: handleGroupLoadMore, label: loadMoreText }))] }))] })] })] })] }));
 }

package/dist/esm/Components/Table/components/Pagination.js

@@ -7,6 +7,8 @@ import { DEFAULT_PAGE_SIZE } from "../hooks/useTable.js";
 import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import ToolTip from "../../ToolTip/ToolTip.js";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, } from "lucide-react";
+const STEP_SIZE = "1.5rem";
+const STEP_ICON = 16;
 const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPage, currentPage, pages, setCurrentPage, dataLength, isServerPagination, paginationSelectOptions, }) => {
     const computedOptions = useMemo(() => {
         if (paginationSelectOptions && paginationSelectOptions.length) {
@@ -18,10 +20,11 @@ const Pagination = React.memo(({ paginationText, handlePageSizeChange, rowsPerPa
         return [...sizes].sort((a, b) => a - b);
     }, [paginationSelectOptions, dataLength, rowsPerPage]);
     const theme = useCustomTheme();
-    // const isLeftDisabled = currentPage === 0;
-    // const isRightDisabled = currentPage >= pages - 1;
-    const isLeftDisabled = dataLength === 0 || currentPage === 0;
-    const isRightDisabled = dataLength === 0 || currentPage >= pages - 1;
-    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", children: [(!isServerPagination || paginationSelectOptions) && (_jsx(Select, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "4.5rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), dataLength > 0 && (_jsxs(Flex, { w: "100%", children: [_jsx(ToolTip, { label: "First", placement: "top", children: _jsx(IconButton, { "aria-label": "first-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(0), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsLeft, {}) }) }), _jsx(ToolTip, { label: "Previous", placement: "top", children: _jsx(IconButton, { "aria-label": "previous-page", color: isLeftDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isLeftDisabled ? "plain" : "ghost", onClick: () => currentPage > 0 && setCurrentPage(currentPage - 1), _hover: !isLeftDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronLeft, {}) }) }), _jsx(Text, { mt: 3, fontSize: 12, whiteSpace: "nowrap", color: theme.colors.text[500], children: paginationText }), _jsx(ToolTip, { label: "Next", placement: "top", children: _jsx(IconButton, { "aria-label": "next-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => currentPage < pages - 1 && setCurrentPage(currentPage + 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronRight, {}) }) }), _jsx(ToolTip, { label: "Last", placement: "top", children: _jsx(IconButton, { "aria-label": "last-page", color: isRightDisabled ? theme.colors.textMuted : theme.colors.text[500], rounded: "full", variant: isRightDisabled ? "plain" : "ghost", onClick: () => setCurrentPage(pages - 1), _hover: !isRightDisabled ? { color: theme.colors.accentText } : {}, children: _jsx(ChevronsRight, {}) }) })] }))] }));
+    const lastPage = Math.max(0, pages - 1);
+    // Stepping back is how a user escapes an empty page, so it survives an empty result.
+    const isLeftDisabled = currentPage === 0;
+    const isRightDisabled = dataLength === 0 || currentPage >= lastPage;
+    const step = (label, ariaLabel, icon, isDisabled, onClick) => (_jsx(ToolTip, { label: label, placement: "top", children: _jsx(IconButton, { "aria-label": ariaLabel, icon: icon, variant: "ghost", size: "xs", minW: STEP_SIZE, h: STEP_SIZE, rounded: "full", color: isDisabled ? theme.colors.textMuted : theme.colors.text[500], isDisabled: isDisabled, onClick: onClick, _hover: isDisabled ? {} : { color: theme.colors.accentText } }) }));
+    return (_jsxs(Flex, { justify: "flex-end", align: "center", flexWrap: "nowrap", gap: "0.75rem", children: [(!isServerPagination || paginationSelectOptions) && (_jsx(Select, { native: false, isSearchable: false, "aria-label": "Rows per page", onChange: (option) => option && handlePageSizeChange(Number(option.id)), value: rowsPerPage, size: "xs", width: "3.75rem", isDisabled: dataLength === 0, options: computedOptions.map((size) => ({ id: size, label: String(size) })) })), (dataLength > 0 || currentPage > 0) && (_jsxs(Flex, { align: "center", gap: "0.125rem", children: [step("First", "first-page", _jsx(ChevronsLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage(0)), step("Previous", "previous-page", _jsx(ChevronLeft, { size: STEP_ICON }), isLeftDisabled, () => setCurrentPage((page) => Math.max(0, page - 1))), _jsx(Text, { px: "0.375rem", fontSize: "0.75rem", lineHeight: STEP_SIZE, whiteSpace: "nowrap", color: theme.colors.text[500], sx: { fontVariantNumeric: "tabular-nums" }, children: paginationText }), step("Next", "next-page", _jsx(ChevronRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage((page) => Math.min(lastPage, page + 1))), step("Last", "last-page", _jsx(ChevronsRight, { size: STEP_ICON }), isRightDisabled, () => setCurrentPage(lastPage))] }))] }));
 });
 export default Pagination;