pixelize-design-library 2.4.2-beta.9 → 3.0.0

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

@@ -0,0 +1,44 @@
+export 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;
+};
+export const layoutGroupedRows = (rows, headerPx, optionPx) => {
+    const tops = new Array(rows.length + 1);
+    const optionRows = [];
+    let top = 0;
+    rows.forEach((row, i) => {
+        tops[i] = top;
+        if (row.kind === "option")
+            optionRows.push(i);
+        top += row.kind === "header" ? headerPx : optionPx;
+    });
+    tops[rows.length] = top;
+    return { tops, optionRows };
+};
+const firstIndex = (count, isBefore) => {
+    let lo = 0;
+    let hi = count;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (isBefore(mid))
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    return lo;
+};
+export const groupedWindow = (tops, scrollTop, viewportPx, overscan) => {
+    const count = tops.length - 1;
+    const first = firstIndex(count, (i) => tops[i + 1] <= scrollTop);
+    const last = firstIndex(count, (i) => tops[i] < scrollTop + viewportPx);
+    return { start: Math.max(0, first - overscan), end: Math.min(count, last + overscan) };
+};

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

@@ -0,0 +1,18 @@
+import { AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { listRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+export const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
+// A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
+export const optionRowDescriptionInk = (colors) => liftToContrast(colors.textMuted, listRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT);
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
+export const OPTION_ROW_REST_WEIGHT = 400;
+// NOTE: 600 beside a tinted fill and a check read as three signals for one state.
+export const OPTION_ROW_SELECTED_WEIGHT = 500;
+export const optionRowWeight = (isSingleSelected) => isSingleSelected ? OPTION_ROW_SELECTED_WEIGHT : OPTION_ROW_REST_WEIGHT;

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

@@ -0,0 +1,3 @@
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+export const NAVIGATION_KEYS = new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"]);
+export const keyboardRingShadow = (ring) => `inset 0 0 0 ${BORDER_WIDTHS.hairline} ${ring}`;

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

@@ -0,0 +1,33 @@
+import { isDarkCanvas, AA_NORMAL_TEXT } from "../../Theme/tokens/builders/accentText.js";
+import { liftToContrast, neutralStep } from "../../Theme/tokens/builders/outlineRung.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowInk } from "./optionRowInk.js";
+export const SELECT_ROW_DISABLED_CONTENT_OPACITY = 0.55;
+const NEUTRAL_INK_STEPS = {
+    label: 12.8,
+    selected: 15.4,
+    description: 7,
+    disabled: 3.6,
+    placeholder: 4.6,
+};
+// NOTE: light is a brand-free grey ladder off the panel; dark keeps the shared inks.
+const neutralInk = (colors, role) => neutralStep(colors.surfaceRaised, NEUTRAL_INK_STEPS[role]);
+const isDarkPanel = (colors) => isDarkCanvas(colors.surfaceRaised);
+export const selectRowInk = (colors, isSingleSelected) => {
+    if (isDarkPanel(colors))
+        return optionRowInk(colors, isSingleSelected);
+    return neutralInk(colors, isSingleSelected ? "selected" : "label");
+};
+export const selectRowDescriptionInk = (colors) => isDarkPanel(colors)
+    ? liftToContrast(colors.textMuted, selectRowBackgrounds(colors).selectedActive, AA_NORMAL_TEXT)
+    : neutralInk(colors, "description");
+/** Solid ink for a disabled row's content in light; dark dims content by opacity instead (null). */
+export const selectRowDisabledInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "disabled");
+/** Placeholder of the popup's filter input in light; dark keeps the shared placeholder ink (null). */
+export const selectFilterPlaceholderInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "placeholder");
+/** Cursor and selection each paint a rung; the stacked state paints the third. */
+export const selectRowFill = (rows, state) => {
+    if (state.isActive)
+        return state.isSelected ? rows.selectedActive : rows.active;
+    return state.isSelected ? rows.selected : "transparent";
+};

package/dist/esm/Components/SelectSearch/SelectSearch.js

