@infomaximum/ui-kit 0.9.1

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

@@ -0,0 +1,54 @@
+import { getSelectTokens } from "../../Select.tokens.js";
+const getColor = (selectTokens, selected, disabled) => {
+  if (disabled) {
+    return selectTokens.selectOptionTextDisabled;
+  }
+  if (selected) {
+    return selectTokens.selectOptionTextSelected;
+  }
+  return selectTokens.selectOptionText;
+};
+const getSelectOptionStyle = (selected, disabled, isSelecting) => ({
+  wrapper: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      display: "flex",
+      alignItems: "center",
+      width: "100%",
+      gap: theme.marginM,
+      padding: `${selectTokens.selectOptionPaddingVertical}px ${selectTokens.selectOptionPaddingHorizontal}px`,
+      borderRadius: theme.borderRadiusM,
+      ...theme.typography.body2,
+      color: getColor(selectTokens, selected, disabled),
+      height: 28,
+      boxSizing: "border-box",
+      transition: `background .2s, color .2s`,
+      cursor: disabled ? "not-allowed" : "pointer",
+      background: isSelecting ? selectTokens.selectOptionBgHover : "unset",
+      ":hover, :focus, focus-visible": {
+        background: disabled ? "unset" : selectTokens.selectOptionBgHover,
+        outline: "none"
+      }
+    };
+  },
+  content: (theme) => ({
+    display: "inline-flex",
+    gap: theme.marginXS,
+    width: selected ? `calc(100% - ${theme.marginXS + theme.iconM}px)` : "100%",
+    flex: "1 1 auto",
+    flexWrap: "nowrap"
+  }),
+  text: {
+    display: "inline-block",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    width: "100%"
+  },
+  icon: (theme) => ({
+    fontSize: theme.iconM
+  })
+});
+export {
+  getSelectOptionStyle
+};

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

@@ -0,0 +1,22 @@
+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;
+    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;
+}

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SelectOptionListProps } from './SelectOptionList.types';
+export declare const SelectOptionList: FC<SelectOptionListProps>;

