hrm_ui_lib 2.0.2 → 2.1.0-alpha.1

package/components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js

@@ -1,268 +1,7 @@
-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 { Text } from '../../../Text/Text.js';
-import { Divider } from '../../../Divider/Divider.js';
-import { Empty } from '../../../Empty/Empty.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 { IconCaretUpFilled } from '../../../SVGIcons/IconCaretUpFilled.js';
-import { IconCaretDownFilled } from '../../../SVGIcons/IconCaretDownFilled.js';
-import '../../../../utils/helpers.js';
-import '../../../Image/Image.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 MultiSelectGrouped = function MultiSelectGrouped(props) {
-  var isMobile = props.isMobile,
-    options = props.options,
-    helperText = props.helperText,
-    translations = props.translations,
-    selectedValues = props.selectedValues,
-    onItemSelect = props.onItemSelect,
-    onItemDeselect = props.onItemDeselect,
-    setSelectedValues = props.setSelectedValues,
-    isSearchAvailable = props.isSearchAvailable,
-    labelLeftIconProps = props.labelLeftIconProps,
-    scrollableContentStyle = props.scrollableContentStyle,
-    optionRightIconComponent = props.optionRightIconComponent,
-    labelRightIconComponent = props.labelRightIconComponent,
-    maxSelectCount = props.maxSelectCount,
-    menuOptions = props.menuOptions,
-    dataIdPrefix = props.dataIdPrefix,
-    closeDropdown = props.closeDropdown;
-  var emptyListMainMessage = translations.emptyListMainMessage,
-    emptyListSecondaryMessage = translations.emptyListSecondaryMessage;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  var _useState3 = useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeGroupId = _useState4[0],
-    setActiveGroupId = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isAllSelected = _useState6[0],
-    setAllSelected = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    contentContainerRef = _useState8[0],
-    setContentContainerRef = _useState8[1];
-  var _useGetElemSizes = useGetElemSizes(contentContainerRef),
-    scrollHeight = _useGetElemSizes.scrollHeight;
-  var filteredData = useMemo(function () {
-    if (!searchValue) {
-      return options;
-    }
-    return options.reduce(function (acc, group) {
-      var data = group.data,
-        title = group.title;
-      var groupData = data.filter(function (dataItem) {
-        return typeof dataItem.label === 'string' && dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
-      });
-      if (groupData.length) {
-        return [].concat(_toConsumableArray(acc), [{
-          title: title,
-          data: groupData
-        }]);
-      }
-      return acc;
-    }, []);
-  }, [searchValue, options]);
-  var clearAll = useCallback(function () {
-    setAllSelected(false);
-    setSelectedValues([]);
-  }, []);
-  var selectAll = useCallback(function () {
-    setAllSelected(true);
-    var allValues = filteredData.reduce(function (acc, _ref) {
-      var data = _ref.data;
-      return [].concat(_toConsumableArray(acc), _toConsumableArray(data.map(function (item) {
-        return {
-          value: item.value,
-          label: item.label
-        };
-      })));
-    }, []);
-    setSelectedValues(allValues);
-  }, [filteredData]);
-  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 onDeselect = function onDeselect(item) {
-    setAllSelected(false);
-    onItemDeselect(item);
-  };
-  var onGroupClick = function onGroupClick(index) {
-    if (activeGroupId == index) {
-      setActiveGroupId(null);
-      return;
-    }
-    setActiveGroupId(index);
-  };
-  var optionProps = useMemo(function () {
-    return {
-      isCheckbox: true,
-      labelLeftIconProps: labelLeftIconProps,
-      optionRightIconComponent: optionRightIconComponent,
-      labelRightIconComponent: labelRightIconComponent,
-      className: 'group-item__option'
-    };
-  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
-  var hasTopContent = isSearchAvailable || helperText;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasTopContent ? /*#__PURE__*/React.createElement(ContentTop, {
-    closeDropdown: closeDropdown,
-    dataIdPrefix: dataIdPrefix,
-    menuOptions: menuOptions,
-    isSearchAvailable: isSearchAvailable || isMobile,
-    hasLimitation: !!maxSelectCount,
-    selectAll: selectAll,
-    clearAll: clearAll,
-    isAnySelected: selectedValues.length !== 0,
-    helperText: helperText,
-    isSelectAllDisabled: isAllSelected || filteredData.length === 0,
-    setSearchValue: setSearchValue,
-    searchValue: searchValue,
-    translations: translations
-  }) : null, /*#__PURE__*/React.createElement("div", {
-    ref: setContentContainerRef,
-    className: "select__options__scroll scrollbar scrollbar--vertical ".concat(scrollHeight > DROPDOWN_MAX_HEIGHT ? 'mr-6' : ''),
-    style: scrollableContentStyle
-  }, /*#__PURE__*/React.createElement("div", null, isSearchAvailable && /*#__PURE__*/React.createElement("div", {
-    className: "selected-items"
-  }, selectedOptions.map(function (selectedItem) {
-    return /*#__PURE__*/React.createElement(OptionItem, _extends({
-      isSelected: true,
-      data: selectedItem,
-      key: selectedItem.value,
-      onClick: onDeselect,
-      disabled: selectedItem.disabled
-    }, optionProps));
-  })), hasTopContent ? /*#__PURE__*/React.createElement(Divider, {
-    type: "primary",
-    isHorizontal: true
-  }) : null, filteredData.map(function (_ref2, index) {
-    var _data$;
-    var title = _ref2.title,
-      data = _ref2.data;
-    var isActive = index === activeGroupId;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "select__group group-item",
-      key: "".concat((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.value, "_").concat(index)
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: function onClick() {
-        return onGroupClick(index);
-      },
-      className: "group-item__top"
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: "xxsmall",
-      type: "tertiary",
-      className: "group-item__title pr-4"
-    }, title), isActive ? /*#__PURE__*/React.createElement(IconCaretUpFilled, {
-      size: "xxsmall",
-      className: "group-item__icon"
-    }) : /*#__PURE__*/React.createElement(IconCaretDownFilled, {
-      size: "xxsmall",
-      className: "group-item__icon"
-    })), isActive && data.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,
-        isSelected: isSelected,
-        disabled: item.disabled || !isSelected && selectedValues.length === maxSelectCount,
-        onClick: isSelected ? onDeselect : onItemSelect
-      }, optionProps));
-    }));
-  }))), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    size: "small",
-    mainMessage: emptyListMainMessage,
-    paragraphMessage: emptyListSecondaryMessage
-  }) : null);
-};
-
-export { MultiSelectGrouped };
+import{jsxs as m,Fragment as Q,jsx as l}from"react/jsx-runtime";import{useState as u,useMemo as g,useCallback as L}from"react";import{Text as Y}from"../../../Text/Text.js";import{Divider as Z}from"../../../Divider/Divider.js";import{Empty as ee}from"../../../Empty/Empty.js";import{useGetElemSizes as te}from"../../../../hooks/useGetElemSizes.js";import"../../../../consts/index.js";import"../../../../context/types.js";import"../../../../hooks/useScreenSize.js";import"react-hook-form";import{OptionItem as k}from"../../../../helperComponents/OptionItem/OptionItem.js";import"classnames";import"../../../Checkbox/Checkbox.js";import"react-dom";import"motion/react";import"dayjs";import"../../../Collapse/CollapseGroup/CollapseGroup.js";import{ContentTop as le}from"../../SharedComponents/ContentTop.js";import"../../../Input/Input.js";import{DROPDOWN_MAX_HEIGHT as oe}from"../../constants.js";import re from"../../../SVGIcons/IconCaretUpFilled.js";import se from"../../../SVGIcons/IconCaretDownFilled.js";const Ne=e=>{const{isMobile:t,options:o,helperText:s,translations:a,selectedValues:r,onItemSelect:i,onItemDeselect:n,setSelectedValues:c,isSearchAvailable:p,labelLeftIconProps:d,scrollableContentStyle:h,optionRightIconComponent:C,labelRightIconComponent:I,maxSelectCount:b,menuOptions:x,dataIdPrefix:f,closeDropdown:v}=e,{emptyListMainMessage:S,emptyListSecondaryMessage:j}=a,[_,y]=u(""),[D,N]=u(0),[M,G]=u(!1),[T,z]=u(null),{scrollHeight:A}=te(T),O=g(()=>_?o.reduce((e,t)=>{const{data:l,title:o}=t,s=l.filter(e=>"string"==typeof e.label&&e.label.toLocaleLowerCase().includes(_.toLocaleLowerCase()));return s.length?[...e,{title:o,data:s}]:e},[]):o,[_,o]),E=L(()=>{G(!1),c([])},[]),V=L(()=>{G(!0);const e=O.reduce((e,{data:t})=>[...e,...t.map(e=>({value:e.value,label:e.label}))],[]);c(e)},[O]),w=g(()=>o.reduce((e,t)=>{const{data:l}=t;return[...e,...l.filter(e=>-1!==r.findIndex(t=>t.value===e.value))]},[]),[o,r]),P=e=>{G(!1),n(e)},R=g(()=>({isCheckbox:!0,labelLeftIconProps:d,optionRightIconComponent:C,labelRightIconComponent:I,className:"group-item__option"}),[d,C,I]),H=p||s;/* @__PURE__ */
+return m(Q,{children:[H?/* @__PURE__ */l(le,{closeDropdown:v,dataIdPrefix:f,menuOptions:x,isSearchAvailable:p||t,hasLimitation:!!b,selectAll:V,clearAll:E,isAnySelected:0!==r.length,helperText:s,isSelectAllDisabled:M||0===O.length,setSearchValue:y,searchValue:_,translations:a}):null,
+/* @__PURE__ */l("div",{ref:z,className:"select__options__scroll scrollbar scrollbar--vertical "+(A>oe?"mr-6":""),style:h,children:/* @__PURE__ */m("div",{children:[p&&/* @__PURE__ */l("div",{className:"selected-items",children:w.map(e=>/* @__PURE__ */l(k,{isSelected:!0,data:e,onClick:P,disabled:e.disabled,...R},e.value))}),H?/* @__PURE__ */l(Z,{type:"primary",isHorizontal:!0}):null,O.map(({title:e,data:t},o)=>{var s;const a=o===D;/* @__PURE__ */
+return m("div",{className:"select__group group-item",children:[
+/* @__PURE__ */m("div",{onClick:()=>(e=>{N(D!=e?e:null)})(o),className:"group-item__top",children:[
+/* @__PURE__ */l(Y,{size:"xxsmall",type:"tertiary",className:"group-item__title pr-4",children:e}),/* @__PURE__ */l(a?re:se,{size:"xxsmall",className:"group-item__icon"})]}),a&&t.map(e=>{const t=-1!==r.findIndex(t=>t.value===e.value);/* @__PURE__ */
+return l(k,{data:e,dataId:e.dataId,isSelected:t,disabled:e.disabled||!t&&r.length===b,onClick:t?P:i,...R},e.value)})]},`${null==(s=t[0])?void 0:s.value}_${o}`)})]})}),0===O.length?/* @__PURE__ */l(ee,{size:"small",mainMessage:S,paragraphMessage:j}):null]})};export{Ne as MultiSelectGrouped};

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