@@ -1,115 +1,106 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
-import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, Avatar, FormControl, } from "@chakra-ui/react";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { Box, Input, Spinner, VStack, Text, InputGroup, InputRightElement, HStack, Tag, TagLabel, TagCloseButton, FormControl, } from "@chakra-ui/react";
+import Avatar from "../Avatar/Avatar.js";
 import { TextLabel } from "../Common/FormLabel.js";
-import { FIELD_RADIUS, fieldFocusRing } from "../Common/fieldStyles.js";
+import { controlSizeStyles, fieldControlStyles } from "../Common/fieldStyles.js";
+import { useFieldIds } from "../Common/useFieldIds.js";
+import FieldMessage from "../Common/FieldMessage.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { BORDER_WIDTHS } from "../../Theme/tokens/primitives/borderWidths.js";
+import { DEFAULT_CONTROL_SIZE } from "../../Theme/tokens/primitives/controlSizes.js";
+import { optionRowSpec, OPTION_ROW_RADIUS } from "../../Theme/tokens/primitives/optionRowSizes.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { PlusIcon } from "lucide-react";
-import ErrorMessage from "../Common/ErrorMessage.js";
-const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
+import { raisedRule } from "../../Theme/tokens/builders/surfaceRaised.js";
+import { selectRowBackgrounds } from "../../Theme/tokens/builders/rowStates.js";
+import { optionRowWeight } from "../Select/optionRowInk.js";
+import { keyboardRingShadow } from "../Select/selectKeyboardRing.js";
+import { selectRowDescriptionInk, selectRowInk } from "../Select/selectRowInk.js";
+import { useExclusiveOverlay } from "../../Hooks/useExclusiveOverlay.js";
+import { PlusIcon, Check } from "lucide-react";
+import { onActivationKey } from "../Common/activationKey.js";
+import { useOutsideMouseDown } from "../../Hooks/useOutsideMouseDown.js";
+const ROW_TRANSITION = transitionFor(["background-color"]);
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
     const theme = useCustomTheme();
