hrm_ui_lib 2.1.0 → 2.2.0

package/components/Select/Select/Select.js

@@ -1,257 +1,88 @@
-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, useRef, useState } from 'react';
-import { useIsMobile } from '../../../hooks/useGetIsMobile.js';
-import { SelectDesktop } from './SelectDesktop/index.js';
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useState } from 'react';
+import { useIsMobile } from '../../../hooks/useGetIsMobile';
+import { SelectDesktop } from './SelectDesktop';
 import classNames from 'classnames';
-import { Input } from '../../Input/Input.js';
-import { noop } from '../../../utils/helpers.js';
-import { SELECTED_VISIBLE_MIN_COUNT } from '../constants.js';
-import { SelectMobile } from './SelectMobile/index.js';
-import { IconChevronUp } from '../../SVGIcons/IconChevronUp.js';
-import { IconChevronDown } from '../../SVGIcons/IconChevronDown.js';
-import { SELECT_TRANSLATIONS } from '../localization.js';
-import { B as Button } from '../../../Alert-BslI0aA0.js';
-import '../../../consts/index.js';
-import '../../../type/file-upload.js';
-import 'react-window';
-import '../../Text/Text.js';
-import 'dayjs';
-import '../../../helperComponents/OptionItem/OptionItem.js';
-import '../../Avatar/Avatar.js';
-import '../../FileUpload/FileUpload.js';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../FileUpload/types.js';
-import '../../../helperComponents/Label/Label.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-syntax-highlighter';
-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 'framer-motion';
-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 '../../../hooks/useGetHasBottomSpace.js';
-import '../../../hooks/useChangePositionsOnScroll.js';
-import '../../Empty/Empty.js';
-import '../../Image/Image.js';
-import 'react-dom';
-import '../../Collapse/CollapseGroup/CollapseGroup.js';
-import '../../Collapse/CollapseItem/CollapseItem.js';
-import '../../SVGIcons/IconChevronRight.js';
-import '../../Divider/Divider.js';
-import '../SharedComponents/ContentTop.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 '../SharedComponents/Loading.js';
-import './helpers.js';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../SVGIcons/IconCheckmarkCircleFilled.js';
-import './SelectMobile/MobileTopContent.js';
-
-var _excluded = ["labelAddons", "dataId", "className", "size", "label", "hasError", "isValid", "disabled", "outerHelperText", "isRequiredField", "placeHolder", "selectRightIconProps", "selectRightIconOpenedProps", "options", "withSearch", "setSelectedItem", "setFieldValue", "name", "selectedItem", "value", "isMobileFullScreen", "language", "translations", "isButtonSelect"];
-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 Select = /*#__PURE__*/forwardRef(function (props, _ref) {
-  var _selectedOption$optio, _selectedOption$optio2;
-  var labelAddons = props.labelAddons,
-    dataId = props.dataId,
-    className = props.className,
-    size = props.size,
-    label = props.label,
-    hasError = props.hasError,
-    isValid = props.isValid,
-    disabled = props.disabled,
-    outerHelperText = props.outerHelperText,
-    isRequiredField = props.isRequiredField,
-    placeHolder = props.placeHolder,
-    _props$selectRightIco = props.selectRightIconProps,
-    selectRightIconProps = _props$selectRightIco === void 0 ? {
-      Component: IconChevronDown,
-      size: 'small'
-    } : _props$selectRightIco,
-    _props$selectRightIco2 = props.selectRightIconOpenedProps,
-    selectRightIconOpenedProps = _props$selectRightIco2 === void 0 ? {
-      Component: IconChevronUp,
-      size: 'small'
-    } : _props$selectRightIco2,
-    options = props.options,
-    _props$withSearch = props.withSearch,
-    withSearch = _props$withSearch === void 0 ? false : _props$withSearch,
-    setSelectedItem = props.setSelectedItem,
-    setFieldValue = props.setFieldValue,
-    name = props.name,
-    selectedItem = props.selectedItem,
-    value = props.value,
-    _props$isMobileFullSc = props.isMobileFullScreen,
-    isMobileFullScreen = _props$isMobileFullSc === void 0 ? true : _props$isMobileFullSc,
-    _props$language = props.language,
-    language = _props$language === void 0 ? 'en' : _props$language,
-    translations = props.translations,
-    isButtonSelect = props.isButtonSelect,
-    rest = _objectWithoutProperties(props, _excluded);
-  var isMobile = useIsMobile();
-  var containerRef = useRef(null);
-  var inputRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    searchValue = _useState4[0],
-    setSearchValue = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    selectedOption = _useState6[0],
-    setSelectedOption = _useState6[1];
-  var openDropdown = function openDropdown() {
-    return setIsOpen(true);
-  };
-  var closeDropdown = function closeDropdown() {
-    setIsOpen(false);
-    setSearchValue('');
-  };
-  var onOpenOptions = function onOpenOptions(e) {
-    var result = e === null || e === void 0 ? void 0 : e.target;
-    var className = result === null || result === void 0 ? void 0 : result.getAttribute('class');
-    if (e && className && (className.indexOf('icon-') !== -1 || className.indexOf('svg-icon') !== -1)) {
-      setIsOpen(!isOpen);
-      e.preventDefault();
-      return;
-    } else if (isOpen && !isWithSearch) {
-      closeDropdown();
-    } else {
-      openDropdown();
-    }
-  };
-  var leftIconProps = selectedOption !== null && selectedOption !== void 0 && (_selectedOption$optio = selectedOption.optionLeftIcon) !== null && _selectedOption$optio !== void 0 && _selectedOption$optio.Component ? {
-    Component: selectedOption === null || selectedOption === void 0 || (_selectedOption$optio2 = selectedOption.optionLeftIcon) === null || _selectedOption$optio2 === void 0 ? void 0 : _selectedOption$optio2.Component
-  } : null;
-  var isWithSearch = withSearch && options.length > SELECTED_VISIBLE_MIN_COUNT;
-  var onSearch = function onSearch(e) {
-    setSelectedOption(null);
-    setSearchValue(e.target.value);
-  };
-  var onItemSelect = function onItemSelect(value) {
-    if (setSelectedItem) {
-      setSelectedItem(value);
-    }
-    if (name && setFieldValue) {
-      setFieldValue(name, value);
-    }
-    closeDropdown();
-  };
-  var onItemDeselect = function onItemDeselect() {
-    return onItemSelect(null);
-  };
-  var currentSelection = value || selectedItem;
-  var localizations = _objectSpread(_objectSpread({}, SELECT_TRANSLATIONS[language]), translations);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-id": "".concat(dataId, "-content"),
-    className: classNames("select select--".concat(size), className, {
-      'select--opened': isOpen
-    }),
-    ref: containerRef
-  }, !isButtonSelect && /*#__PURE__*/React.createElement(Input, {
-    onClick: disabled ? noop : onOpenOptions,
-    size: size === 'large' ? 'large' : 'small',
-    dataId: dataId,
-    hasError: hasError,
-    className: "select__input",
-    label: label,
-    onChange: onSearch,
-    required: isRequiredField,
-    leftIconProps: leftIconProps,
-    rightIconProps: isOpen ? selectRightIconOpenedProps : selectRightIconProps,
-    placeholder: placeHolder,
-    currentValue: searchValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.toString()) || '',
-    isValid: isValid,
-    disabled: disabled,
-    helperText: isOpen ? '' : outerHelperText,
-    ref: inputRef,
-    labelAddons: labelAddons,
-    autoComplete: "false",
-    readOnly: isMobile && isMobileFullScreen || !isWithSearch
-  }), isButtonSelect && /*#__PURE__*/React.createElement(Button, {
-    size: size,
-    type: "secondary",
-    dataId: dataId,
-    iconProps: selectRightIconProps,
-    buttonText: placeHolder || '',
-    onClick: disabled ? noop : openDropdown,
-    className: "select_button"
-  }), isMobile && isMobileFullScreen ? /*#__PURE__*/React.createElement(SelectMobile, _extends({}, rest, {
-    options: options,
-    isOpen: isOpen,
-    closeDropdown: closeDropdown,
-    currentSelection: currentSelection,
-    isRequiredField: isRequiredField,
-    onItemDeselect: onItemDeselect,
-    onItemSelect: onItemSelect,
-    translations: localizations,
-    setSelectedOption: setSelectedOption,
-    withSearch: withSearch
-  })) : /*#__PURE__*/React.createElement(SelectDesktop, _extends({}, rest, {
-    onItemDeselect: onItemDeselect,
-    onItemSelect: onItemSelect,
-    currentSelection: currentSelection,
-    isRequiredField: isRequiredField,
-    options: options,
-    inputRef: inputRef.current,
-    containerRef: containerRef.current,
-    isOpen: isOpen,
-    closeDropdown: closeDropdown,
-    setSelectedOption: setSelectedOption,
-    searchValue: searchValue,
-    setSearchValue: setSearchValue,
-    translations: localizations
-  })));
+import { Input } from '../../Input';
+import { noop } from '../../../utils/helpers';
+import { SELECTED_VISIBLE_MIN_COUNT } from '../constants';
+import { SelectMobile } from './SelectMobile';
+import { IconChevronUp } from '../../SVGIcons/IconChevronUp';
+import { IconChevronDown } from '../../SVGIcons/IconChevronDown';
+import { SELECT_TRANSLATIONS } from '../localization';
+import { Button } from '../../Button';
+export const Select = forwardRef((props, _ref) => {
+    var _a, _b;
+    const { labelAddons, dataId, className, size, label, hasError, isValid, disabled, outerHelperText, isRequiredField, placeHolder, selectRightIconProps = {
+        Component: IconChevronDown,
+        size: 'small'
+    }, selectRightIconOpenedProps = {
+        Component: IconChevronUp,
+        size: 'small'
+    }, options, withSearch = false, setSelectedItem, setFieldValue, name, selectedItem, value, isMobileFullScreen = true, language = 'en', translations, isButtonSelect } = props, rest = __rest(props, ["labelAddons", "dataId", "className", "size", "label", "hasError", "isValid", "disabled", "outerHelperText", "isRequiredField", "placeHolder", "selectRightIconProps", "selectRightIconOpenedProps", "options", "withSearch", "setSelectedItem", "setFieldValue", "name", "selectedItem", "value", "isMobileFullScreen", "language", "translations", "isButtonSelect"]);
+    const isMobile = useIsMobile();
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const [selectedOption, setSelectedOption] = useState(null);
+    const openDropdown = () => setIsOpen(true);
+    const closeDropdown = () => {
+        setIsOpen(false);
+        setSearchValue('');
+    };
+    const onOpenOptions = (e) => {
+        const result = e === null || e === void 0 ? void 0 : e.target;
+        const className = result === null || result === void 0 ? void 0 : result.getAttribute('class');
+        if (e &&
+            className &&
+            (className.indexOf('icon-') !== -1 || className.indexOf('svg-icon') !== -1)) {
+            setIsOpen(!isOpen);
+            e.preventDefault();
+            return;
+        }
+        else if (isOpen && !isWithSearch) {
+            closeDropdown();
+        }
+        else {
+            openDropdown();
+        }
+    };
+    const leftIconProps = ((_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.optionLeftIcon) === null || _a === void 0 ? void 0 : _a.Component)
+        ? {
+            Component: (_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.optionLeftIcon) === null || _b === void 0 ? void 0 : _b.Component
+        }
+        : null;
+    const isWithSearch = withSearch && options.length > SELECTED_VISIBLE_MIN_COUNT;
+    const onSearch = (e) => {
+        setSelectedOption(null);
+        setSearchValue(e.target.value);
+    };
+    const onItemSelect = (value) => {
+        if (setSelectedItem) {
+            setSelectedItem(value);
+        }
+        if (name && setFieldValue) {
+            setFieldValue(name, value);
+        }
+        closeDropdown();
+    };
+    const onItemDeselect = () => onItemSelect(null);
+    const currentSelection = value || selectedItem;
+    const localizations = Object.assign(Object.assign({}, SELECT_TRANSLATIONS[language]), translations);
+    return (_jsxs("div", { "data-id": `${dataId}-content`, className: classNames(`select select--${size}`, className, {
+            'select--opened': isOpen
+        }), ref: containerRef, children: [!isButtonSelect && (_jsx(Input, { onClick: disabled ? noop : onOpenOptions, size: size === 'large' ? 'large' : 'small', dataId: dataId, hasError: hasError, className: "select__input", label: label, onChange: onSearch, required: isRequiredField, leftIconProps: leftIconProps, rightIconProps: isOpen ? selectRightIconOpenedProps : selectRightIconProps, placeholder: placeHolder, currentValue: searchValue || (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label.toString()) || '', isValid: isValid, disabled: disabled, helperText: isOpen ? '' : outerHelperText, ref: inputRef, labelAddons: labelAddons, autoComplete: "false", readOnly: (isMobile && isMobileFullScreen) || !isWithSearch })), isButtonSelect && (_jsx(Button, { size: size, type: "secondary", dataId: dataId, iconProps: selectRightIconProps, buttonText: placeHolder || '', onClick: disabled ? noop : openDropdown, className: "select_button" })), isMobile && isMobileFullScreen ? (_jsx(SelectMobile, Object.assign({}, rest, { options: options, isOpen: isOpen, closeDropdown: closeDropdown, currentSelection: currentSelection, isRequiredField: isRequiredField, onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, translations: localizations, setSelectedOption: setSelectedOption, withSearch: withSearch }))) : (_jsx(SelectDesktop, Object.assign({}, rest, { onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, currentSelection: currentSelection, isRequiredField: isRequiredField, options: options, inputRef: inputRef.current, containerRef: containerRef.current, isOpen: isOpen, closeDropdown: closeDropdown, setSelectedOption: setSelectedOption, searchValue: searchValue, setSearchValue: setSearchValue, translations: localizations })))] }));
 });
 Select.displayName = 'Select';
