hrm_ui_lib 2.0.3 → 2.1.0-alpha.10

package/components/Select/Select/Select.js

@@ -1,257 +1 @@
-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';
-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-V_kH4Snn.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
-  })));
-});
-Select.displayName = 'Select';
-
-export { Select };
+import{jsxs as re,jsx as u}from"react/jsx-runtime";import{forwardRef as le,useRef as U,useState as d,useMemo as ae,useCallback as ce,useEffect as ie}from"react";import{useIsMobile as pe}from"../../../hooks/useGetIsMobile.js";import{SelectDesktop as me}from"./SelectDesktop/index.js";import fe from"classnames";import{Input as ue}from"../../Input/Input.js";import{noop as j}from"../../../utils/helpers.js";import{SELECTED_VISIBLE_MIN_COUNT as de}from"../constants.js";import{SelectMobile as Ie}from"./SelectMobile/index.js";import he from"../../SVGIcons/IconChevronUp.js";import Se from"../../SVGIcons/IconChevronDown.js";import{SELECT_TRANSLATIONS as be}from"../localization.js";import{Button as Ce}from"../../Button/Button.js";import{filterOptions as De}from"./helpers.js";const ge=le((e,t)=>{var l,o;const{labelAddons:s,dataId:n,className:a,size:r="small",label:i,hasError:c,isValid:p,disabled:m,outerHelperText:f,isRequiredField:I,placeHolder:h,selectRightIconProps:S={Component:Se,size:"small"},selectRightIconOpenedProps:b={Component:he,size:"small"},options:v,withSearch:C=!1,setSelectedItem:D,setFieldValue:g,name:x,selectedItem:w,value:E,isMobileFullScreen:V=!0,language:k="en",translations:R,isButtonSelect:M,...N}=e,O=pe(),A=U(null),T=U(null),[L,_]=d(!1),[y,z]=d(""),[B,F]=d(null),[P,q]=d(0),G=()=>_(!0),H=()=>{_(!1),z("")},$=null!=(l=null==B?void 0:B.optionLeftIcon)&&l.Component?{Component:null==(o=null==B?void 0:B.optionLeftIcon)?void 0:o.Component}:null,K=C&&v.length>de,J=e=>{D&&D(e),x&&g&&g(x,e),H()},Q=()=>J(null),W=E||w,X={...be[k],...R},Y=ae(()=>De(v,y),[y,v]),Z=ce(()=>{const e=v.findIndex(e=>e.value===W);F(v[e]),q(e)},[W,v]);return ie(()=>{Z()},[Z]),/* @__PURE__ */re("div",{"data-id":`${n}-content`,className:fe(`select select--${r}`,a,{"select--opened":L}),ref:A,children:[!M&&/* @__PURE__ */u(ue,{onClick:m?j:e=>{const t=null==e?void 0:e.target,l=null==t?void 0:t.getAttribute("class");if(e&&l&&(-1!==l.indexOf("icon-")||-1!==l.indexOf("svg-icon")))return _(!L),void e.preventDefault();L&&!K?H():G()},size:r,dataId:n,hasError:c,className:"select__input",label:i,onChange:e=>{F(null),z(e.target.value)},required:I,leftIconProps:$,rightIconProps:L?b:S,placeholder:h,currentValue:y||(null==B?void 0:B.label.toString())||"",isValid:p,disabled:m,helperText:L?"":f,ref:T,labelAddons:s,autoComplete:"false",readOnly:O&&V||!K,onKeyDown:e=>{if(L)switch(e.key){case"ArrowDown":e.preventDefault(),q(e=>Math.min(e+1,Y.length-1));break;case"ArrowUp":e.preventDefault(),q(e=>Math.max(e-1,0));break;case"Enter":e.preventDefault();const t=Y[P];null!=t&&t.disabled||(J(t.value),H());break;case"Escape":H()}}}),M&&/* @__PURE__ */u(Ce,{size:r,type:"secondary",dataId:n,iconProps:S,buttonText:h||"",onClick:m?j:G,className:"select_button"}),O&&V?/* @__PURE__ */u(Ie,{...N,isOpen:L,filteredData:Y,closeDropdown:H,currentSelection:W,isRequiredField:I,onItemDeselect:Q,onItemSelect:J,translations:X,withSearch:C,searchValue:y,setSearchValue:z}):/* @__PURE__ */u(me,{...N,onItemDeselect:Q,onItemSelect:J,currentSelection:W,isRequiredField:I,filteredData:Y,inputRef:T.current,containerRef:A.current,isOpen:L,closeDropdown:H,setCurrentSelectedLabel:Z,searchValue:y,setSearchValue:z,translations:X,activeIndex:P,setActiveIndex:q})]})});ge.displayName="Select";export{ge as Select};

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

