pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

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

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

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

@@ -0,0 +1,7 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+export declare const optionRowInk: (colors: PaletteProps, isSingleSelected: boolean) => string;
+export declare const optionRowDescriptionInk: (colors: PaletteProps) => string;
+export declare const OPTION_ROW_REST_WEIGHT = 400;
+export declare const OPTION_ROW_SELECTED_WEIGHT = 500;
+export declare const optionRowWeight: (isSingleSelected: boolean) => number;

package/dist/Components/Select/optionRowInk.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowDescriptionInk = exports.optionRowInk = void 0;
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+/** Selection is carried by weight and a trailing brand check, so the label itself stays neutral. */
+const optionRowInk = (colors, isSingleSelected) => isSingleSelected ? colors.text[900] : colors.text[700];
+exports.optionRowInk = optionRowInk;
+// A 12px sub-line reached only 4.00:1 on the hovered selected row in dark.
+const optionRowDescriptionInk = (colors) => (0, outlineRung_1.liftToContrast)(colors.textMuted, (0, rowStates_1.listRowBackgrounds)(colors).selectedActive, accentText_1.AA_NORMAL_TEXT);
+exports.optionRowDescriptionInk = optionRowDescriptionInk;
+exports.OPTION_ROW_REST_WEIGHT = 400;
+// NOTE: 600 beside a tinted fill and a check read as three signals for one state.
+exports.OPTION_ROW_SELECTED_WEIGHT = 500;
+const optionRowWeight = (isSingleSelected) => isSingleSelected ? exports.OPTION_ROW_SELECTED_WEIGHT : exports.OPTION_ROW_REST_WEIGHT;
+exports.optionRowWeight = optionRowWeight;

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

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

package/dist/Components/SelectSearch/SelectSearch.js

@@ -7,51 +7,74 @@ exports.default = SelectSearch;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
 const FormLabel_1 = require("../Common/FormLabel");
 const fieldStyles_1 = require("../Common/fieldStyles");
+const useFieldIds_1 = require("../Common/useFieldIds");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
+const motion_2 = require("../../Theme/chakra/motion");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const optionRowInk_1 = require("../Select/optionRowInk");
+const useExclusiveOverlay_1 = require("../../Hooks/useExclusiveOverlay");
 const lucide_react_1 = require("lucide-react");
-const ErrorMessage_1 = __importDefault(require("../Common/ErrorMessage"));
-const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, }) => {
+const ROW_TRANSITION = (0, motion_1.transitionFor)(["background-color"]);
+const RenderOptions = ({ isOptionLoading, filteredOptions, loadingText, handleOptionClick, isProfile, isColorOptions, isOptionSelected, activeIndex, optionRefs, size, isMultipleSelect, }) => {
     const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const rowBackgrounds = (0, react_1.useMemo)(() => (0, rowStates_1.listRowBackgrounds)(theme.colors), [theme.colors]);
+    const spec = (0, optionRowSizes_1.optionRowSpec)(size);
     if (isOptionLoading) {
         return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { py: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm", color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_2.Text, { color: theme.colors.accentText, children: loadingText })] }));
     }
     if (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) {
-        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => ((0, jsx_runtime_1.jsxs)(react_2.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 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Avatar, { size: "sm", name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: 12, color: theme.colors.textMuted, children: option.email }))] })] }, option.id))) }));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: filteredOptions.map((option, index) => {
+                const selected = isOptionSelected(option);
+                const isSingleSelected = selected && !isMultipleSelect;
+                const isActive = index === activeIndex;
+                const rowBg = selected
+                    ? isActive
+                        ? rowBackgrounds.selectedActive
+                        : rowBackgrounds.selected
+                    : isActive
+                        ? rowBackgrounds.active
+                        : "transparent";
+                return ((0, jsx_runtime_1.jsxs)(react_2.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: rowBg, mx: spec.mx, px: spec.px, py: spec.py, borderRadius: optionRowSizes_1.OPTION_ROW_RADIUS, fontSize: spec.fontSize, cursor: "pointer", color: (0, optionRowInk_1.optionRowInk)(theme.colors, isSingleSelected), fontWeight: (0, optionRowInk_1.optionRowWeight)(isSingleSelected), transition: ROW_TRANSITION, sx: (0, motion_2.reducedMotionSx)(), _hover: {
+                        bg: selected ? rowBackgrounds.selectedActive : rowBackgrounds.active,
+                    }, onClick: () => handleOptionClick(option), onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            handleOptionClick(option);
+                        }
+                    }, display: "flex", alignItems: "center", gap: spec.gap, children: [isProfile && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { size: spec.avatarSize, name: option.label.toLocaleUpperCase(), src: option.profileUrl ? option.profileUrl : undefined }) })), isColorOptions && ((0, jsx_runtime_1.jsx)(react_2.Box, { width: "0.8rem", height: "0.8rem", content: "", backgroundColor: option === null || option === void 0 ? void 0 : option.color, borderRadius: "50%" })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: option.label }), option.email && ((0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: spec.descriptionFontSize, color: (0, optionRowInk_1.optionRowDescriptionInk)(theme.colors), children: option.email }))] }), isSingleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: theme.colors.accentText, flexShrink: 0 }))] }, option.id));
+            }) }));
     }
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { px: 4, py: 2, color: theme.colors.textMuted, children: "No options found" }));
 };
