hrm_ui_lib 2.0.3 → 2.1.1

package/components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js

@@ -1,253 +1,78 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useMemo, useCallback } from 'react';
-import { Divider } from '../../../Divider/Divider.js';
-import { Empty } from '../../../Empty/Empty.js';
-import { Tab } from '../../../Tab/Tab.js';
-import { useGetElemSizes } from '../../../../hooks/useGetElemSizes.js';
-import '../../../../consts/index.js';
-import 'dayjs';
-import '../../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'classnames';
-import { OptionItem } from '../../../../helperComponents/OptionItem/OptionItem.js';
-import 'react-syntax-highlighter';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../../../Alert-V_kH4Snn.js';
-import 'react-dom';
-import 'framer-motion';
-import '../../../Collapse/CollapseGroup/CollapseGroup.js';
-import { ContentTop } from '../../SharedComponents/ContentTop.js';
-import '../../../Input/Input.js';
-import { DROPDOWN_MAX_HEIGHT } from '../../constants.js';
-import '../../../Text/Text.js';
-import '../../../../utils/helpers.js';
-import '../../../Image/Image.js';
-import '../../../Tab/TabItem.js';
-import '../../../Badge/Badge.js';
-import '../../../../type/file-upload.js';
-import '../../../Avatar/Avatar.js';
-import '../../../FileUpload/FileUpload.js';
-import '../../../FileUpload/types.js';
-import '../../../../helperComponents/Label/Label.js';
-import '../../../FileUpload/UploadItems.js';
-import '../../../../hooks/useFormProps.js';
-import '../../../../context/types.js';
-import '../../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../../SVGIcons/IconDelete.js';
-import '../../../Alert/consts.js';
-import '../../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../../SVGIcons/IconUpload.js';
-import '../../../../helpers/format-date.js';
-import '../../../../helpers/locale.js';
-import '../../../../type/locale.js';
-import '../../../../helpers/storage.js';
-import 'react-toastify';
-import '../../../../hooks/useGetIsMobile.js';
-import '../../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../../hooks/useOnOutsideClick.js';
-import '../../../../hooks/useHideBodyScroll.js';
-import '../../../SVGIcons/IconDismiss.js';
-import '../../../Tooltip/types.js';
-import '../../../Tooltip/Tooltip.js';
-import '../../../../hooks/useGetTooltipStyles.js';
-import '../../../../hooks/useGetElemPositions.js';
-import '../../../../hooks/useGetTooltipPosition.js';
-import '../../../../hooks/useHideOnScroll.js';
-import '../../../Link/Link.js';
-import '../../../Popover/PopoverDesktop.js';
-import '../../../SVGIcons/IconInfo.js';
-import '@babel/runtime/helpers/typeof';
-import '../../../SVGIcons/IconDismissFilled.js';
-import '../../../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../../../Progress/Progress.js';
-import '../../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../../helpers/download-file.js';
-import '../../../Button/consts.js';
-import '../../../SVGIcons/IconEditFilled.js';
-import '../../../SVGIcons/IconEdit.js';
-import '../../../SVGIcons/IconAttach.js';
-import '../../../SVGIcons/IconCheckmark.js';
-import '../../../Collapse/CollapseItem/CollapseItem.js';
-import '../../../SVGIcons/IconChevronRight.js';
-import '../../../SVGIcons/IconChevronDown.js';
-import '../../SharedComponents/Actions.js';
-import '../../../Menu/Menu.js';
-import '../../../SVGIcons/IconMore.js';
-import '../../../SVGIcons/IconSearchFilled.js';
-import '../../../SVGIcons/IconSelectAllOff.js';
-import '../../../SVGIcons/IconChevronLeft.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../SVGIcons/IconCheckmarkCircleFilled.js';
-
-var MultiSelectWithTabs = function MultiSelectWithTabs(props) {
-  var options = props.options,
-    scrollableContentStyle = props.scrollableContentStyle,
-    selectedValues = props.selectedValues,
-    onItemSelect = props.onItemSelect,
-    onItemDeselect = props.onItemDeselect,
-    setSelectedValues = props.setSelectedValues,
-    labelLeftIconProps = props.labelLeftIconProps,
-    optionRightIconComponent = props.optionRightIconComponent,
-    labelRightIconComponent = props.labelRightIconComponent,
-    helperText = props.helperText,
-    translations = props.translations,
-    isSearchAvailable = props.isSearchAvailable,
-    maxSelectCount = props.maxSelectCount,
-    menuOptions = props.menuOptions,
-    dataIdPrefix = props.dataIdPrefix,
-    closeDropdown = props.closeDropdown;
-  var emptyListMainMessage = translations.emptyListMainMessage,
-    emptyListSecondaryMessage = translations.emptyListSecondaryMessage;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    contentContainerRef = _useState2[0],
-    setContentContainerRef = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeTab = _useState4[0],
-    setActiveTab = _useState4[1];
-  var _useGetElemSizes = useGetElemSizes(contentContainerRef),
-    scrollHeight = _useGetElemSizes.scrollHeight;
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isAllSelected = _useState6[0],
-    setAllSelected = _useState6[1];
-  var _useState7 = useState(''),
-    _useState8 = _slicedToArray(_useState7, 2),
-    searchValue = _useState8[0],
-    setSearchValue = _useState8[1];
-  var currentTabData = options[activeTab].data;
-  var filteredData = useMemo(function () {
-    if (!searchValue) {
-      return currentTabData;
-    }
-    return currentTabData.filter(function (dataItem) {
-      return typeof dataItem.label === 'string' && dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
-    });
-  }, [searchValue, currentTabData]);
-  var clearAll = useCallback(function () {
-    setAllSelected(false);
-    var filteredValues = selectedValues.filter(function (selectedItem) {
-      var currentTabValues = currentTabData.map(function (item) {
-        return item.value;
-      });
-      return currentTabValues.indexOf(selectedItem.value) === -1;
-    });
-    setSelectedValues(filteredValues);
-  }, [selectedValues, activeTab, currentTabData]);
-  var onDeselect = function onDeselect(item) {
-    setAllSelected(false);
-    onItemDeselect(item);
-  };
-  var selectAll = useCallback(function () {
-    setAllSelected(true);
-    var allValues = filteredData.map(function (item) {
-      var value = item.value,
-        label = item.label;
-      return {
-        value: value,
-        label: label
-      };
-    });
-    setSelectedValues(selectedValues.concat(allValues));
-  }, [activeTab, selectedValues, filteredData]);
-  var tabs = useMemo(function () {
-    return options.map(function (option, index) {
-      return {
-        label: option.title,
-        value: index
-      };
-    });
-  }, [options]);
-  var onTabSelect = function onTabSelect(selected) {
-    setActiveTab(selected);
-    setSearchValue('');
-  };
-  var selectedOptions = useMemo(function () {
-    return options.reduce(function (acc, option) {
-      var data = option.data;
-      var selectedItems = data.filter(function (item) {
-        return selectedValues.findIndex(function (s) {
-          return s.value === item.value;
-        }) !== -1;
-      });
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(selectedItems));
-    }, []);
-  }, [options, selectedValues]);
-  var optionProps = useMemo(function () {
-    return {
-      isCheckbox: true,
-      labelLeftIconProps: labelLeftIconProps,
-      optionRightIconComponent: optionRightIconComponent,
-      labelRightIconComponent: labelRightIconComponent
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Divider } from '../../../Divider';
+import { Empty } from '../../../Empty';
+import { Tab } from '../../../Tab';
+import { useGetElemSizes } from '../../../../hooks';
+import { OptionItem } from '../../../../helperComponents';
+import { ContentTop } from '../../SharedComponents';
+import { DROPDOWN_MAX_HEIGHT } from '../../constants';
+export const MultiSelectWithTabs = (props) => {
+    const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
+    const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
+    const [contentContainerRef, setContentContainerRef] = useState(null);
+    const [activeTab, setActiveTab] = useState(0);
+    const { scrollHeight } = useGetElemSizes(contentContainerRef);
+    const [isAllSelected, setAllSelected] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const currentTabData = options[activeTab].data;
+    const filteredData = useMemo(() => {
+        if (!searchValue) {
+            return currentTabData;
+        }
+        return currentTabData.filter((dataItem) => {
+            return (typeof dataItem.label === 'string' &&
+                dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
+        });
+    }, [searchValue, currentTabData]);
+    const clearAll = useCallback(() => {
+        setAllSelected(false);
+        const filteredValues = selectedValues.filter((selectedItem) => {
+            const currentTabValues = currentTabData.map((item) => item.value);
+            return currentTabValues.indexOf(selectedItem.value) === -1;
+        });
+        setSelectedValues(filteredValues);
+    }, [selectedValues, activeTab, currentTabData]);
+    const onDeselect = (item) => {
+        setAllSelected(false);
+        onItemDeselect(item);
     };
-  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "tab_container",
-    style: {
-      padding: '0 20px',
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Tab, {
-    selectedValue: activeTab,
-    tabItems: tabs,
-    onSelect: onTabSelect,
-    size: "small"
-  })), /*#__PURE__*/React.createElement(ContentTop, {
-    closeDropdown: closeDropdown,
-    dataIdPrefix: dataIdPrefix,
-    menuOptions: menuOptions,
-    isSearchAvailable: isSearchAvailable,
-    clearAll: clearAll,
-    selectAll: selectAll,
-    helperText: helperText,
-    searchValue: searchValue,
-    translations: translations,
-    setSearchValue: setSearchValue,
-    hasLimitation: !!maxSelectCount,
-    isAnySelected: selectedValues.length === 0,
-    isSelectAllDisabled: isAllSelected || filteredData.length === 0
-  }), /*#__PURE__*/React.createElement("div", {
-    ref: setContentContainerRef,
-    className: "select__options__scroll scrollbar scrollbar--vertical ".concat(scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''),
-    style: scrollableContentStyle
-  }, isSearchAvailable && /*#__PURE__*/React.createElement("div", {
-    className: "selected_container"
-  }, selectedOptions.map(function (selectedItem) {
-    return /*#__PURE__*/React.createElement(OptionItem, _extends({
-      data: selectedItem,
-      key: selectedItem.value,
-      onClick: onDeselect,
-      disabled: selectedItem.disabled,
-      isSelected: true
-    }, optionProps));
-  })), /*#__PURE__*/React.createElement(Divider, {
-    type: "primary",
-    isHorizontal: true
-  }), filteredData.map(function (item) {
-    var isSelected = selectedValues.findIndex(function (s) {
-      return s.value === item.value;
-    }) !== -1;
-    return /*#__PURE__*/React.createElement(OptionItem, _extends({
-      data: item,
-      dataId: item.dataId,
-      key: item.value,
-      onClick: isSelected ? onDeselect : onItemSelect,
-      disabled: item.disabled || !isSelected && selectedValues.length === maxSelectCount,
-      isSelected: isSelected
-    }, optionProps));
-  }), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    size: "small",
-    mainMessage: emptyListMainMessage,
-    paragraphMessage: emptyListSecondaryMessage
-  }) : null));
+    const selectAll = useCallback(() => {
+        setAllSelected(true);
+        const allValues = filteredData.map((item) => {
+            const { value, label } = item;
+            return { value, label };
+        });
+        setSelectedValues(selectedValues.concat(allValues));
+    }, [activeTab, selectedValues, filteredData]);
+    const tabs = useMemo(() => {
+        return options.map((option, index) => {
+            return { label: option.title, value: index };
+        });
+    }, [options]);
+    const onTabSelect = (selected) => {
+        setActiveTab(selected);
+        setSearchValue('');
+    };
+    const selectedOptions = useMemo(() => {
+        return options.reduce((acc, option) => {
+            const { data } = option;
+            const selectedItems = data.filter((item) => selectedValues.findIndex((s) => s.value === item.value) !== -1);
+            return [...acc, ...selectedItems];
+        }, []);
+    }, [options, selectedValues]);
+    const optionProps = useMemo(() => {
+        return {
+            isCheckbox: true,
+            labelLeftIconProps,
+            optionRightIconComponent,
+            labelRightIconComponent
+        };
+    }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "tab_container", style: { padding: '0 20px', width: '100%' }, children: _jsx(Tab, { selectedValue: activeTab, tabItems: tabs, onSelect: onTabSelect, size: "small" }) }), _jsx(ContentTop, { closeDropdown: closeDropdown, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, isSearchAvailable: isSearchAvailable, clearAll: clearAll, selectAll: selectAll, helperText: helperText, searchValue: searchValue, translations: translations, setSearchValue: setSearchValue, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length === 0, isSelectAllDisabled: isAllSelected || filteredData.length === 0 }), _jsxs("div", { ref: setContentContainerRef, className: `select__options__scroll scrollbar scrollbar--vertical ${scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''}`, style: scrollableContentStyle, children: [isSearchAvailable && (_jsx("div", { className: "selected_container", children: selectedOptions.map((selectedItem) => {
+                            return (_jsx(OptionItem, Object.assign({ data: selectedItem, onClick: onDeselect, disabled: selectedItem.disabled, isSelected: true }, optionProps), selectedItem.value));
+                        }) })), _jsx(Divider, { type: "primary", isHorizontal: true }), filteredData.map((item) => {
+                        const isSelected = selectedValues.findIndex((s) => s.value === item.value) !== -1;
+                        return (_jsx(OptionItem, Object.assign({ data: item, dataId: item.dataId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected }, optionProps), item.value));
+                    }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] })] }));
 };
