@rescui/select 0.15.0 → 0.15.1-RUI-280-Update-select-component-e516591ed.54

package/lib/types.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
+import type { Theme } from '@rescui/ui-contexts';
+import type { AriaComboBoxProps } from '@react-aria/combobox';
+import type { AriaSelectProps } from '@react-aria/select';
+import type { AriaPositionProps, AriaFieldProps } from 'react-aria';
+import type { SelectState } from '@react-stately/select';
+import type { ComboBoxState } from '@react-stately/combobox';
+import type { Key } from 'react-stately';
+export type { Key } from 'react-stately';
+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 AriaPlacement = AriaPositionProps['placement'];
 export declare type SelectSize = 'l' | 'm' | 's';
 export declare type SelectMode = 'classic' | 'rock';
 export declare type SelectOption = {
     label: React.ReactNode;
-    value?: string;
+    value?: Key;
 };
 export declare type SelectOptionsGroup = {
     label?: React.ReactNode;
@@ -13,7 +23,7 @@ export declare type SelectOptionOrGroup = SelectOption | SelectOptionsGroup;
 export declare type SelectOptions = SelectOptionOrGroup[];
 export declare type NativeSelectOption = {
     label: string;
-    value?: string;
+    value?: Key;
     disabled?: boolean;
 };
 export declare type NativeSelectOptionsGroup = {
@@ -24,11 +34,164 @@ 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;
+    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;
+} & Omit<AriaFieldProps, 'isInvalid' | 'errorMessage' | 'description' | 'id' | 'label' | 'labelElementType' | 'validate' | 'validationBehavior' | 'validationState'>;
+export declare type InnerSingleComponentProps<T extends object> = {
+    size?: SelectSize;
+    mode?: SelectMode;
+    theme?: Theme;
+    style?: React.CSSProperties;
+    className?: string;
+    isClearable?: boolean;
+    isLoading?: boolean;
+    errorMessage?: React.ReactNode;
+    placement?: AriaPlacement;
+    boldLabel?: boolean;
+    reserveErrorLine?: boolean;
+    placeholder?: string;
+    noOptionsMessage?: NoOptionsMessage;
+    maxVisibleItems?: number;
+} & Omit<AriaSelectProps<T, 'single'> | AriaComboBoxProps<T, 'single'>, 'errorMessage' | 'validate'>;
+export declare type CommonState<T extends object> = SelectState<T, 'single'> | SelectState<T, 'multiple'> | ComboBoxState<T>;

package/lib/utils/calculate-max-height-by-items.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+ */
+export declare const calculateMaxHeightByItems: (itemsCount: number, allowedMaxVisibleItems: number) => number;

package/lib/utils/calculate-max-height-by-items.js

@@ -0,0 +1,22 @@
+/**
+ * Calculate the max height of the list based on items count and allowedMaxVisibleItems.
+ * Instead of simply adding 0.5 to the allowedMaxVisibleItems, we process
+ * `itemsCount == allowedMaxVisibleItems + 1` differently.
+ *
+ * For allowedMaxVisibleItems={5}:
+ * - If items itemsCount <= 5: restrain by 5.5 items (to avoid scrollbar due to layout shifts)
+ * - If items itemsCount = 6: restrain by all 6.1 items (6 + 0.1 for group separators)
+ * - If items itemsCount > 6: restrain by 5.5 items
+ *
+ * Formula: max(5.5, min(itemsCount + 0.1, 6.1) - min(max(0, itemsCount - 6), 0.6))
+ */
+const calculateMaxHeightByItems = (itemsCount, allowedMaxVisibleItems) => {
+  const allowedFloor = Math.floor(allowedMaxVisibleItems);
+  const groupSeparatorsDelta = 0.1;
+  const partiallyVisiblePart = 0.5;
+  const upperLimit = Math.min(itemsCount + groupSeparatorsDelta, allowedFloor + 1 + groupSeparatorsDelta);
+  const delta = Math.min(Math.max(0, itemsCount - (allowedFloor + 1)), partiallyVisiblePart + groupSeparatorsDelta);
+  return Math.max(allowedFloor + partiallyVisiblePart, upperLimit - delta);
+};
+
+export { calculateMaxHeightByItems };

package/lib/utils/convert-options.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SelectOption, SelectOptionOrGroup } from '../types';
+export declare const convertOptions: (options: SelectOptionOrGroup[], virtualOptions: SelectOption[]) => JSX.Element[];