-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` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+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 = controlSizes_1.DEFAULT_CONTROL_SIZE, BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptions, }) {
     const theme = (0, useCustomTheme_1.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 = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
     const [selectedOptions, setSelectedOptions] = (0, react_1.useState)(initialSelectedOption ? [initialSelectedOption] : []);
     const [inputValue, setInputValue] = (0, react_1.useState)(searchQuery);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const requestExclusiveOpen = (0, useExclusiveOverlay_1.useExclusiveOverlay)(isOpen, () => setIsOpen(false));
+    const openDropdown = (0, react_1.useCallback)(() => {
+        requestExclusiveOpen();
+        setIsOpen(true);
+    }, [requestExclusiveOpen]);
     const [position, setPosition] = (0, react_1.useState)("below");
     const inputRef = (0, react_1.useRef)(null);
     const dropdownRef = (0, react_1.useRef)(null);
     const listboxId = (0, react_1.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 = (0, react_1.useRef)([]);
     const [activeIndex, setActiveIndex] = (0, react_1.useState)(0);
     const pendingFocusFirstOption = (0, react_1.useRef)(false);
-    // Programmatically focusing the input (Escape returning focus there) would
-    // otherwise re-trigger its own onFocus and immediately reopen the list.
     const skipNextInputFocusOpen = (0, react_1.useRef)(false);
     const closeAndFocusInput = () => {
         var _a;
@@ -64,58 +87,17 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
         setActiveIndex(next);
         (_a = optionRefs.current[next]) === 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 = (0, react_1.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 handleOptionClick = (0, react_1.useCallback)((option) => {
         if (isMultipleSelect) {
             setSelectedOptions((prev) => {
@@ -191,7 +173,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
                 handleOptionClick(matchingOption);
             }
             else if (!isOpen) {
-                setIsOpen(true);
+                openDropdown();
             }
         }
         else if (e.key === "ArrowDown") {
@@ -200,7 +182,7 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             e.preventDefault();
             if (!isOpen) {
                 pendingFocusFirstOption.current = true;
-                setIsOpen(true);
+                openDropdown();
             }
             else if (filteredOptions.length > 0) {
                 focusOption(0);
@@ -246,31 +228,13 @@ BottomIcon = false, BottomText, handleBottomClick, BottomTextColor, isColorOptio
             document.removeEventListener("mousedown", handleClickOutside);
         };
     }, [isOpen]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", sx: { backgroundColor: theme.colors.primary[500] }, children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "50px", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { children: [(0, jsx_runtime_1.jsx)(react_2.Input, { ref: inputRef, variant: "outline", borderRadius: fieldStyles_1.FIELD_RADIUS, value: inputValue ? inputValue : "", onClick: () => setIsOpen(true), onFocus: () => {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(react_2.FormControl, { isInvalid: error, children: (0, jsx_runtime_1.jsxs)(react_2.Box, { display: "flex", flexDirection: "column", position: "relative", sx: boxStyle, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: ids.inputId, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), isMultipleSelect && selectedOptions.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, mb: 2, children: selectedOptions.map((option) => ((0, jsx_runtime_1.jsxs)(react_2.Tag, { size: "md", borderRadius: "full", variant: "solid", colorScheme: "primary", children: [(0, jsx_runtime_1.jsx)(react_2.TagLabel, { width: "3.125rem", children: option.label }), (0, jsx_runtime_1.jsx)(react_2.TagCloseButton, { onClick: () => handleRemoveOption(option) })] }, option.id))) })), (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: size, children: [(0, jsx_runtime_1.jsx)(react_2.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: (0, fieldStyles_1.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 && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.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: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.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.border[500]}`, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.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: { ...(0, fieldStyles_1.fieldControlStyles)(theme.colors), ...(0, fieldStyles_1.controlSizeStyles)(size), ...(0, motion_2.reducedMotionSx)() }, style: inputStyle }), rightIcon && ((0, jsx_runtime_1.jsx)(react_2.InputRightElement, { pointerEvents: "none", height: "100%", display: "flex", alignItems: "center", children: rightIcon, style: { ...rightElementStyle } }))] }), isOpen && ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: dropdownRef, marginTop: "0.313rem", position: "absolute", top: position === "below" ? "100%" : "auto", bottom: position === "above" ? "100%" : "auto", left: 0, right: 0, border: "0.063rem solid", borderColor: theme.colors.boxborder[200], borderRadius: "xl", boxShadow: theme.shadows.lg, bg: theme.colors.surfaceRaised, maxHeight: "9.375rem", overflowY: "auto", zIndex: 10, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: listboxId, role: "listbox", "aria-label": label !== null && label !== void 0 ? label : placeholder, onKeyDown: handleListKeyDown, children: (0, jsx_runtime_1.jsx)(RenderOptions, { isOptionLoading: isOptionLoading, filteredOptions: filteredOptions, loadingText: loadingText, handleOptionClick: handleOptionClick, isProfile: isProfile, isColorOptions: isColorOptions, isOptionSelected: isOptionSelected, activeIndex: activeIndex, optionRefs: optionRefs, size: size, isMultipleSelect: isMultipleSelect }) }), (0, jsx_runtime_1.jsx)("hr", {}), isBottomIcon && ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "sticky", bottom: 0, background: theme.colors.surfaceRaised, 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: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: BottomIcon ? BottomIcon : (0, jsx_runtime_1.jsx)(lucide_react_1.PlusIcon, { size: "1rem" }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { fontSize: "0.875rem", color: BottomTextColor
                                             ? BottomTextColor
-                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), error && (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { errorMessage: errorMessage })] }) }) }));
+                                            : theme.colors.accentText, padding: "8px 8px", children: BottomText || "Add New" })] }))] })), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }) }) }));
 }

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

