@infomaximum/ui-kit 0.12.11 → 0.13.0

package/dist/components/{Select/Select.styles.d.ts → BaseSelect/BaseSelect.styles.d.ts}

@@ -1,6 +1,16 @@
 import { Theme } from 'themes';
-import { maxTagCountType, SelectStatus, VariantType } from './Select.types';
-export declare const getSelectDefaultStyle: (status: SelectStatus, disabled: boolean, variant: VariantType, multiple: boolean, isHover: boolean, maxTagCount?: maxTagCountType) => {
+import { maxTagCountType, SelectStatus, VariantType } from './BaseSelect.types';
+interface GetSelectDefaultStyleProps {
+    status: SelectStatus;
+    disabled: boolean;
+    variant: VariantType;
+    multiple: boolean;
+    isHover: boolean;
+    maxTagCount: maxTagCountType | undefined;
+    withPrefix: boolean;
+    isEmpty: boolean;
+}
+export declare const getSelectDefaultStyle: ({ status, disabled, variant, multiple, isHover, maxTagCount, withPrefix, isEmpty, }: GetSelectDefaultStyleProps) => {
     wrapper: (theme: Theme) => {
         readonly display: "inline-flex";
         readonly flexDirection: "column";
@@ -9,9 +19,11 @@ export declare const getSelectDefaultStyle: (status: SelectStatus, disabled: boo
         readonly border: string;
         readonly outline: "none";
         readonly height: 28 | "fit-content";
+        readonly minHeight: 28;
         readonly boxSizing: "border-box";
         readonly overflow: "hidden";
         readonly justifyContent: "center";
+        readonly transition: "border-color .3s, box-shadow .3s";
         readonly ":hover": {
             readonly border: string;
         };
@@ -101,16 +113,19 @@ export declare const getSelectDefaultStyle: (status: SelectStatus, disabled: boo
     searchInput: (theme: Theme) => {
         color: "#262626" | "#8C8C8C";
         maxWidth: string;
-        paddingLeft: number;
+        padding: number;
         background: string;
         "::placeholder": {
+            fontFamily: "Roboto";
+            fontSize: 14;
+            lineHeight: "20px";
             color: "#8C8C8C" | "#BFBFBF";
         };
         fontFamily: "Roboto";
         fontSize: 14;
         lineHeight: "20px";
         border: string;
-        height: string;
+        height: number;
         outline: string;
     };
     tagsWrapper: (theme: Theme) => {
@@ -133,3 +148,4 @@ export declare const getSelectDefaultStyle: (status: SelectStatus, disabled: boo
 export declare const getSelectSearchInputWidthStyle: (isMultiple: boolean, isEmpty: boolean, lettersNumber: number) => {
     width: number;
 } | undefined;
+export {};

package/dist/components/{Select/Select.styles.js → BaseSelect/BaseSelect.styles.js}

@@ -1,4 +1,4 @@
-import { getSelectTokens } from "./Select.tokens.js";
+import { getSelectTokens } from "./BaseSelect.tokens.js";
 const cleanButtonSelector = ".clean-button";
 const lettersWidthOfSearchInput = 7;
 const iconStyles = (theme, disabled) => {
@@ -50,10 +50,11 @@ const getLabelColor = (selectTokens, isError, variant, disabled) => {
   }
   return selectTokens.selectText;
 };
-const getBodyPadding = (selectTokens, isMultipleAndNotResponsive, multiple) => {
+const getBodyPadding = (selectTokens, isMultipleAndNotResponsive, multiple, isEmpty) => {
   const verticalPadding = isMultipleAndNotResponsive ? selectTokens.selectPaddingVertical - 1 : selectTokens.selectPaddingVertical;
   if (multiple) {
-    return `${verticalPadding}px ${selectTokens.selectPaddingHorizontal}px ${verticalPadding}px ${selectTokens.selectPaddingVertical}px`;
+    const leftPadding = isEmpty ? selectTokens.selectPaddingHorizontal : selectTokens.selectPaddingVertical;
+    return `${verticalPadding}px ${selectTokens.selectPaddingHorizontal}px ${verticalPadding}px ${leftPadding}px`;
   }
   return `${verticalPadding}px ${selectTokens.selectPaddingHorizontal}px`;
 };
@@ -67,7 +68,16 @@ const getIconStyles = (theme) => {
     }
   };
 };
-const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, maxTagCount) => {
+const getSelectDefaultStyle = ({
+  status,
+  disabled,
+  variant,
+  multiple,
+  isHover,
+  maxTagCount,
+  withPrefix,
+  isEmpty
+}) => {
   const isError = status === "error";
   const isResponsive = maxTagCount === "responsive";
   const isOutlined = variant === "outlined";
@@ -83,15 +93,17 @@ const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, max
         border: getBorder(selectTokens, isError, variant),
         outline: "none",
         height: isMultipleAndNotResponsive ? "fit-content" : theme.controlHeightM,
+        minHeight: theme.controlHeightM,
         boxSizing: "border-box",
         overflow: "hidden",
         justifyContent: "center",
+        transition: "border-color .3s, box-shadow .3s",
         ":hover": {
           border: isOutlined ? `1px solid ${getHoveredBorder(selectTokens, disabled, isError)}` : "none"
         },
         ":active, :focus, :focus-within, :focus-visible": {
           border: isOutlined ? `1px solid ${getActiveBorder(selectTokens, disabled, isError)}` : "none",
-          boxShadow: disabled ? "none" : `0px 0px 4px 0px ${theme.fieldFocused}`
+          boxShadow: disabled || !isOutlined ? "none" : `0px 0px 4px 0px ${isError ? theme.fieldFocusedDanger : theme.fieldFocused}`
         }
       };
     },
@@ -102,7 +114,7 @@ const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, max
         alignItems: "center",
         gap: theme.marginM,
         height: isResponsive ? theme.controlHeightM : "fit-content",
-        padding: getBodyPadding(selectTokens, isMultipleAndNotResponsive, multiple),
+        padding: getBodyPadding(selectTokens, isMultipleAndNotResponsive, multiple, isEmpty),
         borderRadius: theme.borderRadiusM,
         background: disabled && isOutlined ? selectTokens.selectBgDisabled : selectTokens.selectBg,
         boxSizing: "border-box",
@@ -124,7 +136,7 @@ const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, max
       alignItems: "center",
       gap: theme.marginXS,
       flex: "1 1 auto",
-      paddingLeft: multiple ? theme.x2 : 0
+      paddingLeft: multiple && withPrefix ? theme.x2 : 0
     }),
     content: (theme) => {
       const selectTokens = getSelectTokens(theme);
@@ -166,15 +178,16 @@ const getSelectDefaultStyle = (status, disabled, variant, multiple, isHover, max
       const selectTokens = getSelectTokens(theme);
       return {
         border: "none",
-        height: "100%",
+        height: 20,
         outline: "none",
         ...theme.typography.body2,
         color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectText,
         maxWidth: "80%",
-        paddingLeft: 0,
+        padding: 0,
         background: "inherit",
         "::placeholder": {
-          color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectPlaceholder
+          color: disabled ? selectTokens.selectTextDisabled : selectTokens.selectPlaceholder,
+          ...theme.typography.body2
         }
       };
     },

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

@@ -0,0 +1,99 @@
+import { FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { Theme } from 'themes';
+import { Interpolation } from '@emotion/react';
+import { DropdownMatchSelectWidthType, DropdownStyles } from './components/BaseSelectOptionList/BaseSelectOptionList.types';
+export type SelectStatus = "default" | "error";
+export type VariantType = "outlined" | "borderless";
+export type ModeType = "single" | "multiple";
+export type maxTagCountType = number | "responsive";
+export type BaseOptionValue = string;
+export interface BaseSelectStyles {
+    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;
+}
+export interface BaseSelectProps<Option extends BaseSelectOptionInterface<OptionValue>, OptionValue> {
+    options?: Option[];
+    mode?: ModeType;
+    variant?: VariantType;
+    defaultValue?: OptionValue | OptionValue[];
+    defaultOpen?: boolean;
+    value?: OptionValue | OptionValue[];
+    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: Option) => boolean);
+    searchValue?: string;
+    notFoundContent?: ReactNode;
+    drawer?: boolean;
+    filterSort?: (optionA: Option, optionB: Option, searchValue: string) => number;
+    styles?: BaseSelectStyles;
+    autoClearSearchValue?: boolean;
+    maxTagCount?: maxTagCountType;
+    maxTagPlaceholder?: ((omittedValues: Option[]) => ReactNode) | ReactNode;
+    maxTagTextLength?: number;
+    currentSelectingIndex: number;
+    getCurrentSelectingValue: () => OptionValue | null;
+    onKeyControl: (e: KeyboardEvent<Element>) => void;
+    getOptionByValue: (value: OptionValue) => Option | undefined;
+    virtualizerEstimateSize: (index: number) => number;
+    renderDropdownItem: (option: Option, index: number) => ReactNode;
+    filterOptions: (options: Option[], filterValue: string) => Option[];
+    valuesFilter?: (options: OptionValue[]) => OptionValue[];
+    dropdownRender?: (originNode: ReactNode) => ReactNode;
+    optionRender?: (option: BaseSelectOptionProps<Option, OptionValue>) => ReactNode;
+    labelRender?: (props: LabelInValueType<OptionValue>) => ReactNode;
+    tagRender?: (label: string) => ReactNode;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (value: OptionValue[], option: Option[]) => void;
+    onClear?: () => void;
+    onDropdownVisibleChange?: () => void;
+    onInputKeyDown?: (event: KeyboardEvent) => void;
+    onSelect?: (value: OptionValue, option: Option) => void;
+    getPopupContainer?: () => HTMLElement;
+    onSearch?: (searchValue: string) => void;
+    onDeselect?: (value: OptionValue) => void;
+    onTagClose?: (value: OptionValue) => void;
+}
+export interface LabelInValueType<OptionValue> {
+    label: ReactNode;
+    value: OptionValue;
+}
+export type PlacementType = "bottomLeft" | "bottomRight" | "topLeft" | "topRight";
+export type UseSearchProps<Option extends BaseSelectOptionInterface<OptionValue>, OptionValue> = Required<Pick<BaseSelectProps<Option, OptionValue>, "options" | "filterOptions">> & Pick<BaseSelectProps<Option, OptionValue>, "onSearch" | "searchValue" | "filterSort">;
+export interface BaseSelectOptionInterface<OptionValue> {
+    value: OptionValue;
+    title: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface BaseSelectOptionProps<Option extends BaseSelectOptionInterface<OptionValue>, OptionValue> {
+    option: Option;
+    index: number;
+}

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

@@ -0,0 +1,8 @@
+import { Placement } from '@floating-ui/react';
+import { maxTagCountType, PlacementType, BaseSelectOptionInterface } from './BaseSelect.types';
+export declare const additionalElements: string[];
+export declare const convertSelectPlacement: (placement: PlacementType) => Placement;
+export declare const isKeyOfObject: <T extends object>(obj: T, key: string | number | symbol) => key is keyof T;
+export declare const getLabelByValue: <SelectOption extends BaseSelectOptionInterface<OptionValue>, OptionValue>(value: OptionValue, getOptionByValue: (value: OptionValue) => SelectOption | undefined, optionLabelProp: string) => string | undefined;
+export declare const getLabel: <SelectOption extends BaseSelectOptionInterface<OptionValue>, OptionValue = string>(values: OptionValue[], getOptionByValue: (value: OptionValue) => SelectOption | undefined, optionLabelProp: string) => string[];
+export declare const getVisibleLabels: (labels: string[], maxTagCount: maxTagCountType | undefined) => string[];

package/dist/components/BaseSelect/BaseSelect.utils.js

@@ -0,0 +1,39 @@
+import { isUndefined, isNumber } from "lodash-es";
+const additionalElements = ["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 isKeyOfObject = (obj, key) => {
+  return key in obj;
+};
+const getLabelByValue = (value, getOptionByValue, optionLabelProp) => {
+  var _a;
+  const option = getOptionByValue(value);
+  if (isUndefined(option)) {
+    return void 0;
+  }
+  return isKeyOfObject(option, optionLabelProp) ? (_a = option[optionLabelProp]) == null ? void 0 : _a.toString() : void 0;
+};
+const getLabel = (values, getOptionByValue, optionLabelProp) => {
+  return values.map((value) => getLabelByValue(value, getOptionByValue, optionLabelProp) ?? String(value));
+};
+const getVisibleLabels = (labels, maxTagCount) => {
+  if (isNumber(maxTagCount)) {
+    return labels.slice(0, maxTagCount);
+  }
+  return labels;
+};
+export {
+  additionalElements,
+  convertSelectPlacement,
+  getLabel,
+  getLabelByValue,
+  getVisibleLabels,
+  isKeyOfObject
+};

package/dist/components/BaseSelect/components/BaseSelectOptionList/BaseSelectOptionList.types.d.ts

@@ -0,0 +1,11 @@
+import { Interpolation } from '@emotion/react';
+import { Theme } from 'themes';
+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;
+}

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

@@ -0,0 +1,4 @@
+import { SelectOptionListProps } from './SelectOptionList.types';
+import { BaseSelectOptionInterface } from 'components/BaseSelect/BaseSelect.types';
+export declare const SelectOptionListComponent: <Option extends BaseSelectOptionInterface<OptionValue>, OptionValue>({ options, styles, renderDropdownItem, virtualizerEstimateSize, }: SelectOptionListProps<Option, OptionValue>) => import('react').ReactPortal | null;
+export declare const SelectOptionList: typeof SelectOptionListComponent;

package/dist/components/BaseSelect/components/SelectOptionList/SelectOptionList.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { memo, useEffect, useMemo } from "react";
+import { getSelectOptionListStyle } from "./SelectOptionList.styles.js";
+import { isFunction } from "lodash-es";
+import { createPortal } from "react-dom";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useBaseSelectContext } from "../../contexts/BaseSelectContext.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+import { LoadingOutlined } from "../../../../icons/icons/LoadingOutlined.js";
+const SelectOptionListComponent = ({
+  options,
+  styles,
+  renderDropdownItem,
+  virtualizerEstimateSize
+}) => {
+  const theme = useTheme();
+  const {
+    showOptionList,
+    dropdownMinWidth,
+    dropdownMaxHeight,
+    dropdownPrompt,
+    loading,
+    dropdownClassName,
+    dropdownMatchSelectWidth,
+    floatingStyles,
+    referenceOffsetWidth,
+    floatingRef,
+    virtual,
+    currentSelectingIndex,
+    emptyContent,
+    notFoundContent,
+    searchValue,
+    showSearch,
+    setFloating,
+    dropdownRender,
+    getPopupContainer
+  } = useBaseSelectContext();
+  const {
+    getTotalSize,
+    getVirtualItems,
+    scrollToIndex,
+    scrollToOffset,
+    measure
+  } = useVirtualizer({
+    count: virtual && dropdownPrompt ? options.length + 1 : options.length,
+    getScrollElement: () => floatingRef.current,
+    estimateSize: (index) => virtualizerEstimateSize(index)
+  });
+  useEffect(() => {
+    measure();
+  }, [virtualizerEstimateSize]);
+  useEffect(() => {
+    if (!showOptionList) {
+      return;
+    }
+    scrollToIndex(currentSelectingIndex || 0);
+  }, [showOptionList, currentSelectingIndex, scrollToIndex, scrollToOffset]);
+  const selectOptionListStyle = getSelectOptionListStyle({
+    dropdownMinWidth,
+    dropdownMaxHeight,
+    showOptionList,
+    dropdownMatchSelectWidth,
+    referenceOffsetWidth,
+    isMaxSize: getTotalSize() >= dropdownMaxHeight,
+    getTotalSize
+  });
+  const hasPlaceholder = loading || options.length === 0;
+  const prompt = useMemo(() => {
+    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:prompt;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVNlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbkxpc3QvU2VsZWN0T3B0aW9uTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBK0VXIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVNlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbkxpc3QvU2VsZWN0T3B0aW9uTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBtZW1vLCB1c2VFZmZlY3QsIHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgU2VsZWN0T3B0aW9uTGlzdFByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uTGlzdC50eXBlc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uTGlzdFN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uTGlzdC5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBMb2FkaW5nT3V0bGluZWQgfSBmcm9tIFwiaWNvbnMvaWNvbnNcIjtcbmltcG9ydCB7IGlzRnVuY3Rpb24gfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBjcmVhdGVQb3J0YWwgfSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgeyB1c2VWaXJ0dWFsaXplciB9IGZyb20gXCJAdGFuc3RhY2svcmVhY3QtdmlydHVhbFwiO1xuaW1wb3J0IHR5cGUgeyBCYXNlU2VsZWN0T3B0aW9uSW50ZXJmYWNlIH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9CYXNlU2VsZWN0LnR5cGVzXCI7XG5pbXBvcnQgeyB1c2VCYXNlU2VsZWN0Q29udGV4dCB9IGZyb20gXCJjb21wb25lbnRzL0Jhc2VTZWxlY3QvY29udGV4dHMvQmFzZVNlbGVjdENvbnRleHRcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbkxpc3RDb21wb25lbnQgPSA8XG4gIE9wdGlvbiBleHRlbmRzIEJhc2VTZWxlY3RPcHRpb25JbnRlcmZhY2U8T3B0aW9uVmFsdWU+LFxuICBPcHRpb25WYWx1ZSxcbj4oe1xuICBvcHRpb25zLFxuICBzdHlsZXMsXG4gIHJlbmRlckRyb3Bkb3duSXRlbSxcbiAgdmlydHVhbGl6ZXJFc3RpbWF0ZVNpemUsXG59OiBTZWxlY3RPcHRpb25MaXN0UHJvcHM8T3B0aW9uLCBPcHRpb25WYWx1ZT4pID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7XG4gICAgc2hvd09wdGlvbkxpc3QsXG4gICAgZHJvcGRvd25NaW5XaWR0aCxcbiAgICBkcm9wZG93bk1heEhlaWdodCxcbiAgICBkcm9wZG93blByb21wdCxcbiAgICBsb2FkaW5nLFxuICAgIGRyb3Bkb3duQ2xhc3NOYW1lLFxuICAgIGRyb3Bkb3duTWF0Y2hTZWxlY3RXaWR0aCxcbiAgICBmbG9hdGluZ1N0eWxlcyxcbiAgICByZWZlcmVuY2VPZmZzZXRXaWR0aCxcbiAgICBmbG9hdGluZ1JlZixcbiAgICB2aXJ0dWFsLFxuICAgIGN1cnJlbnRTZWxlY3RpbmdJbmRleCxcbiAgICBlbXB0eUNvbnRlbnQsXG4gICAgbm90Rm91bmRDb250ZW50LFxuICAgIHNlYXJjaFZhbHVlLFxuICAgIHNob3dTZWFyY2gsXG4gICAgc2V0RmxvYXRpbmcsXG4gICAgZHJvcGRvd25SZW5kZXIsXG4gICAgZ2V0UG9wdXBDb250YWluZXIsXG4gIH0gPSB1c2VCYXNlU2VsZWN0Q29udGV4dDxPcHRpb25WYWx1ZT4oKTtcblxuICBjb25zdCB7IGdldFRvdGFsU2l6ZSwgZ2V0VmlydHVhbEl0ZW1zLCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldCwgbWVhc3VyZSB9ID0gdXNlVmlydHVhbGl6ZXIoe1xuICAgIGNvdW50OiB2aXJ0dWFsICYmIGRyb3Bkb3duUHJvbXB0ID8gb3B0aW9ucy5sZW5ndGggKyAxIDogb3B0aW9ucy5sZW5ndGgsXG4gICAgZ2V0U2Nyb2xsRWxlbWVudDogKCkgPT4gZmxvYXRpbmdSZWYuY3VycmVudCxcbiAgICBlc3RpbWF0ZVNpemU6IChpbmRleCkgPT4gdmlydHVhbGl6ZXJFc3RpbWF0ZVNpemUoaW5kZXgpLFxuICB9KTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIG1lYXN1cmUoKTtcbiAgfSwgW3ZpcnR1YWxpemVyRXN0aW1hdGVTaXplXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXNob3dPcHRpb25MaXN0KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2Nyb2xsVG9JbmRleChjdXJyZW50U2VsZWN0aW5nSW5kZXggfHwgMCk7XG4gIH0sIFtzaG93T3B0aW9uTGlzdCwgY3VycmVudFNlbGVjdGluZ0luZGV4LCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldF0pO1xuXG4gIGNvbnN0IHNlbGVjdE9wdGlvbkxpc3RTdHlsZSA9IGdldFNlbGVjdE9wdGlvbkxpc3RTdHlsZSh7XG4gICAgZHJvcGRvd25NaW5XaWR0aCxcbiAgICBkcm9wZG93bk1heEhlaWdodCxcbiAgICBzaG93T3B0aW9uTGlzdCxcbiAgICBkcm9wZG93bk1hdGNoU2VsZWN0V2lkdGgsXG4gICAgcmVmZXJlbmNlT2Zmc2V0V2lkdGgsXG4gICAgaXNNYXhTaXplOiBnZXRUb3RhbFNpemUoKSA+PSBkcm9wZG93bk1heEhlaWdodCxcbiAgICBnZXRUb3RhbFNpemUsXG4gIH0pO1xuXG4gIGNvbnN0IGhhc1BsYWNlaG9sZGVyID0gbG9hZGluZyB8fCBvcHRpb25zLmxlbmd0aCA9PT0gMDtcblxuICBjb25zdCBwcm9tcHQgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAoIWRyb3Bkb3duUHJvbXB0KSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjc3M9e1tzZWxlY3RPcHRpb25MaXN0U3R5bGUucHJvbXB0KHRoZW1lKSwgc3R5bGVzPy5wcm9tcHQ/Lih0aGVtZSldfSBrZXk9XCJwcm9tcHRcIj5cbiAgICAgICAge2Ryb3Bkb3duUHJvbXB0fVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSwgW2Ryb3Bkb3duUHJvbXB0LCBzZWxlY3RPcHRpb25MaXN0U3R5bGUsIHN0eWxlcywgdGhlbWVdKTtcblxuICBjb25zdCB2aXJ0dWFsaXplZE9wdGlvbnMgPSB1c2VNZW1vKCgpID0+IHtcbiAgICByZXR1cm4gZ2V0VmlydHVhbEl0ZW1zKCkubWFwKCh7IGluZGV4LCBzaXplLCBzdGFydCB9KSA9PiB7XG4gICAgICBpZiAoaW5kZXggPCBvcHRpb25zLmxlbmd0aCkge1xuICAgICAgICBjb25zdCBvcHRpb24gPSBvcHRpb25zW2luZGV4XTtcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9XG4gICAgICAgICAgICBrZXk9e29wdGlvbi52YWx1ZT8udG9TdHJpbmcoKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7cmVuZGVyRHJvcGRvd25JdGVtKG9wdGlvbiwgaW5kZXgpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgICAgfVxuXG4gICAgICBpZiAoIWRyb3Bkb3duUHJvbXB0KSB7XG4gICAgICAgIHJldHVybiBudWxsO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2IGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9IGtleT1cInByb21wdFwiPlxuICAgICAgICAgIHtwcm9tcHR9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKTtcbiAgICB9KTtcbiAgfSwgW2Ryb3Bkb3duUHJvbXB0LCBnZXRWaXJ0dWFsSXRlbXMsIG9wdGlvbnMsIHByb21wdCwgcmVuZGVyRHJvcGRvd25JdGVtLCBzZWxlY3RPcHRpb25MaXN0U3R5bGVdKTtcblxuICBjb25zdCBvcHRpb25zTGlzdCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKFxuICAgICAgPD5cbiAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiByZW5kZXJEcm9wZG93bkl0ZW0ob3B0aW9uLCBpbmRleCkpfVxuICAgICAgICB7cHJvbXB0fVxuICAgICAgPC8+XG4gICAgKSxcbiAgICBbb3B0aW9ucywgcHJvbXB0LCByZW5kZXJEcm9wZG93bkl0ZW1dXG4gICk7XG5cbiAgY29uc3QgcmVuZGVyT3B0aW9uTGlzdENvbnRlbnQgPSAoKSA9PiAodmlydHVhbCA/IHZpcnR1YWxpemVkT3B0aW9ucyA6IG9wdGlvbnNMaXN0KTtcblxuICBjb25zdCByZW5kZXJQbGFjZWhvbGRlciA9ICgpID0+IHtcbiAgICBpZiAobG9hZGluZykge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPHNwYW4gY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mTG9hZGluZyh0aGVtZSl9PlxuICAgICAgICAgIDxMb2FkaW5nT3V0bGluZWQgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKTtcbiAgICB9XG5cbiAgICBjb25zdCBpc0FjdGl2ZVNlYXJjaCA9IHNlYXJjaFZhbHVlICYmIHNob3dTZWFyY2g7XG5cbiAgICBpZiAob3B0aW9ucy5sZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mRW1wdHlDb250ZW50KHRoZW1lKX0+XG4gICAgICAgICAge2lzQWN0aXZlU2VhcmNoID8gbm90Rm91bmRDb250ZW50IDogZW1wdHlDb250ZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIG51bGw7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyU2VsZWN0T3B0aW9uTGlzdCA9ICgpID0+IChcbiAgICA8ZGl2XG4gICAgICByZWY9e3NldEZsb2F0aW5nfVxuICAgICAgc3R5bGU9e2Zsb2F0aW5nU3R5bGVzfVxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uTGlzdFN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgY2xhc3NOYW1lPXtkcm9wZG93bkNsYXNzTmFtZX1cbiAgICAgIHRhYkluZGV4PXsyfVxuICAgID5cbiAgICAgIHtoYXNQbGFjZWhvbGRlciA/IChcbiAgICAgICAgcmVuZGVyUGxhY2Vob2xkZXIoKVxuICAgICAgKSA6IChcbiAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS5jb250YWluZXIodmlydHVhbCl9PlxuICAgICAgICAgIHtpc0Z1bmN0aW9uKGRyb3Bkb3duUmVuZGVyKVxuICAgICAgICAgICAgPyBkcm9wZG93blJlbmRlcihyZW5kZXJPcHRpb25MaXN0Q29udGVudCgpKVxuICAgICAgICAgICAgOiByZW5kZXJPcHRpb25MaXN0Q29udGVudCgpfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG5cbiAgaWYgKCFzaG93T3B0aW9uTGlzdCAmJiAhdmlydHVhbCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIGNyZWF0ZVBvcnRhbChyZW5kZXJTZWxlY3RPcHRpb25MaXN0KCksIGdldFBvcHVwQ29udGFpbmVyKCkpO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbkxpc3QgPSBtZW1vKFNlbGVjdE9wdGlvbkxpc3RDb21wb25lbnQpIGFzIHR5cGVvZiBTZWxlY3RPcHRpb25MaXN0Q29tcG9uZW50O1xuIl19 */"], children: dropdownPrompt }, "prompt");
+  }, [dropdownPrompt, selectOptionListStyle, styles, theme]);
+  const virtualizedOptions = useMemo(() => {
+    return getVirtualItems().map(({
+      index,
+      size,
+      start
+    }) => {
+      var _a;
+      if (index < options.length) {
+        const option = options[index];
+        return /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.virtualizedOptionWrapper(size, start), children: renderDropdownItem(option, index) }, (_a = option.value) == null ? void 0 : _a.toString());
+      }
+      if (!dropdownPrompt) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.virtualizedOptionWrapper(size, start), children: prompt }, "prompt");
+    });
+  }, [dropdownPrompt, getVirtualItems, options, prompt, renderDropdownItem, selectOptionListStyle]);
+  const optionsList = useMemo(() => /* @__PURE__ */ jsxs(Fragment, { children: [
+    options.map((option, index) => renderDropdownItem(option, index)),
+    prompt
+  ] }), [options, prompt, renderDropdownItem]);
+  const renderOptionListContent = () => virtual ? virtualizedOptions : optionsList;
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVNlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbkxpc3QvU2VsZWN0T3B0aW9uTGlzdC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBc0pNIiwiZmlsZSI6Ii9idWlsZHMvZnJvbnRlbmQvbGlicy91aS1raXQvc3JjL2NvbXBvbmVudHMvQmFzZVNlbGVjdC9jb21wb25lbnRzL1NlbGVjdE9wdGlvbkxpc3QvU2VsZWN0T3B0aW9uTGlzdC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBtZW1vLCB1c2VFZmZlY3QsIHVzZU1lbW8gfSBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB0eXBlIHsgU2VsZWN0T3B0aW9uTGlzdFByb3BzIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uTGlzdC50eXBlc1wiO1xuaW1wb3J0IHsgZ2V0U2VsZWN0T3B0aW9uTGlzdFN0eWxlIH0gZnJvbSBcIi4vU2VsZWN0T3B0aW9uTGlzdC5zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVRoZW1lIH0gZnJvbSBcImhvb2tzL3VzZVRoZW1lXCI7XG5pbXBvcnQgeyBMb2FkaW5nT3V0bGluZWQgfSBmcm9tIFwiaWNvbnMvaWNvbnNcIjtcbmltcG9ydCB7IGlzRnVuY3Rpb24gfSBmcm9tIFwibG9kYXNoLWVzXCI7XG5pbXBvcnQgeyBjcmVhdGVQb3J0YWwgfSBmcm9tIFwicmVhY3QtZG9tXCI7XG5pbXBvcnQgeyB1c2VWaXJ0dWFsaXplciB9IGZyb20gXCJAdGFuc3RhY2svcmVhY3QtdmlydHVhbFwiO1xuaW1wb3J0IHR5cGUgeyBCYXNlU2VsZWN0T3B0aW9uSW50ZXJmYWNlIH0gZnJvbSBcImNvbXBvbmVudHMvQmFzZVNlbGVjdC9CYXNlU2VsZWN0LnR5cGVzXCI7XG5pbXBvcnQgeyB1c2VCYXNlU2VsZWN0Q29udGV4dCB9IGZyb20gXCJjb21wb25lbnRzL0Jhc2VTZWxlY3QvY29udGV4dHMvQmFzZVNlbGVjdENvbnRleHRcIjtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbkxpc3RDb21wb25lbnQgPSA8XG4gIE9wdGlvbiBleHRlbmRzIEJhc2VTZWxlY3RPcHRpb25JbnRlcmZhY2U8T3B0aW9uVmFsdWU+LFxuICBPcHRpb25WYWx1ZSxcbj4oe1xuICBvcHRpb25zLFxuICBzdHlsZXMsXG4gIHJlbmRlckRyb3Bkb3duSXRlbSxcbiAgdmlydHVhbGl6ZXJFc3RpbWF0ZVNpemUsXG59OiBTZWxlY3RPcHRpb25MaXN0UHJvcHM8T3B0aW9uLCBPcHRpb25WYWx1ZT4pID0+IHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuICBjb25zdCB7XG4gICAgc2hvd09wdGlvbkxpc3QsXG4gICAgZHJvcGRvd25NaW5XaWR0aCxcbiAgICBkcm9wZG93bk1heEhlaWdodCxcbiAgICBkcm9wZG93blByb21wdCxcbiAgICBsb2FkaW5nLFxuICAgIGRyb3Bkb3duQ2xhc3NOYW1lLFxuICAgIGRyb3Bkb3duTWF0Y2hTZWxlY3RXaWR0aCxcbiAgICBmbG9hdGluZ1N0eWxlcyxcbiAgICByZWZlcmVuY2VPZmZzZXRXaWR0aCxcbiAgICBmbG9hdGluZ1JlZixcbiAgICB2aXJ0dWFsLFxuICAgIGN1cnJlbnRTZWxlY3RpbmdJbmRleCxcbiAgICBlbXB0eUNvbnRlbnQsXG4gICAgbm90Rm91bmRDb250ZW50LFxuICAgIHNlYXJjaFZhbHVlLFxuICAgIHNob3dTZWFyY2gsXG4gICAgc2V0RmxvYXRpbmcsXG4gICAgZHJvcGRvd25SZW5kZXIsXG4gICAgZ2V0UG9wdXBDb250YWluZXIsXG4gIH0gPSB1c2VCYXNlU2VsZWN0Q29udGV4dDxPcHRpb25WYWx1ZT4oKTtcblxuICBjb25zdCB7IGdldFRvdGFsU2l6ZSwgZ2V0VmlydHVhbEl0ZW1zLCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldCwgbWVhc3VyZSB9ID0gdXNlVmlydHVhbGl6ZXIoe1xuICAgIGNvdW50OiB2aXJ0dWFsICYmIGRyb3Bkb3duUHJvbXB0ID8gb3B0aW9ucy5sZW5ndGggKyAxIDogb3B0aW9ucy5sZW5ndGgsXG4gICAgZ2V0U2Nyb2xsRWxlbWVudDogKCkgPT4gZmxvYXRpbmdSZWYuY3VycmVudCxcbiAgICBlc3RpbWF0ZVNpemU6IChpbmRleCkgPT4gdmlydHVhbGl6ZXJFc3RpbWF0ZVNpemUoaW5kZXgpLFxuICB9KTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIG1lYXN1cmUoKTtcbiAgfSwgW3ZpcnR1YWxpemVyRXN0aW1hdGVTaXplXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIXNob3dPcHRpb25MaXN0KSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuXG4gICAgc2Nyb2xsVG9JbmRleChjdXJyZW50U2VsZWN0aW5nSW5kZXggfHwgMCk7XG4gIH0sIFtzaG93T3B0aW9uTGlzdCwgY3VycmVudFNlbGVjdGluZ0luZGV4LCBzY3JvbGxUb0luZGV4LCBzY3JvbGxUb09mZnNldF0pO1xuXG4gIGNvbnN0IHNlbGVjdE9wdGlvbkxpc3RTdHlsZSA9IGdldFNlbGVjdE9wdGlvbkxpc3RTdHlsZSh7XG4gICAgZHJvcGRvd25NaW5XaWR0aCxcbiAgICBkcm9wZG93bk1heEhlaWdodCxcbiAgICBzaG93T3B0aW9uTGlzdCxcbiAgICBkcm9wZG93bk1hdGNoU2VsZWN0V2lkdGgsXG4gICAgcmVmZXJlbmNlT2Zmc2V0V2lkdGgsXG4gICAgaXNNYXhTaXplOiBnZXRUb3RhbFNpemUoKSA+PSBkcm9wZG93bk1heEhlaWdodCxcbiAgICBnZXRUb3RhbFNpemUsXG4gIH0pO1xuXG4gIGNvbnN0IGhhc1BsYWNlaG9sZGVyID0gbG9hZGluZyB8fCBvcHRpb25zLmxlbmd0aCA9PT0gMDtcblxuICBjb25zdCBwcm9tcHQgPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAoIWRyb3Bkb3duUHJvbXB0KSB7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICByZXR1cm4gKFxuICAgICAgPGRpdiBjc3M9e1tzZWxlY3RPcHRpb25MaXN0U3R5bGUucHJvbXB0KHRoZW1lKSwgc3R5bGVzPy5wcm9tcHQ/Lih0aGVtZSldfSBrZXk9XCJwcm9tcHRcIj5cbiAgICAgICAge2Ryb3Bkb3duUHJvbXB0fVxuICAgICAgPC9kaXY+XG4gICAgKTtcbiAgfSwgW2Ryb3Bkb3duUHJvbXB0LCBzZWxlY3RPcHRpb25MaXN0U3R5bGUsIHN0eWxlcywgdGhlbWVdKTtcblxuICBjb25zdCB2aXJ0dWFsaXplZE9wdGlvbnMgPSB1c2VNZW1vKCgpID0+IHtcbiAgICByZXR1cm4gZ2V0VmlydHVhbEl0ZW1zKCkubWFwKCh7IGluZGV4LCBzaXplLCBzdGFydCB9KSA9PiB7XG4gICAgICBpZiAoaW5kZXggPCBvcHRpb25zLmxlbmd0aCkge1xuICAgICAgICBjb25zdCBvcHRpb24gPSBvcHRpb25zW2luZGV4XTtcblxuICAgICAgICByZXR1cm4gKFxuICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgIGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9XG4gICAgICAgICAgICBrZXk9e29wdGlvbi52YWx1ZT8udG9TdHJpbmcoKX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICB7cmVuZGVyRHJvcGRvd25JdGVtKG9wdGlvbiwgaW5kZXgpfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApO1xuICAgICAgfVxuXG4gICAgICBpZiAoIWRyb3Bkb3duUHJvbXB0KSB7XG4gICAgICAgIHJldHVybiBudWxsO1xuICAgICAgfVxuXG4gICAgICByZXR1cm4gKFxuICAgICAgICA8ZGl2IGNzcz17c2VsZWN0T3B0aW9uTGlzdFN0eWxlLnZpcnR1YWxpemVkT3B0aW9uV3JhcHBlcihzaXplLCBzdGFydCl9IGtleT1cInByb21wdFwiPlxuICAgICAgICAgIHtwcm9tcHR9XG4gICAgICAgIDwvZGl2PlxuICAgICAgKTtcbiAgICB9KTtcbiAgfSwgW2Ryb3Bkb3duUHJvbXB0LCBnZXRWaXJ0dWFsSXRlbXMsIG9wdGlvbnMsIHByb21wdCwgcmVuZGVyRHJvcGRvd25JdGVtLCBzZWxlY3RPcHRpb25MaXN0U3R5bGVdKTtcblxuICBjb25zdCBvcHRpb25zTGlzdCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKFxuICAgICAgPD5cbiAgICAgICAge29wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiByZW5kZXJEcm9wZG93bkl0ZW0ob3B0aW9uLCBpbmRleCkpfVxuICAgICAgICB7cHJvbXB0fVxuICAgICAgPC8+XG4gICAgKSxcbiAgICBbb3B0aW9ucywgcHJvbXB0LCByZW5kZXJEcm9wZG93bkl0ZW1dXG4gICk7XG5cbiAgY29uc3QgcmVuZGVyT3B0aW9uTGlzdENvbnRlbnQgPSAoKSA9PiAodmlydHVhbCA/IHZpcnR1YWxpemVkT3B0aW9ucyA6IG9wdGlvbnNMaXN0KTtcblxuICBjb25zdCByZW5kZXJQbGFjZWhvbGRlciA9ICgpID0+IHtcbiAgICBpZiAobG9hZGluZykge1xuICAgICAgcmV0dXJuIChcbiAgICAgICAgPHNwYW4gY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mTG9hZGluZyh0aGVtZSl9PlxuICAgICAgICAgIDxMb2FkaW5nT3V0bGluZWQgLz5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgKTtcbiAgICB9XG5cbiAgICBjb25zdCBpc0FjdGl2ZVNlYXJjaCA9IHNlYXJjaFZhbHVlICYmIHNob3dTZWFyY2g7XG5cbiAgICBpZiAob3B0aW9ucy5sZW5ndGggPT09IDApIHtcbiAgICAgIHJldHVybiAoXG4gICAgICAgIDxkaXYgY3NzPXtzZWxlY3RPcHRpb25MaXN0U3R5bGUud3JhcHBlck9mRW1wdHlDb250ZW50KHRoZW1lKX0+XG4gICAgICAgICAge2lzQWN0aXZlU2VhcmNoID8gbm90Rm91bmRDb250ZW50IDogZW1wdHlDb250ZW50fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG4gICAgfVxuXG4gICAgcmV0dXJuIG51bGw7XG4gIH07XG5cbiAgY29uc3QgcmVuZGVyU2VsZWN0T3B0aW9uTGlzdCA9ICgpID0+IChcbiAgICA8ZGl2XG4gICAgICByZWY9e3NldEZsb2F0aW5nfVxuICAgICAgc3R5bGU9e2Zsb2F0aW5nU3R5bGVzfVxuICAgICAgY3NzPXtbc2VsZWN0T3B0aW9uTGlzdFN0eWxlLndyYXBwZXIodGhlbWUpLCBzdHlsZXM/LndyYXBwZXI/Lih0aGVtZSldfVxuICAgICAgY2xhc3NOYW1lPXtkcm9wZG93bkNsYXNzTmFtZX1cbiAgICAgIHRhYkluZGV4PXsyfVxuICAgID5cbiAgICAgIHtoYXNQbGFjZWhvbGRlciA/IChcbiAgICAgICAgcmVuZGVyUGxhY2Vob2xkZXIoKVxuICAgICAgKSA6IChcbiAgICAgICAgPGRpdiBjc3M9e3NlbGVjdE9wdGlvbkxpc3RTdHlsZS5jb250YWluZXIodmlydHVhbCl9PlxuICAgICAgICAgIHtpc0Z1bmN0aW9uKGRyb3Bkb3duUmVuZGVyKVxuICAgICAgICAgICAgPyBkcm9wZG93blJlbmRlcihyZW5kZXJPcHRpb25MaXN0Q29udGVudCgpKVxuICAgICAgICAgICAgOiByZW5kZXJPcHRpb25MaXN0Q29udGVudCgpfVxuICAgICAgICA8L2Rpdj5cbiAgICAgICl9XG4gICAgPC9kaXY+XG4gICk7XG5cbiAgaWYgKCFzaG93T3B0aW9uTGlzdCAmJiAhdmlydHVhbCkge1xuICAgIHJldHVybiBudWxsO1xuICB9XG5cbiAgcmV0dXJuIGNyZWF0ZVBvcnRhbChyZW5kZXJTZWxlY3RPcHRpb25MaXN0KCksIGdldFBvcHVwQ29udGFpbmVyKCkpO1xufTtcblxuZXhwb3J0IGNvbnN0IFNlbGVjdE9wdGlvbkxpc3QgPSBtZW1vKFNlbGVjdE9wdGlvbkxpc3RDb21wb25lbnQpIGFzIHR5cGVvZiBTZWxlY3RPcHRpb25MaXN0Q29tcG9uZW50O1xuIl19 */"], className: dropdownClassName, tabIndex: 2, children: hasPlaceholder ? renderPlaceholder() : /* @__PURE__ */ jsx("div", { css: selectOptionListStyle.container(virtual), children: isFunction(dropdownRender) ? dropdownRender(renderOptionListContent()) : renderOptionListContent() }) });
+  };
+  if (!showOptionList && !virtual) {
+    return null;
+  }
+  return createPortal(renderSelectOptionList(), getPopupContainer());
+};
+const SelectOptionList = memo(SelectOptionListComponent);
+export {
+  SelectOptionList,
+  SelectOptionListComponent
+};