package/lib/utils/convert-options.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Section, Item } from 'react-stately';
+import { getOptionValue } from './get-option-value.js';
+import { getTextFromNodes } from './get-text-from-nodes.js';
+import { isOptionAGroup } from './is-option-a-group.js';
+import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
+
+const convertOptions = (options, virtualOptions) => [...options.map((item, index) => {
+  // Check if it's a group
+  if (isOptionAGroup(item)) {
+    const group = item;
+
+    if (!group.options || group.options.length === 0) {
+      return null;
+    } // Render as Section (with or without label)
+
+
+    const groupLabelText = group.label ? getTextFromNodes(group.label) : ''; // Use a special prefix that's unlikely to collide with user values
+
+    const sectionKey = `\0__rs_section_${index}_${groupLabelText}`;
+    return /*#__PURE__*/React.createElement(Section, {
+      key: sectionKey,
+      title: group.label,
+      "aria-label": groupLabelText || undefined
+    }, group.options.map(option => {
+      const key = getOptionValue(option);
+      return /*#__PURE__*/React.createElement(Item, {
+        key: key,
+        textValue: getTextFromNodes(option.label)
+      }, option.label);
+    }));
+  } // It's a single option
+
+
+  const option = item;
+  const key = getOptionValue(option);
+  return /*#__PURE__*/React.createElement(Item, {
+    key: key,
+    textValue: getTextFromNodes(option.label)
+  }, option.label);
+}), virtualOptions.length > 0 && /*#__PURE__*/React.createElement(Section, {
+  key: VIRTUAL_ITEMS_SECTION_KEY,
+  title: ''
+}, virtualOptions.map(option => {
+  const key = getOptionValue(option);
+  return /*#__PURE__*/React.createElement(Item, {
+    key: key,
+    textValue: getTextFromNodes(option.label)
+  }, option.label);
+}))].filter(Boolean);
+
+export { convertOptions };

package/lib/utils/convert-placement.d.ts

@@ -0,0 +1,3 @@
+import { type AriaPositionProps } from 'react-aria';
+import { Placement } from '../types';
+export declare const convertPlacement: (outsidePlacement: Placement) => AriaPositionProps['placement'];

package/lib/utils/convert-placement.js

@@ -0,0 +1,22 @@
+const convertPlacement = outsidePlacement => {
+  const placementMap = {
+    top: 'top',
+    'top-start': 'top start',
+    'top-end': 'top end',
+    bottom: 'bottom',
+    'bottom-start': 'bottom start',
+    'bottom-end': 'bottom end',
+    left: 'left',
+    'left-start': 'left top',
+    'left-end': 'left bottom',
+    right: 'right',
+    'right-start': 'right top',
+    'right-end': 'right bottom',
+    auto: null,
+    'auto-start': 'start',
+    'auto-end': 'end'
+  };
+  return placementMap[outsidePlacement] || 'bottom';
+};
+
+export { convertPlacement };

package/lib/utils/css-vars-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const extractPrimaryColors: (styles: CSSStyleDeclaration) => Record<string, string>;
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+export declare const extractThemeFromCss: (styles: CSSStyleDeclaration) => "dark" | "light";

package/lib/utils/css-vars-utils.js

@@ -0,0 +1,20 @@
+const PRIMARY_COLORS = ['--rs-color-primary-light-theme', '--rs-color-primary-dim-light-theme', '--rs-color-primary-fog-light-theme', '--rs-color-primary-t-dim-light-theme', '--rs-color-primary-t-fog-light-theme', '--rs-color-primary-dark-theme', '--rs-color-primary-dim-dark-theme', '--rs-color-primary-fog-dark-theme', '--rs-color-primary-t-dim-dark-theme', '--rs-color-primary-t-fog-dark-theme'];
+
+const extractPrimaryColors = styles => {
+  const colors = {};
+  PRIMARY_COLORS.forEach(varName => {
+    colors[varName] = styles.getPropertyValue(varName) || 'initial';
+  });
+  return colors;
+};
+/** Check out `@rescui/colors/src/public-api.p.css` file */
+
+
+const extractThemeFromCss = styles => {
+  const themeDark = parseInt(styles.getPropertyValue('--rs-theme-dark'), 10) || 0;
+  const themeFlip = parseInt(styles.getPropertyValue('--rs-theme-flip'), 10) || 0;
+  const themeDarkCoefficient = themeDark * (1 - themeFlip) + themeFlip * (1 - themeDark);
+  return themeDarkCoefficient === 1 ? 'dark' : 'light';
+};
+
+export { extractPrimaryColors, extractThemeFromCss };

package/lib/utils/get-empty-message.d.ts

@@ -0,0 +1,6 @@
+import type { NoOptionsMessage } from '../types';
+export declare function getEmptyMessage({ isLoading, isNothingFound, noOptionsMessage }: {
+    isLoading: boolean;
+    isNothingFound: boolean;
+    noOptionsMessage: NoOptionsMessage;
+}): string;