package/dist/components/Select/components/SelectOptionList/SelectOptionList.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { createElement } from "@emotion/react";
+import { memo, useState, useRef, useEffect } from "react";
+import { SelectOption } from "../SelectOption/SelectOption.js";
+import { getSelectOptionListStyle } from "./SelectOptionList.styles.js";
+import { ANIMATION_DURATION } from "./SelectOptionList.utils.js";
+import { isFunction } from "lodash-es";
+import { createPortal } from "react-dom";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+import { LoadingOutlined } from "../../../../icons/icons/LoadingOutlined.js";
+const SelectOptionList = memo(({
+  options,
+  mode,
+  showOptionList,
+  currentValue,
+  dropdownMinWidth,
+  dropdownMaxHeight,
+  dropdownPrompt,
+  loading,
+  dropdownClassName,
+  styles,
+  dropdownMatchSelectWidth,
+  floatingStyles,
+  referenceOffsetWidth,
+  floatingRef,
+  virtual,
+  currentSelectingIndex,
+  emptyContent,
+  notFoundContent,
+  searchValue,
+  showSearch,
+  setFloating,
+  setValue,
+  closeOptionList,
+  returnFocusToWrapper,
+  dropdownRender,
+  optionRender,
+  getPopupContainer,
+  removeValue
+}) => {
+  const theme = useTheme();
+  const [isAnimation, setIsAnimation] = useState(false);
+  const isInitialMount = useRef(true);
+  const {
+    getTotalSize,
+    getVirtualItems,
+    scrollToIndex,
+    scrollToOffset
+  } = useVirtualizer({
+    count: virtual && dropdownPrompt ? options.length + 1 : options.length,
+    getScrollElement: () => floatingRef.current,
+    estimateSize: () => 28
+  });
+  useEffect(() => {
+    if (!showOptionList) {
+      return;
+    }
+    scrollToIndex(currentSelectingIndex || 0);
+  }, [showOptionList, currentSelectingIndex, scrollToIndex, scrollToOffset]);
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else {
+      setIsAnimation(true);
+      const timerId = setTimeout(() => {
+        setIsAnimation(false);
+      }, ANIMATION_DURATION);
+      return () => clearTimeout(timerId);
+    }
+  }, [showOptionList]);
+  const selectOptionListStyle = getSelectOptionListStyle(dropdownMinWidth, dropdownMaxHeight, showOptionList, dropdownMatchSelectWidth, referenceOffsetWidth, getTotalSize);
+  const hasPlaceholder = loading || options.length === 0;
+  if (!showOptionList && !isAnimation) {
+    return null;
+  }
+  const renderOption = (option, index) => {
+    if (isFunction(optionRender)) {
+      return optionRender({
+        ...option,
+        index,
+        isSelecting: currentSelectingIndex === index,
+        selected: currentValue.includes(option.value),
+        mode,
+        setValue,
+        closeOptionList,
+        returnFocusToWrapper,
+        removeValue
+      });
+    }
+    return /* @__PURE__ */ createElement(SelectOption, { ...option, index, isSelecting: currentSelectingIndex === index, selected: currentValue.includes(option.value), setValue, closeOptionList, key: option.value, returnFocusToWrapper, mode, removeValue });
+  };
+  const renderPrompt = () => {
+    var _a;
+    if (!dropdownPrompt) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { css: [selectOptionListStyle.prompt(theme), (_a = styles == null ? void 0 : styles.prompt) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderPrompt;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uTGlzdC9TZWxlY3RPcHRpb25MaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnSWEiLCJmaWxlIjoiL2J1aWxkcy9mcm9udGVuZC9saWJzL3VpLWtpdC9zcmMvY29tcG9uZW50cy9TZWxlY3QvY29tcG9uZW50cy9TZWxlY3RPcHRpb25MaXN0L1NlbGVjdE9wdGlvbkxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvbkxpc3RQcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbkxpc3QudHlwZXNcIjtcbmltcG9ydCB7IFNlbGVjdE9wdGlvbiB9IGZyb20gXCIuLi9TZWxlY3RPcHRpb24vU2VsZWN0T3B0aW9uXCI7XG5pbXBvcnQgeyBnZXRTZWxlY3RPcHRpb25MaXN0U3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb25MaXN0LnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IEFOSU1BVElPTl9EVVJBVElPTiB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbkxpc3QudXRpbHNcIjtcbmltcG9ydCB7IExvYWRpbmdPdXRsaW5lZCB9IGZyb20gXCJpY29ucy9pY29uc1wiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25JbnRlcmZhY2UgfSBmcm9tIFwiLi4vU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgaXNGdW5jdGlvbiB9IGZyb20gXCJsb2Rhc2gtZXNcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZVZpcnR1YWxpemVyIH0gZnJvbSBcIkB0YW5zdGFjay9yZWFjdC12aXJ0dWFsXCI7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RPcHRpb25MaXN0OiBGQzxTZWxlY3RPcHRpb25MaXN0UHJvcHM+ID0gbWVtbyhcbiAgKHtcbiAgICBvcHRpb25zLFxuICAgIG1vZGUsXG4gICAgc2hvd09wdGlvbkxpc3QsXG4gICAgY3VycmVudFZhbHVlLFxuICAgIGRyb3Bkb3duTWluV2lkdGgsXG4gICAgZHJvcGRvd25NYXhIZWlnaHQsXG4gICAgZHJvcGRvd25Qcm9tcHQsXG4gICAgbG9hZGluZyxcbiAgICBkcm9wZG93bkNsYXNzTmFtZSxcbiAgICBzdHlsZXMsXG4gICAgZHJvcGRvd25NYXRjaFNlbGVjdFdpZHRoLFxuICAgIGZsb2F0aW5nU3R5bGVzLFxuICAgIHJlZmVyZW5jZU9mZnNldFdpZHRoLFxuICAgIGZsb2F0aW5nUmVmLFxuICAgIHZpcnR1YWwsXG4gICAgY3VycmVudFNlbGVjdGluZ0luZGV4LFxuICAgIGVtcHR5Q29udGVudCxcbiAgICBub3RGb3VuZENvbnRlbnQsXG4gICAgc2VhcmNoVmFsdWUsXG4gICAgc2hvd1NlYXJjaCxcbiAgICBzZXRGbG9hdGluZyxcbiAgICBzZXRWYWx1ZSxcbiAgICBjbG9zZU9wdGlvbkxpc3QsXG4gICAgcmV0dXJuRm9jdXNUb1dyYXBwZXIsXG4gICAgZHJvcGRvd25SZW5kZXIsXG4gICAgb3B0aW9uUmVuZGVyLFxuICAgIGdldFBvcHVwQ29udGFpbmVyLFxuICAgIHJlbW92ZVZhbHVlLFxuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgW2lzQW5pbWF0aW9uLCBzZXRJc0FuaW1hdGlvbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgY29uc3QgaXNJbml0aWFsTW91bnQgPSB1c2VSZWYodHJ1ZSk7XG5cbiAgICBjb25zdCB7IGdldFRvdGFsU2l6ZSwgZ2V0VmlydHVhbEl0ZW1zLCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldCB9ID0gdXNlVmlydHVhbGl6ZXIoe1xuICAgICAgY291bnQ6IHZpcnR1YWwgJiYgZHJvcGRvd25Qcm9tcHQgPyBvcHRpb25zLmxlbmd0aCArIDEgOiBvcHRpb25zLmxlbmd0aCxcbiAgICAgIGdldFNjcm9sbEVsZW1lbnQ6ICgpID0+IGZsb2F0aW5nUmVmLmN1cnJlbnQsXG4gICAgICBlc3RpbWF0ZVNpemU6ICgpID0+IDI4LFxuICAgIH0pO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICghc2hvd09wdGlvbkxpc3QpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzY3JvbGxUb0luZGV4KGN1cnJlbnRTZWxlY3RpbmdJbmRleCB8fCAwKTtcbiAgICB9LCBbc2hvd09wdGlvbkxpc3QsIGN1cnJlbnRTZWxlY3RpbmdJbmRleCwgc2Nyb2xsVG9JbmRleCwgc2Nyb2xsVG9PZmZzZXRdKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoaXNJbml0aWFsTW91bnQuY3VycmVudCkge1xuICAgICAgICBpc0luaXRpYWxNb3VudC5jdXJyZW50ID0gZmFsc2U7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBzZXRJc0FuaW1hdGlvbih0cnVlKTtcblxuICAgICAgICBjb25zdCB0aW1lcklkID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgc2V0SXNBbmltYXRpb24oZmFsc2UpO1xuICAgICAgICB9LCBBTklNQVRJT05fRFVSQVRJT04pO1xuXG4gICAgICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQodGltZXJJZCk7XG4gICAgICB9XG4gICAgfSwgW3Nob3dPcHRpb25MaXN0XSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25MaXN0U3R5bGUgPSBnZXRTZWxlY3RPcHRpb25MaXN0U3R5bGUoXG4gICAgICBkcm9wZG93bk1pbldpZHRoLFxuICAgICAgZHJvcGRvd25NYXhIZWlnaHQsXG4gICAgICBzaG93T3B0aW9uTGlzdCxcbiAgICAgIGRyb3Bkb3duTWF0Y2hTZWxlY3RXaWR0aCxcbiAgICAgIHJlZmVyZW5jZU9mZnNldFdpZHRoLFxuICAgICAgZ2V0VG90YWxTaXplXG4gICAgKTtcblxuICAgIGNvbnN0IGhhc1BsYWNlaG9sZGVyID0gbG9hZGluZyB8fCBvcHRpb25zLmxlbmd0aCA9PT0gMDtcblxuICAgIGlmICghc2hvd09wdGlvbkxpc3QgJiYgIWlzQW5pbWF0aW9uKSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICBjb25zdCByZW5kZXJPcHRpb24gPSAob3B0aW9uOiBTZWxlY3RPcHRpb25JbnRlcmZhY2UsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICAgIGlmIChpc0Z1bmN0aW9uKG9wdGlvblJlbmRlcikpIHtcbiAgICAgICAgcmV0dXJuIG9wdGlvblJlbmRlcih7XG4gICAgICAgICAgLi4ub3B0aW9uLFxuICAgICAgICAgIGluZGV4LFxuICAgICAgICAgIGlzU2VsZWN0aW5nOiBjdXJyZW50U2VsZWN0aW5nSW5kZXggPT09IGluZGV4LFxuICAgICAgICAgIHNlbGVjdGVkOiBjdXJyZW50VmFsdWUuaW5jbHVkZXMob3B0aW9uLnZhbHVlKSxcbiAgICAgICAgICBtb2RlLFxuICAgICAgICAgIHNldFZhbHVlLFxuICAgICAgICAgIGNsb3NlT3B0aW9uTGlzdCxcbiAgICAgICAgICByZXR1cm5Gb2N1c1RvV3JhcHBlcixcbiAgICAgICAgICByZW1vdmVWYWx1ZSxcbiAgICAgICAgfSk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxTZWxlY3RPcHRpb25cbiAgICAgICAgICB7Li4ub3B0aW9ufVxuICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICBpc1NlbGVjdGluZz17Y3VycmVudFNlbGVjdGluZ0luZGV4ID09PSBpbmRleH1cbiAgICAgICAgICBzZWxlY3RlZD17Y3VycmVudFZhbHVlLmluY2x1ZGVzKG9wdGlvbi52YWx1ZSl9XG4gICAgICAgICAgc2V0VmFsdWU9e3NldFZhbHVlfVxuICAgICAgICAgIGNsb3NlT3B0aW9uTGlzdD17Y2xvc2VPcHRpb25MaXN0fVxuICAgICAgICAgIGtleT17b3B0aW9uLnZhbHVlfVxuICAgICAgICAgIHJldHVybkZvY3VzVG9XcmFwcGVyPXtyZXR1cm5Gb2N1c1RvV3JhcHBlcn1cbiAgICAgICAgICBtb2RlPXttb2RlfVxuICAgICAgICAgIHJlbW92ZVZhbHVlPXtyZW1vdmVWYWx1ZX1cbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IHJlbmRlclByb21wdCA9ICgpID0+IHtcbiAgICAgIGlmICghZHJvcGRvd25Qcm9tcHQpIHtcbiAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY3NzPXtbc2VsZWN0T3B0aW9uTGlzdFN0eWxlLnByb21wdCh0aGVtZSksIHN0eWxlcz8ucHJvbXB0Py4odGhlbWUpXX0ga2V5PVwicHJvbXB0XCI+XG4gICAgICAgICAge2Ryb3Bkb3duUHJvbXB0fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IHJlbmRlclZpcnR1YWxpemVkT3B0aW9ucyA9ICgpID0+IHtcbiAgICAgIHJldHVybiBnZXRWaXJ0dWFsSXRlbXMoKS5tYXAoKHsgaW5kZXgsIHNpemUsIHN0YXJ0IH0pID0+IHtcbiAgICAgICAgaWYgKGluZGV4IDwgb3B0aW9ucy5sZW5ndGgpIHtcbiAgICAgICAgICBjb25zdCBvcHRpb24gPSBvcHRpb25zW2luZGV4XTtcblxuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9XG4gICAgICAgICAgICAgIGtleT17b3B0aW9uLnZhbHVlfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7cmVuZGVyT3B0aW9uKG9wdGlvbiwgaW5kZXgpfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICghZHJvcGRvd25Qcm9tcHQpIHtcbiAgICAgICAgICByZXR1cm4gbnVsbDtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS52aXJ0dWFsaXplZE9wdGlvbldyYXBwZXIoc2l6ZSwgc3RhcnQpfSBrZXk9XCJwcm9tcHRcIj5cbiAgICAgICAgICAgIHtyZW5kZXJQcm9tcHQoKX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKTtcbiAgICAgIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJPcHRpb25zID0gKCkgPT4gKFxuICAgICAgPD5cbiAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiByZW5kZXJPcHRpb24ob3B0aW9uLCBpbmRleCkpfVxuICAgICAgICB7cmVuZGVyUHJvbXB0KCl9XG4gICAgICA8Lz5cbiAgICApO1xuXG4gICAgY29uc3QgcmVuZGVyT3B0aW9uTGlzdENvbnRlbnQgPSAoKSA9PiAodmlydHVhbCA/IHJlbmRlclZpcnR1YWxpemVkT3B0aW9ucygpIDogcmVuZGVyT3B0aW9ucygpKTtcblxuICAgIGNvbnN0IHJlbmRlclBsYWNlaG9sZGVyID0gKCkgPT4ge1xuICAgICAgaWYgKGxvYWRpbmcpIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8c3BhbiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS53cmFwcGVyT2ZMb2FkaW5nKHRoZW1lKX0+XG4gICAgICAgICAgICA8TG9hZGluZ091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApO1xuICAgICAgfVxuXG4gICAgICBjb25zdCBpc0FjdGl2ZVNlYXJjaCA9IHNlYXJjaFZhbHVlICYmIHNob3dTZWFyY2g7XG5cbiAgICAgIGlmIChvcHRpb25zLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxkaXYgY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mRW1wdHlDb250ZW50KHRoZW1lKX0+XG4gICAgICAgICAgICB7aXNBY3RpdmVTZWFyY2ggPyBub3RGb3VuZENvbnRlbnQgOiBlbXB0eUNvbnRlbnR9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJTZWxlY3RPcHRpb25MaXN0ID0gKCkgPT4gKFxuICAgICAgPGRpdlxuICAgICAgICByZWY9e3NldEZsb2F0aW5nfVxuICAgICAgICBzdHlsZT17ZmxvYXRpbmdTdHlsZXN9XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvbkxpc3RTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgY2xhc3NOYW1lPXtkcm9wZG93bkNsYXNzTmFtZX1cbiAgICAgICAgdGFiSW5kZXg9ezJ9XG4gICAgICA+XG4gICAgICAgIHtoYXNQbGFjZWhvbGRlciA/IChcbiAgICAgICAgICByZW5kZXJQbGFjZWhvbGRlcigpXG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS5jb250YWluZXIodmlydHVhbCl9PlxuICAgICAgICAgICAge2lzRnVuY3Rpb24oZHJvcGRvd25SZW5kZXIpXG4gICAgICAgICAgICAgID8gZHJvcGRvd25SZW5kZXIocmVuZGVyT3B0aW9uTGlzdENvbnRlbnQoKSlcbiAgICAgICAgICAgICAgOiByZW5kZXJPcHRpb25MaXN0Q29udGVudCgpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcblxuICAgIHJldHVybiBjcmVhdGVQb3J0YWwocmVuZGVyU2VsZWN0T3B0aW9uTGlzdCgpLCBnZXRQb3B1cENvbnRhaW5lcigpKTtcbiAgfVxuKTtcbiJdfQ== */"], children: dropdownPrompt }, "prompt");
+  };
+  const renderVirtualizedOptions = () => {
+    return getVirtualItems().map(({
+      index,
+      size,
+      start
+    }) => {
+      if (index < options.length) {
+        const option = options[index];
+        return /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.virtualizedOptionWrapper(size, start), children: renderOption(option, index) }, option.value);
+      }
+      if (!dropdownPrompt) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.virtualizedOptionWrapper(size, start), children: renderPrompt() }, "prompt");
+    });
+  };
+  const renderOptions = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    options.map((option, index) => renderOption(option, index)),
+    renderPrompt()
+  ] });
+  const renderOptionListContent = () => virtual ? renderVirtualizedOptions() : renderOptions();
+  const renderPlaceholder = () => {
+    if (loading) {
+      return /* @__PURE__ */ jsx("span", { css: selectOptionListStyle.wrapperOfLoading(theme), children: /* @__PURE__ */ jsx(LoadingOutlined, {}) });
+    }
+    const isActiveSearch = searchValue && showSearch;
+    if (options.length === 0) {
+      return /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.wrapperOfEmptyContent(theme), children: isActiveSearch ? notFoundContent : emptyContent });
+    }
+    return null;
+  };
+  const renderSelectOptionList = () => {
+    var _a;
+    return /* @__PURE__ */ jsx("div", { ref: setFloating, style: floatingStyles, css: [selectOptionListStyle.wrapper(theme), (_a = styles == null ? void 0 : styles.wrapper) == null ? void 0 : _a.call(styles, theme), process.env.NODE_ENV === "production" ? "" : ";label:renderSelectOptionList;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvU2VsZWN0L2NvbXBvbmVudHMvU2VsZWN0T3B0aW9uTGlzdC9TZWxlY3RPcHRpb25MaXN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvTVEiLCJmaWxlIjoiL2J1aWxkcy9mcm9udGVuZC9saWJzL3VpLWtpdC9zcmMvY29tcG9uZW50cy9TZWxlY3QvY29tcG9uZW50cy9TZWxlY3RPcHRpb25MaXN0L1NlbGVjdE9wdGlvbkxpc3QudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgdHlwZSBGQywgbWVtbywgdXNlRWZmZWN0LCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCI7XG5pbXBvcnQgdHlwZSB7IFNlbGVjdE9wdGlvbkxpc3RQcm9wcyB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbkxpc3QudHlwZXNcIjtcbmltcG9ydCB7IFNlbGVjdE9wdGlvbiB9IGZyb20gXCIuLi9TZWxlY3RPcHRpb24vU2VsZWN0T3B0aW9uXCI7XG5pbXBvcnQgeyBnZXRTZWxlY3RPcHRpb25MaXN0U3R5bGUgfSBmcm9tIFwiLi9TZWxlY3RPcHRpb25MaXN0LnN0eWxlc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiaG9va3MvdXNlVGhlbWVcIjtcbmltcG9ydCB7IEFOSU1BVElPTl9EVVJBVElPTiB9IGZyb20gXCIuL1NlbGVjdE9wdGlvbkxpc3QudXRpbHNcIjtcbmltcG9ydCB7IExvYWRpbmdPdXRsaW5lZCB9IGZyb20gXCJpY29ucy9pY29uc1wiO1xuaW1wb3J0IHR5cGUgeyBTZWxlY3RPcHRpb25JbnRlcmZhY2UgfSBmcm9tIFwiLi4vU2VsZWN0T3B0aW9uL1NlbGVjdE9wdGlvbi50eXBlc1wiO1xuaW1wb3J0IHsgaXNGdW5jdGlvbiB9IGZyb20gXCJsb2Rhc2gtZXNcIjtcbmltcG9ydCB7IGNyZWF0ZVBvcnRhbCB9IGZyb20gXCJyZWFjdC1kb21cIjtcbmltcG9ydCB7IHVzZVZpcnR1YWxpemVyIH0gZnJvbSBcIkB0YW5zdGFjay9yZWFjdC12aXJ0dWFsXCI7XG5cbmV4cG9ydCBjb25zdCBTZWxlY3RPcHRpb25MaXN0OiBGQzxTZWxlY3RPcHRpb25MaXN0UHJvcHM+ID0gbWVtbyhcbiAgKHtcbiAgICBvcHRpb25zLFxuICAgIG1vZGUsXG4gICAgc2hvd09wdGlvbkxpc3QsXG4gICAgY3VycmVudFZhbHVlLFxuICAgIGRyb3Bkb3duTWluV2lkdGgsXG4gICAgZHJvcGRvd25NYXhIZWlnaHQsXG4gICAgZHJvcGRvd25Qcm9tcHQsXG4gICAgbG9hZGluZyxcbiAgICBkcm9wZG93bkNsYXNzTmFtZSxcbiAgICBzdHlsZXMsXG4gICAgZHJvcGRvd25NYXRjaFNlbGVjdFdpZHRoLFxuICAgIGZsb2F0aW5nU3R5bGVzLFxuICAgIHJlZmVyZW5jZU9mZnNldFdpZHRoLFxuICAgIGZsb2F0aW5nUmVmLFxuICAgIHZpcnR1YWwsXG4gICAgY3VycmVudFNlbGVjdGluZ0luZGV4LFxuICAgIGVtcHR5Q29udGVudCxcbiAgICBub3RGb3VuZENvbnRlbnQsXG4gICAgc2VhcmNoVmFsdWUsXG4gICAgc2hvd1NlYXJjaCxcbiAgICBzZXRGbG9hdGluZyxcbiAgICBzZXRWYWx1ZSxcbiAgICBjbG9zZU9wdGlvbkxpc3QsXG4gICAgcmV0dXJuRm9jdXNUb1dyYXBwZXIsXG4gICAgZHJvcGRvd25SZW5kZXIsXG4gICAgb3B0aW9uUmVuZGVyLFxuICAgIGdldFBvcHVwQ29udGFpbmVyLFxuICAgIHJlbW92ZVZhbHVlLFxuICB9KSA9PiB7XG4gICAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gICAgY29uc3QgW2lzQW5pbWF0aW9uLCBzZXRJc0FuaW1hdGlvbl0gPSB1c2VTdGF0ZShmYWxzZSk7XG4gICAgY29uc3QgaXNJbml0aWFsTW91bnQgPSB1c2VSZWYodHJ1ZSk7XG5cbiAgICBjb25zdCB7IGdldFRvdGFsU2l6ZSwgZ2V0VmlydHVhbEl0ZW1zLCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldCB9ID0gdXNlVmlydHVhbGl6ZXIoe1xuICAgICAgY291bnQ6IHZpcnR1YWwgJiYgZHJvcGRvd25Qcm9tcHQgPyBvcHRpb25zLmxlbmd0aCArIDEgOiBvcHRpb25zLmxlbmd0aCxcbiAgICAgIGdldFNjcm9sbEVsZW1lbnQ6ICgpID0+IGZsb2F0aW5nUmVmLmN1cnJlbnQsXG4gICAgICBlc3RpbWF0ZVNpemU6ICgpID0+IDI4LFxuICAgIH0pO1xuXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICghc2hvd09wdGlvbkxpc3QpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICBzY3JvbGxUb0luZGV4KGN1cnJlbnRTZWxlY3RpbmdJbmRleCB8fCAwKTtcbiAgICB9LCBbc2hvd09wdGlvbkxpc3QsIGN1cnJlbnRTZWxlY3RpbmdJbmRleCwgc2Nyb2xsVG9JbmRleCwgc2Nyb2xsVG9PZmZzZXRdKTtcblxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICBpZiAoaXNJbml0aWFsTW91bnQuY3VycmVudCkge1xuICAgICAgICBpc0luaXRpYWxNb3VudC5jdXJyZW50ID0gZmFsc2U7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBzZXRJc0FuaW1hdGlvbih0cnVlKTtcblxuICAgICAgICBjb25zdCB0aW1lcklkID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgc2V0SXNBbmltYXRpb24oZmFsc2UpO1xuICAgICAgICB9LCBBTklNQVRJT05fRFVSQVRJT04pO1xuXG4gICAgICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQodGltZXJJZCk7XG4gICAgICB9XG4gICAgfSwgW3Nob3dPcHRpb25MaXN0XSk7XG5cbiAgICBjb25zdCBzZWxlY3RPcHRpb25MaXN0U3R5bGUgPSBnZXRTZWxlY3RPcHRpb25MaXN0U3R5bGUoXG4gICAgICBkcm9wZG93bk1pbldpZHRoLFxuICAgICAgZHJvcGRvd25NYXhIZWlnaHQsXG4gICAgICBzaG93T3B0aW9uTGlzdCxcbiAgICAgIGRyb3Bkb3duTWF0Y2hTZWxlY3RXaWR0aCxcbiAgICAgIHJlZmVyZW5jZU9mZnNldFdpZHRoLFxuICAgICAgZ2V0VG90YWxTaXplXG4gICAgKTtcblxuICAgIGNvbnN0IGhhc1BsYWNlaG9sZGVyID0gbG9hZGluZyB8fCBvcHRpb25zLmxlbmd0aCA9PT0gMDtcblxuICAgIGlmICghc2hvd09wdGlvbkxpc3QgJiYgIWlzQW5pbWF0aW9uKSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICBjb25zdCByZW5kZXJPcHRpb24gPSAob3B0aW9uOiBTZWxlY3RPcHRpb25JbnRlcmZhY2UsIGluZGV4OiBudW1iZXIpID0+IHtcbiAgICAgIGlmIChpc0Z1bmN0aW9uKG9wdGlvblJlbmRlcikpIHtcbiAgICAgICAgcmV0dXJuIG9wdGlvblJlbmRlcih7XG4gICAgICAgICAgLi4ub3B0aW9uLFxuICAgICAgICAgIGluZGV4LFxuICAgICAgICAgIGlzU2VsZWN0aW5nOiBjdXJyZW50U2VsZWN0aW5nSW5kZXggPT09IGluZGV4LFxuICAgICAgICAgIHNlbGVjdGVkOiBjdXJyZW50VmFsdWUuaW5jbHVkZXMob3B0aW9uLnZhbHVlKSxcbiAgICAgICAgICBtb2RlLFxuICAgICAgICAgIHNldFZhbHVlLFxuICAgICAgICAgIGNsb3NlT3B0aW9uTGlzdCxcbiAgICAgICAgICByZXR1cm5Gb2N1c1RvV3JhcHBlcixcbiAgICAgICAgICByZW1vdmVWYWx1ZSxcbiAgICAgICAgfSk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxTZWxlY3RPcHRpb25cbiAgICAgICAgICB7Li4ub3B0aW9ufVxuICAgICAgICAgIGluZGV4PXtpbmRleH1cbiAgICAgICAgICBpc1NlbGVjdGluZz17Y3VycmVudFNlbGVjdGluZ0luZGV4ID09PSBpbmRleH1cbiAgICAgICAgICBzZWxlY3RlZD17Y3VycmVudFZhbHVlLmluY2x1ZGVzKG9wdGlvbi52YWx1ZSl9XG4gICAgICAgICAgc2V0VmFsdWU9e3NldFZhbHVlfVxuICAgICAgICAgIGNsb3NlT3B0aW9uTGlzdD17Y2xvc2VPcHRpb25MaXN0fVxuICAgICAgICAgIGtleT17b3B0aW9uLnZhbHVlfVxuICAgICAgICAgIHJldHVybkZvY3VzVG9XcmFwcGVyPXtyZXR1cm5Gb2N1c1RvV3JhcHBlcn1cbiAgICAgICAgICBtb2RlPXttb2RlfVxuICAgICAgICAgIHJlbW92ZVZhbHVlPXtyZW1vdmVWYWx1ZX1cbiAgICAgICAgLz5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IHJlbmRlclByb21wdCA9ICgpID0+IHtcbiAgICAgIGlmICghZHJvcGRvd25Qcm9tcHQpIHtcbiAgICAgICAgcmV0dXJuIG51bGw7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY3NzPXtbc2VsZWN0T3B0aW9uTGlzdFN0eWxlLnByb21wdCh0aGVtZSksIHN0eWxlcz8ucHJvbXB0Py4odGhlbWUpXX0ga2V5PVwicHJvbXB0XCI+XG4gICAgICAgICAge2Ryb3Bkb3duUHJvbXB0fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfTtcblxuICAgIGNvbnN0IHJlbmRlclZpcnR1YWxpemVkT3B0aW9ucyA9ICgpID0+IHtcbiAgICAgIHJldHVybiBnZXRWaXJ0dWFsSXRlbXMoKS5tYXAoKHsgaW5kZXgsIHNpemUsIHN0YXJ0IH0pID0+IHtcbiAgICAgICAgaWYgKGluZGV4IDwgb3B0aW9ucy5sZW5ndGgpIHtcbiAgICAgICAgICBjb25zdCBvcHRpb24gPSBvcHRpb25zW2luZGV4XTtcblxuICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICAgIGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9XG4gICAgICAgICAgICAgIGtleT17b3B0aW9uLnZhbHVlfVxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICB7cmVuZGVyT3B0aW9uKG9wdGlvbiwgaW5kZXgpfVxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgKTtcbiAgICAgICAgfVxuXG4gICAgICAgIGlmICghZHJvcGRvd25Qcm9tcHQpIHtcbiAgICAgICAgICByZXR1cm4gbnVsbDtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiAoXG4gICAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS52aXJ0dWFsaXplZE9wdGlvbldyYXBwZXIoc2l6ZSwgc3RhcnQpfSBrZXk9XCJwcm9tcHRcIj5cbiAgICAgICAgICAgIHtyZW5kZXJQcm9tcHQoKX1cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgKTtcbiAgICAgIH0pO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJPcHRpb25zID0gKCkgPT4gKFxuICAgICAgPD5cbiAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiByZW5kZXJPcHRpb24ob3B0aW9uLCBpbmRleCkpfVxuICAgICAgICB7cmVuZGVyUHJvbXB0KCl9XG4gICAgICA8Lz5cbiAgICApO1xuXG4gICAgY29uc3QgcmVuZGVyT3B0aW9uTGlzdENvbnRlbnQgPSAoKSA9PiAodmlydHVhbCA/IHJlbmRlclZpcnR1YWxpemVkT3B0aW9ucygpIDogcmVuZGVyT3B0aW9ucygpKTtcblxuICAgIGNvbnN0IHJlbmRlclBsYWNlaG9sZGVyID0gKCkgPT4ge1xuICAgICAgaWYgKGxvYWRpbmcpIHtcbiAgICAgICAgcmV0dXJuIChcbiAgICAgICAgICA8c3BhbiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS53cmFwcGVyT2ZMb2FkaW5nKHRoZW1lKX0+XG4gICAgICAgICAgICA8TG9hZGluZ091dGxpbmVkIC8+XG4gICAgICAgICAgPC9zcGFuPlxuICAgICAgICApO1xuICAgICAgfVxuXG4gICAgICBjb25zdCBpc0FjdGl2ZVNlYXJjaCA9IHNlYXJjaFZhbHVlICYmIHNob3dTZWFyY2g7XG5cbiAgICAgIGlmIChvcHRpb25zLmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxkaXYgY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mRW1wdHlDb250ZW50KHRoZW1lKX0+XG4gICAgICAgICAgICB7aXNBY3RpdmVTZWFyY2ggPyBub3RGb3VuZENvbnRlbnQgOiBlbXB0eUNvbnRlbnR9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgICk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBudWxsO1xuICAgIH07XG5cbiAgICBjb25zdCByZW5kZXJTZWxlY3RPcHRpb25MaXN0ID0gKCkgPT4gKFxuICAgICAgPGRpdlxuICAgICAgICByZWY9e3NldEZsb2F0aW5nfVxuICAgICAgICBzdHlsZT17ZmxvYXRpbmdTdHlsZXN9XG4gICAgICAgIGNzcz17W3NlbGVjdE9wdGlvbkxpc3RTdHlsZS53cmFwcGVyKHRoZW1lKSwgc3R5bGVzPy53cmFwcGVyPy4odGhlbWUpXX1cbiAgICAgICAgY2xhc3NOYW1lPXtkcm9wZG93bkNsYXNzTmFtZX1cbiAgICAgICAgdGFiSW5kZXg9ezJ9XG4gICAgICA+XG4gICAgICAgIHtoYXNQbGFjZWhvbGRlciA/IChcbiAgICAgICAgICByZW5kZXJQbGFjZWhvbGRlcigpXG4gICAgICAgICkgOiAoXG4gICAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS5jb250YWluZXIodmlydHVhbCl9PlxuICAgICAgICAgICAge2lzRnVuY3Rpb24oZHJvcGRvd25SZW5kZXIpXG4gICAgICAgICAgICAgID8gZHJvcGRvd25SZW5kZXIocmVuZGVyT3B0aW9uTGlzdENvbnRlbnQoKSlcbiAgICAgICAgICAgICAgOiByZW5kZXJPcHRpb25MaXN0Q29udGVudCgpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApfVxuICAgICAgPC9kaXY+XG4gICAgKTtcblxuICAgIHJldHVybiBjcmVhdGVQb3J0YWwocmVuZGVyU2VsZWN0T3B0aW9uTGlzdCgpLCBnZXRQb3B1cENvbnRhaW5lcigpKTtcbiAgfVxuKTtcbiJdfQ== */"], className: dropdownClassName, tabIndex: 2, children: hasPlaceholder ? renderPlaceholder() : /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.container(virtual), children: isFunction(dropdownRender) ? dropdownRender(renderOptionListContent()) : renderOptionListContent() }) });
+  };
+  return createPortal(renderSelectOptionList(), getPopupContainer());
+});
+export {
+  SelectOptionList
+};

