hrm_ui_lib 3.1.8 → 3.1.10

package/components/FormField/FormField.js

@@ -13,7 +13,8 @@ export const FormField = (props) => {
     }
     const registerOptions = register(name);
     return (_jsx("div", { className: classnames('form-container__field', className, name), children: _jsx(Controller, Object.assign({ control: control, name: name }, (defaultValue ? { defaultValue } : {}), { render: ({ field, fieldState }) => {
-                return (_jsxs(_Fragment, { children: [As(Object.assign(Object.assign(Object.assign({ hasError: !!fieldState.error, isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid, dataId }, registerOptions), { setFieldValue: (data, name, options) => setValue(data, name, Object.assign({ shouldValidate: true, shouldDirty: true, shouldTouch: true }, options)) }), field)), !hideErrorMessage ? (_jsx(ReactHookFormErrorMessage, { name: name, errors: errors, render: ({ message }) => {
+                var _a;
+                return (_jsxs(_Fragment, { children: [As(Object.assign(Object.assign(Object.assign({ hasError: !!fieldState.error, isValid: fieldState.isTouched && fieldState.isDirty && !fieldState.invalid, dataId }, registerOptions), { setFieldValue: (data, name, options) => setValue(data, name, Object.assign({ shouldValidate: true, shouldDirty: true, shouldTouch: true }, options)) }), field)), !hideErrorMessage ? (_jsx(ReactHookFormErrorMessage, { name: ((_a = errors === null || errors === void 0 ? void 0 : errors[name]) === null || _a === void 0 ? void 0 : _a.root) ? `${name}.root` : name, errors: errors, render: ({ message }) => {
                                 return (_jsx(ErrorMessage, { dataId: dataId, message: message || '', className: "full-width", icon: errorMessageIcon }));
                             } })) : null] }));
             } })) }));

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

@@ -6,12 +6,14 @@ 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 { noop } from '../../../../utils/helpers';
 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 [activeIndex, setActiveIndex] = useState(0);
+    const dropdownRef = useRef(null);
     const listRef = useRef(null);
     const handleKeyDown = (e) => {
         switch (e.key) {
@@ -76,6 +78,11 @@ export const MultiBase = (props) => {
         setAllSelected(false);
         onItemDeselect(item);
     };
+    useEffect(() => {
+        if (dropdownRef && dropdownRef.current && !isSearchAvailable) {
+            dropdownRef.current.focus();
+        }
+    }, [dropdownRef.current]);
     const checkIsSelected = (itemValue) => {
         return selectedValues.find((item) => item.value === itemValue) !== undefined;
     };
@@ -89,7 +96,7 @@ export const MultiBase = (props) => {
     }, [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, handleKeyDown: handleKeyDown }), _jsx("div", { className: classNames('select__options__scroll scrollbar', {
                     select__options__scroll_mobile: isMobile
-                }), style: scrollableContentStyle, children: filteredData.length > 0 && (_jsx(List, { ref: listRef, height: isMobile
+                }), style: scrollableContentStyle, ref: dropdownRef, tabIndex: 0, onKeyDown: isSearchAvailable ? noop : handleKeyDown, children: filteredData.length > 0 && (_jsx(List, { ref: listRef, height: isMobile
                         ? window.innerHeight - 80 - 73 - 24
                         : filteredData.length * ITEM_SIZE > DROPDOWN_HEIGHT
                             ? DROPDOWN_HEIGHT

package/package.json

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