@finam/web-ui-kit-components 3.31.0 → 3.32.0

package/dist/MultiSelectField/MultiSelectField.js

@@ -1,148 +1,190 @@
-import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState, Children, isValidElement, memo, Fragment, forwardRef, } from 'react';
-import classnames from 'clsx';
-import DismissGhostMid from '@finam/web-ui-kit-icons/Dismiss/DismissGhostMid';
-import DismissIcon from '@finam/web-ui-kit-icons/Dismiss/DismissCircleSmallColored';
-import { tag as tagClassNames } from '@finam/web-ui-kit-core/styles/tag';
-import FieldHint from '../FieldHint/index.js';
-import { useModalState } from '../ModalsProvider/index.js';
-import DropDownMenu from '../DropDownMenu/index.js';
-import { KeyboardEventKey } from '../types.js';
-import { triggerChangeEvent } from '../utils/event.js';
-import { setRef, useForkRef } from '../utils/withForwardedRef.js';
-import { useIsomorphicEffect } from '../utils/useIsomorphicEffect.js';
-import { Root, PrimarySelect, OutlineSelect, TextSelect, IconUp, IconDown, Icon, LockIcon, HiddenInput, DisplayValue, Adornment, SecondaryLabel, Border, Container, IconLeft, } from '../Select/SelectField.styles.js';
-import { styles } from './MultiSelectField.styles.js';
-import { getMenuSize, getDisplayValueVariant, getSecondaryLabelVariant } from '../Select/utils.js';
-import Tag from '../Tag/Tag.js';
-import MenuItem from '../MenuItem/index.js';
-import LoaderDots from '../LoaderDots/LoaderDots.js';
-const selectVariant = (variant) => {
-    switch (variant) {
-        case 'primary': {
+import { _ } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props__ } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties__ } from "@swc/helpers/_/_object_without_properties";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, Fragment as external_react_Fragment, forwardRef, isValidElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import clsx from "clsx";
+import DismissGhostMid from "@finam/web-ui-kit-icons/Dismiss/DismissGhostMid";
+import DismissCircleSmallColored from "@finam/web-ui-kit-icons/Dismiss/DismissCircleSmallColored";
+import { tag as tag_tag } from "@finam/web-ui-kit-core/styles/tag";
+import FieldHint from "../FieldHint/index.js";
+import { useModalState } from "../ModalsProvider/index.js";
+import DropDownMenu from "../DropDownMenu/index.js";
+import { KeyboardEventKey } from "../types.js";
+import { triggerChangeEvent } from "../utils/event.js";
+import { setRef, useForkRef } from "../utils/withForwardedRef.js";
+import { useIsomorphicEffect } from "../utils/useIsomorphicEffect.js";
+import { Adornment, Border, Container, DisplayValue, HiddenInput, Icon, IconDown, IconLeft, IconUp, LockIcon, OutlineSelect, PrimarySelect, Root, SecondaryLabel, TextSelect } from "../Select/SelectField.styles.js";
+import { styles } from "./MultiSelectField.styles.js";
+import { getDisplayValueVariant, getMenuSize, getSecondaryLabelVariant } from "../Select/utils.js";
+import Tag from "../Tag/Tag.js";
+import MenuItem from "../MenuItem/index.js";
+import LoaderDots from "../LoaderDots/LoaderDots.js";
+const selectVariant = (variant)=>{
+    switch(variant){
+        case 'primary':
             return PrimarySelect;
-        }
-        case 'outline': {
+        case 'outline':
             return OutlineSelect;
-        }
-        case 'ghost': {
+        case 'ghost':
             return TextSelect;
-        }
         default:
             return PrimarySelect;
     }
 };
 const moreTextTranslations = {
     ru: 'Еще',
-    en: 'More',
+    en: 'More'
+};
+const anchorOrigin = {
+    vertical: 'bottom',
+    horizontal: 'left'
+};
+const transformOrigin = {
+    vertical: -8,
+    horizontal: 'left'
 };
-const anchorOrigin = { vertical: 'bottom', horizontal: 'left' };
-const transformOrigin = { vertical: -8, horizontal: 'left' };
 const defaultMenuProps = {};
 const defaultSecondaryLabelProps = {};