package/dist/components/Select/components/SelectOptionList/SelectOptionList.styles.d.ts

@@ -0,0 +1,66 @@
+import { Theme } from 'themes';
+export declare const getSelectOptionListStyle: (dropdownMinWidth: number, dropdownMaxHeight: number, showOptionList: boolean, dropdownMatchSelectWidth: boolean | number, referenceOffsetWidth: number | undefined, getTotalSize: () => number) => {
+    wrapper: (theme: Theme) => {
+        readonly display: "block";
+        readonly position: "absolute";
+        readonly flexDirection: "column";
+        readonly alignItems: "flex-start";
+        readonly justifyContent: "center";
+        readonly padding: 4;
+        readonly overflowX: "hidden";
+        readonly overflowY: "auto";
+        readonly minWidth: number;
+        readonly width: number | "fit-content";
+        readonly maxHeight: number;
+        readonly height: "fit-content";
+        readonly opacity: 0 | 1;
+        readonly transition: "max-height 200ms, opacity 200ms";
+        readonly boxSizing: "border-box";
+        readonly borderRadius: 8;
+        readonly background: "#FFFFFF";
+        readonly boxShadow: `0 3px 6px -4px rgba(${number}, ${number}, ${number}, 0.12), 0 6px 16px 0 rgba(${number}, ${number}, ${number}, 0.08), 0 9px 28px 8px rgba(${number}, ${number}, ${number}, 0.05)`;
+    };
+    container: (virtual: boolean) => {
+        readonly width: "100%";
+        readonly position: "relative";
+        readonly top: 0;
+        readonly height: number | "fit-content";
+    };
+    prompt: (theme: Theme) => {
+        readonly color: "#8C8C8C";
+        readonly padding: "4px 8px";
+        readonly width: "100%";
+        readonly overflow: "hidden";
+        readonly whiteSpace: "nowrap";
+        readonly textOverflow: "ellipsis";
+        readonly boxSizing: "border-box";
+        readonly fontFamily: "Roboto";
+        readonly fontSize: 12;
+        readonly lineHeight: "20px";
+    };
+    wrapperOfLoading: (theme: Theme) => {
+        padding: string;
+        fontSize: 16;
+        color: "#8C8C8C";
+        display: string;
+        height: string;
+    };
+    wrapperOfEmptyContent: (theme: Theme) => {
+        color: "#8C8C8C";
+        display: string;
+        alignItems: string;
+        height: string;
+        fontFamily: "Roboto";
+        fontSize: 12;
+        lineHeight: "20px";
+        padding: string;
+    };
+    virtualizedOptionWrapper: (size: number, start: number) => {
+        readonly position: "absolute";
+        readonly top: 0;
+        readonly left: 0;
+        readonly width: "100%";
+        readonly height: number;
+        readonly transform: `translateY(${number}px)`;
+    };
+};

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