@@ -1,223 +1,2 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-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-V_kH4Snn.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();
-      }
-    };
-  };
-  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
-    });
-  }), filteredData.length === 0 ? /*#__PURE__*/React.createElement(Empty, {
-    size: "small",
-    mainMessage: translations === null || translations === void 0 ? void 0 : translations.emptyListMainMessage
-  }) : null))));
-};
-
-export { SelectDesktop };
+import{jsx as e,Fragment as R,jsxs as K}from"react/jsx-runtime";import _ from"classnames";import{useRef as U,useState as X,useEffect as p,useId as Y}from"react";import{FixedSizeList as Z}from"react-window";import{DROPDOWN_AND_INPUT_GAP as $}from"../../../../consts/index.js";import{OptionItem as J}from"../../../../helperComponents/OptionItem/OptionItem.js";import{useGetElemSizes as Q}from"../../../../hooks/useGetElemSizes.js";import{useGetElemPositions as ee}from"../../../../hooks/useGetElemPositions.js";import"../../../../context/types.js";import{useOnOutsideClick as te}from"../../../../hooks/useOnOutsideClick.js";import"../../../../hooks/useScreenSize.js";import{useGetHasBottomSpace as oe,useGetHasTopSpace as ie}from"../../../../hooks/useGetHasBottomSpace.js";import"react-hook-form";import{useChangePositionsOnScroll as ne}from"../../../../hooks/useChangePositionsOnScroll.js";import{Empty as se}from"../../../Empty/Empty.js";import{Text as re}from"../../../Text/Text.js";import"../../../Checkbox/Checkbox.js";import"react-dom";import"motion/react";import"dayjs";import"../../../Collapse/CollapseGroup/CollapseGroup.js";import"../../SharedComponents/ContentTop.js";import{Loading as le}from"../../SharedComponents/Loading.js";import"../../../Input/Input.js";import{DROPDOWN_WIDTH as ce,ITEM_SIZE as d,DROPDOWN_HEIGHT as D}from"../../constants.js";const ke=t=>{const{currentSelection:o,isLoading:s,dataId:n="",innerHelperText:i,isRequiredField:a,labelLeftIconProps:l,labelRightIconComponent:r,optionRightIconComponent:m,tooltipAddons:c,dropdownWidth:u,isOpen:h,closeDropdown:f,inputRef:I,containerRef:S,onItemSelect:j,onItemDeselect:C,searchValue:g,setSearchValue:x,translations:O,filteredData:k,activeIndex:b,setActiveIndex:w,setCurrentSelectedLabel:v}=t,y=U(null),[E,G]=X(null);p(()=>{y.current&&y.current.scrollToItem(b,"smart")},[b]),p(()=>{E&&h&&E&&h&&E.focus()},[E,h]),p(()=>{w(0)},[g]),te(S,()=>{!g&&a&&v(),f()},h,Y());const{bottom:P,left:T,top:N}=ee(I),{width:L}=Q(S),H=e=>({value:t})=>{x(""),e?a||C():j(t)},{hasBottomSpace:z}=oe({element:E,input:I}),A=ie({element:E,input:I});return ne(I,E,z),/* @__PURE__ */e(R,{children:h&&/* @__PURE__ */e("div",{className:"select__options",style:{left:T,width:L,...z||!A?{top:P}:{bottom:window.innerHeight-N+$}},ref:G,children:s?/* @__PURE__ */e(le,{}):/* @__PURE__ */e(R,{children:/* @__PURE__ */K("div",{"data-id":`${n}-options-content`,className:_("select__options__scroll","scrollbar"),children:[i?/* @__PURE__ */e("div",{className:"content-top",children:/* @__PURE__ */e(re,{size:"xsmall",type:"secondary",className:"content-top__label",children:i})}):null,k.length>0&&/* @__PURE__ */e(Z,{ref:y,height:k.length*d>D?D:k.length*d,itemCount:k.length,itemSize:d,width:u||ce,style:{width:u||"100%",overflowX:"hidden",overflowY:"auto",willChange:"auto"},children:({index:t,style:s})=>{const n=k[t],i=n.value===o,a=b===t;/* @__PURE__ */
+return e(J,{tooltipAddons:c,data:n,onClick:H(i),labelLeftIconProps:l,OptionRightIconComponent:m,LabelRightIconComponent:r,disabled:n.disabled,isSelected:i,dataId:n.dataId,style:s,className:_("option",{"option--active":a})},n.value)}}),0===k.length?/* @__PURE__ */e(se,{size:"small",mainMessage:null==O?void 0:O.emptyListMainMessage}):null]})})})})};export{ke as SelectDesktop};