@@ -1,253 +1,7 @@
-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
-    };
-  }, [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));
-};
-
-export { MultiSelectWithTabs };
+import{jsxs as T,Fragment as K,jsx as a}from"react/jsx-runtime";import{useState as p,useMemo as u,useCallback as A}from"react";import{Divider as Q}from"../../../Divider/Divider.js";import{Empty as U}from"../../../Empty/Empty.js";import{Tab as Y}from"../../../Tab/Tab.js";import{useGetElemSizes as Z}from"../../../../hooks/useGetElemSizes.js";import"../../../../consts/index.js";import"../../../../context/types.js";import"../../../../hooks/useScreenSize.js";import"react-hook-form";import{OptionItem as D}from"../../../../helperComponents/OptionItem/OptionItem.js";import"classnames";import"../../../Checkbox/Checkbox.js";import"react-dom";import"motion/react";import"dayjs";import"../../../Collapse/CollapseGroup/CollapseGroup.js";import{ContentTop as ee}from"../../SharedComponents/ContentTop.js";import"../../../Input/Input.js";import{DROPDOWN_MAX_HEIGHT as te}from"../../constants.js";const ye=e=>{const{options:t,scrollableContentStyle:s,selectedValues:o,onItemSelect:l,onItemDeselect:i,setSelectedValues:n,labelLeftIconProps:r,optionRightIconComponent:c,labelRightIconComponent:m,helperText:d,translations:h,isSearchAvailable:b,maxSelectCount:f,menuOptions:C,dataIdPrefix:I,closeDropdown:v}=e,{emptyListMainMessage:S,emptyListSecondaryMessage:x}=h,[g,j]=p(null),[y,k]=p(0),{scrollHeight:L}=Z(g),[M,O]=p(!1),[_,z]=p(""),E=t[y].data,w=u(()=>_?E.filter(e=>"string"==typeof e.label&&e.label.toLocaleLowerCase().includes(_.toLocaleLowerCase())):E,[_,E]),G=A(()=>{O(!1);const e=o.filter(e=>-1===E.map(e=>e.value).indexOf(e.value));n(e)},[o,y,E]),P=e=>{O(!1),i(e)},R=A(()=>{O(!0);const e=w.map(e=>{const{value:t,label:a}=e;return{value:t,label:a}});n(o.concat(e))},[y,o,w]),V=u(()=>t.map((e,t)=>({label:e.title,value:t})),[t]),H=u(()=>t.reduce((e,t)=>{const{data:a}=t;return[...e,...a.filter(e=>-1!==o.findIndex(t=>t.value===e.value))]},[]),[t,o]),N=u(()=>({isCheckbox:!0,labelLeftIconProps:r,optionRightIconComponent:c,labelRightIconComponent:m}),[r,c,m]);/* @__PURE__ */
+return T(K,{children:[
+/* @__PURE__ */a("div",{className:"tab_container",style:{padding:"0 20px",width:"100%"},children:/* @__PURE__ */a(Y,{selectedValue:y,tabItems:V,onSelect:e=>{k(e),z("")},size:"small"})}),
+/* @__PURE__ */a(ee,{closeDropdown:v,dataIdPrefix:I,menuOptions:C,isSearchAvailable:b,clearAll:G,selectAll:R,helperText:d,searchValue:_,translations:h,setSearchValue:z,hasLimitation:!!f,isAnySelected:0===o.length,isSelectAllDisabled:M||0===w.length}),
+/* @__PURE__ */T("div",{ref:j,className:"select__options__scroll scrollbar scrollbar--vertical "+(L>te?"mr-6":""),style:s,children:[b&&/* @__PURE__ */a("div",{className:"selected_container",children:H.map(e=>/* @__PURE__ */a(D,{data:e,onClick:P,disabled:e.disabled,isSelected:!0,...N},e.value))}),
+/* @__PURE__ */a(Q,{type:"primary",isHorizontal:!0}),w.map(e=>{const t=-1!==o.findIndex(t=>t.value===e.value);/* @__PURE__ */
+return a(D,{data:e,dataId:e.dataId,onClick:t?P:l,disabled:e.disabled||!t&&o.length===f,isSelected:t,...N},e.value)}),0===w.length?/* @__PURE__ */a(U,{size:"small",mainMessage:S,paragraphMessage:x}):null]})]})};export{ye as MultiSelectWithTabs};