@@ -0,0 +1,85 @@
+import { ANIMATION_DURATION } from "./SelectOptionList.utils.js";
+import { getSelectTokens } from "../../Select.tokens.js";
+import { isNumber } from "lodash-es";
+const getWidth = (dropdownMatchSelectWidth, referenceOffsetWidth) => {
+  if (isNumber(dropdownMatchSelectWidth)) {
+    return dropdownMatchSelectWidth;
+  }
+  if (!dropdownMatchSelectWidth) {
+    return "fit-content";
+  }
+  return referenceOffsetWidth ?? "fit-content";
+};
+const getSelectOptionListStyle = (dropdownMinWidth, dropdownMaxHeight, showOptionList, dropdownMatchSelectWidth, referenceOffsetWidth, getTotalSize) => ({
+  wrapper: (theme) => ({
+    display: "block",
+    position: "absolute",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center",
+    padding: theme.paddingXS,
+    overflowX: "hidden",
+    overflowY: "auto",
+    minWidth: dropdownMinWidth,
+    width: getWidth(dropdownMatchSelectWidth, referenceOffsetWidth),
+    maxHeight: showOptionList ? dropdownMaxHeight : 0,
+    height: "fit-content",
+    opacity: showOptionList ? 1 : 0,
+    transition: `max-height ${ANIMATION_DURATION}ms, opacity ${ANIMATION_DURATION}ms`,
+    boxSizing: "border-box",
+    borderRadius: theme.borderRadiusL,
+    background: theme.bgFloat,
+    boxShadow: theme.shadow2
+  }),
+  container: (virtual) => ({
+    width: "100%",
+    position: "relative",
+    top: 0,
+    height: virtual ? getTotalSize() : "fit-content"
+  }),
+  prompt: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      ...theme.typography.body3,
+      color: theme.textSecondary,
+      padding: `${selectTokens.selectOptionPaddingVertical}px ${selectTokens.selectOptionPaddingHorizontal}px`,
+      width: "100%",
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      boxSizing: "border-box"
+    };
+  },
+  wrapperOfLoading: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      padding: `${theme.paddingS}px ${selectTokens.selectOptionPaddingHorizontal}px`,
+      fontSize: theme.iconM,
+      color: theme.textSecondary,
+      display: "inline-flex",
+      height: "fit-content"
+    };
+  },
+  wrapperOfEmptyContent: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      padding: `${theme.paddingS}px ${selectTokens.selectOptionPaddingHorizontal}px`,
+      ...theme.typography.body3,
+      color: theme.textSecondary,
+      display: "flex",
+      alignItems: "center",
+      height: "100%"
+    };
+  },
+  virtualizedOptionWrapper: (size, start) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: size,
+    transform: `translateY(${start}px)`
+  })
+});
+export {
+  getSelectOptionListStyle
+};

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