@@ -1,36 +1,70 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Prefer `Select` with `native={false}` for new work — not a drop-in: its combobox is the text input itself. See select-absorption-spec.md. */
 export type SelectSearchProps = {
     options: selectOptions[];
+    /** @deprecated Never read — the search input always renders. */
     isSearchEnabled?: boolean;
+    /** Seeds state once on mount (useState initializer) — changing it later does not update the selection; no sync effect. */
     initialSelectedOption?: selectOptions | null;
+    /** Single mode only; fires on pick and writes the option label into the input. */
     onOptionSelect?: (option: selectOptions) => void;
+    /** Multi mode only; receives the full selection after each toggle or chip removal. */
     onOptionMultiSelect?: (option: selectOptions[]) => void;
+    /** Fires on every keystroke, undebounced; local label filtering runs regardless. */
     inputOnchange: (value: string | number) => void;
     id?: string;
     name?: string;
     label?: string;
+    /** Inline style on the text input. */
     inputStyle?: React.CSSProperties;
+    /** `sx` on the wrapper around label, chips, input and popup. */
     boxStyle?: React.CSSProperties;
+    /** Replaces the whole option list with a spinner and `loadingText`. */
     isOptionLoading?: boolean;
+    /** Defaults to "loading" (lowercase). */
     loadingText?: string;
+    /** Defaults to "Select Option"; also the listbox's accessible name when `label` is absent. */
     placeholder?: string;
+    /** Seeds the input text once on mount; later changes are ignored. */
     searchQuery: string | null;
+    /** Info icon beside the label; needs `label` and `informationMessage` too. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Decorative only — rendered with `pointerEvents: none`, so it can't be clicked. */
     rightIcon?: React.ReactNode;
+    /** Inline style on the right-icon slot; ignored without `rightIcon`. */
     rightElementStyle?: object;
+    /** Multi mode: chips above the input, selected options hidden from the list. */
     isMultipleSelect?: boolean;
+    /** Label asterisk + `aria-required` only; never blocks submission. */
     isRequired?: boolean | undefined;
+    /** Marks the field invalid and swaps `helperText` for `errorMessage`. */
     error?: boolean | undefined;
+    /** Prefixes each row with an avatar built from `profileUrl` (falls back to label initials). */
     isProfile?: boolean | undefined;
+    /** Prefixes each row with a dot filled with the option's `color`. */
     isColorOptions?: boolean | undefined;
+    /** Rendered only while `error` is true. */
     errorMessage?: string | undefined;
+    /** Hint under the field; replaced by `errorMessage` while `error` is true. */
+    helperText?: string;
+    /** Height on the shared control scale (xs 28 · sm 35 · md 40 · lg 48px). Defaults to `sm`. */
+    size?: ControlSize;
+    /** Shows a sticky "Add New"-style footer row in the popup; required for all Bottom* props. */
     isBottomIcon?: boolean | undefined;
+    /** Footer icon element; omit for a plus icon — `true` renders no icon at all. */
     BottomIcon?: boolean | undefined | JSX.Element;
+    /** @deprecated Never read by the component. */
     BottomIconStyle?: React.CSSProperties;
+    /** Footer text. Defaults to "Add New". */
     BottomText?: string | number;
+    /** Despite the CSSProperties type, pass a plain color string (e.g. "red") — used directly as one, not spread as styles. */
     BottomTextColor?: React.CSSProperties;
+    /** Fires on footer row click; the popup stays open. */
     handleBottomClick?: () => void;
 };
+/** Option shape for SelectSearch; `email`/`profileUrl` back `isProfile` rows, `color` backs `isColorOptions` rows. */
 export type selectOptions = {
     id: string;
     label: string;

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

@@ -1,2 +1,8 @@
-import { SelectV2Props } from "./SelectV2Props";
-export default function SelectV2(props: SelectV2Props): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+import { chipTriggerSizeStyles } from "../Common/chipTriggerSize";
+import type { SelectV2Props } from "./SelectV2Props";
+export { chipTriggerSizeStyles };
+/** @deprecated Use `Select` with `native={false}`. See MERGE-NOTES-select-deprecation.md. */
+declare const SelectV2: React.ForwardRefExoticComponent<SelectV2Props & React.RefAttributes<HTMLDivElement>>;
+/** @deprecated Use `Select` with `native={false}`. */
+export default SelectV2;