pixelize-design-library 2.4.2 → 3.0.0

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

@@ -1,22 +1,207 @@
-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"> & {
-    label?: string;
+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 = {
+    /** Unique value of the option: what `value` / `defaultValue` select by and what native mode emits as the `<option>` value. */
+    id: string | number;
+    /** Text shown in the row and the trigger; the default filter matches against it. */
+    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; searched only when `searchFields` includes "description". */
+    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 = {
+    /** Choices in display order; options that share a `group` should sit next to each other. */
+    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;
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
+    /** Native: the `<select>` name. Popup: submits the selection through hidden input(s), one per value when multi. */
+    name?: string;
+    /** Label above the field; its `for` points at the control. */
+    label?: string;
+    /** Native: the built-in placeholder `<option>`. Popup: trigger text when nothing is selected. Defaults to "Select Option". */
+    placeholder?: string;
+    /** Height on the field control scale (xs 32 · sm 38 · 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;
+    /** Disables the field; the popup cannot open. */
+    isDisabled?: boolean;
+    /** Shows the value but ignores changes; the popup never opens. */
+    isReadOnly?: boolean;
+    /** Label asterisk and `aria-required`; the popup never blocks an empty submit. */
+    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;
+    /** Accessible name when there is no `label`; the popup forwards it to the trigger. */
+    "aria-label"?: string;
+    /** Id of an element that names the field; the popup forwards it to the trigger. */
+    "aria-labelledby"?: string;
+    /** Popup mode only — forwarded to the trigger, the same node as `role="combobox"`. */
+    "data-testid"?: string;
+    /** Native mode only — field style: `outline` (default), `filled`, `flushed` or `unstyled`; inert (dev-warned) when `native` is false. */
+    variant?: ChakraNativeSelectProps["variant"];
+    /** Native mode only — forwarded to Chakra's Select; inert (dev-warned) when `native` is false. */
+    colorScheme?: ChakraNativeSelectProps["colorScheme"];
+    /** Native mode only — replaces the dropdown arrow; inert (dev-warned) when `native` is false. */
+    icon?: ChakraNativeSelectProps["icon"];
+    /** Native mode only — background of the `<select>`; inert (dev-warned) when `native` is false. */
+    bg?: ChakraNativeSelectProps["bg"];
+    /** Native mode only — border colour of the `<select>`; inert (dev-warned) when `native` is false. */
+    borderColor?: ChakraNativeSelectProps["borderColor"];
+    /** Native mode only — text colour of the `<select>`; inert (dev-warned) when `native` is false. */
+    color?: ChakraNativeSelectProps["color"];
+    /** Native mode only — border colour while `error`; inert (dev-warned) when `native` is false. */
+    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;
+    /** Option fields the local filter matches (case-insensitive substring). Defaults to `["label"]`. Popup mode only. */
+    searchFields?: ("label" | "description")[];
+    /** Replaces the built-in substring match; receives the trimmed query and wins over `searchFields`. Popup mode only. */
+    filterOption?: (option: OptionProp, query: string) => boolean;
+    /** 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;
+    /** Swaps the trailing chevron for a spinner and marks the field aria-busy, even while the popup is closed. Popup mode only. */
+    isFieldLoading?: boolean;
+    /** Trailing slot replacing the chevron; with `onClick` it renders a button (so `ariaLabel` is required) that does not toggle the popup. Popup mode only. */
+    rightIcon?: {
+        /** Node shown in place of the chevron. */
+        icon: ReactNode;
+    } | {
+        /** Node shown in place of the chevron. */
+        icon: ReactNode;
+        /** Makes the icon a button that calls this without toggling the popup. */
+        onClick: () => void;
+        /** Accessible name of the icon button. */
+        ariaLabel: 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;
+    /** Non-interactive content between the row and its check, e.g. a badge; receives isSelected/isActive. Popup mode only. */
+    renderOptionEnd?: (option: OptionProp, state: {
+        isSelected: boolean;
+        isActive: boolean;
+    }) => ReactNode;
+    /** One pointer-only row action: aria-hidden, tabIndex -1, and a click never selects the row. Popup mode only. */
+    optionAction?: {
+        /** Node shown in the action button. */
+        icon: ReactNode;
+        /** Hover title of the button; the button itself is hidden from assistive tech, so offer the action another way too. */
+        label: string;
+        /** Called with the row's option when the button is clicked. */
+        onAction: (option: OptionProp) => void;
+    };
+    /** Single-select check position: "end" (default) trails the row, "start" sits in the leading column the multi checkbox uses. Popup mode only. */
+    checkPlacement?: "end" | "start";
+    /** 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;
+    /** When the Create row shows: only with zero matches (default), or whenever no option's label equals the query exactly. Popup mode only. */
+    createWhen?: "no-options" | "no-exact-match";
+    /** A persistent last row ("Add new…") shown whatever the filter; `onSelect` gets the trimmed query and the popup closes. Popup mode only. */
+    footerAction?: {
+        /** Text of the footer row. */
+        label: ReactNode;
+        /** Called with the trimmed filter text when the row is chosen; the popup then closes. */
+        onSelect: (query: string) => void;
+        /** Icon before the label; a plus icon when omitted. */
+        icon?: 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; works with grouped options too. */
+    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 & {
+    /** False or absent selects this single-select variant. */
+    isMulti?: false;
+    /** Controlled selected option id; native mode stays uncontrolled until a defined `value` has been passed (`""` shows the placeholder). */
+    value?: string | number;
+    /** Seeds an uncontrolled selection in native and popup mode; 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;
+    /** Controlled selected option ids. */
+    value?: (string | number)[];
+    /** Seeds an uncontrolled selection; ignored once `value` is passed. */
+    defaultValue?: (string | number)[];
+    /** Called with the full selection after each toggle or chip removal. */
+    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;
+    /** Truncates each chip label to this many characters, adding an ellipsis. */
+    chipMaxLength?: number;
+    /** Set false to hide the chips' remove (x) and disable Backspace-removal. Defaults to true. */
+    isChipRemovable?: boolean;
+    /** Adds a Select All / Unselect All row that toggles every enabled option the filter currently shows. */
+    isSelectAll?: boolean;
 };
+/** 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/groupedWindow.d.ts

@@ -0,0 +1,21 @@
+import type { OptionProp } from "./SelectProps";
+export type GroupedRow = {
+    kind: "header";
+    key: string;
+    group: string;
+} | {
+    kind: "option";
+    key: string | number;
+    option: OptionProp;
+    index: number;
+};
+export type GroupedLayout = {
+    tops: number[];
+    optionRows: number[];
+};
+export declare const buildGroupedRows: (options: OptionProp[]) => GroupedRow[];
+export declare const layoutGroupedRows: (rows: GroupedRow[], headerPx: number, optionPx: number) => GroupedLayout;
+export declare const groupedWindow: (tops: number[], scrollTop: number, viewportPx: number, overscan: number) => {
+    start: number;
+    end: number;
+};

package/dist/Components/Select/groupedWindow.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.groupedWindow = exports.layoutGroupedRows = exports.buildGroupedRows = void 0;
+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;
+};
+exports.buildGroupedRows = buildGroupedRows;
+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 };
+};
+exports.layoutGroupedRows = layoutGroupedRows;
+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;
+};
+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) };
+};
+exports.groupedWindow = groupedWindow;

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

@@ -0,0 +1,19 @@
+import { type RowStateBackgrounds } from "../../Theme/tokens/builders/rowStates";
+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;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+export declare const optionRowFill: (rows: RowStateBackgrounds, isActive: boolean) => string;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+export declare const optionRowCursorSx: (rows: RowStateBackgrounds) => {
+    _hover: {
+        bg: string;
+    };
+    _focus: {
+        bg: 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,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.optionRowWeight = exports.OPTION_ROW_SELECTED_WEIGHT = exports.OPTION_ROW_REST_WEIGHT = exports.optionRowCursorSx = exports.optionRowFill = 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;
+/** The one fill an option row paints: the cursor's (hover or keyboard). Selection never fills a row. */
+const optionRowFill = (rows, isActive) => isActive ? rows.active : "transparent";
+exports.optionRowFill = optionRowFill;
+/** Fill for rows that take real DOM focus (roving tabindex) — `:hover` and `:focus` are the cursor. */
+const optionRowCursorSx = (rows) => ({
+    _hover: { bg: rows.active },
+    _focus: { bg: rows.active },
+});
+exports.optionRowCursorSx = optionRowCursorSx;
+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/Select/selectKeyboardRing.d.ts

@@ -0,0 +1,2 @@
+export declare const NAVIGATION_KEYS: Set<string>;
+export declare const keyboardRingShadow: (ring: string) => string;

package/dist/Components/Select/selectKeyboardRing.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.keyboardRingShadow = exports.NAVIGATION_KEYS = void 0;
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+exports.NAVIGATION_KEYS = new Set(["ArrowDown", "ArrowUp", "Home", "End", "PageUp", "PageDown"]);
+const keyboardRingShadow = (ring) => `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${ring}`;
+exports.keyboardRingShadow = keyboardRingShadow;

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

@@ -0,0 +1,14 @@
+import { type SelectRowBackgrounds } from "../../Theme/tokens/builders/rowStates";
+import type { PaletteProps } from "../../Theme/tokens/types";
+export declare const SELECT_ROW_DISABLED_CONTENT_OPACITY = 0.55;
+export declare const selectRowInk: (colors: PaletteProps, isSingleSelected: boolean) => string;
+export declare const selectRowDescriptionInk: (colors: PaletteProps) => string;
+/** Solid ink for a disabled row's content in light; dark dims content by opacity instead (null). */
+export declare const selectRowDisabledInk: (colors: PaletteProps) => string | null;
+/** Placeholder of the popup's filter input in light; dark keeps the shared placeholder ink (null). */
+export declare const selectFilterPlaceholderInk: (colors: PaletteProps) => string | null;
+/** Cursor and selection each paint a rung; the stacked state paints the third. */
+export declare const selectRowFill: (rows: SelectRowBackgrounds, state: {
+    isSelected: boolean;
+    isActive: boolean;
+}) => string;

package/dist/Components/Select/selectRowInk.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selectRowFill = exports.selectFilterPlaceholderInk = exports.selectRowDisabledInk = exports.selectRowDescriptionInk = exports.selectRowInk = exports.SELECT_ROW_DISABLED_CONTENT_OPACITY = 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");
+const optionRowInk_1 = require("./optionRowInk");
+exports.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) => (0, outlineRung_1.neutralStep)(colors.surfaceRaised, NEUTRAL_INK_STEPS[role]);
+const isDarkPanel = (colors) => (0, accentText_1.isDarkCanvas)(colors.surfaceRaised);
+const selectRowInk = (colors, isSingleSelected) => {
+    if (isDarkPanel(colors))
+        return (0, optionRowInk_1.optionRowInk)(colors, isSingleSelected);
+    return neutralInk(colors, isSingleSelected ? "selected" : "label");
+};
+exports.selectRowInk = selectRowInk;
+const selectRowDescriptionInk = (colors) => isDarkPanel(colors)
+    ? (0, outlineRung_1.liftToContrast)(colors.textMuted, (0, rowStates_1.selectRowBackgrounds)(colors).selectedActive, accentText_1.AA_NORMAL_TEXT)
+    : neutralInk(colors, "description");
+exports.selectRowDescriptionInk = selectRowDescriptionInk;
+/** Solid ink for a disabled row's content in light; dark dims content by opacity instead (null). */
+const selectRowDisabledInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "disabled");
+exports.selectRowDisabledInk = selectRowDisabledInk;
+/** Placeholder of the popup's filter input in light; dark keeps the shared placeholder ink (null). */
+const selectFilterPlaceholderInk = (colors) => isDarkPanel(colors) ? null : neutralInk(colors, "placeholder");
+exports.selectFilterPlaceholderInk = selectFilterPlaceholderInk;
+/** Cursor and selection each paint a rung; the stacked state paints the third. */
+const selectRowFill = (rows, state) => {
+    if (state.isActive)
+        return state.isSelected ? rows.selectedActive : rows.active;
+    return state.isSelected ? rows.selected : "transparent";
+};
+exports.selectRowFill = selectRowFill;

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` (`native={false}`): onOptionSelect→onChange, inputOnchange→onSearchChange, the footer row→footerAction. */
+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;