@@ -0,0 +1,42 @@
+import { Theme } from '../../../../themes';
+import { SelectOptionCallbacks, SelectOptionInterface, SelectOptionProps, SelectOptionValue } from '../SelectOption/SelectOption.types';
+import { Interpolation } from '@emotion/react';
+import { CSSProperties, MutableRefObject, ReactNode } from 'react';
+import { ModeType } from '../../Select.types';
+export type DropdownMatchSelectWidthType = boolean | number;
+export interface DropdownStyles {
+    wrapper?: (theme: Theme) => Interpolation;
+    container?: (virtual: boolean) => Interpolation;
+    prompt?: (theme: Theme) => Interpolation;
+    wrapperOfLoading?: (theme: Theme) => Interpolation;
+    wrapperOfEmptyContent?: (theme: Theme) => Interpolation;
+    virtualizedOptionWrapper?: (theme: Theme) => Interpolation;
+}
+export interface SelectOptionListProps extends SelectOptionCallbacks {
+    options: SelectOptionInterface[];
+    mode: ModeType;
+    showOptionList: boolean;
+    currentValue: SelectOptionValue[];
+    dropdownMinWidth: number;
+    dropdownMaxHeight: number;
+    dropdownPrompt?: string;
+    loading?: boolean;
+    dropdownClassName?: string;
+    dropdownMatchSelectWidth: DropdownMatchSelectWidthType;
+    floatingStyles: CSSProperties;
+    referenceOffsetWidth: number | undefined;
+    floatingRef: MutableRefObject<HTMLElement | null>;
+    virtual: boolean;
+    currentSelectingIndex: number;
+    emptyContent: ReactNode;
+    notFoundContent?: ReactNode;
+    searchValue?: string;
+    showSearch?: boolean;
+    styles?: DropdownStyles;
+    returnFocusToWrapper: () => void;
+    getPopupContainer: () => HTMLElement;
+    dropdownRender?: (originNode: ReactNode) => ReactNode;
+    optionRender?: (option: SelectOptionProps) => React.ReactNode;
+    setFloating: (node: HTMLElement | null) => void;
+    removeValue: (removeValue: SelectOptionValue) => void;
+}

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