-
-export { MultiSelectWithTabs };

package/components/Select/MultiSelect/OptionsWrapper.js

@@ -1,177 +1,66 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useRef, useCallback, useMemo } from 'react';
-import '@babel/runtime/helpers/slicedToArray';
-import 'classnames';
-import { getStringWidth } from '../../../utils/helpers.js';
-import { useGetElemSizes } from '../../../hooks/useGetElemSizes.js';
-import '../../../consts/index.js';
-import '../../../hooks/useScreenSize.js';
-import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks/useGetHasBottomSpace.js';
-import 'react-hook-form';
-import '../../../Alert-V_kH4Snn.js';
-import 'react-syntax-highlighter';
-import 'react-dom';
-import 'framer-motion';
-import '../../Collapse/CollapseGroup/CollapseGroup.js';
-import '../SharedComponents/ContentTop.js';
-import { Loading } from '../SharedComponents/Loading.js';
-import '../../Input/Input.js';
-import { useIsMobile } from '../../../hooks/useGetIsMobile.js';
-import { MultiSelectGrouped } from './MultiSelectGrouped/MultiSelectGrouped.js';
-import { MultiBase } from './MultiBase/MultiBase.js';
-import { MultiSelectWithTabs } from './MultiSelectWithTabs/MultiSelectWithTabs.js';
-import { SELECTED_VISIBLE_MIN_COUNT } from '../constants.js';
-import 'dayjs';
-import '../../../type/file-upload.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../Alert/consts.js';
-import '../../Text/Text.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../FileUpload/types.js';
-import '../../../helpers/format-date.js';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import 'react-toastify';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../SVGIcons/IconDelete.js';
-import '../../FileUpload/DropzoneFileUpload/FilePreview.js';
-import '../../Progress/Progress.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../helpers/download-file.js';
-import '../../Button/consts.js';
-import '../../Collapse/CollapseItem/CollapseItem.js';
-import '../../SVGIcons/IconChevronRight.js';
-import '../../Divider/Divider.js';
-import '../../SVGIcons/IconChevronDown.js';
-import '../SharedComponents/Actions.js';
-import '../../Menu/Menu.js';
-import '../../../helperComponents/OptionItem/OptionItem.js';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '../../../helperComponents/Label/Label.js';
-import '../../FileUpload/UploadItems.js';
-import '../../../hooks/useFormProps.js';
-import '../../../context/types.js';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../SVGIcons/IconEditFilled.js';
-import '../../SVGIcons/IconEdit.js';
-import '../../SVGIcons/IconAttach.js';
-import '../../SVGIcons/IconCheckmark.js';
-import '../../SVGIcons/IconMore.js';
-import '../../SVGIcons/IconSearchFilled.js';
-import '../../SVGIcons/IconSelectAllOff.js';
-import '../../SVGIcons/IconChevronLeft.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../Empty/Empty.js';
-import '../../Image/Image.js';
-import '../../SVGIcons/IconCaretUpFilled.js';
-import '../../SVGIcons/IconCaretDownFilled.js';
-import 'react-window';
-import '../../Tab/Tab.js';
-import '../../Tab/TabItem.js';
-import '../../Badge/Badge.js';
-
-var _excluded = ["isLoading", "withTabs", "isGrouped", "isOpen", "containerRef", "options", "selectedValues", "setSelectedValues", "setIsOpen", "dropdownRef", "isMobileFullScreen"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var OptionsWrapper = function OptionsWrapper(props) {
-  var isLoading = props.isLoading,
-    withTabs = props.withTabs,
-    isGrouped = props.isGrouped,
-    isOpen = props.isOpen,
-    containerRef = props.containerRef,
-    options = props.options,
-    selectedValues = props.selectedValues,
-    setSelectedValues = props.setSelectedValues,
-    setIsOpen = props.setIsOpen,
-    dropdownRef = props.dropdownRef,
-    isMobileFullScreen = props.isMobileFullScreen,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useGetElemSizes = useGetElemSizes(containerRef),
-    width = _useGetElemSizes.width;
-  var inputRef = useRef(null);
-  var SelectComp = withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
-  var checkIsValueOverflowed = useCallback(function (value) {
-    var elemWidth = getStringWidth(value, 14);
-    return elemWidth > width - 80; // padding and width of (+number)
-  }, [width]);
-  var onItemSelect = function onItemSelect(item) {
-    setSelectedValues([].concat(_toConsumableArray(selectedValues), [item]));
-  };
-  var onItemDeselect = function onItemDeselect(item) {
-    setSelectedValues(selectedValues.filter(function (optionValue) {
-      return optionValue.value !== item.value;
-    }));
-  };
-  var optionsCount = useMemo(function () {
-    if (isGrouped || withTabs) {
-      // @ts-ignore
-      var typed_options = options;
-      return typed_options.reduce(function (acc, option) {
-        var data = option.data;
-        return acc + data.length;
-      }, 0);
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from 'react';
+import { Loading } from '../SharedComponents';
+import { MultiSelectGrouped } from './MultiSelectGrouped/MultiSelectGrouped';
+import { MultiBase } from './MultiBase/MultiBase';
+import { MultiSelectWithTabs } from './MultiSelectWithTabs/MultiSelectWithTabs';
+import { getStringWidth } from '../../../utils/helpers';
+import { SELECTED_VISIBLE_MIN_COUNT } from '../constants';
+import { useGetElemSizes, useGetHasBottomSpace, useGetHasTopSpace } from '../../../hooks';
+import { useIsMobile } from '../../../hooks/useGetIsMobile';
+export const OptionsWrapper = (props) => {
+    const { isLoading, withTabs, isGrouped, isOpen, containerRef, options, selectedValues, setSelectedValues, setIsOpen, dropdownRef, isMobileFullScreen } = props, rest = __rest(props, ["isLoading", "withTabs", "isGrouped", "isOpen", "containerRef", "options", "selectedValues", "setSelectedValues", "setIsOpen", "dropdownRef", "isMobileFullScreen"]);
+    const { width } = useGetElemSizes(containerRef);
+    const inputRef = useRef(null);
+    const SelectComp = withTabs ? MultiSelectWithTabs : isGrouped ? MultiSelectGrouped : MultiBase;
+    const checkIsValueOverflowed = useCallback((value) => {
+        const elemWidth = getStringWidth(value, 14);
+        return elemWidth > width - 80; // padding and width of (+number)
+    }, [width]);
+    const onItemSelect = (item) => {
+        setSelectedValues([...selectedValues, item]);
+    };
+    const onItemDeselect = (item) => {
+        setSelectedValues(selectedValues.filter((optionValue) => optionValue.value !== item.value));
+    };
+    const optionsCount = useMemo(() => {
+        if (isGrouped || withTabs) {
+            // @ts-ignore
+            const typed_options = options;
+            return typed_options.reduce((acc, option) => {
+                const { data } = option;
+                return acc + data.length;
+            }, 0);
+        }
+        return options.length;
+    }, [options]);
+    const { hasBottomSpace, bottomSpace } = useGetHasBottomSpace({
+        element: dropdownRef,
+        input: inputRef.current
+    });
+    const hasTopSpace = useGetHasTopSpace({
+        element: dropdownRef,
+        input: inputRef.current
+    });
+    const _isMobile = useIsMobile();
+    const isMobile = _isMobile && isMobileFullScreen;
+    if (isLoading) {
+        return _jsx(Loading, {});
     }
-    return options.length;
-  }, [options]);
-  var _useGetHasBottomSpace = useGetHasBottomSpace({
-      element: dropdownRef,
-      input: inputRef.current
-    }),
-    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace,
-    bottomSpace = _useGetHasBottomSpace.bottomSpace;
-  var hasTopSpace = useGetHasTopSpace({
-    element: dropdownRef,
-    input: inputRef.current
-  });
-  var _isMobile = useIsMobile();
-  var isMobile = _isMobile && isMobileFullScreen;
-  if (isLoading) {
-    return /*#__PURE__*/React.createElement(Loading, null);
-  }
-  return /*#__PURE__*/React.createElement(SelectComp
-  // @ts-ignore
-  , _extends({
-    options: options,
-    isOpen: isOpen,
-    isMobile: isMobile,
-    hasBottomSpace: hasBottomSpace,
-    selectedValues: selectedValues,
-    onItemSelect: onItemSelect,
-    onItemDeselect: onItemDeselect,
-    setSelectedValues: setSelectedValues,
-    closeDropdown: function closeDropdown() {
-      return setIsOpen(false);
-    },
-    checkIsValueOverflowed: checkIsValueOverflowed,
-    isSearchAvailable: optionsCount > SELECTED_VISIBLE_MIN_COUNT,
-    scrollableContentStyle: _objectSpread({}, !hasBottomSpace && !hasTopSpace ? {
-      maxHeight: bottomSpace - 65 - 56
-    } : {}) // 65 - height of the top content, 56 - height of the footer
-  }, rest));
+    return (_jsx(SelectComp
+    // @ts-ignore
+    , Object.assign({ 
+        // @ts-ignore
+        options: options, isOpen: isOpen, isMobile: isMobile, hasBottomSpace: hasBottomSpace, selectedValues: selectedValues, onItemSelect: onItemSelect, onItemDeselect: onItemDeselect, setSelectedValues: setSelectedValues, closeDropdown: () => setIsOpen(false), checkIsValueOverflowed: checkIsValueOverflowed, isSearchAvailable: optionsCount > SELECTED_VISIBLE_MIN_COUNT, scrollableContentStyle: Object.assign({}, (!hasBottomSpace && !hasTopSpace ? { maxHeight: bottomSpace - 65 - 56 } : {})) }, rest)));
 };
-
-export { OptionsWrapper };