package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.d.ts

@@ -1,5 +1,14 @@
 import { Theme } from 'themes';
-export declare const getSelectOptionListStyle: (dropdownMinWidth: number, dropdownMaxHeight: number, showOptionList: boolean, dropdownMatchSelectWidth: boolean | number, referenceOffsetWidth: number | undefined, getTotalSize: () => number) => {
+interface selectOptionListStyleProps {
+    dropdownMinWidth: number;
+    dropdownMaxHeight: number;
+    showOptionList: boolean;
+    dropdownMatchSelectWidth: boolean | number;
+    referenceOffsetWidth: number | undefined;
+    isMaxSize: boolean;
+    getTotalSize: () => number;
+}
+export declare const getSelectOptionListStyle: ({ dropdownMinWidth, dropdownMaxHeight, showOptionList, dropdownMatchSelectWidth, referenceOffsetWidth, isMaxSize, getTotalSize, }: selectOptionListStyleProps) => {
     wrapper: (theme: Theme) => {
         readonly display: "block";
         readonly position: "absolute";
@@ -8,13 +17,12 @@ export declare const getSelectOptionListStyle: (dropdownMinWidth: number, dropdo
         readonly justifyContent: "center";
         readonly padding: 4;
         readonly overflowX: "hidden";
-        readonly overflowY: "auto";
+        readonly overflowY: "hidden" | "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 visibility: "hidden" | "visible";
         readonly boxSizing: "border-box";
         readonly borderRadius: 8;
         readonly background: "#FFFFFF";
@@ -64,3 +72,4 @@ export declare const getSelectOptionListStyle: (dropdownMinWidth: number, dropdo
         readonly transform: `translateY(${number}px)`;
     };
 };
+export {};

package/dist/components/{Select → BaseSelect}/components/SelectOptionList/SelectOptionList.styles.js

@@ -1,5 +1,4 @@
-import { ANIMATION_DURATION } from "./SelectOptionList.utils.js";
-import { getSelectTokens } from "../../Select.tokens.js";
+import { getSelectTokens } from "../../BaseSelect.tokens.js";
 import { isNumber } from "lodash-es";
 const getWidth = (dropdownMatchSelectWidth, referenceOffsetWidth) => {
   if (isNumber(dropdownMatchSelectWidth)) {
@@ -10,7 +9,15 @@ const getWidth = (dropdownMatchSelectWidth, referenceOffsetWidth) => {
   }
   return referenceOffsetWidth ?? "fit-content";
 };
-const getSelectOptionListStyle = (dropdownMinWidth, dropdownMaxHeight, showOptionList, dropdownMatchSelectWidth, referenceOffsetWidth, getTotalSize) => ({
+const getSelectOptionListStyle = ({
+  dropdownMinWidth,
+  dropdownMaxHeight,
+  showOptionList,
+  dropdownMatchSelectWidth,
+  referenceOffsetWidth,
+  isMaxSize,
+  getTotalSize
+}) => ({
   wrapper: (theme) => ({
     display: "block",
     position: "absolute",
@@ -19,13 +26,12 @@ const getSelectOptionListStyle = (dropdownMinWidth, dropdownMaxHeight, showOptio
     justifyContent: "center",
     padding: theme.paddingXS,
     overflowX: "hidden",
-    overflowY: "auto",
+    overflowY: isMaxSize ? "auto" : "hidden",
     minWidth: dropdownMinWidth,
     width: getWidth(dropdownMatchSelectWidth, referenceOffsetWidth),
-    maxHeight: showOptionList ? dropdownMaxHeight : 0,
+    maxHeight: dropdownMaxHeight,
     height: "fit-content",
-    opacity: showOptionList ? 1 : 0,
-    transition: `max-height ${ANIMATION_DURATION}ms, opacity ${ANIMATION_DURATION}ms`,
+    visibility: showOptionList ? "visible" : "hidden",
     boxSizing: "border-box",
     borderRadius: theme.borderRadiusL,
     background: theme.bgFloat,

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

@@ -0,0 +1,20 @@
+import { Theme } from 'themes';
+import { Interpolation } from '@emotion/react';
+import { ReactNode } from 'react';
+import { BaseSelectOptionInterface, BaseSelectOptionProps } from 'components/BaseSelect/BaseSelect.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<Option extends BaseSelectOptionInterface<OptionValue>, OptionValue> {
+    options: Option[];
+    styles?: DropdownStyles;
+    virtualizerEstimateSize: (index: number) => number;
+    renderDropdownItem: (option: Option, index: number) => ReactNode;
+    optionRender?: (option: BaseSelectOptionProps<Option, OptionValue>) => React.ReactNode;
+}

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

@@ -0,0 +1,4 @@
+import { SelectTagProps } from './SelectTag.types';
+declare const SelectTagComponent: <OptionValue>({ value, label, maxTagTextLength, isError, isBorderless, disabled, isHidden, removeValue, onTagClose, }: SelectTagProps<OptionValue>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SelectTag: typeof SelectTagComponent;
+export {};

package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.js

@@ -2,23 +2,27 @@ 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(({
+const SelectTagComponent = ({
   value,
   label,
   maxTagTextLength,
   isError,
   isBorderless,
   disabled,
-  removeValue
+  isHidden,
+  removeValue,
+  onTagClose
 }) => {
   const closeHandle = useCallback((e) => {
     e.stopPropagation();
     removeValue(value);
-  }, [removeValue, value]);
+    onTagClose == null ? void 0 : onTagClose(value);
+  }, [onTagClose, removeValue, value]);
   const currentLabel = maxTagTextLength && label.length > maxTagTextLength ? label.slice(0, maxTagTextLength) + "…" : label;
-  const selectTagDefaultStyle = getSelectTagDefaultStyle(isError, isBorderless, disabled);
+  const selectTagDefaultStyle = getSelectTagDefaultStyle(isError, isBorderless, disabled, isHidden);
   return /* @__PURE__ */ jsx(Tag, { closable: disabled ? false : true, onClose: closeHandle, styles: selectTagDefaultStyle, children: currentLabel });
-});
+};
+const SelectTag = memo(SelectTagComponent);
 export {
   SelectTag
 };

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

@@ -0,0 +1,16 @@
+import { Theme } from 'themes';
+export declare const getSelectTagDefaultStyle: (isError: boolean, isBorderless: boolean, disabled: boolean, isHidden: boolean) => {
+    wrapper: (theme: Theme) => {
+        readonly position: "absolute";
+        readonly visibility: "hidden";
+        readonly fontSize: 14;
+        readonly color: "#262626" | "#8C8C8C" | "#FF4D4F";
+        readonly background: "#D9D9D9" | "#F5F5F5";
+    } | {
+        readonly position?: undefined;
+        readonly visibility?: undefined;
+        readonly fontSize: 14;
+        readonly color: "#262626" | "#8C8C8C" | "#FF4D4F";
+        readonly background: "#D9D9D9" | "#F5F5F5";
+    };
+};

package/dist/components/{Select → BaseSelect}/components/SelectTag/SelectTag.styles.js

@@ -1,4 +1,4 @@
-import { getSelectTokens } from "../../Select.tokens.js";
+import { getSelectTokens } from "../../BaseSelect.tokens.js";
 const getColor = (isError, isBorderless, disabled, selectTokens) => {
   if (disabled) {
     return selectTokens.selectTextDisabled;
@@ -8,13 +8,23 @@ const getColor = (isError, isBorderless, disabled, selectTokens) => {
   }
   return selectTokens.selectText;
 };
-const getSelectTagDefaultStyle = (isError, isBorderless, disabled) => ({
+const visibilityStyles = (isHidden) => {
+  if (isHidden) {
+    return {
+      position: "absolute",
+      visibility: "hidden"
+    };
+  }
+  return {};
+};
+const getSelectTagDefaultStyle = (isError, isBorderless, disabled, isHidden) => ({
   wrapper: (theme) => {
     const selectTokens = getSelectTokens(theme);
     return {
       fontSize: 14,
       color: getColor(isError, isBorderless, disabled, selectTokens),
-      background: disabled ? selectTokens.selectMultipleItemBgDisabled : selectTokens.selectMultipleItemBg
+      background: disabled ? selectTokens.selectMultipleItemBgDisabled : selectTokens.selectMultipleItemBg,
+      ...visibilityStyles(isHidden)
     };
   }
 });