hrm_ui_lib 3.1.88 → 3.1.90

package/components/Select/Select/Select.js

@@ -117,11 +117,6 @@ export const Select = forwardRef((props, _ref) => {
     useEffect(() => {
         setCurrentSelectedLabel();
     }, [setCurrentSelectedLabel]);
-    useEffect(() => {
-        if (withSearch && inputRef && inputRef.current && isMobile) {
-            inputRef.current.focus();
-        }
-    }, [isMobile, inputRef.current, withSearch]);
     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, 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, onKeyDown: handleKeyDown })), 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, { isOpen: isOpen, filteredData: filteredData, closeDropdown: closeDropdown, currentSelection: currentSelection, isRequiredField: isRequiredField, onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, translations: localizations, withSearch: withSearch, searchValue: searchValue, setSearchValue: setSearchValue }))) : (_jsx(SelectDesktop, Object.assign({}, rest, { onItemDeselect: onItemDeselect, onItemSelect: onItemSelect, currentSelection: currentSelection, isRequiredField: isRequiredField, filteredData: filteredData, inputRef: inputRef.current, containerRef: containerRef.current, isOpen: isOpen, closeDropdown: closeDropdown, setCurrentSelectedLabel: setCurrentSelectedLabel, searchValue: searchValue, setSearchValue: setSearchValue, translations: localizations, activeIndex: activeIndex, setActiveIndex: setActiveIndex })))] }));

package/components/Select/Select/SelectMobile/MobileTopContent.d.ts

@@ -4,6 +4,7 @@ type TProps = {
     setSearchValue: (value: string) => void;
     onBack: () => void;
     withSearch: boolean;
+    isOpen: boolean;
 };
-export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch }: TProps) => ReactElement;
+export declare const MobileTopContent: ({ onBack, setSearchValue, searchValue, withSearch, isOpen }: TProps) => ReactElement;
 export {};

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

@@ -1,16 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import IconChevronLeft from '../../../SVGIcons/IconChevronLeft';
 import { Input } from '../../../Input';
 import IconDismissFilled from '../../../SVGIcons/IconDismissFilled';
 import IconSearchFilled from '../../../SVGIcons/IconSearchFilled';
-export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch }) => {
+export const MobileTopContent = ({ onBack, setSearchValue, searchValue, withSearch, isOpen }) => {
+    const inputRef = useRef(null);
     const onSearch = (e) => {
         setSearchValue(e.target.value);
     };
     const removeFilter = () => {
         setSearchValue('');
     };
-    return (_jsxs("div", { className: "flexbox mobile_top_content", children: [_jsx(IconChevronLeft, { onClick: onBack, size: "large" }), withSearch && (_jsx(Input, { currentValue: searchValue, handleChange: onSearch, className: "ml-8", size: "small", rightIconProps: {
+    useEffect(() => {
+        if (isOpen && inputRef && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [inputRef.current, isOpen]);
+    return (_jsxs("div", { className: "flexbox mobile_top_content", children: [_jsx(IconChevronLeft, { onClick: onBack, size: "large" }), withSearch && (_jsx(Input, { currentValue: searchValue, handleChange: onSearch, className: "ml-8", size: "small", ref: inputRef, rightIconProps: {
                     Component: searchValue ? IconDismissFilled : IconSearchFilled,
                     size: searchValue ? 'xsmall' : 'small',
                     onClick: removeFilter

package/components/Select/Select/SelectMobile/index.js

@@ -25,7 +25,7 @@ export const SelectMobile = (props) => {
     };
     const windowHeight = window.innerHeight;
     const windowWidth = window.innerWidth;
-    return (_jsxs(Modal, { isOpen: isOpen, onClose: closeDropdown, isMobileFullScreen: true, children: [_jsx(MobileTopContent, { searchValue: searchValue, setSearchValue: setSearchValue, onBack: closeModal, withSearch: withSearch }), _jsxs("div", { className: "mobile_options_content", children: [innerHelperText ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "mobile_options_content__label", children: innerHelperText })) : null, isLoading ? (_jsx(Loading, {})) : (_jsxs("div", { "data-id": `${dataId}-options-content`, children: [filteredData.length > 0 && (_jsx(List, { height: windowHeight - 30 - 32 - 24, itemCount: filteredData.length, itemSize: ITEM_SIZE_MOBILE, width: windowWidth, style: {
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: closeDropdown, isMobileFullScreen: true, children: [_jsx(MobileTopContent, { searchValue: searchValue, setSearchValue: setSearchValue, onBack: closeModal, withSearch: withSearch, isOpen: isOpen }), _jsxs("div", { className: "mobile_options_content", children: [innerHelperText ? (_jsx(Text, { size: "xsmall", type: "secondary", className: "mobile_options_content__label", children: innerHelperText })) : null, isLoading ? (_jsx(Loading, {})) : (_jsxs("div", { "data-id": `${dataId}-options-content`, children: [filteredData.length > 0 && (_jsx(List, { height: windowHeight - 30 - 32 - 24, itemCount: filteredData.length, itemSize: ITEM_SIZE_MOBILE, width: windowWidth, style: {
                                     width: '100%',
                                     overflowX: 'hidden',
                                     overflowY: 'auto',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hrm_ui_lib",
-  "version": "3.1.88",
+  "version": "3.1.90",
   "description": "UI library for Dino",
   "main": "./index.cjs",
   "module": "./index.js",