+    const rowBackgrounds = useMemo(() => selectRowBackgrounds(theme.colors), [theme.colors]);
+    const spec = optionRowSpec(size);
+    const keyboardRing = {
+        outline: "2px solid transparent",
+        boxShadow: keyboardRingShadow(rowBackgrounds.keyboardRing),
+    };
     if (isOptionLoading) {
         return (_jsxs(VStack, { py: 2, children: [_jsx(Spinner, { size: "sm", color: theme.colors.accentText }), _jsx(Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return (_jsx(_Fragment, { children: filteredOptions.map((option, index) => (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
-                    optionRefs.current[index] = el;
-                }, role: "option", "aria-selected": isOptionSelected(option), tabIndex: index === activeIndex ? 0 : -1, w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", bg: "transparent", px: 4, py: 2, cursor: "pointer", _hover: { backgroundColor: theme.colors.primary[50] }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleOptionClick(option);
-                    }
-                }, display: "flex", alignItems: "center", gap: "0.5rem", children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), _jsxs(Box, { children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id))) }));
+        return (_jsx(_Fragment, { children: filteredOptions.map((option, index) => {
+                const selected = isOptionSelected(option);
+                const isSingleSelected = selected && !isMultipleSelect;
+                const isActive = index === activeIndex;
+                return (_jsxs(Box, { as: "button", type: "button", ref: (el) => {
+                        optionRefs.current[index] = el;
+                    }, role: "option", "aria-selected": selected, tabIndex: isActive ? 0 : -1, w: `calc(100% - 2 * ${spec.mx})`, minH: spec.minH, textAlign: "left", border: "none", fontFamily: "inherit", bg: selected ? rowBackgrounds.selected : "transparent", mx: spec.mx, px: spec.px, py: spec.py, borderRadius: OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: selectRowInk(theme.colors, isSingleSelected), fontWeight: optionRowWeight(isSingleSelected), transition: ROW_TRANSITION, sx: reducedMotionSx(), _hover: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focus: { bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active }, _focusVisible: keyboardRing, onClick: () => handleOptionClick(option), onKeyDown: onActivationKey(() => handleOptionClick(option)), display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && (_jsx(Box, { children: _jsx(Avatar, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && (_jsx(Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "full" })), _jsxs(Box, { flex: 1, minW: 0, children: [_jsx(Box, { children: option.label }), option.email && (_jsx(Box, { fontSize: spec.descriptionFontSize, color: selectRowDescriptionInk(theme.colors), children: option.email }))] }), isSingleSelected && (_jsx(Box, { as: Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+            }) }));
     }
     return (_jsx(Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
-export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, 
-// BottomIconStyle,
-BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
+/** Prefer `Select` (`native={false}`): onOptionSelect→onChange, inputOnchange→onSearchChange, the footer row→footerAction. */
+export default function SelectSearch({ options, initialSelectedOption, onOptionSelect, inputOnchange, id, name, label, inputStyle, isOptionLoading, loadingText = "loading", boxStyle, placeholder = "Select Option", searchQuery = null, isInformation = false, informationMessage, rightIcon, rightElementStyle, isMultipleSelect = false, isRequired = false, onOptionMultiSelect, error = false, isProfile = false, isBottomIcon = false, errorMessage, helperText, size = DEFAULT_CONTROL_SIZE, BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
     const theme = useCustomTheme();
-    const errorBorder = `2px solid ${theme.colors.semanticText.error}`;
-    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
-    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
-    const defaultBorderThin = `1px solid ${theme.colors.boxborder[500]}`;
+    const ids = useFieldIds(id, { error, errorMessage, helperText });
     const [selectedOptions, setSelectedOptions] = useState(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = useState(searchQuery);
     const [isOpen, setIsOpen] = useState(false);
+    const requestExclusiveOpen = useExclusiveOverlay(isOpen, () => setIsOpen(false));
+    const openDropdown = useCallback(() => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    }, [requestExclusiveOpen]);
     const [position, setPosition] = useState("below");
     const inputRef = useRef(null);
     const dropdownRef = useRef(null);
     const listboxId = useId();
-    // Roving-tabindex keyboard nav for the options list (same shape as
-    // Table/filters/CompactSelect's listbox pattern): real DOM focus moves
-    // through the options, so no aria-activedescendant is needed.
+    // NOTE: roving-tabindex nav (same shape as Table/filters/CompactSelect) — real DOM focus, no aria-activedescendant needed.
     const optionRefs = useRef([]);
+    const footerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(0);
     const pendingFocusFirstOption = useRef(false);
-    // Programmatically focusing the input (Escape returning focus there) would
-    // otherwise re-trigger its own onFocus and immediately reopen the list.
     const skipNextInputFocusOpen = useRef(false);
-    const closeAndFocusInput = () => {
+    const closeAndFocusInput = useCallback(() => {
         var _a;
         setIsOpen(false);
-        skipNextInputFocusOpen.current = true;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const focusOption = useCallback((next) => {
-        var _a;
-        setActiveIndex(next);
-        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+        if (document.activeElement !== inputRef.current) {
+            skipNextInputFocusOpen.current = true;
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
     }, []);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) => {
-    //     const optionLabel = option.label || '';
-    //     const searchValue = inputValue || '';
-    //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
-    //   });
-    // }, [options, inputValue]);
     const filteredOptions = useMemo(() => {
         return options.filter((option) => {
-            // First filter out already selected options
-            // const isNotSelected = !selectedOptions.some(
-            //   (selected) => selected.id === option.id
-            // );
             const isNotSelected = isMultipleSelect
                 ? !selectedOptions.some((selected) => selected.id === option.id)
                 : true;
-            // Then apply the search filter
             const optionLabel = option.label || "";
             const searchValue = inputValue || "";
             return (isNotSelected &&
                 optionLabel.toLowerCase().includes(searchValue.toLowerCase()));
         });
     }, [options, inputValue, isMultipleSelect, selectedOptions]);
-    // const filteredOptions = useMemo(() => {
-    //   return options.filter((option) =>
-    //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
-    //   );
-    // }, [options, inputValue]);
-    //   const handleOptionClick = useCallback(
-    //     (option: selectOptions) => {
-    //       if (isMultipleSelect) {
-    //         setSelectedOptions((prev) => {
-    //           const isSelected = prev.some((selected) => selected.id === option.id);
-    //           const newSelected = isSelected
-    //             ? prev.filter((selected) => selected.id !== option.id)
-    //             : [...prev, option];
-    //           setInputValue("");
-    //           if (onOptionMultiSelect) {
-    //             onOptionMultiSelect(newSelected);
-    //           }
-    //           return newSelected;
-    //         });
-    //       } else {
-    //         setInputValue(option.label);
-    //         setIsOpen(false);
-    //         if (onOptionSelect) {
-    //           onOptionSelect(option);
-    //         }
-    //       }
-    //     },
-    //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
-    //   );
+    const rowCount = isOptionLoading ? 0 : filteredOptions.length;
+    const hasOptionRows = rowCount > 0 || isBottomIcon;
+    const footerStop = isBottomIcon ? rowCount : -1;
+    const stopCount = rowCount + (isBottomIcon ? 1 : 0);
+    // NOTE: inset — the popup panel clips overflow, so an outer ring would be cut off.
+    const footerFocusRing = {
+        outline: "2px solid transparent",
+        boxShadow: insetFocusRingShadow(theme.colors),
+    };
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = (next === footerStop ? footerRef.current : optionRefs.current[next])) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [footerStop]);
     const handleOptionClick = useCallback((option) => {
         if (isMultipleSelect) {
             setSelectedOptions((prev) => {
@@ -129,30 +120,34 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
         }
         else {
             setInputValue(option.label);
-            setIsOpen(false);
+            closeAndFocusInput();
             if (onOptionSelect) {
                 onOptionSelect(option);
             }
         }
-    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect]);
+    }, [isMultipleSelect, onOptionSelect, onOptionMultiSelect, closeAndFocusInput]);
     const isOptionSelected = useCallback((option) => selectedOptions.some((selected) => selected.id === option.id), [selectedOptions]);
     useEffect(() => setActiveIndex(0), [inputValue, isOpen]);
     useEffect(() => {
-        var _a;
         if (isOpen && pendingFocusFirstOption.current) {
             pendingFocusFirstOption.current = false;
             // Refs are already attached by the time this effect runs (React
             // commits before running effects), so this can focus synchronously.
-            (_a = optionRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+            focusOption(0);
         }
-    }, [isOpen]);
+    }, [isOpen, focusOption]);
+    useLayoutEffect(() => {
+        if (isOpen && isBottomIcon && dropdownRef.current && footerRef.current) {
+            dropdownRef.current.style.scrollPaddingBottom = `${footerRef.current.offsetHeight}px`;
+        }
+    }, [isOpen, isBottomIcon, BottomText]);
     const handleListKeyDown = (e) => {
-        if (filteredOptions.length === 0)
+        if (stopCount === 0)
             return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
             e.preventDefault();
             const step = e.key === "ArrowDown" ? 1 : -1;
-            focusOption((activeIndex + step + filteredOptions.length) % filteredOptions.length);
+            focusOption((activeIndex + step + stopCount) % stopCount);
         }
         else if (e.key === "Home") {
             e.preventDefault();
@@ -160,7 +155,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
         }
         else if (e.key === "End") {
             e.preventDefault();
-            focusOption(filteredOptions.length - 1);
+            focusOption(stopCount - 1);
         }
         else if (e.key === "Escape") {
             e.preventDefault();
@@ -185,7 +180,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                 handleOptionClick(matchingOption);
             }
             else if (!isOpen) {
-                setIsOpen(true);
+                openDropdown();
             }
         }
         else if (e.key === "ArrowDown") {
@@ -194,9 +189,9 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             e.preventDefault();
             if (!isOpen) {
                 pendingFocusFirstOption.current = true;
-                setIsOpen(true);
+                openDropdown();
             }
-            else if (filteredOptions.length > 0) {
+            else if (stopCount > 0) {
                 focusOption(0);
             }
         }
@@ -224,47 +219,25 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
         }
     };
     useEffect(() => {
-        if (isOpen) {
-            updateDropdownPosition();
-        }
-        const handleClickOutside = (event) => {
-            if (inputRef.current &&
-                dropdownRef.current &&
-                !inputRef.current.contains(event.target) &&
-                !dropdownRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
+        if (!isOpen)
+            return;
+        updateDropdownPosition();
     }, [isOpen]);
-    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [_jsx(TagLabel, { width: "50px", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { children: [_jsx(Input, { ref: inputRef, variant: "outline", borderRadius: FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+    useOutsideMouseDown([inputRef, dropdownRef], () => {
+        if (inputRef.current && dropdownRef.current)
+            setIsOpen(false);
+    }, { enabled: isOpen });
+    return (_jsx(_Fragment, { children: _jsx(FormControl, { isInvalid: error, children: _jsxs(Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, onBlur: (e) => {
+                    if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) {
+                        setIsOpen(false);
+                    }
+                }, children: [label && (_jsx(TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && (_jsx(HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => (_jsxs(Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [_jsx(TagLabel, { width: "3.125rem", children: option.label }), _jsx(TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), _jsxs(InputGroup, { size: size, children: [_jsx(Input, { ref: inputRef, ...ids.controlProps, variant: "outline", value: inputValue ? inputValue : "", onClick: openDropdown, onFocus: () => {
                                     if (skipNextInputFocusOpen.current) {
                                         skipNextInputFocusOpen.current = false;
                                         return;
                                     }
-                                    setIsOpen(true);
-                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, id: id, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, cursor: "pointer", borderColor: theme.colors.boxborder[500], transition: "border-color 0.2s, box-shadow 0.2s", _hover: {
-                                    borderColor: error
-                                        ? theme.colors.semanticText.error
-                                        : theme.colors.primary[500],
-                                }, _focus: {
-                                    borderColor: error
-                                        ? theme.colors.semanticText.error
-                                        : theme.colors.primary[500],
-                                    boxShadow: fieldFocusRing(theme, !!error),
-                                }, style: {
-                                    ...inputStyle,
-                                    backgroundColor: theme.colors.gray[50],
-                                    fontWeight: 600,
-                                    color: theme.colors.gray[700],
-                                    padding: "0 0.75rem",
-                                    fontSize: 15,
-                                    letterSpacing: 0.7,
-                                    border: error ? errorBorder : defaultBorderThin,
-                                } }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, marginTop: "5px", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "1px solid", borderColor: theme.colors.boxborder[200], borderRadius: "md", bg: theme.colors.background[50], maxHeight: "150px", overflowY: "auto", zIndex: 10, children: [_jsx(Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: _jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), _jsx("hr", {}), isBottomIcon && (_jsxs(Box, { position: "sticky", bottom: 0, background: theme.colors.background[50], display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, borderColor: theme.colors.boxborder[200], zIndex: 1, borderTop: `1px solid ${theme.colors.boxborder[200]}`, children: [_jsx(Box, { children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { fontSize: "0.875rem", color: BottomTextColor
+                                    openDropdown();
+                                }, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder, onKeyDown: handleKeyDown, name: name, role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-required": isRequired || undefined, cursor: "pointer", sx: { ...fieldControlStyles(theme.colors), ...controlSizeStyles(size), ...reducedMotionSx() }, style: inputStyle }), rightIcon && (_jsx(InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && (_jsxs(Box, { ref: dropdownRef, id: listboxId, role: hasOptionRows ? "listbox" : undefined, "aria-label": hasOptionRows ? (label !== null && label !== void 0 ? label : placeholder) : undefined, tabIndex: -1, _focus: { outline: "none" }, onKeyDown: handleListKeyDown, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: `${BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [_jsx(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }), _jsx(Box, { as: "hr", role: "presentation", borderColor: raisedRule(theme.colors) }), isBottomIcon && (_jsxs(Box, { as: "button", type: "button", ref: footerRef, role: "option", "aria-selected": false, tabIndex: activeIndex === footerStop ? 0 : -1, w: "100%", textAlign: "left", position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, display: "flex", alignItems: "center", pl: "1rem", cursor: "pointer", onClick: handleBottomClick, onFocus: () => setActiveIndex(footerStop), _focusVisible: footerFocusRing, borderColor: raisedRule(theme.colors), zIndex: 1, borderTop: `1px solid ${raisedRule(theme.colors)}`, children: [_jsx(Box, { as: "span", children: BottomIcon ? BottomIcon : _jsx(PlusIcon, { size: "1rem" }) }), _jsx(Box, { as: "span", fontSize: "sm", color: BottomTextColor
                                             ? BottomTextColor
-                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && _jsx(ErrorMessage, { errorMessage: errorMessage })] }) }) }));
+                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), _jsx(FieldMessage, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }