@infomaximum/ui-kit 0.12.11 → 0.13.0

package/dist/components/Select/Select.types.d.ts

@@ -1,89 +1,10 @@
-import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
-import { SelectOptionInterface, SelectOptionProps, SelectOptionValue } from './components/SelectOption/SelectOption.types';
-import { Theme } from '../../themes';
-import { Interpolation } from '@emotion/react';
-import { DropdownMatchSelectWidthType, DropdownStyles } from './components/SelectOptionList/SelectOptionList.types';
-import { NarrowedElement, ReferenceType } from '@floating-ui/react';
-export type SelectStatus = "default" | "error";
-export type VariantType = "outlined" | "borderless";
-export type ModeType = "single" | "multiple";
-export type maxTagCountType = number | "responsive";
+import { SelectOptionInterface, SelectOptionStyles } from './components/SelectOption/SelectOption.types';
+import { BaseSelectProps, BaseSelectStyles } from '../BaseSelect/BaseSelect.types';
 export interface SelectStyles {
-    dropdownStyle?: DropdownStyles;
-    wrapper?: (theme: Theme) => Interpolation;
-    body?: (theme: Theme) => Interpolation;
-    prefixAndContent?: (theme: Theme) => Interpolation;
-    content?: (theme: Theme) => Interpolation;
-    placeholder?: (theme: Theme) => Interpolation;
-    prefix?: (theme: Theme) => Interpolation;
-    suffixIcon?: (theme: Theme) => Interpolation;
-    cleanIcon?: (theme: Theme) => Interpolation;
-    drawerIcon?: (theme: Theme) => Interpolation;
+    baseSelectStyles?: BaseSelectStyles;
+    optionStyles?: SelectOptionStyles;
 }