@@ -0,0 +1 @@
+export declare const ANIMATION_DURATION = 200;

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

@@ -0,0 +1,4 @@
+const ANIMATION_DURATION = 200;
+export {
+  ANIMATION_DURATION
+};

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SelectTagProps } from './SelectTag.types';
+export declare const SelectTag: FC<SelectTagProps>;

package/dist/components/Select/components/SelectTag/SelectTag.js

@@ -0,0 +1,24 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { getSelectTagDefaultStyle } from "./SelectTag.styles.js";
+import { Tag } from "../../../Tag/Tag.js";
+const SelectTag = memo(({
+  value,
+  label,
+  maxTagTextLength,
+  isError,
+  isBorderless,
+  disabled,
+  removeValue
+}) => {
+  const closeHandle = useCallback((e) => {
+    e.stopPropagation();
+    removeValue(value);
+  }, [removeValue, value]);
+  const currentLabel = maxTagTextLength && label.length > maxTagTextLength ? label.slice(0, maxTagTextLength) + "…" : label;
+  const selectTagDefaultStyle = getSelectTagDefaultStyle(isError, isBorderless, disabled);
+  return /* @__PURE__ */ jsx(Tag, { closable: disabled ? false : true, onClose: closeHandle, styles: selectTagDefaultStyle, children: currentLabel });
+});
+export {
+  SelectTag
+};

