@rescui/select 0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67 → 0.15.2

package/lib/types.d.ts

@@ -1,13 +1,9 @@
 import React from 'react';
-import type { Theme } from '@rescui/ui-contexts';
-import type { UseSelectPropGetters } from 'downshift';
-export declare type Key = string | number;
-export declare type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
 export declare type SelectSize = 'l' | 'm' | 's';
 export declare type SelectMode = 'classic' | 'rock';
 export declare type SelectOption = {
     label: React.ReactNode;
-    value?: Key;
+    value?: string;
 };
 export declare type SelectOptionsGroup = {
     label?: React.ReactNode;
@@ -15,30 +11,9 @@ export declare type SelectOptionsGroup = {
 };
 export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
 export declare type SelectOptions = SelectOptionOrGroup[];
-export declare type ListBoxOptionItem = SelectOption & {
-    index: number;
-    type: 'option';
-    key: Key;
-    disabled?: boolean;
-};
-export declare type ListBoxGroupItem = Omit<SelectOptionsGroup, 'options'> & {
-    options: ListBoxOptionItem[];
-    type: 'group';
-    key: Key;
-};
-export declare type ListBoxItem = ListBoxOptionItem | ListBoxGroupItem;
-export declare type ListBoxItems = ListBoxItem[];
-export declare type ListBoxState = {
-    menuProps: ReturnType<UseSelectPropGetters<SelectOption>['getMenuProps']>;
-    getItemProps: UseSelectPropGetters<SelectOption>['getItemProps'];
-    selectionMode: 'single' | 'multiple';
-    highlightedIndex: number;
-    selectedMap: Map<Key, SelectOption>;
-    menuRef?: React.RefObject<HTMLUListElement>;
-};
 export declare type NativeSelectOption = {
     label: string;
-    value?: Key;
+    value?: string;
     disabled?: boolean;
 };
 export declare type NativeSelectOptionsGroup = {
@@ -49,149 +24,11 @@ export declare type NativeSelectOptionsGroup = {
 export declare type NativeSelectOptionOrGroup = NativeSelectOption | NativeSelectOptionsGroup;
 export declare type NativeSelectOptions = NativeSelectOptionOrGroup[];
 export declare type Groups = SelectOptionsGroup[];
+export declare type Index = [number, number];
+export declare type FilterFn = (option: SelectOption) => boolean;
 export declare type NoOptionsMessageConfig = {
     noOptions: string;
     nothingFound?: string;
     loading?: string;
 };
 export declare type NoOptionsMessage = string | NoOptionsMessageConfig;
-export declare type SelectProps = {
-    /**
-     * Value of the select
-     */
-    value?: SelectOption | null;
-    /**
-     * Change value callback. `value => ...`. Pass `null` on clear.
-     */
-    onChange?: (newValue: SelectOption | null) => void;
-    /**
-     * Additional class name
-     */
-    className?: string;
-    style?: React.CSSProperties;
-    id?: string;
-    /**
-     * Array of options or option groups
-     */
-    options?: (SelectOption | SelectOptionsGroup)[] | null;
-    /**
-     * Is select supports clearing the value
-     */
-    isClearable?: boolean;
-    /**
-     * Is select supports inplace filtering
-     */
-    isSearchable?: boolean;
-    /**
-     * Is the component has been disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Is loader displayed inside the trigger part
-     */
-    isLoading?: boolean;
-    /**
-     * A hint to the user of what can be entered in the control
-     */
-    placeholder?: string;
-    /**
-     * Size
-     */
-    size?: SelectSize;
-    /**
-     * Appearance mode
-     */
-    mode?: SelectMode;
-    /**
-     * Appearance theme
-     */
-    theme?: Theme;
-    /**
-     * Error state flag or `React.ReactNode` (use with forms)
-     */
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    /**
-     * Label element (use with forms)
-     */
-    label?: React.ReactNode;
-    /**
-     * If `true`, label will be bold
-     */
-    boldLabel?: boolean;
-    /**
-     * Placement of dropdown element
-     */
-    placement?: Placement;
-    /**
-     * Note element at the bottom (use with forms)
-     */
-    note?: React.ReactNode;
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsMessage?: NoOptionsMessage;
-    /**
-     * Input name attribute
-     */
-    name?: string;
-    /**
-     * Maximum number of fully visible items in the dropdown list.
-     * For large lists, `n + 0.5` items will be visible at a time.
-     * If the maximum number of items in a list is exactly `n + 1`, all
-     * items will be shown instead (to avoid creating a scroll for half an item only).
-     */
-    maxVisibleItems?: number;
-};
-export declare type MultiselectProps = {
-    /**
-     * Value of the multiselect (array of selected options)
-     */
-    value?: SelectOption[] | null;
-    /**
-     * Change value callback. `value => ...`. Pass `[]` on clear.
-     */
-    onChange?: (newValue: SelectOption[]) => void;
-    /**
-     * Display tags in single line with "+N" counter
-     */
-    isSingleLine?: boolean;
-} & Omit<SelectProps, 'value' | 'onChange' | 'isSearchable'>;
-export declare type TriggerFuncProps = {
-    selectedLabel?: string;
-    selectedValue?: Key;
-    placeholder?: string;
-    hovered: boolean;
-    focused: boolean;
-};
-export declare type NativeSelectProps = {
-    options?: (NativeSelectOption | NativeSelectOptionsGroup)[];
-    size?: SelectSize;
-    theme?: Theme;
-    className?: string;
-    id?: string;
-    style?: React.CSSProperties;
-    value?: NativeSelectOption | null;
-    onChange?: (newValue: NativeSelectOption | null) => void;
-    placeholder?: string;
-    isLoading?: boolean;
-    isDisabled?: boolean;
-    isClearable?: boolean;
-    trigger?: (props: TriggerFuncProps) => React.ReactNode;
-    label?: React.ReactNode;
-    note?: React.ReactNode;
-    error?: boolean | React.ReactNode;
-    /**
-     * If `true`, there will be reserved a space for a 1-line error message. Subsequent lines will be placed below normally.
-     * If `false`, there will be no reservation.
-     */
-    reserveErrorLine?: boolean;
-    noOptionsMessage?: NoOptionsMessage;
-    name?: string;
-    boldLabel?: boolean;
-};
-export declare type InnerSingleComponentProps = Omit<SelectProps, 'isSearchable'>;

package/lib/utils.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { SelectOptionOrGroup, SelectOptionsGroup, NoOptionsMessage, SelectSize } from './types';
+import { Groups, Index, SelectOption } from './types';
+export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;
+export declare function shouldOpenSelect(key: string, isTriggerTarget?: boolean): boolean;
+export declare function getEmptyMessage(isLoading: boolean, isNothingFound: boolean, noOptionsMessage: NoOptionsMessage): string;
+export declare function escapeRegex(str: string): string;
+export declare function convertToOptionGroupsIfNeeded(optionsOrGroups?: SelectOptionOrGroup[]): SelectOptionsGroup[];
+export declare const calculateMaxHeight: (size: SelectSize) => number;
+export declare function getOptionValue(option: SelectOption): string;
+export declare const OptionGroupTypes: {
+    HEADER: string;
+    OPTION: string;
+    DIVIDER: string;
+};
+export declare const getDefaultCursorIndex: (groups: Groups) => Index;
+export declare const getPlainOptionsFromGroups: (groups: Groups) => any[];
+export declare function isGroupsEmpty(groups: Groups): boolean;
+export declare function useStrongMemo<T>(callback: () => T, deps: unknown[]): T;
+export declare function getMovedCursorIndex(groups: Groups, currentCursorIndex: Index, isDownDirection: boolean): Index;
+export declare const isIndexMatchCursor: (cursorIndex: Index, index: Index) => boolean;
+export declare const withoutGroupsLabel: (groups: Groups) => boolean;

package/lib/utils.js

@@ -0,0 +1,199 @@
+import React, { useRef } from 'react';
+import { ARROW_DOWN, ARROW_UP, SPACE, ENTER } from './key-codes.js';
+const DEFAULT_NO_OPTIONS_MESSAGES = {
+  noOptions: 'No options',
+  nothingFound: 'Nothing found',
+  loading: 'Loading...'
+};
+const MAX_VISIBLE_ITEMS = 5;
+const ITEM_HEIGHT_BY_SIZE = {
+  s: 32,
+  m: 40,
+  l: 52
+};
+
+const getTextFromNodes = function (node) {
+  let depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return node.toString();
+  }
+
+  if (depth > 15) {
+    console.warn('Max depth reached while getting text from nodes');
+    return '';
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(n => getTextFromNodes(n, depth + 1)).join('');
+  }
+
+  if ( /*#__PURE__*/React.isValidElement(node) && node?.type?.toString()?.toLowerCase() !== 'svg') {
+    return getTextFromNodes(node.props.children, depth + 1);
+  }
+
+  return '';
+};
+
+const isOptionsGroup = optionOrGroup => typeof optionOrGroup.options !== 'undefined';
+
+function shouldOpenSelect(key) {
+  let isTriggerTarget = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return key === ARROW_DOWN || key === ARROW_UP || (key === SPACE || key === ENTER) && isTriggerTarget;
+}
+
+function isString(s) {
+  return Object.prototype.toString.call(s) === '[object String]';
+}
+
+function getEmptyMessage(isLoading, isNothingFound, noOptionsMessage) {
+  const {
+    noOptions,
+    nothingFound,
+    loading
+  } = isString(noOptionsMessage) ? { ...DEFAULT_NO_OPTIONS_MESSAGES,
+    noOptions: noOptionsMessage
+  } : { ...DEFAULT_NO_OPTIONS_MESSAGES,
+    ...noOptionsMessage
+  };
+
+  if (isLoading) {
+    return loading;
+  } else if (isNothingFound) {
+    return nothingFound;
+  } else {
+    return noOptions;
+  }
+}
+
+function escapeRegex(str) {
+  return str.replace(/[\-\[\]\/{}()\*+?.\\^$|]/g, '\\$&');
+}
+
+function convertToOptionGroupsIfNeeded() {
+  let optionsOrGroups = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  const newOptions = [];
+  let topLevelOptions = [];
+  optionsOrGroups.forEach(optionOrGroup => {
+    if (isOptionsGroup(optionOrGroup)) {
+      if (topLevelOptions.length) {
+        newOptions.push({
+          options: topLevelOptions
+        });
+        topLevelOptions = [];
+      }
+
+      newOptions.push(optionOrGroup);
+    } else {
+      topLevelOptions.push(optionOrGroup);
+    }
+  });
+
+  if (topLevelOptions.length) {
+    newOptions.push({
+      options: topLevelOptions
+    });
+    topLevelOptions = [];
+  }
+
+  return newOptions;
+}
+
+const calculateMaxHeight = size => {
+  const itemHeight = ITEM_HEIGHT_BY_SIZE[size]; // half of item added to show that there is more items even if scroll bar hidden
+
+  return (Math.ceil(MAX_VISIBLE_ITEMS) + 0.5) * itemHeight;
+};
+
+function getOptionValue(option) {
+  return typeof option.value === 'string' ? option.value : getTextFromNodes(option.label);
+}
+
+const OptionGroupTypes = {
+  HEADER: 'header',
+  OPTION: 'option',
+  DIVIDER: 'divider'
+};
+
+const getDefaultCursorIndex = groups => {
+  if (groups.length === 0) {
+    return null;
+  }
+
+  const firstNonEmptyGroupIndex = groups.findIndex(group => group.options && group.options.length > 0);
+
+  if (firstNonEmptyGroupIndex === -1) {
+    return null;
+  }
+
+  return [firstNonEmptyGroupIndex, 0];
+};
+
+function optionsNotEmpty(options) {
+  return options && options.length > 0;
+}
+
+const getPlainOptionsFromGroups = groups => groups.reduce( // eslint-disable-next-line no-shadow
+(acc, group, i) => acc.concat([optionsNotEmpty(group.options) && i !== 0 && !group.label && {
+  type: OptionGroupTypes.DIVIDER
+}, optionsNotEmpty(group.options) && group.label && {
+  type: OptionGroupTypes.HEADER,
+  label: group.label
+}, ...group.options.map((option, j) => ({ ...option,
+  index: [i, j],
+  type: OptionGroupTypes.OPTION
+}))].filter(e => e)), []);
+
+function isGroupsEmpty(groups) {
+  return groups.length === 0 || groups.every(g => !g.options || g.options.length === 0);
+}
+
+function useStrongMemo(callback, deps) {
+  const prevDeps = useRef([]);
+  const memoResult = useRef(null);
+
+  if (deps.length !== prevDeps.current.length || !prevDeps.current.every((dep, i) => dep === deps[i])) {
+    prevDeps.current = [...deps];
+    memoResult.current = callback();
+  }
+
+  return memoResult.current;
+}
+
+function nextIndex(index, isDownDirection) {
+  return isDownDirection ? index + 1 : index - 1;
+}
+
+function isIndexOutOfRange(index, len) {
+  return index < 0 || index >= len;
+} // eslint-disable-next-line complexity
+
+
+function getMovedCursorIndex(groups, currentCursorIndex, isDownDirection) {
+  if (isGroupsEmpty(groups)) return currentCursorIndex;
+  const [grpIndex, optIndex] = currentCursorIndex;
+  const optLenByGroup = groups.map(g => g.options ? g.options.length : 0);
+  let newGrpIndex = grpIndex;
+  let newOptIndex = nextIndex(optIndex, isDownDirection);
+
+  while (isIndexOutOfRange(newOptIndex, optLenByGroup[newGrpIndex]) || isIndexOutOfRange(newGrpIndex, groups.length)) {
+    newGrpIndex = nextIndex(newGrpIndex, isDownDirection);
+
+    if (isIndexOutOfRange(newGrpIndex, groups.length)) {
+      newGrpIndex = isDownDirection ? 0 : groups.length - 1;
+    }
+
+    newOptIndex = isDownDirection ? 0 : optLenByGroup[newGrpIndex] - 1;
+  }
+
+  return [newGrpIndex, newOptIndex];
+}
+
+const isIndexMatchCursor = (cursorIndex, index) => {
+  if (cursorIndex === null) return false;
+  return index[0] === cursorIndex[0] && index[1] === cursorIndex[1];
+};
+
+const withoutGroupsLabel = groups => groups.every(g => !g.label);
+
+export { OptionGroupTypes, calculateMaxHeight, convertToOptionGroupsIfNeeded, escapeRegex, getDefaultCursorIndex, getEmptyMessage, getMovedCursorIndex, getOptionValue, getPlainOptionsFromGroups, getTextFromNodes, isGroupsEmpty, isIndexMatchCursor, shouldOpenSelect, useStrongMemo, withoutGroupsLabel };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.15.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
+  "version": "0.15.2",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "0.9.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
-    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
-    "@rescui/tag": "0.13.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
-    "@rescui/use-resize-observer": "0.3.1-RUI-280-Update-select-component-downshift-2f40ef205.179+2f40ef205",
+    "@rescui/dropdown": "^0.9.6",
+    "@rescui/form-field": "^0.1.2",
+    "@rescui/menu": "^0.13.4",
+    "@rescui/tag": "^0.13.6",
+    "@rescui/use-resize-observer": "^0.3.0",
     "classnames": "^2.2.6",
-    "downshift": "^9.3.2",
-    "scroll-into-view-if-needed": "3.1.0"
+    "scroll-into-view-if-needed": "2.2.20"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
@@ -30,10 +30,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
-    "@rescui/scripts": "0.5.1",
-    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-downshift-2f40ef205.67+2f40ef205",
-    "@rescui/visual-regression": "0.1.4",
+    "@rescui/colors": "^0.3.0",
+    "@rescui/scripts": "^0.5.1",
+    "@rescui/typography": "^0.26.0",
+    "@rescui/visual-regression": "^0.1.4",
     "sniffr": "^1.2.0"
   },
   "scripts": {
@@ -41,5 +41,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "2f40ef205f94c200019ec963e3fd0ca47fe1cdcb"
+  "gitHead": "faa7a838502974c16bdf773ab001002d1b8dcca8"
 }

package/lib/constants.d.ts

@@ -1,6 +0,0 @@
-export declare const NO_OPTIONS_VALUE = "\0__rs_select_no_options__";
-export declare const DEFAULT_NO_OPTIONS_MESSAGES: {
-    noOptions: string;
-    nothingFound: string;
-    loading: string;
-};

package/lib/constants.js

@@ -1,7 +0,0 @@
-const NO_OPTIONS_VALUE = '\0__rs_select_no_options__';
-const DEFAULT_NO_OPTIONS_MESSAGES = {
-  noOptions: 'No options',
-  nothingFound: 'Nothing found',
-  loading: 'Loading...'
-};
-export { DEFAULT_NO_OPTIONS_MESSAGES, NO_OPTIONS_VALUE };

package/lib/hooks/use-a11y.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-export declare type UseA11yArgs = {
-    prefix?: string;
-    baseId?: string;
-    description?: React.ReactNode;
-    error?: React.ReactNode;
-    label?: React.ReactNode;
-    fieldRef?: React.RefObject<HTMLElement>;
-};
-export declare const useA11y: ({ baseId: baseIdFromProps, prefix, description, error, label, fieldRef }: UseA11yArgs) => {
-    baseId: string;
-    fieldProps: {
-        'aria-invalid': boolean;
-        'aria-describedby': string;
-        'aria-labelledby': string;
-        id: string;
-    };
-    descriptionProps: {
-        id: string;
-    };
-    errorMessageProps: {
-        id: string;
-    };
-    labelProps: {
-        id: string;
-        htmlFor: string;
-        onClick: () => void;
-    };
-};

package/lib/hooks/use-a11y.js

@@ -1,53 +0,0 @@
-import { useBackwardCompatibleId } from './use-backward-compatible-id.js'; // eslint-disable-next-line complexity
-
-const useA11y = _ref => {
-  let {
-    baseId: baseIdFromProps,
-    prefix = '',
-    description,
-    error,
-    label,
-    fieldRef
-  } = _ref;
-  const uniqueId = `${prefix ? `${prefix}-` : ''}${useBackwardCompatibleId()}`;
-  const baseId = baseIdFromProps ?? uniqueId;
-  const fieldId = `${baseId}-field`;
-  const descriptionId = description ? `${baseId}-description` : undefined;
-  const errorId = error ? `${baseId}-error` : undefined;
-  const labelId = label ? `${baseId}-label` : undefined;
-  const describedBy = [descriptionId, errorId].filter(Boolean).join(' ') || undefined;
-  const fieldProps = {
-    'aria-invalid': Boolean(error),
-    'aria-describedby': describedBy,
-    'aria-labelledby': labelId,
-    id: fieldId
-  };
-  const errorMessageProps = {
-    id: errorId
-  };
-  const descriptionProps = {
-    id: descriptionId
-  };
-  const labelProps = {
-    id: labelId,
-    htmlFor: fieldId,
-    onClick: () => {
-      if (fieldRef !== null && fieldRef !== void 0 && fieldRef.current) {
-        fieldRef.current.focus();
-      } else {
-        var _document$getElementB;
-
-        (_document$getElementB = document.getElementById(fieldId)) === null || _document$getElementB === void 0 || _document$getElementB.focus();
-      }
-    }
-  };
-  return {
-    baseId,
-    fieldProps,
-    descriptionProps,
-    errorMessageProps,
-    labelProps
-  };
-};
-
-export { useA11y };

package/lib/hooks/use-focus.d.ts

@@ -1,10 +0,0 @@
-export declare type UseFocusParams = {
-    isDisabled?: boolean;
-};
-export declare const useFocus: ({ isDisabled }: UseFocusParams) => {
-    isFocused: boolean;
-    focusProps: {
-        onFocus: () => void;
-        onBlur: () => void;
-    };
-};

package/lib/hooks/use-focus.js

@@ -1,17 +0,0 @@
-import { useState } from 'react';
-
-const useFocus = _ref => {
-  let {
-    isDisabled
-  } = _ref;
-  const [isFocused, setIsFocused] = useState(false);
-  return {
-    isFocused,
-    focusProps: {
-      onFocus: () => setIsFocused(!isDisabled),
-      onBlur: () => setIsFocused(false)
-    }
-  };
-};
-
-export { useFocus };

package/lib/hooks/use-hover.d.ts

@@ -1,10 +0,0 @@
-export declare type UseHoverParams = {
-    isDisabled?: boolean;
-};
-export declare const useHover: ({ isDisabled }: UseHoverParams) => {
-    isHovered: boolean;
-    hoverProps: {
-        onMouseEnter: () => void;
-        onMouseLeave: () => void;
-    };
-};

package/lib/hooks/use-hover.js

@@ -1,17 +0,0 @@
-import { useState } from 'react';
-
-const useHover = _ref => {
-  let {
-    isDisabled
-  } = _ref;
-  const [isHovered, setIsHovered] = useState(false);
-  return {
-    isHovered,
-    hoverProps: {
-      onMouseEnter: () => setIsHovered(!isDisabled),
-      onMouseLeave: () => setIsHovered(false)
-    }
-  };
-};
-
-export { useHover };

package/lib/hooks/use-label-focus.d.ts

@@ -1,9 +0,0 @@
-export declare const useLabelFocus: () => {
-    isFocusedByLabel: boolean;
-    triggerFocusProps: {
-        onBlur: () => void;
-    };
-    labelClickProps: {
-        onClick: () => void;
-    };
-};

package/lib/hooks/use-label-focus.js

@@ -1,22 +0,0 @@
-import { useState } from 'react';
-
-const useLabelFocus = () => {
-  const [isFocusedByLabel, setIsFocusedByLabel] = useState(false);
-  const triggerFocusProps = {
-    onBlur: () => {
-      setIsFocusedByLabel(false);
-    }
-  };
-  const labelClickProps = {
-    onClick: () => {
-      setIsFocusedByLabel(true);
-    }
-  };
-  return {
-    isFocusedByLabel,
-    triggerFocusProps,
-    labelClickProps
-  };
-};
-
-export { useLabelFocus };

package/lib/hooks/use-multi-handlers.d.ts

@@ -1,11 +0,0 @@
-import type { SelectOption } from '../types';
-export declare type UseMultiHandlersArgs = {
-    selectedItems: SelectOption[];
-    onChange: (value: SelectOption[]) => void;
-};
-export declare const useMultiHandlers: ({ selectedItems, onChange }: UseMultiHandlersArgs) => {
-    selectedMap: Map<import("../types").Key, SelectOption>;
-    addItem: (item: SelectOption) => void;
-    removeItem: (item: SelectOption) => void;
-    removeAllItems: () => void;
-};