package/lib/utils/get-empty-message.js

@@ -0,0 +1,32 @@
+import { DEFAULT_NO_OPTIONS_MESSAGES } from '../constants.js';
+
+function isString(s) {
+  return Object.prototype.toString.call(s) === '[object String]';
+}
+
+function getEmptyMessage(_ref) {
+  let {
+    isLoading,
+    isNothingFound,
+    noOptionsMessage
+  } = _ref;
+  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;
+  }
+}
+
+export { getEmptyMessage };

package/lib/utils/get-option-value.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOption, Key } from '../types';
+export declare function getOptionValue(option?: SelectOption): Key | null;

package/lib/utils/get-option-value.js

@@ -0,0 +1,11 @@
+import { getTextFromNodes } from './get-text-from-nodes.js';
+
+function getOptionValue(option) {
+  if (!option) {
+    return null;
+  }
+
+  return typeof option.value === 'string' || typeof option.value === 'number' ? option.value : getTextFromNodes(option.label);
+}
+
+export { getOptionValue };

package/lib/utils/get-real-items-cnt.d.ts

@@ -0,0 +1,2 @@
+import type { ListState } from 'react-stately';
+export declare const getRealItemsCnt: <T extends object>(state: ListState<T>) => number;

package/lib/utils/get-real-items-cnt.js

@@ -0,0 +1,21 @@
+import { VIRTUAL_ITEMS_SECTION_KEY } from '../constants.js';
+
+const getRealItemsCnt = state => {
+  // Count total number of items, ignoring virtual items
+  return [...state.collection].reduce((count, item) => {
+    if (item.type === 'section' && item.key !== VIRTUAL_ITEMS_SECTION_KEY) {
+      const sectionChildren = [...state.collection.getChildren(item.key)];
+      const hasHeading = item.rendered !== null && item.rendered !== undefined; // Count heading (if present) + all options in the section
+
+      return count + (hasHeading ? 1 : 0) + sectionChildren.length;
+    }
+
+    if (item.type === 'item') {
+      return count + 1;
+    }
+
+    return count;
+  }, 0);
+};
+
+export { getRealItemsCnt };

package/lib/utils/get-text-from-nodes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const getTextFromNodes: (node: React.ReactNode, depth?: number) => string;

package/lib/utils/get-text-from-nodes.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const getTextFromNodes = function (node) {
+  var _node$type;
+
+  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 === null || node === void 0 || (_node$type = node.type) === null || _node$type === void 0 || (_node$type = _node$type.toString()) === null || _node$type === void 0 ? void 0 : _node$type.toLowerCase()) !== 'svg') {
+    return getTextFromNodes(node.props.children, depth + 1);
+  }
+
+  return '';
+};
+
+export { getTextFromNodes };

package/lib/utils/is-option-a-group.d.ts

@@ -0,0 +1,2 @@
+import type { SelectOptionOrGroup, SelectOptionsGroup, NativeSelectOptionOrGroup, NativeSelectOption } from '../types';
+export declare const isOptionAGroup: (optionOrGroup: SelectOptionOrGroup | NativeSelectOptionOrGroup) => optionOrGroup is SelectOptionsGroup | NativeSelectOption;

package/lib/utils/is-option-a-group.js

@@ -0,0 +1,5 @@
+const isOptionAGroup = optionOrGroup => {
+  return 'options' in optionOrGroup && typeof optionOrGroup.options !== 'undefined';
+};
+
+export { isOptionAGroup };

package/lib/utils/throttle.d.ts

@@ -0,0 +1 @@
+export declare function throttle<A extends unknown[], R>(func: (...args: A) => R, wait: number): (...args: A) => R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/select",
-  "version": "0.15.0",
+  "version": "0.15.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,13 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.26.0",
-    "@rescui/dropdown": "^0.9.4",
-    "@rescui/form-field": "^0.1.0",
-    "@rescui/menu": "^0.13.2",
-    "@rescui/tag": "^0.13.4",
-    "@rescui/use-resize-observer": "^0.3.0",
+    "@rescui/form-field": "0.1.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/tag": "0.13.5-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/use-resize-observer": "0.3.1-RUI-280-Update-select-component-e516591ed.166+e516591ed",
     "classnames": "^2.2.6",
-    "scroll-into-view-if-needed": "2.2.20"
+    "react-aria": "^3.47.0",
+    "react-stately": "^3.45.0"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.6.0",
@@ -30,10 +29,10 @@
     "react": ">=16.8.0 <20"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.3.0",