package/dist/components/Select/components/SelectTag/SelectTag.styles.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from 'themes';
+export declare const getSelectTagDefaultStyle: (isError: boolean, isBorderless: boolean, disabled: boolean) => {
+    wrapper: (theme: Theme) => {
+        fontSize: number;
+        color: "#262626" | "#8C8C8C" | "#FF4D4F";
+        background: "#D9D9D9" | "#F5F5F5";
+    };
+};

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

@@ -0,0 +1,23 @@
+import { getSelectTokens } from "../../Select.tokens.js";
+const getColor = (isError, isBorderless, disabled, selectTokens) => {
+  if (disabled) {
+    return selectTokens.selectTextDisabled;
+  }
+  if (isError && isBorderless) {
+    return selectTokens.selectTextDanger;
+  }
+  return selectTokens.selectText;
+};
+const getSelectTagDefaultStyle = (isError, isBorderless, disabled) => ({
+  wrapper: (theme) => {
+    const selectTokens = getSelectTokens(theme);
+    return {
+      fontSize: 14,
+      color: getColor(isError, isBorderless, disabled, selectTokens),
+      background: disabled ? selectTokens.selectMultipleItemBgDisabled : selectTokens.selectMultipleItemBg
+    };
+  }
+});
+export {
+  getSelectTagDefaultStyle
+};

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