package/components/Select/Select/SelectMobile/MobileTopContent.js

@@ -1,91 +1,2 @@
-import React from 'react';
-import { IconChevronLeft } from '../../../SVGIcons/IconChevronLeft.js';
-import { Input } from '../../../Input/Input.js';
-import { IconDismissFilled } from '../../../SVGIcons/IconDismissFilled.js';
-import { IconSearchFilled } from '../../../SVGIcons/IconSearchFilled.js';
-import '@babel/runtime/helpers/defineProperty';
-import 'classnames';
-import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import 'react-input-mask';
-import 'react-number-format';
-import '../../../../helperComponents/Label/Label.js';
-import '../../../Text/Text.js';
-import '../../../../utils/helpers.js';
-import 'dayjs';
-import '../../../../helperComponents/ErrorMessage/ErrorMessage.js';
-import '../../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../../consts/index.js';
-import '../../../../type/file-upload.js';
-import '../../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '../../../../Alert-V_kH4Snn.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 '../../../../hooks/useGetIsMobile.js';
-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 'react-syntax-highlighter';
-import '../../../Link/Link.js';
-import '../../../Popover/PopoverDesktop.js';
-import '../../../SVGIcons/IconInfo.js';
-import '@babel/runtime/helpers/typeof';
-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 '../../../SVGIcons/IconCheckmarkCircleFilled.js';
-
-var MobileTopContent = function MobileTopContent(_ref) {
-  var onBack = _ref.onBack,
-    setSearchValue = _ref.setSearchValue,
-    searchValue = _ref.searchValue,
-    withSearch = _ref.withSearch;
-  var onSearch = function onSearch(e) {
-    setSearchValue(e.target.value);
-  };
-  var removeFilter = function removeFilter() {
-    setSearchValue('');
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flexbox mobile_top_content"
-  }, /*#__PURE__*/React.createElement(IconChevronLeft, {
-    onClick: onBack,
-    size: "large"
-  }), withSearch && /*#__PURE__*/React.createElement(Input, {
-    currentValue: searchValue,
-    handleChange: onSearch,
-    className: "ml-8",
-    size: "small",
-    rightIconProps: {
-      Component: searchValue ? IconDismissFilled : IconSearchFilled,
-      size: searchValue ? 'xsmall' : 'small',
-      onClick: removeFilter
-    }
-  }));
-};
-
-export { MobileTopContent };
+import{jsxs as i,jsx as r}from"react/jsx-runtime";import m from"../../../SVGIcons/IconChevronLeft.js";import{Input as s}from"../../../Input/Input.js";import c from"../../../SVGIcons/IconDismissFilled.js";import p from"../../../SVGIcons/IconSearchFilled.js";const I=({onBack:e,setSearchValue:o,searchValue:n,withSearch:a})=>/* @__PURE__ */i("div",{className:"flexbox mobile_top_content",children:[
+/* @__PURE__ */r(m,{onClick:e,size:"large"}),a&&/* @__PURE__ */r(s,{currentValue:n,handleChange:s=>{o(s.target.value)},className:"ml-8",size:"small",rightIconProps:{Component:n?c:p,size:n?"xsmall":"small",onClick:()=>{o("")}}})]});export{I as MobileTopContent};