-
-export { Select };

package/components/Select/Select/SelectDesktop/index.js

@@ -1,223 +1,70 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from 'classnames';
-import React, { useState, useCallback, useEffect, useId, useMemo } from 'react';
-import { FixedSizeList } from 'react-window';
-import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts/index.js';
-import { Text } from '../../../Text/Text.js';
-import 'dayjs';
-import { OptionItem } from '../../../../helperComponents/OptionItem/OptionItem.js';
-import 'react-syntax-highlighter';
-import { useGetElemSizes } from '../../../../hooks/useGetElemSizes.js';
-import { useGetElemPositions } from '../../../../hooks/useGetElemPositions.js';
-import { useOnOutsideClick } from '../../../../hooks/useOnOutsideClick.js';
-import '../../../../hooks/useScreenSize.js';
-import { useGetHasBottomSpace, useGetHasTopSpace } from '../../../../hooks/useGetHasBottomSpace.js';
-import 'react-hook-form';
-import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll.js';
-import { Empty } from '../../../Empty/Empty.js';
-import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../../../Alert-BslI0aA0.js';
-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 { DROPDOWN_WIDTH, ITEM_SIZE, DROPDOWN_HEIGHT } from '../../constants.js';
-import { filterOptions } from '../helpers.js';
-import '../../../../type/file-upload.js';
-import '../../../../utils/helpers.js';
-import '../../../Avatar/Avatar.js';
-import '../../../FileUpload/FileUpload.js';
-import '@babel/runtime/helpers/toConsumableArray';
-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/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 '../../../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 '../../../Image/Image.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';
-
-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 SelectDesktop = function SelectDesktop(props) {
-  var currentSelection = props.currentSelection,
-    options = props.options,
-    isLoading = props.isLoading,
-    _props$dataId = props.dataId,
-    dataId = _props$dataId === void 0 ? '' : _props$dataId,
-    innerHelperText = props.innerHelperText,
-    isRequiredField = props.isRequiredField,
-    labelLeftIconProps = props.labelLeftIconProps,
-    labelRightIconComponent = props.labelRightIconComponent,
-    optionRightIconComponent = props.optionRightIconComponent,
-    tooltipAddons = props.tooltipAddons,
-    dropdownWidth = props.dropdownWidth,
-    isOpen = props.isOpen,
-    closeDropdown = props.closeDropdown,
-    setSelectedOption = props.setSelectedOption,
-    inputRef = props.inputRef,
-    containerRef = props.containerRef,
-    onItemSelect = props.onItemSelect,
-    onItemDeselect = props.onItemDeselect,
-    searchValue = props.searchValue,
-    setSearchValue = props.setSearchValue,
-    translations = props.translations;
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    dropdownRef = _useState2[0],
-    setDropdownRef = _useState2[1];
-  var setCurrentSelectedLabel = useCallback(function () {
-    var selectedItem = options.find(function (item) {
-      return item.value === currentSelection;
-    });
-    setSelectedOption(selectedItem);
-  }, [currentSelection, options]);
-  useEffect(function () {
-    setCurrentSelectedLabel();
-  }, [setCurrentSelectedLabel]);
-  var handleOutsideClick = function handleOutsideClick() {
-    if (!searchValue && isRequiredField) {
-      setCurrentSelectedLabel();
-    }
-    closeDropdown();
-  };
-  useOnOutsideClick(containerRef, handleOutsideClick, isOpen, useId());
-  var _useGetElemPositions = useGetElemPositions(inputRef),
-    bottom = _useGetElemPositions.bottom,
-    left = _useGetElemPositions.left,
-    top = _useGetElemPositions.top;
-  var _useGetElemSizes = useGetElemSizes(containerRef),
-    width = _useGetElemSizes.width;
-  var filteredData = useMemo(function () {
-    return filterOptions(options, searchValue);
-  }, [searchValue, options]);
-  var clickHandler = function clickHandler(isSelected) {
-    return function (_ref) {
-      var value = _ref.value;
-      setSearchValue('');
-      if (!isSelected) {
-        onItemSelect(value);
-        return;
-      }
-      if (!isRequiredField) {
-        onItemDeselect();
-      }
+import { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { FixedSizeList as List } from 'react-window';
+import { DROPDOWN_AND_INPUT_GAP } from '../../../../consts';
+import { OptionItem } from '../../../../helperComponents';
+import { useGetElemPositions, useGetElemSizes, useGetHasBottomSpace, useGetHasTopSpace, useOnOutsideClick } from '../../../../hooks';
+import { useChangePositionsOnScroll } from '../../../../hooks/useChangePositionsOnScroll';
+import { Empty } from '../../../Empty';
+import { Text } from '../../../Text';
+import { Loading } from '../../SharedComponents';
+import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE } from '../../constants';
+import { filterOptions } from '../helpers';
+export const SelectDesktop = (props) => {
+    const { currentSelection, options, isLoading, dataId = '', innerHelperText, isRequiredField, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, tooltipAddons, dropdownWidth, isOpen, closeDropdown, setSelectedOption, inputRef, containerRef, onItemSelect, onItemDeselect, searchValue, setSearchValue, translations } = props;
+    const [dropdownRef, setDropdownRef] = useState(null);
+    const setCurrentSelectedLabel = useCallback(() => {
+        const selectedItem = options.find((item) => item.value === currentSelection);
+        setSelectedOption(selectedItem);
+    }, [currentSelection, options]);
+    useEffect(() => {
+        setCurrentSelectedLabel();
+    }, [setCurrentSelectedLabel]);
+    const handleOutsideClick = () => {
+        if (!searchValue && isRequiredField) {
+            setCurrentSelectedLabel();
+        }
+        closeDropdown();
+    };
+    useOnOutsideClick(containerRef, handleOutsideClick, isOpen, useId());
+    const { bottom, left, top } = useGetElemPositions(inputRef);
+    const { width } = useGetElemSizes(containerRef);
+    const filteredData = useMemo(() => {
+        return filterOptions(options, searchValue);
+    }, [searchValue, options]);
+    const clickHandler = (isSelected) => ({ value }) => {
+        setSearchValue('');
+        if (!isSelected) {
+            onItemSelect(value);
+            return;
+        }
+        if (!isRequiredField) {
+            onItemDeselect();
+        }
     };
-  };
-  var _useGetHasBottomSpace = useGetHasBottomSpace({
-      element: dropdownRef,
-      input: inputRef
-    }),
-    hasBottomSpace = _useGetHasBottomSpace.hasBottomSpace;
-  var hasTopSpace = useGetHasTopSpace({
-    element: dropdownRef,
-    input: inputRef
-  });
-  useChangePositionsOnScroll(inputRef, dropdownRef, hasBottomSpace);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isOpen && /*#__PURE__*/React.createElement("div", {
-    className: "select__options",
-    style: _objectSpread({
-      left: left,
-      width: width
-    }, hasBottomSpace || !hasTopSpace ? {
-      top: bottom
-    } : {
-      bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP
-    }),
-    ref: setDropdownRef
-  }, isLoading ? /*#__PURE__*/React.createElement(Loading, null) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    "data-id": "".concat(dataId, "-options-content"),
-    className: classNames('select__options__scroll', 'scrollbar')
-  }, innerHelperText ? /*#__PURE__*/React.createElement("div", {
-    className: "content-top"
-  }, /*#__PURE__*/React.createElement(Text, {
-    size: "xsmall",
-    type: "secondary",
-    className: "content-top__label"
-  }, innerHelperText)) : null, filteredData.length > 0 && /*#__PURE__*/React.createElement(FixedSizeList, {
-    height: filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT ? DROPDOWN_HEIGHT : filteredData.length * ITEM_SIZE,
-    itemCount: filteredData.length,
-    itemSize: ITEM_SIZE,
-    width: dropdownWidth || DROPDOWN_WIDTH,
-    style: {
-      width: dropdownWidth || '100%',
-      overflowX: 'hidden',
-      overflowY: 'auto',
-      willChange: 'auto'
-    }
-  }, function (_ref2) {
-    var index = _ref2.index,
-      style = _ref2.style;
-    var item = filteredData[index];
-    var isSelected = item.value === currentSelection;
-    return /*#__PURE__*/React.createElement(OptionItem, {
-      tooltipAddons: tooltipAddons,
-      data: item,
-      key: item.value,
-      onClick: clickHandler(isSelected),
-      labelLeftIconProps: labelLeftIconProps,
-      OptionRightIconComponent: optionRightIconComponent,
-      LabelRightIconComponent: labelRightIconComponent,
-      disabled: item.disabled,
-      isSelected: isSelected,
-      dataId: item.dataId,
-      style: style
+    const { hasBottomSpace } = useGetHasBottomSpace({
+        element: dropdownRef,
+        input: inputRef
+    });
+    const hasTopSpace = useGetHasTopSpace({
+        element: dropdownRef,
+        input: inputRef
     });
-  }), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    size: "small",
-    mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage
-  }) : null))));
+    useChangePositionsOnScroll(inputRef, dropdownRef, hasBottomSpace);
+    return (_jsx(_Fragment, { children: isOpen && (_jsx("div", { className: "select__options", style: Object.assign({ left,
+                width }, (hasBottomSpace || !hasTopSpace
+                ? { top: bottom }
+                : { bottom: window.innerHeight - top + DROPDOWN_AND_INPUT_GAP })), ref: setDropdownRef, children: isLoading ? (_jsx(Loading, {})) : (_jsx(_Fragment, { children: _jsxs("div", { "data-id": `${dataId}-options-content`, className: classNames('select__options__scroll', 'scrollbar'), children: [innerHelperText ? (_jsx("div", { className: "content-top", children: _jsx(Text, { size: "xsmall", type: "secondary", className: "content-top__label", children: innerHelperText }) })) : null, filteredData.length > 0 && (_jsx(List, { height: filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT
+                                ? DROPDOWN_HEIGHT
+                                : filteredData.length * ITEM_SIZE, itemCount: filteredData.length, itemSize: ITEM_SIZE, width: dropdownWidth || DROPDOWN_WIDTH, style: {
+                                width: dropdownWidth || '100%',
+                                overflowX: 'hidden',
+                                overflowY: 'auto',
+                                willChange: 'auto'
+                            }, children: ({ index, style }) => {
+                                const item = filteredData[index];
+                                const isSelected = item.value === currentSelection;
+                                return (_jsx(OptionItem, { tooltipAddons: tooltipAddons, data: item, onClick: clickHandler(isSelected), labelLeftIconProps: labelLeftIconProps, OptionRightIconComponent: optionRightIconComponent, LabelRightIconComponent: labelRightIconComponent, disabled: item.disabled, isSelected: isSelected, dataId: item.dataId, style: style }, item.value));
+                            } })), filteredData.length === 0 ? (_jsx(Empty, { size: "small", mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage })) : null] }) })) })) }));
 };
-
-export { SelectDesktop };