@@ -0,0 +1,10 @@
+import { SelectOptionValue } from '../SelectOption/SelectOption.types';
+export interface SelectTagProps {
+    value: SelectOptionValue;
+    label: string;
+    maxTagTextLength?: number;
+    removeValue: (removeValue: SelectOptionValue) => void;
+    isError: boolean;
+    isBorderless: boolean;
+    disabled: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { TagPlaceholderProps } from './TagPlaceholder.types';
+export declare const tagPlaceholderDataElement = "tag-placeholder";
+export declare const TagPlaceholder: FC<TagPlaceholderProps>;

package/dist/components/Select/components/TagPlaceholder/TagPlaceholder.js

@@ -0,0 +1,13 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { tagPlaceholderStyle } from "./TagPlaceholder.styles.js";
+import { Tag } from "../../../Tag/Tag.js";
+const tagPlaceholderDataElement = "tag-placeholder";
+const TagPlaceholder = ({
+  hiddenElementsCounter
+}) => {
+  return /* @__PURE__ */ jsx(Tag, { "data-element": tagPlaceholderDataElement, styles: tagPlaceholderStyle, children: `+ ${hiddenElementsCounter}` });
+};
+export {
+  TagPlaceholder,
+  tagPlaceholderDataElement
+};

package/dist/components/Select/components/TagPlaceholder/TagPlaceholder.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const tagPlaceholderStyle: {
+    wrapper: () => {
+        readonly flex: "0 0 auto";
+    };
+};

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

@@ -0,0 +1,8 @@
+const tagPlaceholderStyle = {
+  wrapper: () => ({
+    flex: "0 0 auto"
+  })
+};
+export {
+  tagPlaceholderStyle
+};

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

@@ -0,0 +1,3 @@
+export interface TagPlaceholderProps {
+    hiddenElementsCounter: number;
+}

package/dist/components/Select/forStories/dataForExamples.d.ts

@@ -0,0 +1,20 @@
+export declare const options: {
+    value: string;
+    title: string;
+}[];
+export declare const storiesOptions: ({
+    title: string;
+    value: string;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
+    disabled?: undefined;
+} | {
+    title: string;
+    value: string;
+    icon?: undefined;
+    disabled?: undefined;
+} | {
+    title: string;
+    value: string;
+    disabled: boolean;
+    icon?: undefined;
+})[];

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

@@ -0,0 +1,8 @@
+import { SelectOptionInterface, SelectOptionValue } from '../components/SelectOption/SelectOption.types';
+import { ModeType } from '../Select.types';
+export declare const useCurrentValue: (mode: ModeType, defaultValue: SelectOptionValue | SelectOptionValue[] | undefined, defaultActiveFirstOption: boolean | undefined, options: SelectOptionInterface[], onDeselect?: (value: SelectOptionValue) => void) => {
+    currentValue: SelectOptionValue[];
+    changeCurrentValue: (value: SelectOptionValue) => void;
+    removeValue: (removeValue: SelectOptionValue) => void;
+    clearCurrentValue: () => void;
+};

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

@@ -0,0 +1,31 @@
+import { useState, useCallback } from "react";
+import { useDefaultCurrentValue } from "./useDefaultCurrentValue.js";
+const useCurrentValue = (mode, defaultValue, defaultActiveFirstOption, options, onDeselect) => {
+  const defaultCurrentValue = useDefaultCurrentValue(mode, defaultValue, defaultActiveFirstOption, options);
+  const [currentValue, setCurrentValue] = useState(defaultCurrentValue);
+  const updateCurrentValue = useCallback((value) => {
+    setCurrentValue([value]);
+  }, []);
+  const addValue = useCallback((value) => {
+    setCurrentValue((prev) => [...prev, value]);
+  }, []);
+  const removeValue = useCallback((removeValue2) => {
+    setCurrentValue((prev) => prev.filter((value) => value !== removeValue2));
+    onDeselect == null ? void 0 : onDeselect(removeValue2);
+  }, [onDeselect]);
+  const changeCurrentValue = useCallback((value) => {
+    return mode === "multiple" ? addValue(value) : updateCurrentValue(value);
+  }, [addValue, mode, updateCurrentValue]);
+  const clearCurrentValue = useCallback(() => {
+    setCurrentValue([]);
+  }, []);
+  return {
+    currentValue,
+    changeCurrentValue,
+    removeValue,
+    clearCurrentValue
+  };
+};
+export {
+  useCurrentValue
+};

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

@@ -0,0 +1,3 @@
+import { SelectOptionInterface, SelectOptionValue } from '../components/SelectOption/SelectOption.types';
+import { ModeType } from '../Select.types';
+export declare const useDefaultCurrentValue: (mode: ModeType, defaultValue: SelectOptionValue | SelectOptionValue[] | undefined, defaultActiveFirstOption: boolean | undefined, options: SelectOptionInterface[]) => SelectOptionValue[];