hrm_ui_lib 2.1.0 → 2.2.0

package/components/Select/MultiSelect/MultiBase/MultiBase.js

@@ -1,214 +1,63 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState, useCallback, useMemo } from 'react';
-import { Empty } from '../../../Empty/Empty.js';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Empty } from '../../../Empty';
+import { OptionItem } from '../../../../helperComponents';
+import { ContentTop } from '../../SharedComponents';
+import { FixedSizeList as List } from 'react-window';
+import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE, ITEM_SIZE_MOBILE } from '../../constants';
 import classNames from 'classnames';
-import 'dayjs';
-import { OptionItem } from '../../../../helperComponents/OptionItem/OptionItem.js';
-import 'react-syntax-highlighter';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../../../Alert-BslI0aA0.js';
-import 'react-dom';
-import '../../../../consts/index.js';
-import '../../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'framer-motion';
-import '../../../Collapse/CollapseGroup/CollapseGroup.js';
-import { ContentTop } from '../../SharedComponents/ContentTop.js';
-import '../../../Input/Input.js';
-import { FixedSizeList } from 'react-window';
-import { DROPDOWN_WIDTH, ITEM_SIZE_MOBILE, ITEM_SIZE, DROPDOWN_HEIGHT } from '../../constants.js';
-import '../../../Text/Text.js';
-import '../../../../utils/helpers.js';
-import '../../../Image/Image.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 '../../../../type/file-upload.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/useGetElemSizes.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 '../../../Divider/Divider.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 MultiBase = function MultiBase(props) {
-  var isMobile = props.isMobile,
-    closeDropdown = props.closeDropdown,
-    scrollableContentStyle = props.scrollableContentStyle,
-    options = props.options,
-    helperText = props.helperText,
-    translations = props.translations,
-    onItemSelect = props.onItemSelect,
-    onItemDeselect = props.onItemDeselect,
-    isSearchAvailable = props.isSearchAvailable,
-    setSelectedValues = props.setSelectedValues,
-    selectedValues = props.selectedValues,
-    labelLeftIconProps = props.labelLeftIconProps,
-    labelRightIconComponent = props.labelRightIconComponent,
-    optionRightIconComponent = props.optionRightIconComponent,
-    maxSelectCount = props.maxSelectCount,
-    menuOptions = props.menuOptions,
-    dataIdPrefix = props.dataIdPrefix,
-    dropdownWidth = props.dropdownWidth;
-  var _ref = translations || {},
-    emptyListMainMessage = _ref.emptyListMainMessage,
-    emptyListSecondaryMessage = _ref.emptyListSecondaryMessage;
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    searchValue = _useState2[0],
-    setSearchValue = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isAllSelected = _useState4[0],
-    setAllSelected = _useState4[1];
-  var clearAll = useCallback(function () {
-    setAllSelected(false);
-    setSelectedValues([]);
-  }, []);
-  var filteredData = useMemo(function () {
-    if (!searchValue) {
-      var selectedValuesArray = selectedValues.map(function (item) {
-        return item.value;
-      });
-      var newOptions = options.filter(function (item) {
-        return selectedValuesArray.indexOf(item.value) === -1;
-      });
-      return [].concat(_toConsumableArray(selectedValues), _toConsumableArray(newOptions));
-    }
-    return options.filter(function (dataItem) {
-      return typeof dataItem.label === 'string' && dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
-    });
-  }, [searchValue, options, selectedValues]);
-  var selectAll = useCallback(function () {
-    setAllSelected(true);
-    var allValues = filteredData.map(function (item) {
-      var value = item.value,
-        label = item.label,
-        meta = item.meta;
-      return {
-        value: value,
-        label: label,
-        meta: meta
-      };
-    });
-    setSelectedValues(allValues);
-  }, [filteredData]);
-  var onDeselect = function onDeselect(item) {
-    setAllSelected(false);
-    onItemDeselect(item);
-  };
-  var checkIsSelected = function checkIsSelected(itemValue) {
-    return selectedValues.find(function (item) {
-      return item.value === itemValue;
-    }) !== undefined;
-  };
-  var optionProps = useMemo(function () {
-    return {
-      isCheckbox: true,
-      labelLeftIconProps: labelLeftIconProps,
-      optionRightIconComponent: optionRightIconComponent,
-      labelRightIconComponent: labelRightIconComponent
+export const MultiBase = (props) => {
+    const { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth } = props;
+    const { emptyListMainMessage, emptyListSecondaryMessage } = translations || {};
+    const [searchValue, setSearchValue] = useState('');
+    const [isAllSelected, setAllSelected] = useState(false);
+    const clearAll = useCallback(() => {
+        setAllSelected(false);
+        setSelectedValues([]);
+    }, []);
+    const filteredData = useMemo(() => {
+        if (!searchValue) {
+            const selectedValuesArray = selectedValues.map((item) => item.value);
+            const newOptions = options.filter((item) => selectedValuesArray.indexOf(item.value) === -1);
+            return [...selectedValues, ...newOptions];
+        }
+        return options.filter((dataItem) => {
+            return (typeof dataItem.label === 'string' &&
+                dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
+        });
+    }, [searchValue, options, selectedValues]);
+    const selectAll = useCallback(() => {
+        setAllSelected(true);
+        const allValues = filteredData.map((item) => {
+            const { value, label, meta } = item;
+            return { value, label, meta };
+        });
+        setSelectedValues(allValues);
+    }, [filteredData]);
+    const onDeselect = (item) => {
+        setAllSelected(false);
+        onItemDeselect(item);
     };
-  }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentTop, {
-    closeDropdown: closeDropdown,
-    dataIdPrefix: dataIdPrefix,
-    menuOptions: menuOptions,
-    selectAll: selectAll,
-    clearAll: clearAll,
-    hasLimitation: !!maxSelectCount,
-    isAnySelected: selectedValues.length !== 0,
-    helperText: helperText,
-    isSearchAvailable: isSearchAvailable,
-    isSelectAllDisabled: isAllSelected || filteredData.length === 0,
-    setSearchValue: setSearchValue,
-    searchValue: searchValue,
-    translations: translations
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classNames('select__options__scroll scrollbar', {
-      select__options__scroll_mobile: isMobile
-    }),
-    style: scrollableContentStyle
-  }, filteredData.length > 0 && /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: isMobile ? window.innerHeight - 80 - 73 - 24 : filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT ? DROPDOWN_HEIGHT : filteredData.length * ITEM_SIZE,
-    itemCount: filteredData.length,
-    itemSize: isMobile ? ITEM_SIZE_MOBILE : ITEM_SIZE,
-    width: isMobile ? window.innerWidth : dropdownWidth || DROPDOWN_WIDTH,
-    style: {
-      width: dropdownWidth || '100%'
-    }
-  }, function (_ref2) {
-    var index = _ref2.index,
-      style = _ref2.style;
-    var item = filteredData[index];
-    var isSelected = checkIsSelected(item.value);
-    return /*#__PURE__*/React.createElement(OptionItem, _extends({
-      size: isMobile ? 'large' : 'small',
-      data: item,
-      dataId: item.dataId,
-      onClick: isSelected ? onDeselect : onItemSelect,
-      disabled: item.disabled || !isSelected && selectedValues.length === maxSelectCount,
-      isSelected: isSelected,
-      style: style
-    }, optionProps));
-  })), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    size: "small",
-    mainMessage: emptyListMainMessage,
-    paragraphMessage: emptyListSecondaryMessage
-  }) : null);
+    const checkIsSelected = (itemValue) => {
+        return selectedValues.find((item) => item.value === itemValue) !== undefined;
+    };
+    const optionProps = useMemo(() => {
+        return {
+            isCheckbox: true,
+            labelLeftIconProps,
+            optionRightIconComponent,
+            labelRightIconComponent
+        };
+    }, [labelLeftIconProps, optionRightIconComponent, labelRightIconComponent]);
+    return (_jsxs(_Fragment, { children: [_jsx(ContentTop, { closeDropdown: closeDropdown, dataIdPrefix: dataIdPrefix, menuOptions: menuOptions, selectAll: selectAll, clearAll: clearAll, hasLimitation: !!maxSelectCount, isAnySelected: selectedValues.length !== 0, helperText: helperText, isSearchAvailable: isSearchAvailable, isSelectAllDisabled: isAllSelected || filteredData.length === 0, setSearchValue: setSearchValue, searchValue: searchValue, translations: translations }), _jsx("div", { className: classNames('select__options__scroll scrollbar', {
+                    select__options__scroll_mobile: isMobile
+                }), style: scrollableContentStyle, children: filteredData.length > 0 && (_jsx(List, { height: isMobile
+                        ? window.innerHeight - 80 - 73 - 24
+                        : filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT
+                            ? DROPDOWN_HEIGHT
+                            : filteredData.length * ITEM_SIZE, itemCount: filteredData.length, itemSize: isMobile ? ITEM_SIZE_MOBILE : ITEM_SIZE, width: isMobile ? window.innerWidth : dropdownWidth || DROPDOWN_WIDTH, style: { width: dropdownWidth || '100%' }, children: ({ index, style }) => {
+                        const item = filteredData[index];
+                        const isSelected = checkIsSelected(item.value);
+                        return (_jsx(OptionItem, Object.assign({ size: isMobile ? 'large' : 'small', data: item, dataId: item.dataId, onClick: isSelected ? onDeselect : onItemSelect, disabled: item.disabled || (!isSelected && selectedValues.length === maxSelectCount), isSelected: isSelected, style: style }, optionProps)));
+                    } })) }), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: emptyListMainMessage, paragraphMessage: emptyListSecondaryMessage })) : null] }));
 };
