pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.66

package/dist/esm/Components/RolesPermission/RolesPermission.js

@@ -4,10 +4,13 @@ import { Badge, Box, Checkbox, Divider, Flex, Heading, HStack, IconButton, Skele
 import { ArrowLeft, Check, Pencil, Plus, ShieldCheck, SquareArrowOutUpRight, Trash2, } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { bandOn, cardRule } from "../../Theme/tokens/builders/planeStep.js";
 import Button from "../Button/Button.js";
 import TextInput from "../Input/TextInput.js";
 import EmptyState from "../EmptyState/EmptyState.js";
 import DeleteRoleModal from "./DeleteRoleModal.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+const BACKGROUND_TRANSITION = transitionFor(["background"]);
 const DEFAULT_LABELS = {
     title: "Roles & Permissions",
     totalRoles: "Total Roles",
@@ -61,7 +64,8 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const muted = colors.textMuted;
     const heading = colors.text[900];
     const rowBackgrounds = listRowBackgrounds(colors);
-    const headBg = colors.background[100];
+    const headBg = bandOn(colors.background[100], surface);
+    const innerRule = cardRule(colors);
     const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
@@ -85,33 +89,33 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
         px: 4,
         py: 3,
         borderBottom: "1px solid",
-        borderColor: border,
+        borderColor: innerRule,
     };
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: innerRule,
         py: 3,
     };
     const renderGrantedCheck = () => checkIcon !== null && checkIcon !== void 0 ? checkIcon : (_jsx(Box, { color: colors.semanticText.success, display: "inline-flex", children: _jsx(Check, { size: 18, strokeWidth: 3 }) }));
     const renderListView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [_jsxs(HStack, { spacing: 2, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && (_jsxs(Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), _jsx(Button, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: _jsx(Plus, { size: 15 }) })] }), _jsx(Box, { overflowX: "auto", children: isRolesLoading ? (_jsx(VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => (_jsx(Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? (_jsx(EmptyState, { icon: ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : (_jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, width: "56px", children: labels.sNo }), _jsx(Th, { ...thStyle, children: labels.roleNameColumn }), _jsx(Th, { ...thStyle, children: labels.createdBy }), _jsx(Th, { ...thStyle, children: labels.createdTime }), _jsx(Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), _jsx(Tbody, { children: roles.map((role, index) => {
                                         var _a;
-                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: border, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: innerRule, color: muted, fontSize: "sm", children: index + 1 }), _jsx(Td, { borderColor: innerRule, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), _jsx(Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.createdBy }), _jsx(Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.created_at }), _jsx(Td, { borderColor: innerRule, children: _jsxs(HStack, { spacing: 1, justifyContent: "flex-end", children: [_jsx(Tooltip, { label: labels.view, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), _jsx(Tooltip, { label: labels.edit, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), _jsx(Tooltip, { label: labels.delete, hasArrow: true, children: _jsx(IconButton, { icon: _jsx(Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
                                     }) })] })) })] }), footerSlot] }));
-    const renderFormView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), _jsxs(Box, { p: 4, children: [_jsx(Box, { maxW: "320px", children: _jsx(Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: _jsx(Box, { children: _jsx(TextInput, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), _jsxs(VStack, { align: "stretch", spacing: 3, mt: 4, children: [_jsx(Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), _jsx(Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), _jsx(Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), _jsxs(Box, { ...cardSx, children: [_jsx(Flex, { ...cardHeaderSx, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), _jsx(Box, { overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => (_jsx(Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), _jsx(Tbody, { children: permissions.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+    const renderFormView = () => (_jsxs(VStack, { align: "stretch", spacing: 4, children: [_jsxs(Box, { ...cardSx, children: [_jsxs(Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), _jsxs(Box, { p: 4, children: [_jsx(Box, { maxW: "320px", children: _jsx(Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: _jsx(Box, { children: _jsx(TextInput, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), _jsxs(VStack, { align: "stretch", spacing: 3, mt: 4, children: [_jsx(Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), _jsx(Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), _jsx(Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: _jsx(Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), _jsxs(Box, { ...cardSx, children: [_jsx(Flex, { ...cardHeaderSx, alignItems: "center", children: _jsx(Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), _jsx(Box, { overflowX: "auto", children: _jsxs(Table, { variant: "simple", size: "sm", children: [_jsx(Thead, { bg: headBg, children: _jsxs(Tr, { children: [_jsx(Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => (_jsx(Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), _jsx(Tbody, { children: permissions.length === 0 ? (_jsx(Tr, { children: _jsx(Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: innerRule, children: _jsx(Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
                                         var _a;
                                         const isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
-                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [_jsx(Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                        return (_jsxs(Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [_jsx(Td, { borderColor: innerRule, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
                                                     const isRead = key === "read";
-                                                    return (_jsx(Td, { textAlign: "center", borderColor: border, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                    return (_jsx(Td, { textAlign: "center", borderColor: innerRule, children: _jsx(Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
                                                                 perm.automation &&
                                                                 renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : (_jsx(Checkbox, { size: "sm", "aria-label": `${perm.module}: ${columnLabels[key]}`, isChecked: isAutomationModule
                                                                     ? perm.automation
                                                                     : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
                                                 })] }, perm.module));
-                                    })) })] }) }), !isViewMode && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: border }), _jsxs(Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [_jsx(Button, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), _jsx(Button, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
+                                    })) })] }) }), !isViewMode && (_jsxs(_Fragment, { children: [_jsx(Divider, { borderColor: innerRule }), _jsxs(Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [_jsx(Button, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), _jsx(Button, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
     return (_jsxs(Box, { p: padding, backgroundColor: colors.backgroundColor.main, minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), _jsx(DeleteRoleModal, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
                     if (deleteId !== null)
                         onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);

package/dist/esm/Components/ScrollbarBox/ScrollbarBox.js

@@ -1,10 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Box } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { scrollbarStyles, } from "../../Theme/tokens/builders/scrollbar.js";
-/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
-const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+import { useScrollableRegion } from "../../Hooks/useScrollableRegion.js";
+import { mergeRefs } from "../../Utils/mergeRefs.js";
+/** Scrollable Box with themed scrollbar chrome; a keyboard stop, ringed on :focus-visible, while it scrolls with nothing focusable inside. */
+const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, "aria-label": ariaLabel, }) => {
     const { colors } = useCustomTheme();
-    return (_jsx(Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant) }, children: children }));
+    const { ref, props: regionProps } = useScrollableRegion({ label: ariaLabel });
+    const mergedRef = useMemo(() => mergeRefs(scrollContainerRef, ref), [scrollContainerRef, ref]);
+    return (_jsx(Box, { ref: mergedRef, ...regionProps, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...scrollbarStyles(colors, variant), ...focusVisibleStyles(colors) }, children: children }));
 };
 export default ScrollbarBox;

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

@@ -6,6 +6,7 @@ import { TextLabel } from "../Common/FormLabel.js";
 import Tag from "../Tag/Tag.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { ruleOn } from "../../Theme/tokens/builders/planeStep.js";
 import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
 import { OPTION_ROW_RADIUS, optionRowSpec } from "../../Theme/tokens/primitives/optionRowSizes.js";
 import { optionRowCursorSx, optionRowFill, optionRowInk, optionRowWeight } from "../Select/optionRowInk.js";
@@ -24,6 +25,7 @@ import { getSearchSelectSizeStyles, } from "./searchSelectSize.js";
 import Checkbox from "../Checkbox/Checkbox.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 import { ADD_NEW_ROW, NO_ROW, SELECT_ALL_ROW, firstRow, hasRow, lastRow, stepRow } from "./searchSelectNav.js";
+import { isActivationKey } from "../Common/activationKey.js";
 const SEGMENT_TRANSITION = transitionFor(["background-color", "box-shadow"]);
 const CHEVRON_TRANSITION = transitionFor(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
@@ -46,7 +48,7 @@ const OptionRow = React.memo(function OptionRow({ option, index, optionId, isSel
         fontSize: spec.fontSize, fontWeight: optionRowWeight(singleSelected), children: [isMultiple && (_jsx(Checkbox, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? (_jsx(_Fragment, { children: option.view })) : (_jsx(Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "sm", isDisabled = false, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }) => {
     var _a, _b, _c, _d, _e, _f;
     const s = getSearchSelectSizeStyles(size);
@@ -170,7 +172,8 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         const updated = selectedValues.filter((v) => v.id !== id);
         emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
     };
-    const handleClearAll = () => {
+    const handleClearAll = (e) => {
+        e.stopPropagation();
         emitChange === null || emitChange === void 0 ? void 0 : emitChange(isMultiple ? [] : undefined);
         setInputValue("");
     };
@@ -445,7 +448,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
             setCustomSelectOpen(false);
             return;
         }
-        if (e.key !== "Enter" && e.key !== " ")
+        if (!isActivationKey(e))
             return;
         e.preventDefault();
         focusInsideOnOpenRef.current = !customSelectOpen;
@@ -600,10 +603,10 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             var _a, _b, _c;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], bg: customSelectOpen
+                            return (_jsxs(Box, { position: "relative", ref: customSelectRef, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${BORDER_WIDTHS.hairline} solid`, borderColor: ruleOn(theme.colors, theme.colors.background[400]), bg: customSelectOpen
                                     ? rowBackgrounds.active
                                     : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
-                                    ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
+                                    ? `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${theme.colors.primary[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
                                     toggleCustomSelect();

package/dist/esm/Components/SegmentedControl/SegmentedControl.js

@@ -113,7 +113,7 @@ function SegmentedControlInner({ options, value, onChange, size = "sm", isFullWi
                             : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: transitionFor(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...reducedMotionSx() }, children: [option.icon, displayLabel, option.count != null && (_jsx(Tag, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }
-/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle (see MODULE.md); `ref` is the radiogroup. */
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle; `ref` is the radiogroup. */
 const SegmentedControl = forwardRef(SegmentedControlInner);
 SegmentedControl.displayName = "SegmentedControl";
 export default SegmentedControl;

package/dist/esm/Components/Select/Select.js

@@ -12,6 +12,12 @@ const NATIVE_INERT_PROPS = [
     "onClear",
     "isLoading",
     "loadingText",
+    "isFieldLoading",
+    "rightIcon",
+    "searchFields",
+    "filterOption",
+    "createWhen",
+    "footerAction",
     "onLoadMore",
     "renderOption",
     "renderValue",

package/dist/esm/Components/Select/SelectPopup.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { Check, ChevronDown, Plus, X } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
 import { focusGlowShadow } from "../../Theme/chakra/focusRing.styles.js";
@@ -20,6 +20,7 @@ import FieldMessage from "../Common/FieldMessage.js";
 import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
 import { TextLabel } from "../Common/FormLabel.js";
 import Tag from "../Tag/Tag.js";
+import { buildGroupedRows, groupedWindow, layoutGroupedRows } from "./groupedWindow.js";
 const ROW_TRANSITION = transitionFor(["background-color", "color"]);
 const CHEVRON_TRANSITION = transitionFor(["transform"], "base");
 const PAGE_STEP = 8;
@@ -27,6 +28,13 @@ const LOAD_MORE_THRESHOLD_PX = 8;
 const DEFAULT_MAX_VISIBLE_CHIPS = 6;
 const VIRTUAL_OVERSCAN = 4;
 const DECORATIVE_CHECKBOX_SX = { "& input": { visibility: "hidden" } };
+const GROUP_HEADER_ESTIMATE_PX = 29;
+const LIST_PADDING_PX = 4;
+const NO_ROW = -1;
+const SELECT_ALL_ROW = -2;
+const CREATE_ROW = -3;
+const FOOTER_ROW = -4;
+const truncateLabel = (label, max) => max !== undefined && label.length > max ? `${label.slice(0, max)}…` : label;
 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, "-")}`;
@@ -38,23 +46,10 @@ const OptionRow = React.memo(function OptionRow({ option, index, listboxId, isSe
     const isSingleSelected = isSelected && !isMulti;
     return (_jsxs(Box, { id: optionDomId(listboxId, option.id), "data-index": index, role: "option", "aria-selected": isSelected, "aria-disabled": option.isDisabled, onMouseEnter: () => onActivate(index), onClick: () => onSelect(option), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: option.isDisabled ? "not-allowed" : "pointer", opacity: option.isDisabled ? 0.4 : 1, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: optionRowWeight(isSingleSelected), color: optionRowInk(theme.colors, isSingleSelected), bg: optionRowFill(backgrounds, isActive), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [isMulti ? (_jsx(Checkbox, { id: `${optionDomId(listboxId, option.id)}-checkbox`, isChecked: isSelected, isDisabled: option.isDisabled, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX })) : null, renderOption ? (_jsx(Box, { flex: 1, minW: 0, children: renderOption(option, { isSelected, isActive }) })) : (_jsxs(_Fragment, { children: [option.icon ? (_jsx(Box, { as: "span", display: "inline-flex", flexShrink: 0, children: option.icon })) : null, _jsxs(Box, { flex: 1, minW: 0, isTruncated: true, children: [_jsx(Box, { as: "span", isTruncated: true, children: option.label }), option.description ? (_jsx(Box, { as: "span", display: "block", fontSize: spec.descriptionFontSize, color: optionRowDescriptionInk(theme.colors), isTruncated: true, children: option.description })) : null] })] })), isSingleSelected ? (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 })) : null] }));
 });
-const buildGroupedRows = (options) => {
-    const rows = [];
-    let currentGroup;
-    options.forEach((option, index) => {
-        if (option.group !== currentGroup) {
-            currentGroup = option.group;
-            if (option.group)
-                rows.push({ kind: "header", key: `group-${option.group}-${index}`, group: option.group });
-        }
-        rows.push({ kind: "option", key: option.id, option, index });
-    });
-    return rows;
-};
 /** The unified `Select`'s popup mode (`native={false}`) — absorbs SelectV2's behaviour, plus clear/create/groups/virtualization. */
 const SelectPopup = forwardRef(function SelectPopup(props, ref) {
-    var _a, _b, _c, _d, _e;
-    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;
+    var _a, _b, _c, _d, _e, _f;
+    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, createWhen = "no-options", footerAction, searchFields, filterOption, isFieldLoading = false, rightIcon, virtualizeAfter, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, } = props;
     const theme = useCustomTheme();
     const { colors } = theme;
     const { isOpen, onOpen, onClose } = useDisclosure({ defaultIsOpen: defaultOpen });
@@ -71,6 +66,8 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const listboxId = `${ids.inputId}-listbox`;
     const filterInputId = `${listboxId}-filter`;
     const createRowId = `${listboxId}-create`;
+    const selectAllId = `${listboxId}-select-all`;
+    const footerId = `${listboxId}-footer`;
     const isInteractive = !isDisabled && !isReadOnly;
     const isValueControlled = props.value !== undefined;
     const [uncontrolledValue, setUncontrolledValue] = useState(props.defaultValue);
@@ -99,12 +96,18 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
             .filter((option) => option !== undefined);
     }, [options, selectedIds]);
     const shouldFilterLocally = filterOptions !== null && filterOptions !== void 0 ? filterOptions : !onSearchChange;
+    const searchesLabel = searchFields ? searchFields.includes("label") : true;
+    const searchesDescription = !!searchFields && searchFields.includes("description");
     const filteredOptions = useMemo(() => {
-        if (!isSearchable || !currentSearch.trim() || !shouldFilterLocally)
+        const query = currentSearch.trim();
+        if (!isSearchable || !query || !shouldFilterLocally)
             return options;
-        const needle = currentSearch.trim().toLowerCase();
-        return options.filter((option) => option.label.toString().toLowerCase().includes(needle));
-    }, [options, currentSearch, isSearchable, shouldFilterLocally]);
+        if (filterOption)
+            return options.filter((option) => filterOption(option, query));
+        const needle = query.toLowerCase();
+        return options.filter((option) => (searchesLabel && option.label.toString().toLowerCase().includes(needle)) ||
+            (searchesDescription && !!option.description && option.description.toLowerCase().includes(needle)));
+    }, [options, currentSearch, isSearchable, shouldFilterLocally, filterOption, searchesLabel, searchesDescription]);
     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))
@@ -160,6 +163,29 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         onCreate(currentSearch.trim());
         resetAndClose();
     }, [onCreate, currentSearch, resetAndClose]);
+    const handleFooterAction = useCallback(() => {
+        if (!footerAction)
+            return;
+        footerAction.onSelect(currentSearch.trim());
+        resetAndClose();
+    }, [footerAction, currentSearch, resetAndClose]);
+    const hasSelectAllRow = !!props.isMulti && !!props.isSelectAll;
+    const selectableFiltered = useMemo(() => (hasSelectAllRow ? filteredOptions.filter((option) => !option.isDisabled) : []), [hasSelectAllRow, filteredOptions]);
+    const showSelectAllRow = selectableFiltered.length > 0;
+    const allFilteredSelected = showSelectAllRow && selectableFiltered.every((o) => selectedIds.has(o.id.toString()));
+    const handleSelectAll = () => {
+        var _a;
+        if (!props.isMulti || !showSelectAllRow)
+            return;
+        const shown = new Set(selectableFiltered.map((option) => option.id.toString()));
+        const next = allFilteredSelected
+            ? selectedOptions.filter((selected) => !shown.has(selected.id.toString()))
+            : [...selectedOptions, ...selectableFiltered.filter((option) => !selectedIds.has(option.id.toString()))];
+        if (!isValueControlled)
+            setUncontrolledValue(next.map((o) => o.id));
+        props.onChange(next);
+        (_a = filterInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
     const handleClear = useCallback((event) => {
         event.stopPropagation();
         if (!isInteractive)
@@ -193,31 +219,50 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     }, [isOpen, isSearchable]);
     const spec = useMemo(() => optionRowSpec(size), [size]);
     const maxMenuHeightPx = useMemo(() => parseRemToPx(maxMenuHeight, 256), [maxMenuHeight]);
-    const shouldVirtualize = !!virtualizeAfter && !hasGroups && filteredOptions.length > virtualizeAfter;
+    const shouldVirtualize = !!virtualizeAfter && filteredOptions.length > virtualizeAfter;
     const [scrollTop, setScrollTop] = useState(0);
     // A description, an avatar or a renderOption row outgrows the spec's single-line height.
     const [rowHeightPx, setRowHeightPx] = useState(spec.virtualRowHeightPx);
+    const [headerHeightPx, setHeaderHeightPx] = useState(GROUP_HEADER_ESTIMATE_PX);
+    const selectAllLeadPx = showSelectAllRow ? rowHeightPx : 0;
+    const windowTop = Math.max(0, scrollTop - selectAllLeadPx);
     const visibleCount = Math.ceil(maxMenuHeightPx / rowHeightPx) + VIRTUAL_OVERSCAN * 2;
+    const groupedRows = useMemo(() => (hasGroups ? buildGroupedRows(filteredOptions) : []), [hasGroups, filteredOptions]);
+    const groupedLayout = useMemo(() => (hasGroups && shouldVirtualize ? layoutGroupedRows(groupedRows, headerHeightPx, rowHeightPx) : null), [hasGroups, shouldVirtualize, groupedRows, headerHeightPx, rowHeightPx]);
+    const groupedRange = groupedLayout
+        ? groupedWindow(groupedLayout.tops, windowTop, maxMenuHeightPx, VIRTUAL_OVERSCAN)
+        : null;
     const startIndex = shouldVirtualize
-        ? Math.max(0, Math.floor(scrollTop / rowHeightPx) - VIRTUAL_OVERSCAN)
+        ? Math.max(0, Math.floor(windowTop / 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 * rowHeightPx : 0;
-    const bottomPadPx = shouldVirtualize ? (filteredOptions.length - endIndex) * rowHeightPx : 0;
+    const topPadPx = groupedLayout && groupedRange
+        ? groupedLayout.tops[groupedRange.start]
+        : shouldVirtualize ? startIndex * rowHeightPx : 0;
+    const bottomPadPx = groupedLayout && groupedRange
+        ? groupedLayout.tops[groupedLayout.tops.length - 1] - groupedLayout.tops[groupedRange.end]
+        : shouldVirtualize ? (filteredOptions.length - endIndex) * rowHeightPx : 0;
+    const renderedGroupedRows = groupedRange ? groupedRows.slice(groupedRange.start, groupedRange.end) : groupedRows;
     useLayoutEffect(() => {
-        var _a;
+        var _a, _b;
         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]);
+        const row = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('[role="option"][data-index]');
+        if (row) {
+            const measured = row.getBoundingClientRect().height;
+            if (measured > 0 && Math.abs(measured - rowHeightPx) > 0.5)
+                setRowHeightPx(measured);
+        }
+        const header = (_b = listRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("[data-group-header]");
+        if (header) {
+            const measured = header.getBoundingClientRect().height;
+            if (measured > 0 && Math.abs(measured - headerHeightPx) > 0.5)
+                setHeaderHeightPx(measured);
+        }
+    }, [isOpen, rowHeightPx, headerHeightPx, filteredOptions.length]);
     // Windowing starts mid-list, so the window must open where the user already is.
     useLayoutEffect(() => {
         var _a, _b;
@@ -226,16 +271,29 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         wasVirtualized.current = shouldVirtualize;
     }, [shouldVirtualize]);
     useEffect(() => {
-        var _a, _b;
-        if (activeIndex < 0 || !listRef.current)
+        var _a, _b, _c, _d;
+        if (activeIndex === NO_ROW || !listRef.current)
             return;
         if (lastActiveIndex.current === activeIndex)
             return;
         lastActiveIndex.current = activeIndex;
         const el = listRef.current;
+        if (activeIndex < 0) {
+            const extraId = activeIndex === SELECT_ALL_ROW ? selectAllId : activeIndex === CREATE_ROW ? createRowId : footerId;
+            (_b = (_a = el.ownerDocument.getElementById(extraId)) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: "nearest" });
+            return;
+        }
         if (shouldVirtualize) {
-            const targetTop = activeIndex * rowHeightPx;
-            const targetBottom = targetTop + rowHeightPx;
+            let targetTop = activeIndex * rowHeightPx;
+            let targetBottom = targetTop + rowHeightPx;
+            const rowIndex = groupedLayout === null || groupedLayout === void 0 ? void 0 : groupedLayout.optionRows[activeIndex];
+            if (groupedLayout && rowIndex !== undefined) {
+                const startsGroup = rowIndex > 0 && groupedRows[rowIndex - 1].kind === "header";
+                targetTop = groupedLayout.tops[startsGroup ? rowIndex - 1 : rowIndex];
+                targetBottom = groupedLayout.tops[rowIndex + 1];
+            }
+            targetTop += selectAllLeadPx + LIST_PADDING_PX;
+            targetBottom += selectAllLeadPx + LIST_PADDING_PX;
             if (targetTop < el.scrollTop) {
                 el.scrollTop = targetTop;
                 setScrollTop(targetTop);
@@ -247,8 +305,8 @@ 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, rowHeightPx]);
+        (_d = (_c = el.querySelector(`[data-index="${activeIndex}"]`)) === null || _c === void 0 ? void 0 : _c.scrollIntoView) === null || _d === void 0 ? void 0 : _d.call(_c, { block: "nearest" });
+    }, [activeIndex, shouldVirtualize, maxMenuHeightPx, rowHeightPx, groupedLayout, groupedRows, selectAllLeadPx, selectAllId, createRowId, footerId]);
     const loadMoreInFlightRef = useRef(false);
     const prevOptionsLengthRef = useRef(options.length);
     const prevIsLoadingRef = useRef(isLoading);
@@ -269,23 +327,57 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         loadMoreInFlightRef.current = true;
         onLoadMore();
     }, [onLoadMore, hasMore, isLoading]);
+    const trimmedSearch = currentSearch.trim();
+    const hasExactMatch = useMemo(() => {
+        if (createWhen !== "no-exact-match" || !trimmedSearch)
+            return false;
+        const needle = trimmedSearch.toLowerCase();
+        return options.some((option) => option.label.toString().trim().toLowerCase() === needle);
+    }, [createWhen, trimmedSearch, options]);
+    const showCreateRow = !!onCreate &&
+        isSearchable &&
+        trimmedSearch !== "" &&
+        !isLoading &&
+        (createWhen === "no-exact-match" ? !hasExactMatch : filteredOptions.length === 0);
+    const isCreateImplicit = showCreateRow && filteredOptions.length === 0;
+    const hasFooter = !!footerAction;
+    const leadingStops = showSelectAllRow ? 1 : 0;
+    const optionsEndStop = leadingStops + filteredOptions.length - 1;
+    const stopCount = optionsEndStop + 1 + (showCreateRow ? 1 : 0) + (hasFooter ? 1 : 0);
+    const rowToStop = (row) => {
+        if (row === SELECT_ALL_ROW)
+            return showSelectAllRow ? 0 : -1;
+        if (row === CREATE_ROW)
+            return showCreateRow ? optionsEndStop + 1 : -1;
+        if (row === FOOTER_ROW)
+            return hasFooter ? stopCount - 1 : -1;
+        return row >= 0 && row < filteredOptions.length ? leadingStops + row : -1;
+    };
+    const stopToRow = (stop) => {
+        if (showSelectAllRow && stop === 0)
+            return SELECT_ALL_ROW;
+        if (stop <= optionsEndStop)
+            return stop - leadingStops;
+        return showCreateRow && stop === optionsEndStop + 1 ? CREATE_ROW : FOOTER_ROW;
+    };
     const moveActive = (delta) => {
-        if (!filteredOptions.length)
+        if (!stopCount)
             return;
-        const next = activeIndex + delta;
-        if (delta > 0 && next >= filteredOptions.length) {
-            if (canLoadMore) {
-                triggerLoadMore();
-                return;
-            }
-            setActiveIndex(0);
+        const current = rowToStop(activeIndex);
+        const next = current + delta;
+        const isPaging = delta > 0 && canLoadMore && filteredOptions.length > 0 && current === optionsEndStop;
+        if (isPaging)
+            triggerLoadMore();
+        if (delta > 0 && next >= stopCount) {
+            if (!isPaging)
+                setActiveIndex(stopToRow(0));
             return;
         }
         if (next < 0) {
-            setActiveIndex(filteredOptions.length - 1);
+            setActiveIndex(stopToRow(stopCount - 1));
             return;
         }
-        setActiveIndex(next);
+        setActiveIndex(stopToRow(next));
     };
     const moveActiveBy = (delta) => {
         if (!filteredOptions.length)
@@ -297,7 +389,6 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
             return;
         setActiveIndex(edge === "start" ? 0 : filteredOptions.length - 1);
     };
-    const showCreateRow = !!onCreate && isSearchable && currentSearch.trim() !== "" && filteredOptions.length === 0 && !isLoading;
     const handleListKeyDown = (event) => {
         var _a, _b;
         const isTextInput = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT";
@@ -333,9 +424,15 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
             case "Enter": {
                 event.preventDefault();
                 const activeOption = filteredOptions[activeIndex];
-                if (activeOption)
+                if (activeIndex === SELECT_ALL_ROW && showSelectAllRow)
+                    handleSelectAll();
+                else if (activeIndex === FOOTER_ROW && hasFooter)
+                    handleFooterAction();
+                else if (activeIndex === CREATE_ROW && showCreateRow)
+                    handleCreate();
+                else if (activeOption)
                     handleSelect(activeOption);
-                else if (showCreateRow)
+                else if (isCreateImplicit)
                     handleCreate();
                 break;
             }
@@ -354,7 +451,9 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const handleTriggerKeyDown = (event) => {
         if (!isInteractive)
             return;
-        if (props.isMulti && !isOpen && event.key === "Backspace" && selectedOptions.length) {
+        if (event.target !== event.currentTarget && (event.key === "Enter" || event.key === " "))
+            return;
+        if (props.isMulti && props.isChipRemovable !== false && !isOpen && event.key === "Backspace" && selectedOptions.length) {
             event.preventDefault();
             handleSelect(selectedOptions[selectedOptions.length - 1]);
             return;
@@ -390,16 +489,22 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
         searchDebounceTimer.current = setTimeout(() => onSearchChange(nextText), searchDebounceMs);
     };
     const activeOption = filteredOptions[activeIndex];
-    const activeDescendantId = activeOption
-        ? optionDomId(listboxId, activeOption.id)
-        : showCreateRow
-            ? createRowId
-            : undefined;
+    const activeDescendantId = activeIndex === SELECT_ALL_ROW && showSelectAllRow
+        ? selectAllId
+        : activeIndex === FOOTER_ROW && hasFooter
+            ? footerId
+            : activeOption
+                ? optionDomId(listboxId, activeOption.id)
+                : showCreateRow && (isCreateImplicit || activeIndex === CREATE_ROW)
+                    ? createRowId
+                    : undefined;
     const listScrollStyles = useMemo(() => scrollbarStyles(colors, "overlay"), [colors]);
     const rowBackgrounds = useMemo(() => listRowBackgrounds(colors), [colors]);
     const showChips = !!props.isMulti && !renderValue && selectedOptions.length > 0;
     const chipSize = size === "xs" ? "xs" : "sm";
     const maxVisibleChips = props.isMulti ? ((_a = props.maxVisibleChips) !== null && _a !== void 0 ? _a : DEFAULT_MAX_VISIBLE_CHIPS) : 0;
+    const chipMaxLength = props.isMulti ? props.chipMaxLength : undefined;
+    const canRemoveChips = isInteractive && !!props.isMulti && props.isChipRemovable !== false;
     const visibleChipOptions = showChips ? selectedOptions.slice(0, maxVisibleChips) : [];
     const overflowChipCount = showChips ? selectedOptions.length - visibleChipOptions.length : 0;
     const showClear = isClearable && isInteractive && selectedOptions.length > 0;
@@ -434,15 +539,17 @@ const SelectPopup = forwardRef(function SelectPopup(props, ref) {
     const triggerIcon = !props.isMulti && ((_b = selectedOptions[0]) === null || _b === void 0 ? void 0 : _b.icon) ? selectedOptions[0].icon : null;
     const selectedValueIds = selectedOptions.map((option) => option.id.toString());
     const hiddenValues = !name ? [] : props.isMulti ? selectedValueIds : [(_c = selectedValueIds[0]) !== null && _c !== void 0 ? _c : ""];
-    const groupedRows = 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, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, 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: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, 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": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : 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: "xs-minus", 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));
-                                            })
+    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, "aria-busy": isFieldLoading || 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: truncateLabel(String(option.label), chipMaxLength), size: chipSize, variant: "subtle", icon: canRemoveChips ? X : undefined, onIconClick: canRemoveChips ? () => 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 }) })), isFieldLoading ? (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, children: _jsx(Spinner, { size: "xs", label: "" }) })) : rightIcon ? ("onClick" in rightIcon && isInteractive ? (_jsx(Box, { as: "button", type: "button", "aria-label": rightIcon.ariaLabel, onClick: (event) => {
+                                        event.stopPropagation();
+                                        rightIcon.onClick();
+                                    }, onKeyDown: (event) => event.stopPropagation(), display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, ml: 2, color: colors.textMuted, _hover: { color: colors.text[700] }, children: rightIcon.icon })) : (_jsx(Box, { as: "span", "aria-hidden": true, display: "inline-flex", flexShrink: 0, ml: 2, color: colors.textMuted, children: rightIcon.icon }))) : (_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, { "aria-label": (_d = label !== null && label !== void 0 ? label : ariaLabel) !== null && _d !== void 0 ? _d : placeholder, 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: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, 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": (_e = label !== null && label !== void 0 ? label : ariaLabel) !== null && _e !== void 0 ? _e : 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" })), showSelectAllRow && (_jsxs(Box, { id: selectAllId, role: "option", "aria-selected": allFilteredSelected, onClick: handleSelectAll, onMouseEnter: () => setActiveIndex(SELECT_ALL_ROW), mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: optionRowInk(colors, false), bg: optionRowFill(rowBackgrounds, activeIndex === SELECT_ALL_ROW), transition: ROW_TRANSITION, sx: reducedMotionSx(), children: [_jsx(Checkbox, { isChecked: allFilteredSelected, pointerEvents: "none", tabIndex: -1, sx: DECORATIVE_CHECKBOX_SX }), allFilteredSelected ? "Unselect All" : "Select All"] })), hasGroups
+                                            ? (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedGroupedRows.map((row) => {
+                                                        var _a;
+                                                        return row.kind === "header" ? (_jsx(Box, { "data-group-header": shouldVirtualize ? "" : undefined, mx: spec.mx, px: spec.px, pt: 2, pb: 1, fontSize: "xs-minus", 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));
+                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] }))
                                             : (_jsxs(_Fragment, { children: [topPadPx > 0 && _jsx(Box, { height: `${topPadPx}px` }), renderedOptions.map((option, i) => {
                                                         var _a;
                                                         return (_jsx(OptionRow, { option: option, index: startIndex + i, listboxId: listboxId, isSelected: selectedIds.has(option.id.toString()), isActive: startIndex + i === activeIndex, isMulti: (_a = props.isMulti) !== null && _a !== void 0 ? _a : false, theme: theme, backgrounds: rowBackgrounds, spec: spec, renderOption: renderOption, onSelect: handleSelect, onActivate: setActiveIndex }, option.id));
-                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] })), isLoading && (_jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: colors.textMuted, children: [_jsx(Spinner, { size: "xs" }), loadingText] }))] })] }) })] }), hiddenValues.map((value) => (_jsx("input", { type: "hidden", name: name, value: value }, value))), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
+                                                    }), bottomPadPx > 0 && _jsx(Box, { height: `${bottomPadPx}px` })] })), 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()}"` })), isLoading && (_jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, color: colors.textMuted, children: [_jsx(Spinner, { size: "xs" }), loadingText] })), footerAction && (_jsx(Box, { id: footerId, role: "option", "aria-selected": false, onClick: handleFooterAction, onMouseEnter: () => setActiveIndex(FOOTER_ROW), position: "sticky", bottom: -1, pt: 1, bg: colors.surfaceRaised, borderTop: `${BORDER_WIDTHS.hairline} solid ${raisedRule(colors)}`, children: _jsxs(Box, { mx: spec.mx, px: spec.px, py: spec.py, minH: spec.minH, borderRadius: "md", cursor: "pointer", display: "flex", alignItems: "center", gap: spec.gap, fontSize: spec.fontSize, fontWeight: 500, color: colors.accentText, bg: activeIndex === FOOTER_ROW ? rowBackgrounds.active : "transparent", children: [(_f = footerAction.icon) !== null && _f !== void 0 ? _f : _jsx(Plus, { size: spec.iconSize }), footerAction.label] }) }))] })] }) })] }), hiddenValues.map((value) => (_jsx("input", { type: "hidden", name: name, value: value }, value))), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 });
 export default SelectPopup;