-    "@rescui/scripts": "^0.5.1",
-    "@rescui/typography": "^0.24.4",
-    "@rescui/visual-regression": "^0.1.4",
+    "@rescui/colors": "0.3.1-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/scripts": "0.5.1",
+    "@rescui/typography": "0.24.5-RUI-280-Update-select-component-e516591ed.54+e516591ed",
+    "@rescui/visual-regression": "0.1.4",
     "sniffr": "^1.2.0"
   },
   "scripts": {
@@ -41,5 +40,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "1c29c8940bcec78d637ea6070ee8a63c258c8e89"
+  "gitHead": "e516591ed7fc1a8ce27afc90612f7eea334c7d29"
 }

package/lib/key-codes.d.ts

@@ -1,7 +0,0 @@
-export declare const ARROW_UP = "ArrowUp";
-export declare const ARROW_DOWN = "ArrowDown";
-export declare const SPACE = " ";
-export declare const ESCAPE = "Escape";
-export declare const ENTER = "Enter";
-export declare const TAB = "Tab";
-export declare const BACKSPACE = "Backspace";

package/lib/key-codes.js

@@ -1,8 +0,0 @@
-const ARROW_UP = 'ArrowUp';
-const ARROW_DOWN = 'ArrowDown';
-const SPACE = ' ';
-const ESCAPE = 'Escape';
-const ENTER = 'Enter';
-const TAB = 'Tab';
-const BACKSPACE = 'Backspace';
-export { ARROW_DOWN, ARROW_UP, BACKSPACE, ENTER, ESCAPE, SPACE, TAB };

package/lib/parts/common-select.p.module.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "sizeS": "_sizeS_18ip9hg_3",
-  "sizeM": "_sizeM_18ip9hg_6",
-  "sizeL": "_sizeL_18ip9hg_9",
-  "menu": "_menu_18ip9hg_13",
-  "menuSizeS": "_menuSizeS_18ip9hg_26",
-  "menuSizeM": "_menuSizeM_18ip9hg_30",
-  "menuSizeL": "_menuSizeL_18ip9hg_34",
-  "withGroupsLabel": "_withGroupsLabel_18ip9hg_40",
-  "lastOption": "_lastOption_18ip9hg_39",
-  "divider": "_divider_18ip9hg_45",
-  "checkIcon": "_checkIcon_18ip9hg_51",
-  "observable": "_observable_18ip9hg_56"
-};
-export { styles as default };

package/lib/parts/form-trigger.p.module.css.js

@@ -1,15 +0,0 @@
-var styles = {
-  "themeLight": "_themeLight_14qtra6_6",
-  "themeDark": "_themeDark_14qtra6_9",
-  "sizeS": "_sizeS_14qtra6_13",
-  "sizeM": "_sizeM_14qtra6_16",
-  "sizeL": "_sizeL_14qtra6_19",
-  "main": "_main_14qtra6_23",
-  "label": "_label_14qtra6_27",
-  "disabled": "_disabled_14qtra6_33",
-  "footer": "_footer_14qtra6_38",
-  "errorMessage": "_errorMessage_14qtra6_45",
-  "error": "_error_14qtra6_45",
-  "note": "_note_14qtra6_54"
-};
-export { styles as default };

package/lib/parts/multiselect.d.ts

@@ -1,86 +0,0 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { SelectOptionOrGroup, SelectOption, SelectSize, SelectMode, NoOptionsMessage } from '../types';
-export interface MultiselectProps {
-    /**
-     * Additional class name
-     */
-    className?: string;
-    id?: string;
-    /**
-     * Array of options
-     */
-    options: SelectOptionOrGroup[];
-    /**
-     * Is Multiselect preserve single string
-     */
-    isSingleLine?: boolean;
-    /**
-     * Is Multiselect supports clear the value
-     */
-    isClearable?: boolean;
-    /**
-     * Is Multiselect has been disabled
-     */
-    isDisabled?: boolean;
-    /**
-     *  Is loader displayed inside select
-     */
-    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;
-    /**
-     * Value of the select
-     */
-    value: SelectOption[];
-    /**
-     * Change value callback. `value => ...`
-     */
-    onChange?: (newValue: SelectOption[]) => void;
-    /**
-     * 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 upper then Multiselect element (use with forms)
-     */
-    label?: React.ReactNode;
-    /**
-     * Placement of dropdown element
-     */
-    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';
-    /**
-     * Note element below then Multiselect element (use with forms)
-     */
-    note?: React.ReactNode;
-    /**
-     * Text to display when there are no options
-     */
-    noOptionsMessage?: NoOptionsMessage;
-    /**
-     * Input name attribute
-     */
-    name?: string;
-    boldLabel?: boolean;
-}
-declare const Multiselect: React.FC<MultiselectProps>;
-export default Multiselect;