-
-export { MultiBase };

package/components/Select/MultiSelect/MultiSelect.js

@@ -1,246 +1,68 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { forwardRef, useState, useMemo, useEffect, useId } from 'react';
-import { OptionsWrapper } from './OptionsWrapper.js';
-import { Footer } from '../SharedComponents/Footer.js';
-import 'classnames';
-import 'dayjs';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../consts/index.js';
-import { useOnOutsideClick } from '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '../../../Alert-BslI0aA0.js';
-import 'react-syntax-highlighter';
-import 'react-dom';
-import 'framer-motion';
-import '../../Collapse/CollapseGroup/CollapseGroup.js';
-import '../SharedComponents/ContentTop.js';
-import { InputSelectWrapper } from '../SharedComponents/InputSelectWrapper/InputSelectWrapper.js';
-import { ButtonSelectWrapper } from '../SharedComponents/ButtonSelectWrapper/ButtonSelectWrapper.js';
-import { useIsMobile } from '../../../hooks/useGetIsMobile.js';
-import { SELECT_TRANSLATIONS } from '../localization.js';
-import '../../../utils/helpers.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetHasBottomSpace.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../SharedComponents/Loading.js';
-import '../../Text/Text.js';
-import '../../Input/Input.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../helperComponents/Label/Label.js';
-import '../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import '../../../type/file-upload.js';
-import '../../Alert/consts.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/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 '@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 './MultiSelectGrouped/MultiSelectGrouped.js';
-import '../../Divider/Divider.js';
-import '../../Empty/Empty.js';
-import '../../Image/Image.js';
-import '../../../helperComponents/OptionItem/OptionItem.js';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '../../FileUpload/UploadItems.js';
-import '../../../hooks/useFormProps.js';
-import '../../../context/types.js';
-import '../../SVGIcons/IconEditFilled.js';
-import '../../SVGIcons/IconEdit.js';
-import '../../SVGIcons/IconAttach.js';
-import '../../SVGIcons/IconCheckmark.js';
-import '../constants.js';
-import '../../SVGIcons/IconCaretUpFilled.js';
-import '../../SVGIcons/IconCaretDownFilled.js';
-import './MultiBase/MultiBase.js';
-import 'react-window';
-import './MultiSelectWithTabs/MultiSelectWithTabs.js';
-import '../../Tab/Tab.js';
-import '../../Tab/TabItem.js';
-import '../../Badge/Badge.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 '../../../hooks/useChangePositionsOnScroll.js';
-import './MobileWrapper.js';
-import './DesktopWrapper.js';
-import '../../SVGIcons/IconChevronUp.js';
-import '../SharedComponents/ButtonSelectWrapper/Button/Button.js';
-
-var _excluded = ["isMobileFullScreen", "options", "footerButtonProps", "selectedItems", "setSelectedItems", "name", "setFieldValue", "value", "label", "placeHolder", "isRequiredField", "labelAddons", "className", "disabled", "dropdownWidth", "align", "size", "isButtonSelect", "checkboxInfo", "translations", "hasError", "language"];
-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 MultiSelect = /*#__PURE__*/forwardRef(function (props, _ref) {
-  var _props$isMobileFullSc = props.isMobileFullScreen,
-    isMobileFullScreen = _props$isMobileFullSc === void 0 ? true : _props$isMobileFullSc,
-    options = props.options,
-    footerButtonProps = props.footerButtonProps,
-    selectedItems = props.selectedItems,
-    setSelectedItems = props.setSelectedItems,
-    name = props.name,
-    setFieldValue = props.setFieldValue,
-    value = props.value,
-    label = props.label,
-    placeHolder = props.placeHolder,
-    isRequiredField = props.isRequiredField,
-    labelAddons = props.labelAddons,
-    _props$className = props.className,
-    className = _props$className === void 0 ? '' : _props$className,
-    disabled = props.disabled,
-    dropdownWidth = props.dropdownWidth,
-    _props$align = props.align,
-    align = _props$align === void 0 ? 'left' : _props$align,
-    size = props.size,
-    isButtonSelect = props.isButtonSelect,
-    checkboxInfo = props.checkboxInfo,
-    translations = props.translations,
-    hasError = props.hasError,
-    _props$language = props.language,
-    language = _props$language === void 0 ? 'en' : _props$language,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    dropdownRef = _useState2[0],
-    setDropdownRef = _useState2[1];
-  var initialSelected = value || selectedItems || [];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isOpen = _useState4[0],
-    setIsOpen = _useState4[1];
-  var _useState5 = useState(initialSelected),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedValues = _useState6[0],
-    setSelectedValues = _useState6[1];
-  var _useState7 = useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    containerRef = _useState8[0],
-    setContainerRef = _useState8[1];
-  var closeDropdown = function closeDropdown() {
-    return setIsOpen(false);
-  };
-  var openDropdown = function openDropdown() {
-    return setIsOpen(true);
-  };
-  var hasChange = useMemo(function () {
-    if ((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) !== (initialSelected === null || initialSelected === void 0 ? void 0 : initialSelected.length)) {
-      return true;
-    }
-    return (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.findIndex(function (value) {
-      return (initialSelected === null || initialSelected === void 0 ? void 0 : initialSelected.findIndex(function (i) {
-        return i.value === value.value;
-      })) === -1;
-    })) !== -1;
-  }, [selectedValues, initialSelected]);
-  useEffect(function () {
-    setSelectedValues(value || []);
-  }, [value]);
-  useEffect(function () {
-    if (selectedItems) {
-      setSelectedValues(selectedItems || []);
-    }
-  }, [selectedItems]);
-  var cancelSelectedItems = function cancelSelectedItems() {
-    setSelectedValues(initialSelected);
-    closeDropdown();
-  };
-  useOnOutsideClick(containerRef, cancelSelectedItems, isOpen, useId());
-  var submitSelectedValue = function submitSelectedValue(selections, isChecked) {
-    if (setSelectedItems) {
-      setSelectedItems(selections, isChecked);
-    }
-    if (name && setFieldValue) {
-      setFieldValue(name, selections);
-    }
-    closeDropdown();
-  };
-  var applySelectedItems = function applySelectedItems() {
-    var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    submitSelectedValue(selectedValues, isChecked);
-  };
-  var WrapperComponent = isButtonSelect ? ButtonSelectWrapper : InputSelectWrapper;
-  var localizations = _objectSpread(_objectSpread({}, SELECT_TRANSLATIONS[language]), translations);
-  var isMobile = useIsMobile();
-  return /*#__PURE__*/React.createElement(WrapperComponent, {
-    dropdownRef: dropdownRef,
-    isOpen: isOpen,
-    setIsOpen: setIsOpen,
-    containerRef: containerRef,
-    setContainerRef: setContainerRef,
-    dropdownWidth: dropdownWidth,
-    setDropdownRef: setDropdownRef,
-    size: size,
-    label: label,
-    align: align,
-    disabled: disabled,
-    className: className,
-    labelAddons: labelAddons,
-    placeHolder: placeHolder,
-    selectedValues: selectedValues,
-    isRequiredField: isRequiredField,
-    overflowText: localizations.overflowText,
-    hasError: hasError,
-    applySelectedItems: applySelectedItems,
-    isMobile: isMobile && isMobileFullScreen
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OptionsWrapper
-  // @ts-ignore
-  , _extends({
-    options: options,
-    isOpen: isOpen,
-    translations: localizations,
-    setIsOpen: setIsOpen,
-    dropdownRef: dropdownRef,
-    openDropdown: openDropdown,
-    selectedValues: selectedValues,
-    setSelectedValues: setSelectedValues,
-    containerRef: containerRef,
-    dropdownWidth: dropdownWidth,
-    isMobileFullScreen: isMobileFullScreen
-  }, rest)), options.length && !(isMobile && isMobileFullScreen) ? /*#__PURE__*/React.createElement(Footer, {
-    checkboxInfo: checkboxInfo,
-    hasChange: hasChange,
-    buttonProps: footerButtonProps,
-    onCancel: cancelSelectedItems,
-    onApply: applySelectedItems,
-    language: language
-  }) : null));
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState, forwardRef } from 'react';
+import { OptionsWrapper } from './OptionsWrapper';
+import { Footer, InputSelectWrapper, ButtonSelectWrapper } from '../SharedComponents';
+import { useOnOutsideClick } from '../../../hooks';
+import { useIsMobile } from '../../../hooks/useGetIsMobile';
+import { SELECT_TRANSLATIONS } from '../localization';
+export const MultiSelect = forwardRef((props, _ref) => {
+    const { isMobileFullScreen = true, options, footerButtonProps, selectedItems, setSelectedItems, name, setFieldValue, value, label, placeHolder, isRequiredField, labelAddons, className = '', disabled, dropdownWidth, align = 'left', size, isButtonSelect, checkboxInfo, translations, hasError, language = 'en' } = props, rest = __rest(props, ["isMobileFullScreen", "options", "footerButtonProps", "selectedItems", "setSelectedItems", "name", "setFieldValue", "value", "label", "placeHolder", "isRequiredField", "labelAddons", "className", "disabled", "dropdownWidth", "align", "size", "isButtonSelect", "checkboxInfo", "translations", "hasError", "language"]);
+    const [dropdownRef, setDropdownRef] = useState(null);
+    const initialSelected = value || selectedItems || [];
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValues, setSelectedValues] = useState(initialSelected);
+    const [containerRef, setContainerRef] = useState(null);
+    const closeDropdown = () => setIsOpen(false);
+    const openDropdown = () => setIsOpen(true);
+    const hasChange = useMemo(() => {
+        if ((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) !== (initialSelected === null || initialSelected === void 0 ? void 0 : initialSelected.length)) {
+            return true;
+        }
+        return ((selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.findIndex((value) => (initialSelected === null || initialSelected === void 0 ? void 0 : initialSelected.findIndex((i) => i.value === value.value)) === -1)) !== -1);
+    }, [selectedValues, initialSelected]);
+    useEffect(() => {
+        setSelectedValues(value || []);
+    }, [value]);
+    useEffect(() => {
+        if (selectedItems) {
+            setSelectedValues(selectedItems || []);
+        }
+    }, [selectedItems]);
+    const cancelSelectedItems = () => {
+        setSelectedValues(initialSelected);
+        closeDropdown();
+    };
+    useOnOutsideClick(containerRef, cancelSelectedItems, isOpen, useId());
+    const submitSelectedValue = (selections, isChecked) => {
+        if (setSelectedItems) {
+            setSelectedItems(selections, isChecked);
+        }
+        if (name && setFieldValue) {
+            setFieldValue(name, selections);
+        }
+        closeDropdown();
+    };
+    const applySelectedItems = (isChecked = false) => {
+        submitSelectedValue(selectedValues, isChecked);
+    };
+    const WrapperComponent = isButtonSelect ? ButtonSelectWrapper : InputSelectWrapper;
+    const localizations = Object.assign(Object.assign({}, SELECT_TRANSLATIONS[language]), translations);
+    const isMobile = useIsMobile();
+    return (_jsx(WrapperComponent, { dropdownRef: dropdownRef, isOpen: isOpen, setIsOpen: setIsOpen, containerRef: containerRef, setContainerRef: setContainerRef, dropdownWidth: dropdownWidth, setDropdownRef: setDropdownRef, size: size, label: label, align: align, disabled: disabled, className: className, labelAddons: labelAddons, placeHolder: placeHolder, selectedValues: selectedValues, isRequiredField: isRequiredField, overflowText: localizations.overflowText, hasError: hasError, applySelectedItems: applySelectedItems, isMobile: isMobile && isMobileFullScreen, children: _jsxs(_Fragment, { children: [_jsx(OptionsWrapper
+                // @ts-ignore
+                , Object.assign({ 
+                    // @ts-ignore
+                    options: options, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
 });
 MultiSelect.displayName = 'MultiSelect';
-
-export { MultiSelect };