-const MultiSelectField = forwardRef((_a, forwardedRef) => {
-    var _b;
-    var { variant = 'primary', fullWidth = true, size = 'l', locale, name, value: valueProp, displayValue: displayValueProp, message, secondaryLabel, icon, iconLeft, errorText, errorIcon, disabled, readOnly, className, children, placeholder, onChange, onClick, onKeyDown, onMouseDown, hideEmptyHint, hintTooltip = size !== 'l', hintTooltipPlacement, hintTooltipMaxWidth, disableMenuGrow = false, disableOneItemDropDown, disableCloseOnItemClick = true, MenuProps = defaultMenuProps, SecondaryLabelProps = defaultSecondaryLabelProps, loading } = _a, buttonProps = __rest(_a, ["variant", "fullWidth", "size", "locale", "name", "value", "displayValue", "message", "secondaryLabel", "icon", "iconLeft", "errorText", "errorIcon", "disabled", "readOnly", "className", "children", "placeholder", "onChange", "onClick", "onKeyDown", "onMouseDown", "hideEmptyHint", "hintTooltip", "hintTooltipPlacement", "hintTooltipMaxWidth", "disableMenuGrow", "disableOneItemDropDown", "disableCloseOnItemClick", "MenuProps", "SecondaryLabelProps", "loading"]);
+const MultiSelectField = /*#__PURE__*/ forwardRef((_0, _1)=>{
+    let _ref = [
+        _0,
+        _1
+    ], [_ref1, ..._rest] = _ref, { variant = 'primary', fullWidth = true, size = 'l', locale, name, value: valueProp, displayValue: displayValueProp, message, secondaryLabel, icon, iconLeft, errorText, errorIcon, disabled, readOnly, className, children, placeholder, onChange, onClick, onKeyDown, onMouseDown, hideEmptyHint, hintTooltip = 'l' !== size, hintTooltipPlacement, hintTooltipMaxWidth, disableMenuGrow = false, disableOneItemDropDown, disableCloseOnItemClick = true, MenuProps = defaultMenuProps, SecondaryLabelProps = defaultSecondaryLabelProps, loading } = _ref1, buttonProps = _object_without_properties__(_ref1, [
+        "variant",
+        "fullWidth",
+        "size",
+        "locale",
+        "name",
+        "value",
+        "displayValue",
+        "message",
+        "secondaryLabel",
+        "icon",
+        "iconLeft",
+        "errorText",
+        "errorIcon",
+        "disabled",
+        "readOnly",
+        "className",
+        "children",
+        "placeholder",
+        "onChange",
+        "onClick",
+        "onKeyDown",
+        "onMouseDown",
+        "hideEmptyHint",
+        "hintTooltip",
+        "hintTooltipPlacement",
+        "hintTooltipMaxWidth",
+        "disableMenuGrow",
+        "disableOneItemDropDown",
+        "disableCloseOnItemClick",
+        "MenuProps",
+        "SecondaryLabelProps",
+        "loading"
+    ]), [forwardedRef] = _rest;
+    var _MenuProps_PaperProps;
     const paperRef = useRef(null);
     const hiddenInputRef = useRef(null);
     const itemsCountRef = useRef(Children.count(children));
-    const focusedItemValueRef = useRef(undefined);
+    const focusedItemValueRef = useRef(void 0);
     const tagsContainerRef = useRef(null);
     const selectRef = useRef(null);
     const forkedRef = useForkRef(selectRef, forwardedRef);
     const { open: initialOpen } = useModalState(MenuProps.id);
-    const [open, setOpen] = useState(initialOpen !== null && initialOpen !== void 0 ? initialOpen : false);
+    const [open, setOpen] = useState(null != initialOpen ? initialOpen : false);
     const [menuMinWidth, setMenuMinWidth] = useState(0);
     const [focusedIndex, setFocusedIndex] = useState(-1);
     const [visibleTagsCount, setVisibleTagsCount] = useState(null);
-    const [value, valueArray] = useMemo(() => {
-        if (Array.isArray(valueProp)) {
-            return [valueProp.join(','), valueProp];
-        }
-        return [valueProp, valueProp === null || valueProp === void 0 ? void 0 : valueProp.split(',')];
-    }, [valueProp]);
-    useEffect(() => {
-        if (hiddenInputRef.current && hiddenInputRef.current.value !== value) {
-            hiddenInputRef.current.value = value || '';
-        }
-    }, [value]);
-    useEffect(() => {
-        if (focusedIndex >= itemsCountRef.current) {
-            setFocusedIndex(-1);
-        }
-    }, [focusedIndex, open]);
-    const handleClose = useCallback(() => {
+    const [value, valueArray] = useMemo(()=>{
+        if (Array.isArray(valueProp)) return [
+            valueProp.join(','),
+            valueProp
+        ];
+        return [
+            valueProp,
+            null == valueProp ? void 0 : valueProp.split(',')
+        ];
+    }, [
+        valueProp
+    ]);
+    useEffect(()=>{
+        if (hiddenInputRef.current && hiddenInputRef.current.value !== value) hiddenInputRef.current.value = value || '';
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        if (focusedIndex >= itemsCountRef.current) setFocusedIndex(-1);
+    }, [
+        focusedIndex,
+        open
+    ]);
+    const handleClose = useCallback(()=>{
         setOpen(false);
         setFocusedIndex(-1);
     }, []);
-    const getResultValue = useCallback((itemValue) => {
-        if (itemValue === '') {
-            return '';
-        }
+    const getResultValue = useCallback((itemValue)=>{
+        if ('' === itemValue) return '';
         let resultValue = itemValue;
-        if ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.length) && itemValue != null) {
+        if ((null == valueArray ? void 0 : valueArray.length) && null != itemValue) {
             if (valueArray.includes(String(itemValue))) {
                 const index = valueArray.indexOf(String(itemValue));
-                if (index !== -1) {
+                if (-1 !== index) {
                     valueArray.splice(index, 1);
                     resultValue = valueArray.join(',');
                 }
-            }
-            else if (value) {
-                resultValue = `${value},${itemValue}`;
-            }
+            } else if (value) resultValue = `${value},${itemValue}`;
         }
         return resultValue;
-    }, [value, valueArray]);
-    const handleClick = useCallback((event) => {
-        var _a;
+    }, [
+        value,
+        valueArray
+    ]);
+    const handleClick = useCallback((event)=>{
+        var _selectRef_current;
         const target = event.target;
         const isTag = target.closest('svg');
-        if (isTag) {
-            return;
-        }
+        if (isTag) return;
         setOpen(true);
-        setMenuMinWidth(((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [onClick]);
-    const handleItemClick = useCallback((itemProps) => (event) => {
-        var _a;
-        if (readOnly) {
-            return;
-        }
-        if (!disableCloseOnItemClick) {
-            handleClose();
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        (_a = itemProps.onClick) === null || _a === void 0 ? void 0 : _a.call(itemProps, event);
-        if (onChange && hiddenInputRef.current) {
-            triggerChangeEvent(hiddenInputRef.current, getResultValue(itemProps.value));
-        }
-    }, [disableCloseOnItemClick, onChange, handleClose, getResultValue, readOnly]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.defaultPrevented || !open) {
-            return;
-        }
-        switch (event.key) {
+        setMenuMinWidth((null == (_selectRef_current = selectRef.current) ? void 0 : _selectRef_current.clientWidth) || 0);
+        null == onClick || onClick(event);
+    }, [
+        onClick
+    ]);
+    const handleItemClick = useCallback((itemProps)=>(event)=>{
+            var _itemProps_onClick;
+            if (readOnly) return;
+            if (!disableCloseOnItemClick) handleClose();
+            event.preventDefault();
+            event.stopPropagation();
+            null == (_itemProps_onClick = itemProps.onClick) || _itemProps_onClick.call(itemProps, event);
+            if (onChange && hiddenInputRef.current) triggerChangeEvent(hiddenInputRef.current, getResultValue(itemProps.value));
+        }, [
+        disableCloseOnItemClick,
+        onChange,
+        handleClose,
+        getResultValue,
+        readOnly
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (event.defaultPrevented || !open) return;
+        switch(event.key){
             case KeyboardEventKey.ARROW_UP:
             case KeyboardEventKey.UP:
                 event.preventDefault();
-                setFocusedIndex(prevIndex => (prevIndex > 0 ? prevIndex - 1 : itemsCountRef.current - 1));
+                setFocusedIndex((prevIndex)=>prevIndex > 0 ? prevIndex - 1 : itemsCountRef.current - 1);
                 break;
             case KeyboardEventKey.ARROW_DOWN:
             case KeyboardEventKey.DOWN:
                 event.preventDefault();
-                setFocusedIndex(prevIndex => (prevIndex < itemsCountRef.current - 1 ? prevIndex + 1 : 0));
+                setFocusedIndex((prevIndex)=>prevIndex < itemsCountRef.current - 1 ? prevIndex + 1 : 0);
                 break;
             case KeyboardEventKey.ENTER:
             case KeyboardEventKey.SPACE:
-                if (focusedItemValueRef.current != null) {
+                if (null != focusedItemValueRef.current) {
                     event.preventDefault();
-                    if (onChange && hiddenInputRef.current) {
-                        triggerChangeEvent(hiddenInputRef.current, getResultValue(focusedItemValueRef.current));
-                    }
+                    if (onChange && hiddenInputRef.current) triggerChangeEvent(hiddenInputRef.current, getResultValue(focusedItemValueRef.current));
                 }
                 break;
             case KeyboardEventKey.ESCAPE:
@@ -155,124 +197,137 @@ const MultiSelectField = forwardRef((_a, forwardedRef) => {
             case KeyboardEventKey.BACKSPACE:
                 break;
         }
-    }, [open, onChange, getResultValue, handleClose]);
-    const handleSelectKeyDown = useCallback((event) => {
-        if (readOnly) {
-            return;
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    }, [
+        open,
+        onChange,
+        getResultValue,
+        handleClose
+    ]);
+    const handleSelectKeyDown = useCallback((event)=>{
+        if (readOnly) return;
+        null == onKeyDown || onKeyDown(event);
         handleKeyDown(event);
-    }, [readOnly, onKeyDown, handleKeyDown]);
-    const handleDropDownKeyDown = useCallback((event) => {
-        var _a;
-        if (readOnly) {
-            return;
-        }
-        (_a = MenuProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(MenuProps, event);
+    }, [
+        readOnly,
+        onKeyDown,
+        handleKeyDown
+    ]);
+    const handleDropDownKeyDown = useCallback((event)=>{
+        var _MenuProps_onKeyDown;
+        if (readOnly) return;
+        null == (_MenuProps_onKeyDown = MenuProps.onKeyDown) || _MenuProps_onKeyDown.call(MenuProps, event);
         handleKeyDown(event);
-    }, [MenuProps, handleKeyDown, readOnly]);
-    const handleTagIconClick = useCallback((tagValue) => {
-        if (readOnly) {
-            return;
-        }
-        const resultValue = getResultValue(tagValue !== null && tagValue !== void 0 ? tagValue : '');
-        if (hiddenInputRef.current != null) {
-            triggerChangeEvent(hiddenInputRef.current, resultValue);
-        }
-    }, [getResultValue, readOnly]);
-    const handleClearAll = useCallback((e) => {
+    }, [
+        MenuProps,
+        handleKeyDown,
+        readOnly
+    ]);
+    const handleTagIconClick = useCallback((tagValue)=>{
+        if (readOnly) return;
+        const resultValue = getResultValue(null != tagValue ? tagValue : '');
+        if (null != hiddenInputRef.current) triggerChangeEvent(hiddenInputRef.current, resultValue);
+    }, [
+        getResultValue,
+        readOnly
+    ]);
+    const handleClearAll = useCallback((e)=>{
         e.stopPropagation();
-        if (hiddenInputRef.current != null) {
-            triggerChangeEvent(hiddenInputRef.current, '');
-        }
+        if (null != hiddenInputRef.current) triggerChangeEvent(hiddenInputRef.current, '');
     }, []);
-    const handlePaperRef = useCallback((el) => {
-        var _a;
+    const handlePaperRef = useCallback((el)=>{
+        var _MenuProps_PaperProps;
         setRef(paperRef, el);
-        if ((_a = MenuProps.PaperProps) === null || _a === void 0 ? void 0 : _a.ref) {
-            setRef(MenuProps.PaperProps.ref, el);
-        }
-    }, [(_b = MenuProps.PaperProps) === null || _b === void 0 ? void 0 : _b.ref]);
-    const { items, checkedExists } = useMemo(() => {
-        focusedItemValueRef.current = undefined;
+        if (null == (_MenuProps_PaperProps = MenuProps.PaperProps) ? void 0 : _MenuProps_PaperProps.ref) setRef(MenuProps.PaperProps.ref, el);
+    }, [
+        null == (_MenuProps_PaperProps = MenuProps.PaperProps) ? void 0 : _MenuProps_PaperProps.ref
+    ]);
+    const { items, checkedExists } = useMemo(()=>{
+        focusedItemValueRef.current = void 0;
         let itemIndex = 0;
         let checkedExist = false;
-        const resultItems = Children.map(children, (child) => {
-            if (!isValidElement(child)) {
-                return null;
-            }
+        const resultItems = Children.map(children, (child)=>{
+            if (!/*#__PURE__*/ isValidElement(child)) return null;
             const val = child.props.value;
             const childValue = child.props.value;
-            const selected = val != null
-                ? ((valueArray === null || valueArray === void 0 ? void 0 : valueArray.length) ? valueArray.includes(String(val)) : false)
-                : false;
-            const isFocused = child.props.focused == null && !child.props.disabled
-                ? focusedIndex === itemIndex
-                : child.props.focused;
-            const childProps = Object.assign(Object.assign({}, child.props), { label: child.props.label, disabled: child.props.disabled, size,
+            const selected = null != val ? (null == valueArray ? void 0 : valueArray.length) ? valueArray.includes(String(val)) : false : false;
+            const isFocused = null != child.props.focused || child.props.disabled ? child.props.focused : focusedIndex === itemIndex;
+            const childProps = _object_spread_props__(_({}, child.props), {
+                label: child.props.label,
+                disabled: child.props.disabled,
+                size,
                 selected,
-                paperRef, checked: Boolean(selected), 'data-value': val, style: { pointerEvents: 'none' } });
+                paperRef,
+                checked: Boolean(selected),
+                'data-value': val,
+                style: {
+                    pointerEvents: 'none'
+                }
+            });
             const selectedItems = [];
             const isChildSelected = childProps.selected;
             if (isChildSelected) {
                 selectedItems.push(childProps);
                 checkedExist = true;
             }
-            if (open && isFocused) {
-                focusedItemValueRef.current = childValue;
-            }
-            if (!childProps.disabled) {
-                itemIndex += 1;
-            }
+            if (open && isFocused) focusedItemValueRef.current = childValue;
+            if (!childProps.disabled) itemIndex += 1;
             return {
                 type: child.type,
-                props: Object.assign({}, childProps),
+                props: _({}, childProps),
                 focused: isFocused,
-                onClick: childProps.disabled ? undefined : handleItemClick({
+                onClick: childProps.disabled ? void 0 : handleItemClick({
                     value: childProps.value,
-                    onClick: child.props.onClick,
-                }),
+                    onClick: child.props.onClick
+                })
             };
         });
         itemsCountRef.current = itemIndex;
         return {
             items: resultItems,
-            checkedExists: checkedExist,
+            checkedExists: checkedExist
         };
-    }, [children, valueArray, size, handleItemClick, focusedIndex, open]);
-    const handleClearHiddenTags = useCallback(() => {
-        if (readOnly) {
-            return;
-        }
-        const selectedItems = items.filter(item => item.props.selected);
+    }, [
+        children,
+        valueArray,
+        size,
+        handleItemClick,
+        focusedIndex,
+        open
+    ]);
+    const handleClearHiddenTags = useCallback(()=>{
+        if (readOnly) return;
+        const selectedItems = items.filter((item)=>item.props.selected);
         const visibleItems = selectedItems.slice(0, visibleTagsCount || 0);
-        const newValue = visibleItems.map(item => item.props.value).join(',');
-        if (hiddenInputRef.current != null) {
-            triggerChangeEvent(hiddenInputRef.current, newValue);
-        }
-    }, [items, visibleTagsCount, readOnly]);
-    const moreText = useMemo(() => {
-        var _a;
-        return (_a = moreTextTranslations[locale]) !== null && _a !== void 0 ? _a : '';
-    }, [locale]);
-    const measureTagsWidth = useCallback(() => {
-        if (!tagsContainerRef.current || !selectRef.current) {
-            return;
-        }
-        const selectedItems = items.filter(item => item.props.selected);
-        if (selectedItems.length === 0) {
-            setVisibleTagsCount(null);
-            return;
-        }
+        const newValue = visibleItems.map((item)=>item.props.value).join(',');
+        if (null != hiddenInputRef.current) triggerChangeEvent(hiddenInputRef.current, newValue);
+    }, [
+        items,
+        visibleTagsCount,
+        readOnly
+    ]);
+    const moreText = useMemo(()=>{
+        var _moreTextTranslations_locale;
+        return null != (_moreTextTranslations_locale = moreTextTranslations[locale]) ? _moreTextTranslations_locale : '';
+    }, [
+        locale
+    ]);
+    const measureTagsWidth = useCallback(()=>{
+        if (!tagsContainerRef.current || !selectRef.current) return;
+        const selectedItems = items.filter((item)=>item.props.selected);
+        if (0 === selectedItems.length) return void setVisibleTagsCount(null);
         const containerWidth = tagsContainerRef.current.offsetWidth;
         const adornmentElement = selectRef.current.querySelector('[data-testid="multiselect-adornment"]');
         const adornmentWidth = adornmentElement ? adornmentElement.getBoundingClientRect().width : 60;
-        // Небольшой запас, чтобы теги не прилипали к иконкам
         const safetyMargin = 64;
         const availableWidth = containerWidth - adornmentWidth - safetyMargin;
-        const createStyledTag = (text) => {
+        const createStyledTag = (text)=>{
             const tag = document.createElement('span');
-            const classes = tagClassNames({ size, variant: 'fill', color: 'info', priority: 'low' }).split(' ');
+            const classes = tag_tag({
+                size,
+                variant: 'fill',
+                color: 'info',
+                priority: 'low'
+            }).split(' ');
             tag.classList.add(...classes);
             tag.textContent = text;
             return tag;
@@ -289,7 +344,7 @@ const MultiSelectField = forwardRef((_a, forwardedRef) => {
             tempContainer.removeChild(moreTag);
             let totalWidth = 0;
             let visibleCount = 0;
-            for (let i = 0; i < selectedItems.length; i++) {
+            for(let i = 0; i < selectedItems.length; i++){
                 const item = selectedItems[i];
                 const tempTag = createStyledTag(String(item.props.label));
                 tempContainer.appendChild(tempTag);
@@ -299,73 +354,205 @@ const MultiSelectField = forwardRef((_a, forwardedRef) => {
                 if (requiredWidth <= availableWidth) {
                     totalWidth += tagWidth;
                     visibleCount++;
-                }
-                else {
-                    break;
-                }
+                } else break;
             }
             const newVisibleCount = selectedItems.length > 0 ? Math.max(1, visibleCount) : null;
             setVisibleTagsCount(newVisibleCount);
-        }
-        finally {
+        } finally{
             document.body.removeChild(tempContainer);
         }
-    }, [items, moreText, size]);
-    useIsomorphicEffect(() => {
-        if (checkedExists) {
-            measureTagsWidth();
-        }
-    }, [checkedExists, measureTagsWidth]);
-    useIsomorphicEffect(() => {
-        const resizeObserver = new ResizeObserver(() => {
-            if (checkedExists) {
-                measureTagsWidth();
-            }
+    }, [
+        items,
+        moreText,
+        size
+    ]);
+    useIsomorphicEffect(()=>{
+        if (checkedExists) measureTagsWidth();
+    }, [
+        checkedExists,
+        measureTagsWidth
+    ]);
+    useIsomorphicEffect(()=>{
+        const resizeObserver = new ResizeObserver(()=>{
+            if (checkedExists) measureTagsWidth();
         });
-        if (tagsContainerRef.current) {
-            resizeObserver.observe(tagsContainerRef.current);
-        }
-        return () => {
+        if (tagsContainerRef.current) resizeObserver.observe(tagsContainerRef.current);
+        return ()=>{
             resizeObserver.disconnect();
         };
-    }, [checkedExists, measureTagsWidth]);
-    const PaperProps = useMemo(() => {
-        var _a;
-        return (Object.assign(Object.assign({}, MenuProps.PaperProps), { ref: handlePaperRef, style: Object.assign({ minWidth: disableMenuGrow ? undefined : menuMinWidth, width: disableMenuGrow ? menuMinWidth : undefined }, (((_a = MenuProps.PaperProps) === null || _a === void 0 ? void 0 : _a.style) || null)) }));
-    }, [MenuProps.PaperProps, handlePaperRef, menuMinWidth, disableMenuGrow]);
+    }, [
+        checkedExists,
+        measureTagsWidth
+    ]);
+    const PaperProps = useMemo(()=>{
+        var _MenuProps_PaperProps;
+        return _object_spread_props__(_({}, MenuProps.PaperProps), {
+            ref: handlePaperRef,
+            style: _({
+                minWidth: disableMenuGrow ? void 0 : menuMinWidth,
+                width: disableMenuGrow ? menuMinWidth : void 0
+            }, (null == (_MenuProps_PaperProps = MenuProps.PaperProps) ? void 0 : _MenuProps_PaperProps.style) || null)
+        });
+    }, [
+        MenuProps.PaperProps,
+        handlePaperRef,
+        menuMinWidth,
+        disableMenuGrow
+    ]);
     const SelectElement = selectVariant(variant);
-    const withLabel = Boolean(placeholder && size !== 's' && size !== 'xs');
+    const withLabel = Boolean(placeholder && 's' !== size && 'xs' !== size);
     const dropDownHidden = disableOneItemDropDown && items.length <= 1;
-    const rootClassName = classnames(className, size, {
+    const rootClassName = clsx(className, size, {
         error: Boolean(errorText),
         disabled,
         opened: open,
         selected: Array.isArray(valueProp) && !!value,
         fullWidth,
-        disableTextOverflow: true,
+        disableTextOverflow: true
     });
-    const DisplayValueWrapper = iconLeft && withLabel ? Container : Fragment;
-    const displayValue = useMemo(() => {
-        if (!checkedExists) {
-            return placeholder;
-        }
-        const selectedItems = items.filter(item => item.props.selected);
+    const DisplayValueWrapper = iconLeft && withLabel ? Container : external_react_Fragment;
+    const displayValue = useMemo(()=>{
+        if (!checkedExists) return placeholder;
+        const selectedItems = items.filter((item)=>item.props.selected);
         const visibleItems = selectedItems.slice(0, visibleTagsCount || selectedItems.length);
         const hiddenItems = selectedItems.slice(visibleTagsCount || selectedItems.length);
-        const tags = visibleItems.map(item => (_jsx(Tag, { size: size, priority: "low", variant: "fill", color: "info", icon: _jsx(DismissGhostMid, {}), className: styles.tag, iconPlacement: "right", onIconClick: readOnly ? undefined : () => handleTagIconClick(String(item.props.value)), children: item.props.label }, item.props.value)));
-        if (hiddenItems.length > 0 && visibleTagsCount && visibleTagsCount < selectedItems.length) {
-            tags.push(_jsx(Tag, { size: size, priority: "low", variant: "fill", color: "info", icon: _jsx(DismissGhostMid, {}), className: styles.tag, iconPlacement: "right", onIconClick: readOnly ? undefined : handleClearHiddenTags, children: `${moreText} ${hiddenItems.length}` }, "more-tag"));
-        }
+        const tags = visibleItems.map((item)=>/*#__PURE__*/ jsx(Tag, {
+                size: size,
+                priority: "low",
+                variant: "fill",
+                color: "info",
+                icon: /*#__PURE__*/ jsx(DismissGhostMid, {}),
+                className: styles.tag,
+                iconPlacement: "right",
+                onIconClick: readOnly ? void 0 : ()=>handleTagIconClick(String(item.props.value)),
+                children: item.props.label
+            }, item.props.value));
+        if (hiddenItems.length > 0 && visibleTagsCount && visibleTagsCount < selectedItems.length) tags.push(/*#__PURE__*/ jsx(Tag, {
+            size: size,
+            priority: "low",
+            variant: "fill",
+            color: "info",
+            icon: /*#__PURE__*/ jsx(DismissGhostMid, {}),
+            className: styles.tag,
+            iconPlacement: "right",
+            onIconClick: readOnly ? void 0 : handleClearHiddenTags,
+            children: `${moreText} ${hiddenItems.length}`
+        }, "more-tag"));
         return tags;
-    }, [checkedExists, placeholder, items, size, handleTagIconClick, visibleTagsCount, handleClearHiddenTags, readOnly, moreText]);
-    return (_jsxs(Root, { className: rootClassName, children: [_jsx(FieldHint, { variant: hintTooltip ? 'tooltip' : 'static', size: size, message: !open || !hintTooltip ? errorText || message : undefined, disabled: disabled, error: Boolean(errorText), errorIcon: errorIcon, hideEmpty: hideEmptyHint, tooltipPlacement: hintTooltipPlacement, tooltipMaxWidth: hintTooltipMaxWidth, children: _jsxs(SelectElement, Object.assign({ type: "button" }, buttonProps, { ref: forkedRef, disabled: disabled, className: classnames({ dropDownHidden, readOnly }), onClick: disabled || readOnly || dropDownHidden ? undefined : handleClick, onKeyDown: handleSelectKeyDown, children: [iconLeft && (_jsx(IconLeft, { className: "ui-select-field_icon-left", children: iconLeft })), _jsx(DisplayValueWrapper, { children: _jsx(DisplayValue, { ref: tagsContainerRef, className: "ui-select-field__value", variant: getDisplayValueVariant(size), color: disabled ? 'disabled' : undefined, children: displayValue }) }), _jsxs(Adornment, { className: "ui-select-field__adornment", "data-testid": "multiselect-adornment", children: [(secondaryLabel || icon) && (_jsxs(_Fragment, { children: [secondaryLabel && (_jsx(SecondaryLabel, Object.assign({ color: "custom", variant: getSecondaryLabelVariant(size) }, SecondaryLabelProps, { children: secondaryLabel }))), icon && _jsx(Icon, { className: "ui-select-field__icon", children: icon })] })), checkedExists && !readOnly
-                                    ? (_jsx(Icon, { className: "ui-select-field__icon", onClick: handleClearAll, children: _jsx(DismissIcon, {}) }))
-                                    : null, readOnly ? (_jsx(LockIcon, {})) : open ? (_jsx(IconUp, {})) : (_jsx(IconDown, {}))] }), _jsx(Border, { className: "ui-select__border" })] })) }), _jsx(DropDownMenu, Object.assign({ anchorEl: selectRef.current || undefined, open: open, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, onClose: handleClose, size: getMenuSize(size) }, MenuProps, { onKeyDown: handleDropDownKeyDown, PaperProps: PaperProps, children: loading
-                    ? _jsx(LoaderDots, { className: styles.loaderDots, size: size })
-                    : (items.map(item => (_jsx(MenuItem, { onClick: item.onClick, focused: item.focused, disabled: item.props.disabled, paperRef: paperRef.current ? paperRef : undefined, value: item.props.value, children: _jsx(item.type, Object.assign({}, item.props), item.props.value) }, item.props.value)))) })), _jsx(HiddenInput, { type: "text", name: name, 
-                // We don't want use autoComplete in hidden input
-                // Use set manually
-                autoComplete: "off", onChange: onChange, ref: hiddenInputRef })] }));
+    }, [
+        checkedExists,
+        placeholder,
+        items,
+        size,
+        handleTagIconClick,
+        visibleTagsCount,
+        handleClearHiddenTags,
+        readOnly,
+        moreText
+    ]);
+    return /*#__PURE__*/ jsxs(Root, {
+        className: rootClassName,
+        children: [
+            /*#__PURE__*/ jsx(FieldHint, {
+                variant: hintTooltip ? 'tooltip' : 'static',
+                size: size,
+                message: open && hintTooltip ? void 0 : errorText || message,
+                disabled: disabled,
+                error: Boolean(errorText),
+                errorIcon: errorIcon,
+                hideEmpty: hideEmptyHint,
+                tooltipPlacement: hintTooltipPlacement,
+                tooltipMaxWidth: hintTooltipMaxWidth,
+                children: /*#__PURE__*/ jsxs(SelectElement, _object_spread_props__(_({
+                    type: "button"
+                }, buttonProps), {
+                    ref: forkedRef,
+                    disabled: disabled,
+                    className: clsx({
+                        dropDownHidden,
+                        readOnly
+                    }),
+                    onClick: disabled || readOnly || dropDownHidden ? void 0 : handleClick,
+                    onKeyDown: handleSelectKeyDown,
+                    children: [
+                        iconLeft && /*#__PURE__*/ jsx(IconLeft, {
+                            className: "ui-select-field_icon-left",
+                            children: iconLeft
+                        }),
+                        /*#__PURE__*/ jsx(DisplayValueWrapper, {
+                            children: /*#__PURE__*/ jsx(DisplayValue, {
+                                ref: tagsContainerRef,
+                                className: "ui-select-field__value",
+                                variant: getDisplayValueVariant(size),
+                                color: disabled ? 'disabled' : void 0,
+                                children: displayValue
+                            })
+                        }),
+                        /*#__PURE__*/ jsxs(Adornment, {
+                            className: "ui-select-field__adornment",
+                            "data-testid": "multiselect-adornment",
+                            children: [
+                                (secondaryLabel || icon) && /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        secondaryLabel && /*#__PURE__*/ jsx(SecondaryLabel, _object_spread_props__(_({
+                                            color: "custom",
+                                            variant: getSecondaryLabelVariant(size)
+                                        }, SecondaryLabelProps), {
+                                            children: secondaryLabel
+                                        })),
+                                        icon && /*#__PURE__*/ jsx(Icon, {
+                                            className: "ui-select-field__icon",
+                                            children: icon
+                                        })
+                                    ]
+                                }),
+                                checkedExists && !readOnly ? /*#__PURE__*/ jsx(Icon, {
+                                    className: "ui-select-field__icon",
+                                    onClick: handleClearAll,
+                                    children: /*#__PURE__*/ jsx(DismissCircleSmallColored, {})
+                                }) : null,
+                                readOnly ? /*#__PURE__*/ jsx(LockIcon, {}) : open ? /*#__PURE__*/ jsx(IconUp, {}) : /*#__PURE__*/ jsx(IconDown, {})
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Border, {
+                            className: "ui-select__border"
+                        })
+                    ]
+                }))
+            }),
+            /*#__PURE__*/ jsx(DropDownMenu, _object_spread_props__(_({
+                anchorEl: selectRef.current || void 0,
+                open: open,
+                anchorOrigin: anchorOrigin,
+                transformOrigin: transformOrigin,
+                onClose: handleClose,
+                size: getMenuSize(size)
+            }, MenuProps), {
+                onKeyDown: handleDropDownKeyDown,
+                PaperProps: PaperProps,
+                children: loading ? /*#__PURE__*/ jsx(LoaderDots, {
+                    className: styles.loaderDots,
+                    size: size
+                }) : items.map((item)=>/*#__PURE__*/ jsx(MenuItem, {
+                        onClick: item.onClick,
+                        focused: item.focused,
+                        disabled: item.props.disabled,
+                        paperRef: paperRef.current ? paperRef : void 0,
+                        value: item.props.value,
+                        children: /*#__PURE__*/ jsx(item.type, _({}, item.props), item.props.value)
+                    }, item.props.value))
+            })),
+            /*#__PURE__*/ jsx(HiddenInput, {
+                type: "text",
+                name: name,
+                autoComplete: "off",
+                onChange: onChange,
+                ref: hiddenInputRef
+            })
+        ]
+    });
 });
-export default memo(MultiSelectField);
+const MultiSelectField_MultiSelectField = /*#__PURE__*/ memo(MultiSelectField);
+export default MultiSelectField_MultiSelectField;
+
 //# sourceMappingURL=MultiSelectField.js.map