-export interface SelectProps {
-    options?: SelectOptionInterface[];
-    mode?: ModeType;
-    variant?: VariantType;
-    defaultValue?: SelectOptionValue | SelectOptionValue[];
-    defaultOpen?: boolean;
-    value?: SelectOptionValue | SelectOptionValue[];
-    open?: boolean;
-    defaultActiveFirstOption?: boolean;
-    placeholder?: string;
-    dropdownMaxHeight?: number;
-    dropdownMinWidth?: number;
-    allowClear?: boolean;
-    autoFocus?: boolean;
-    prefix?: ReactNode;
-    suffixIcon?: ReactNode;
-    status?: SelectStatus;
-    disabled?: boolean;
-    dropdownPrompt?: string;
-    loading?: boolean;
-    dropdownClassName?: string;
-    dropdownMatchSelectWidth?: DropdownMatchSelectWidthType;
-    placement?: PlacementType;
-    virtual?: boolean;
-    emptyContent?: ReactNode;
-    showSearch?: boolean;
-    optionFilterProp?: string;
-    optionLabelProp?: string;
-    filterOption?: boolean | ((inputValue: string, option: SelectOptionInterface) => boolean);
-    searchValue?: string;
-    notFoundContent?: ReactNode;
-    drawer?: boolean;
-    filterSort?: (optionA: SelectOptionInterface, optionB: SelectOptionInterface, searchValue: string) => number;
+export type SelectOptionValue = string | number;
+export interface SelectProps extends Omit<BaseSelectProps<SelectOptionInterface, SelectOptionValue>, "renderDropdownItem" | "filterOptions" | "getOptionByValue" | "virtualizerEstimateSize" | "onKeyControl" | "currentSelectingIndex" | "getCurrentSelectingValue" | "styles"> {
     styles?: SelectStyles;
-    autoClearSearchValue?: boolean;
-    maxTagCount?: maxTagCountType;
-    maxTagPlaceholder?: ((omittedValues: SelectOptionInterface[]) => ReactNode) | ReactNode;
-    maxTagTextLength?: number;
-    dropdownRender?: (originNode: ReactNode) => ReactNode;
-    optionRender?: (option: SelectOptionProps) => ReactNode;
-    labelRender?: (props: LabelInValueType) => ReactNode;
-    tagRender?: (label: string) => ReactNode;
-    onFocus?: (event: FocusEvent) => void;
-    onBlur?: (event: FocusEvent) => void;
-    onChange?: (value: SelectOptionValue[], option: SelectOptionInterface[]) => void;
-    onClear?: () => void;
-    onDropdownVisibleChange?: () => void;
-    onInputKeyDown?: (event: KeyboardEvent) => void;
-    onSelect?: (value: SelectOptionValue, option: SelectOptionInterface) => void;
-    getPopupContainer?: () => HTMLElement;
-    onSearch?: (searchValue: string) => void;
-    onDeselect?: (value: SelectOptionValue) => void;
 }
-export interface LabelInValueType {
-    label: ReactNode;
-    value: SelectOptionValue;
-}
-export interface Refs<RT extends ReferenceType = ReferenceType> {
-    reference: React.MutableRefObject<RT | null>;
-    floating: React.MutableRefObject<HTMLElement | null>;
-    domReference: React.MutableRefObject<NarrowedElement<RT> | null>;
-    setReference(node: RT | null): void;
-    setFloating(node: HTMLElement | null): void;
-    setPositionReference(node: RT | null): void;
-}
-export type PlacementType = "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
-export type UseSearchProps = Required<Pick<SelectProps, "options" | "optionFilterProp" | "filterOption">> & Pick<SelectProps, "onSearch" | "searchValue" | "filterSort">;

package/dist/components/Select/Select.utils.d.ts

@@ -1,10 +1,2 @@
-import { Placement } from '@floating-ui/react';
-import { maxTagCountType, PlacementType } from './Select.types';
-import { SelectOptionInterface, SelectOptionValue } from './components/SelectOption/SelectOption.types';
-export declare const additionalElements: string[];
-export declare const convertSelectPlacement: (placement: PlacementType) => Placement;
+import { SelectOptionInterface } from './components/SelectOption/SelectOption.types';
 export declare const getNextOption: (currentIndex: number, options: SelectOptionInterface[], isDecrement?: boolean) => number | null;
-export declare const isKeyOfObject: <T extends object>(obj: T, key: string | number | symbol) => key is keyof T;
-export declare const getLabelByValue: (value: SelectOptionValue, optionsMap: Map<SelectOptionValue, SelectOptionInterface>, optionLabelProp: string) => string | undefined;
-export declare const getLabel: (values: SelectOptionValue[], optionsMap: Map<SelectOptionValue, SelectOptionInterface>, optionLabelProp: string) => string[];
-export declare const getVisibleLabels: (labels: string[], values: SelectOptionValue[], maxTagCount: maxTagCountType | undefined, isItemHidden: Map<string | number, boolean>) => string[];

package/dist/components/Select/Select.utils.js

@@ -1,14 +1,3 @@
-import { isUndefined, isNumber } from "lodash-es";
-const additionalElements = ["tag-placeholder", "search-input", "clean-button"];
-const placementDictionary = {
-  bottomLeft: "bottom-start",
-  bottomRight: "bottom-end",
-  topLeft: "top-start",
-  topRight: "top-end"
-};
-const convertSelectPlacement = (placement) => {
-  return placementDictionary[placement];
-};
 const getNextOption = (currentIndex, options, isDecrement = false) => {
   const nextIndex = isDecrement ? currentIndex - 1 : currentIndex + 1;
   if (nextIndex < 0 || nextIndex >= options.length) {
@@ -20,40 +9,6 @@ const getNextOption = (currentIndex, options, isDecrement = false) => {
   }
   return getNextOption(nextIndex, options, isDecrement);
 };
-const isKeyOfObject = (obj, key) => {
-  return key in obj;
-};
-const getLabelByValue = (value, optionsMap, optionLabelProp) => {
-  var _a;
-  const option = optionsMap.get(value);
-  if (isUndefined(option)) {
-    return void 0;
-  }
-  return isKeyOfObject(option, optionLabelProp) ? (_a = option[optionLabelProp]) == null ? void 0 : _a.toString() : void 0;
-};
-const getLabel = (values, optionsMap, optionLabelProp) => {
-  return values.map((value) => getLabelByValue(value, optionsMap, optionLabelProp) ?? value.toString());
-};
-const getVisibleLabels = (labels, values, maxTagCount, isItemHidden) => {
-  if (isUndefined(maxTagCount)) {
-    return labels;
-  }
-  if (isNumber(maxTagCount)) {
-    return labels.slice(0, maxTagCount);
-  }
-  return values.reduce((acc, value, index) => {
-    if (!isItemHidden.get(value)) {
-      return [...acc, labels[index]];
-    }
-    return acc;
-  }, []);
-};
 export {
-  additionalElements,
-  convertSelectPlacement,
-  getLabel,
-  getLabelByValue,
-  getNextOption,
-  getVisibleLabels,
-  isKeyOfObject
+  getNextOption
 };

package/dist/components/Select/components/SelectOption/SelectOption.js

@@ -2,22 +2,27 @@ import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { memo } from "react";
 import { CheckOutlined } from "@infomaximum/icons";
 import { getSelectOptionStyle } from "./SelectOption.styles.js";
+import { useBaseSelectContext } from "../../../BaseSelect/contexts/BaseSelectContext.js";
 import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
 const SelectOption = memo(({
   title,
   value,
-  selected = false,
   disabled = false,
   icon,
-  index,
-  isSelecting,
-  mode,
-  setValue,
-  closeOptionList,
-  returnFocusToWrapper,
-  removeValue
+  styles
 }) => {
+  var _a, _b, _c, _d;
   const theme = useTheme();
+  const {
+    mode,
+    setValue,
+    closeOptionList,
+    removeValue,
+    currentValue,
+    getCurrentSelectingValue
+  } = useBaseSelectContext();
+  const isSelecting = getCurrentSelectingValue() === value;
+  const selected = currentValue.includes(value);
   const selectOptionStyle = getSelectOptionStyle(selected, disabled, isSelecting);
   const clickHandle = () => {
     if (disabled) {
@@ -27,27 +32,19 @@ const SelectOption = memo(({
       if (selected) {
         removeValue(value);
       } else {
-        setValue(value, index);
+        setValue(value);
       }
-      returnFocusToWrapper();
       return;
     }
-    setValue(value, index);
+    setValue(value);
     closeOptionList();
-    returnFocusToWrapper();
   };
-  const keyDownHandler = (e) => {
-    e.stopPropagation();
-    if (e.key === "Enter") {
-      clickHandle();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { css: selectOptionStyle.wrapper(theme), onClick: clickHandle, onKeyDown: keyDownHandler, title, children: [
-    /* @__PURE__ */ jsxs("span", { css: selectOptionStyle.content(theme), children: [
-      icon && /* @__PURE__ */ jsx("span", { css: selectOptionStyle.icon(theme), children: icon }),
-      /* @__PURE__ */ jsx("span", { css: selectOptionStyle.text, children: title })
+  return /* @__PURE__ */ jsxs("div", { css: [selectOptionStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUNRIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0T3B0aW9uOiBGQzxTZWxlY3RPcHRpb25Qcm9wcz4gPSBtZW1vKFxuICAoeyB0aXRsZSwgdmFsdWUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIHN0eWxlcyB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgICB1c2VCYXNlU2VsZWN0Q29udGV4dDxTZWxlY3RPcHRpb25WYWx1ZT4oKTtcblxuICAgIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICAgIGNvbnN0IHNlbGVjdE9wdGlvblN0eWxlID0gZ2V0U2VsZWN0T3B0aW9uU3R5bGUoc2VsZWN0ZWQsIGRpc2FibGVkLCBpc1NlbGVjdGluZyk7XG5cbiAgICBjb25zdCBjbGlja0hhbmRsZSA9ICgpID0+IHtcbiAgICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGlmIChtb2RlID09PSBcIm11bHRpcGxlXCIpIHtcbiAgICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgY2xvc2VPcHRpb25MaXN0KCk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZX1cbiAgICAgICAgdGl0bGU9e3RpdGxlPy50b1N0cmluZygpfVxuICAgICAgPlxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgICAge2ljb24gJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj59XG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e3RpdGxlfTwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuXG4gICAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], onClick: clickHandle, title: title == null ? void 0 : title.toString(), children: [
+    /* @__PURE__ */ jsxs("span", { css: [selectOptionStyle.content(theme), (_b = styles == null ? void 0 : styles.content) == null ? void 0 : _b.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkNjIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyB0eXBlIEZDLCBtZW1vIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnR5cGVzXCI7XG5pbXBvcnQgeyBDaGVja091dGxpbmVkIH0gZnJvbSBcIkBpbmZvbWF4aW11bS9pY29uc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uU3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb24uc3R5bGVzXCI7XG5pbXBvcnQgeyB1c2VUaGVtZSB9IGZyb20gXCJob29rcy91c2VUaGVtZVwiO1xuaW1wb3J0IHsgdXNlQmFzZVNlbGVjdENvbnRleHQgfSBmcm9tIFwiY29tcG9uZW50cy9CYXNlU2VsZWN0L2NvbnRleHRzL0Jhc2VTZWxlY3RDb250ZXh0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvblZhbHVlIH0gZnJvbSBcImNvbXBvbmVudHMvU2VsZWN0L1NlbGVjdC50eXBlc1wiO1xuXG5leHBvcnQgY29uc3QgU2VsZWN0T3B0aW9uOiBGQzxTZWxlY3RPcHRpb25Qcm9wcz4gPSBtZW1vKFxuICAoeyB0aXRsZSwgdmFsdWUsIGRpc2FibGVkID0gZmFsc2UsIGljb24sIHN0eWxlcyB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgeyBtb2RlLCBzZXRWYWx1ZSwgY2xvc2VPcHRpb25MaXN0LCByZW1vdmVWYWx1ZSwgY3VycmVudFZhbHVlLCBnZXRDdXJyZW50U2VsZWN0aW5nVmFsdWUgfSA9XG4gICAgICB1c2VCYXNlU2VsZWN0Q29udGV4dDxTZWxlY3RPcHRpb25WYWx1ZT4oKTtcblxuICAgIGNvbnN0IGlzU2VsZWN0aW5nID0gZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlKCkgPT09IHZhbHVlO1xuICAgIGNvbnN0IHNlbGVjdGVkID0gY3VycmVudFZhbHVlLmluY2x1ZGVzKHZhbHVlKTtcblxuICAgIGNvbnN0IHNlbGVjdE9wdGlvblN0eWxlID0gZ2V0U2VsZWN0T3B0aW9uU3R5bGUoc2VsZWN0ZWQsIGRpc2FibGVkLCBpc1NlbGVjdGluZyk7XG5cbiAgICBjb25zdCBjbGlja0hhbmRsZSA9ICgpID0+IHtcbiAgICAgIGlmIChkaXNhYmxlZCkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIGlmIChtb2RlID09PSBcIm11bHRpcGxlXCIpIHtcbiAgICAgICAgaWYgKHNlbGVjdGVkKSB7XG4gICAgICAgICAgcmVtb3ZlVmFsdWUodmFsdWUpO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgc2V0VmFsdWUodmFsdWUpO1xuICAgICAgY2xvc2VPcHRpb25MaXN0KCk7XG4gICAgfTtcblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgICBvbkNsaWNrPXtjbGlja0hhbmRsZX1cbiAgICAgICAgdGl0bGU9e3RpdGxlPy50b1N0cmluZygpfVxuICAgICAgPlxuICAgICAgICA8c3BhbiBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS5jb250ZW50KHRoZW1lKSwgc3R5bGVzPy5jb250ZW50Py4odGhlbWUpXX0+XG4gICAgICAgICAge2ljb24gJiYgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PntpY29ufTwvc3Bhbj59XG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUudGV4dCwgc3R5bGVzPy50ZXh0XX0+e3RpdGxlfTwvc3Bhbj5cbiAgICAgICAgPC9zcGFuPlxuXG4gICAgICAgIHtzZWxlY3RlZCAmJiAoXG4gICAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuaWNvbih0aGVtZSksIHN0eWxlcz8uaWNvbj8uKHRoZW1lKV19PlxuICAgICAgICAgICAgPENoZWNrT3V0bGluZWQgLz5cbiAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICl9XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG4pO1xuIl19 */"], children: [
+      icon && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_c = styles == null ? void 0 : styles.icon) == null ? void 0 : _c.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEN5QiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: icon }),
+      /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.text, styles == null ? void 0 : styles.text, process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0NnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: title })
     ] }),
-    selected && /* @__PURE__ */ jsx("span", { css: selectOptionStyle.icon(theme), children: /* @__PURE__ */ jsx(CheckOutlined, {}) })
+    selected && /* @__PURE__ */ jsx("span", { css: [selectOptionStyle.icon(theme), (_d = styles == null ? void 0 : styles.icon) == null ? void 0 : _d.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:SelectOption;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbURnQiIsImZpbGUiOiIvYnVpbGRzL2Zyb250ZW5kL2xpYnMvdWkta2l0L3NyYy9jb21wb25lbnRzL1NlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbi9TZWxlY3RPcHRpb24udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbyB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25Qcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgQ2hlY2tPdXRsaW5lZCB9IGZyb20gXCJAaW5mb21heGltdW0vaWNvbnNcIjtcbmltcG9ydCB7IGdldFNlbGVjdE9wdGlvblN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uLnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IHVzZUJhc2VTZWxlY3RDb250ZXh0IH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9jb250ZXh0cy9CYXNlU2VsZWN0Q29udGV4dFwiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25WYWx1ZSB9IGZyb20gXCJjb21wb25lbnRzL1NlbGVjdC9TZWxlY3QudHlwZXNcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbjogRkM8U2VsZWN0T3B0aW9uUHJvcHM+ID0gbWVtbyhcbiAgKHsgdGl0bGUsIHZhbHVlLCBkaXNhYmxlZCA9IGZhbHNlLCBpY29uLCBzdHlsZXMgfSkgPT4ge1xuICAgIGNvbnN0IHRoZW1lID0gdXNlVGhlbWUoKTtcblxuICAgIGNvbnN0IHsgbW9kZSwgc2V0VmFsdWUsIGNsb3NlT3B0aW9uTGlzdCwgcmVtb3ZlVmFsdWUsIGN1cnJlbnRWYWx1ZSwgZ2V0Q3VycmVudFNlbGVjdGluZ1ZhbHVlIH0gPVxuICAgICAgdXNlQmFzZVNlbGVjdENvbnRleHQ8U2VsZWN0T3B0aW9uVmFsdWU+KCk7XG5cbiAgICBjb25zdCBpc1NlbGVjdGluZyA9IGdldEN1cnJlbnRTZWxlY3RpbmdWYWx1ZSgpID09PSB2YWx1ZTtcbiAgICBjb25zdCBzZWxlY3RlZCA9IGN1cnJlbnRWYWx1ZS5pbmNsdWRlcyh2YWx1ZSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25TdHlsZSA9IGdldFNlbGVjdE9wdGlvblN0eWxlKHNlbGVjdGVkLCBkaXNhYmxlZCwgaXNTZWxlY3RpbmcpO1xuXG4gICAgY29uc3QgY2xpY2tIYW5kbGUgPSAoKSA9PiB7XG4gICAgICBpZiAoZGlzYWJsZWQpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBpZiAobW9kZSA9PT0gXCJtdWx0aXBsZVwiKSB7XG4gICAgICAgIGlmIChzZWxlY3RlZCkge1xuICAgICAgICAgIHJlbW92ZVZhbHVlKHZhbHVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICBzZXRWYWx1ZSh2YWx1ZSk7XG4gICAgICAgIH1cblxuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIHNldFZhbHVlKHZhbHVlKTtcbiAgICAgIGNsb3NlT3B0aW9uTGlzdCgpO1xuICAgIH07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdlxuICAgICAgICBjc3M9e1tzZWxlY3RPcHRpb25TdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgb25DbGljaz17Y2xpY2tIYW5kbGV9XG4gICAgICAgIHRpdGxlPXt0aXRsZT8udG9TdHJpbmcoKX1cbiAgICAgID5cbiAgICAgICAgPHNwYW4gY3NzPXtbc2VsZWN0T3B0aW9uU3R5bGUuY29udGVudCh0aGVtZSksIHN0eWxlcz8uY29udGVudD8uKHRoZW1lKV19PlxuICAgICAgICAgIHtpY29uICYmIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT57aWNvbn08L3NwYW4+fVxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLnRleHQsIHN0eWxlcz8udGV4dF19Pnt0aXRsZX08L3NwYW4+XG4gICAgICAgIDwvc3Bhbj5cblxuICAgICAgICB7c2VsZWN0ZWQgJiYgKFxuICAgICAgICAgIDxzcGFuIGNzcz17W3NlbGVjdE9wdGlvblN0eWxlLmljb24odGhlbWUpLCBzdHlsZXM/Lmljb24/Lih0aGVtZSldfT5cbiAgICAgICAgICAgIDxDaGVja091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfVxuKTtcbiJdfQ== */"], children: /* @__PURE__ */ jsx(CheckOutlined, {}) })
   ] });
 });
 export {

package/dist/components/Select/components/SelectOption/SelectOption.styles.js

@@ -1,4 +1,4 @@
-import { getSelectTokens } from "../../Select.tokens.js";
+import { getSelectTokens } from "../../../BaseSelect/BaseSelect.tokens.js";
 const getColor = (selectTokens, selected, disabled) => {
   if (disabled) {
     return selectTokens.selectOptionTextDisabled;

package/dist/components/Select/components/SelectOption/SelectOption.types.d.ts

@@ -1,22 +1,20 @@
-import { ModeType } from '../../Select.types';
-import { ReactNode } from 'react';
-export type SelectOptionValue = string | number;
-export interface SelectOptionInterface {
-    value: SelectOptionValue;
-    title: string;
-    icon?: ReactNode;
-    disabled?: boolean;
+import { Interpolation } from '@emotion/react';
+import { BaseSelectOptionInterface } from '../../../BaseSelect/BaseSelect.types';
+import { SelectOptionValue } from '../../../Select/Select.types';
+import { Theme } from 'themes';
+export interface SelectOptionStyles {
+    wrapper?: (theme: Theme) => Interpolation;
+    content?: (theme: Theme) => Interpolation;
+    text?: Interpolation;
+    icon?: (theme: Theme) => Interpolation;
+}
+export interface SelectOptionInterface extends BaseSelectOptionInterface<SelectOptionValue> {
     className?: string;
 }
 export interface SelectOptionCallbacks {
     setValue(value: SelectOptionValue, index: number): void;
     closeOptionList(): void;
 }
-export interface SelectOptionProps extends SelectOptionInterface, SelectOptionCallbacks {
-    selected: boolean;
-    index: number;
-    isSelecting: boolean;
-    mode: ModeType;
-    returnFocusToWrapper: () => void;
-    removeValue: (removeValue: SelectOptionValue) => void;
+export interface SelectOptionProps extends SelectOptionInterface {
+    styles?: SelectOptionStyles;
 }

package/dist/components/Select/hooks/useKeyControl.d.ts

@@ -1,7 +1,11 @@
 import { KeyboardEvent } from 'react';
-import { SelectOptionInterface, SelectOptionValue } from '../components/SelectOption/SelectOption.types';
-export declare const useKeyControl: (currentValue: SelectOptionValue[], options: SelectOptionInterface[], optionsMap: Map<SelectOptionValue, SelectOptionInterface>) => {
+import { SelectOptionInterface } from '../components/SelectOption/SelectOption.types';
+import { SelectOptionValue } from '../Select.types';
+export declare const useKeyControl: (options: SelectOptionInterface[], onDropdownVisibleChange: (() => void) | undefined, onChange: ((value: SelectOptionValue[], option: SelectOptionInterface[]) => void) | undefined, onSearch: ((searchValue: string) => void) | undefined) => {
     currentSelectingIndex: number;
-    setCurrentSelectingIndex: import('react').Dispatch<import('react').SetStateAction<number>>;
     onKeyControl: (e: KeyboardEvent) => void;
+    handleDropdownVisibleChange: () => void;
+    handleChange: (value: SelectOptionValue[], option: SelectOptionInterface[]) => void;
+    handleSearch: (searchValue: string) => void;
+    getCurrentSelectingValue: () => SelectOptionValue | null;
 };

package/dist/components/Select/hooks/useKeyControl.js

@@ -1,15 +1,16 @@
-import { useState, useEffect, useCallback } from "react";
-import { useDefaultSelectIndex } from "./useDefaultSelectIndex.js";
-import { getNextOption } from "../Select.utils.js";
+import { useState, useCallback } from "react";
 import { isNull } from "lodash-es";
-const useKeyControl = (currentValue, options, optionsMap) => {
-  const defaultSelectedIndex = useDefaultSelectIndex(currentValue, options, optionsMap);
-  const [currentSelectingIndex, setCurrentSelectingIndex] = useState(defaultSelectedIndex);
-  useEffect(() => {
-    if (currentSelectingIndex !== defaultSelectedIndex) {
-      setCurrentSelectingIndex(defaultSelectedIndex);
+import { getNextOption } from "../Select.utils.js";
+const useKeyControl = (options, onDropdownVisibleChange, onChange, onSearch) => {
+  const [currentStartingPosition, setCurrentStartingPosition] = useState(0);
+  const [currentSelectingIndex, setCurrentSelectingIndex] = useState(0);
+  const [isKeyControl, setIsControl] = useState(false);
+  const getCurrentSelectingValue = useCallback(() => {
+    if (!isKeyControl) {
+      return null;
     }
-  }, [currentSelectingIndex, defaultSelectedIndex, options]);
+    return options[currentSelectingIndex].value;
+  }, [currentSelectingIndex, isKeyControl, options]);
   const setNextIndex = useCallback((nextItemIndex) => {
     if (isNull(nextItemIndex)) {
       return;
@@ -18,18 +19,52 @@ const useKeyControl = (currentValue, options, optionsMap) => {
   }, []);
   const onKeyControl = useCallback((e) => {
     if (e.key === "ArrowDown") {
+      if (!isKeyControl) {
+        setIsControl(true);
+        return;
+      }
       const nextItemIndex = getNextOption(currentSelectingIndex, options);
       setNextIndex(nextItemIndex);
     }
     if (e.key === "ArrowUp") {
+      if (!isKeyControl) {
+        setIsControl(true);
+        return;
+      }
       const nextItemIndex = getNextOption(currentSelectingIndex, options, true);
       setNextIndex(nextItemIndex);
     }
-  }, [currentSelectingIndex, options, setNextIndex]);
+  }, [currentSelectingIndex, isKeyControl, options, setNextIndex]);
+  const handleSearch = useCallback((searchValue) => {
+    onSearch == null ? void 0 : onSearch(searchValue);
+    setCurrentStartingPosition(0);
+    setCurrentSelectingIndex(0);
+  }, [onSearch]);
+  const handleDropdownVisibleChange = useCallback(() => {
+    onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange();
+    setIsControl(false);
+    setCurrentSelectingIndex(currentStartingPosition);
+  }, [currentStartingPosition, onDropdownVisibleChange, setCurrentSelectingIndex]);
+  const handleChange = useCallback((value, option) => {
+    onChange == null ? void 0 : onChange(value, option);
+    const lastValueElementIndex = value.length - 1;
+    if (lastValueElementIndex < 0) {
+      setCurrentStartingPosition(0);
+      return;
+    }
+    const lastValue = value[lastValueElementIndex];
+    const lastValueOptionIndex = options.findIndex((item) => item.value === lastValue);
+    const newStartingIndex = lastValueOptionIndex === -1 ? 0 : lastValueOptionIndex;
+    setCurrentStartingPosition(newStartingIndex);
+    setCurrentSelectingIndex(newStartingIndex);
+  }, [onChange, options]);
   return {
     currentSelectingIndex,
-    setCurrentSelectingIndex,
-    onKeyControl
+    onKeyControl,
+    handleDropdownVisibleChange,
+    handleChange,
+    handleSearch,
+    getCurrentSelectingValue
   };
 };
 export {

package/dist/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TreeSelectProps } from './TreeSelect.types';
+export declare const TreeSelect: FC<import('react').PropsWithChildren<TreeSelectProps>>;

package/dist/components/TreeSelect/TreeSelect.js

@@ -0,0 +1,189 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { memo, useState, useCallback, useMemo } from "react";
+import { withThemeProvider } from "../../hocs/withThemeProvider.js";
+import { BaseSelect } from "../BaseSelect/BaseSelect.js";
+import { TreeSelectOption } from "./components/TreeSelectOption/TreeSelectOption.js";
+import { getDefaultKeysByDefaultValues, filterItems } from "./TreeSelect.utils.js";
+import { useNodeDataMap } from "./hooks/useTreeData.js";
+import { treeSelectContext } from "./contexts/treeSelectContext.js";
+import { isFunction, isNumber } from "lodash-es";
+import { useElementSizesController, DEFAULT_ELEMENT_SIZE } from "./hooks/useElementSizesController.js";
+import { DownOutlined } from "@infomaximum/icons";
+import { useExtendController } from "./hooks/useExtendController.js";
+import { useAsyncLoading } from "./hooks/useAsyncLoading.js";
+import { useKeyControl } from "./hooks/useKeyControl.js";
+import { useTreeCheckable } from "./hooks/useTreeCheckable.js";
+import { LoadingOutlined } from "../../icons/icons/LoadingOutlined.js";
+const TreeSelectComponent = memo(({
+  allowClear = false,
+  autoClearSearchValue = true,
+  autoFocus = false,
+  disabled = false,
+  dropdownMatchSelectWidth = true,
+  dropdownMaxHeight = 414,
+  dropdownMinWidth = 120,
+  getPopupContainer = () => document.body,
+  loading = false,
+  mode = "single",
+  placement = "bottomLeft",
+  showSearch = mode === "single" ? false : true,
+  suffixIcon = /* @__PURE__ */ jsx(DownOutlined, {}),
+  variant = "outlined",
+  virtual = true,
+  value,
+  open,
+  placeholder,
+  filterTreeNode = true,
+  treeNodeFilterProp = "value",
+  treeNodeLabelProp = "title",
+  treeCheckable = false,
+  showCheckedStrategy = "child",
+  treeData = [],
+  treeDefaultExpandAll = false,
+  treeDefaultExpandedKeys = [],
+  treeExpandedKeys,
+  treeLoadedKeys = [],
+  styles,
+  defaultValue,
+  onDropdownVisibleChange,
+  onChange,
+  onSearch,
+  onTreeExpand,
+  onExpandSwitcherClick,
+  loadData,
+  onDeselect,
+  ...otherProps
+}) => {
+  const isAsyncLoading = isFunction(loadData);
+  const [AsyncTreeData, setAsyncTreeData] = useState(treeData);
+  const currentTreeData = isAsyncLoading ? AsyncTreeData : treeData;
+  const {
+    nodeDataMap,
+    treeNodeMap,
+    leafChildrenKeys,
+    allParentKeys
+  } = useNodeDataMap(currentTreeData);
+  const {
+    elementSizes,
+    changeElementSize
+  } = useElementSizesController(currentTreeData);
+  const {
+    loadingKeys,
+    loadChildrenNodes
+  } = useAsyncLoading(treeLoadedKeys, nodeDataMap, setAsyncTreeData, loadData);
+  const {
+    expandedKeys,
+    onSwitcherClick,
+    handleExpandSearch
+  } = useExtendController({
+    allParentKeys,
+    treeDefaultExpandAll,
+    treeDefaultExpandedKeys,
+    treeExpandedKeys,
+    treeNodeMap,
+    onTreeExpand,
+    onExpandSwitcherClick,
+    loadData,
+    loadChildrenNodes,
+    onSearch
+  });
+  const {
+    currentSelectingIndex,
+    onKeyControl,
+    handleChange,
+    handleSearch,
+    handleDropdownVisibleChange,
+    getCurrentSelectingKey
+  } = useKeyControl(treeData, expandedKeys, treeNodeMap, onDropdownVisibleChange, onChange, handleExpandSearch);
+  const {
+    checkedKeys,
+    onCheckableClick
+  } = useTreeCheckable(nodeDataMap, treeNodeMap, showCheckedStrategy, isAsyncLoading, onDeselect);
+  const defaultKeys = getDefaultKeysByDefaultValues(defaultValue, treeData);
+  const handleKeyControl = useCallback((e) => {
+    onKeyControl(e);
+    const key = getCurrentSelectingKey();
+    if (!key) {
+      return;
+    }
+    if (e.key === "ArrowRight") {
+      if (!expandedKeys.includes(key)) {
+        onSwitcherClick(key);
+      }
+    }
+    if (e.key === "ArrowLeft") {
+      if (expandedKeys.includes(key)) {
+        onSwitcherClick(key);
+      }
+    }
+  }, [expandedKeys, getCurrentSelectingKey, onKeyControl, onSwitcherClick]);
+  const handleTagClose = useCallback((nodeKey) => {
+    onCheckableClick(nodeKey);
+  }, [onCheckableClick]);
+  const handleInputKeyDown = useCallback((e) => {
+    if (e.key === "Enter") {
+      const key = getCurrentSelectingKey();
+      if (!key) {
+        return;
+      }
+      onCheckableClick(key);
+    }
+  }, [getCurrentSelectingKey, onCheckableClick]);
+  const getOptionByValue = useCallback((value2) => {
+    if (isNumber(value2)) {
+      return;
+    }
+    return treeNodeMap.get(value2);
+  }, [treeNodeMap]);
+  const renderDropdownItem = useCallback((option, index) => {
+    return /* @__PURE__ */ createElement(TreeSelectOption, { ...option, index, itemKey: option.key, styles: styles == null ? void 0 : styles.nodeStyles, key: option.key });
+  }, [styles == null ? void 0 : styles.nodeStyles]);
+  const filterOptions = useCallback((treeNode, filterValue) => {
+    if (!filterTreeNode) {
+      return [...treeNode];
+    }
+    return filterItems(treeNode, filterValue, treeNodeFilterProp);
+  }, [filterTreeNode, treeNodeFilterProp]);
+  const valuesFilter = useCallback((activeValues) => {
+    if (!treeCheckable || showCheckedStrategy === "all") {
+      return activeValues;
+    }
+    return activeValues.filter((value2) => {
+      if (isNumber(value2)) {
+        return false;
+      }
+      const nodeData = nodeDataMap.get(value2);
+      if (!nodeData) {
+        return false;
+      }
+      if (showCheckedStrategy === "parent") {
+        return !activeValues.includes(nodeData.parentKey);
+      }
+      return leafChildrenKeys.includes(value2);
+    });
+  }, [leafChildrenKeys, nodeDataMap, showCheckedStrategy, treeCheckable]);
+  const virtualizerEstimateSize = useCallback((index) => {
+    return elementSizes[index] ?? DEFAULT_ELEMENT_SIZE;
+  }, [elementSizes]);
+  const contextValue = useMemo(() => ({
+    nodeDataMap,
+    treeCheckable,
+    showCheckedStrategy,
+    expandedKeys,
+    isAsyncLoading,
+    loadingKeys,
+    onSwitcherClick,
+    changeElementSize,
+    getCurrentSelectingKey,
+    onCheckableClick
+  }), [nodeDataMap, treeCheckable, showCheckedStrategy, expandedKeys, isAsyncLoading, loadingKeys, onSwitcherClick, changeElementSize, getCurrentSelectingKey, onCheckableClick]);
+  const suffix = loading ? /* @__PURE__ */ jsx(LoadingOutlined, {}) : suffixIcon;
+  const isOpen = loading ? false : open;
+  const withSearch = loading ? false : showSearch;
+  return /* @__PURE__ */ jsx(treeSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(BaseSelect, { ...otherProps, renderDropdownItem, filterOptions, options: currentTreeData, valuesFilter, getOptionByValue, virtualizerEstimateSize, optionLabelProp: treeNodeLabelProp, allowClear, autoClearSearchValue, autoFocus, disabled, dropdownMatchSelectWidth, dropdownMaxHeight, dropdownMinWidth, getPopupContainer, loading, mode: treeCheckable ? "multiple" : mode, placement, showSearch: withSearch, suffixIcon: suffix, variant, virtual, placeholder: placeholder == null ? void 0 : placeholder.toString(), styles: styles == null ? void 0 : styles.baseSelectStyles, currentSelectingIndex, onKeyControl: handleKeyControl, onChange: handleChange, onSearch: handleSearch, onDropdownVisibleChange: handleDropdownVisibleChange, getCurrentSelectingValue: getCurrentSelectingKey, open: isOpen, onTagClose: treeCheckable ? handleTagClose : void 0, value: treeCheckable ? checkedKeys : value, onInputKeyDown: treeCheckable ? handleInputKeyDown : void 0, defaultValue: defaultKeys }) });
+});
+const TreeSelect = withThemeProvider(TreeSelectComponent);
+export {
+  TreeSelect
+};

package/dist/components/TreeSelect/TreeSelect.tokens.d.ts

@@ -0,0 +1,30 @@
+import { Theme } from 'themes';
+export declare const getTreeSelectTokens: (theme: Theme) => {
+    treeSelectBorder: "#D9D9D9";
+    treeSelectBorderHover: "#50CCC4";
+    treeSelectBorderActive: "#0CB3B3";
+    treeSelectBorderDanger: "#FF4D4F";
+    treeSelectBorderDangerHover: "#FF7875";
+    treeSelectBg: "#FFFFFF";
+    treeSelectBgDisabled: "#F0F0F0";
+    treeSelectPlaceholder: "#BFBFBF";
+    treeSelectText: "#262626";
+    treeSelectTextDisabled: "#8C8C8C";
+    treeSelectTextDanger: "#FF4D4F";
+    treeSelectMultipleItemBorder: "#D9D9D9";
+    treeSelectMultipleItemBg: "#F5F5F5";
+    treeSelectMultipleItemBgDisabled: "#D9D9D9";
+    treeSelectOptionText: "#262626";
+    treeSelectOptionTextSelected: "#0CB3B3";
+    treeSelectOptionTextDisabled: "#8C8C8C";
+    treeSelectOptionBgHover: "#F5F5F5";
+    treeSelectPaddingVertical: 4;
+    treeSelectPaddingHorizontal: 12;
+    treeSelectPaddingHorizontalTag: 4;
+    treeSelectOptionPaddingVertical: 4;
+    treeSelectOptionPaddingHorizontal: 8;
+    treeSelectSwitcherPadding: 8;
+    treeSelectNodeGap: 2;
+    treeSelectNodeIndent: number;
+};
+export type TreeSelectTokensType = ReturnType<typeof getTreeSelectTokens>;