hrm_ui_lib 3.1.10 → 3.1.12

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

@@ -8,8 +8,9 @@ import { DROPDOWN_HEIGHT, DROPDOWN_WIDTH, ITEM_SIZE, ITEM_SIZE_MOBILE } from '..
 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 { isMobile, closeDropdown, scrollableContentStyle, options, helperText, translations, onItemSelect, onItemDeselect, isSearchAvailable, setSelectedValues, selectedValues, labelLeftIconProps, labelRightIconComponent, optionRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, dropdownWidth, applySelectedItems } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations || {};
+    const [navigationMode, setNavigationMode] = useState(false);
     const [searchValue, setSearchValue] = useState('');
     const [isAllSelected, setAllSelected] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
@@ -19,29 +20,40 @@ export const MultiBase = (props) => {
         switch (e.key) {
             case 'ArrowDown':
                 e.preventDefault();
-                setActiveIndex((prev) => Math.min(prev + 1, options.length - 1));
+                setActiveIndex((prev) => Math.min(prev + 1, filteredData.length - 1));
+                setNavigationMode(true);
                 break;
             case 'ArrowUp':
                 e.preventDefault();
                 setActiveIndex((prev) => Math.max(prev - 1, 0));
+                setNavigationMode(true);
+                break;
+            case ' ':
+                if (navigationMode && activeIndex !== null) {
+                    e.preventDefault();
+                    const item = filteredData[activeIndex];
+                    if (!item) {
+                        return;
+                    }
+                    const isSelected = checkIsSelected(item.value);
+                    if (isSelected) {
+                        onDeselect(item);
+                    }
+                    else {
+                        onItemSelect(item);
+                    }
+                }
                 break;
             case 'Enter':
                 e.preventDefault();
-                const item = filteredData[activeIndex];
-                if (!item) {
-                    return;
-                }
-                const isSelected = checkIsSelected(item.value);
-                if (isSelected) {
-                    onDeselect(item);
-                }
-                else {
-                    onItemSelect(item);
-                }
+                applySelectedItems();
                 break;
             case 'Escape':
                 closeDropdown();
                 break;
+            default:
+                // any typing key exits navigation mode
+                setNavigationMode(false);
         }
     };
     useEffect(() => {

package/components/Select/MultiSelect/MultiSelect.js

@@ -63,6 +63,6 @@ export const MultiSelect = forwardRef((props, _ref) => {
                 // @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] }) }));
+                    options: options, isOpen: isOpen, translations: localizations, setIsOpen: setIsOpen, dropdownRef: dropdownRef, openDropdown: openDropdown, selectedValues: selectedValues, setSelectedValues: setSelectedValues, containerRef: containerRef, dropdownWidth: dropdownWidth, isMobileFullScreen: isMobileFullScreen, applySelectedItems: applySelectedItems }, rest)), options.length && !(isMobile && isMobileFullScreen) ? (_jsx(Footer, { checkboxInfo: checkboxInfo, hasChange: hasChange, buttonProps: footerButtonProps, onCancel: cancelSelectedItems, onApply: applySelectedItems, language: language })) : null] }) }));
 });
 MultiSelect.displayName = 'MultiSelect';

package/components/Select/Select/Select.js

@@ -121,6 +121,6 @@ export const Select = forwardRef((props, _ref) => {
     }, [setCurrentSelectedLabel]);
     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, 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 }))) : (_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 })))] }));
+        }), 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, 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 })))] }));
 });
 Select.displayName = 'Select';

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

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
 import { OptionItem } from '../../../../helperComponents/OptionItem';
 import { Empty } from '../../../Empty';
 import { Modal } from '../../../Modal';
@@ -9,8 +8,7 @@ import { Loading } from '../../SharedComponents';
 import { MobileTopContent } from './MobileTopContent';
 import { FixedSizeList as List } from 'react-window';
 export const SelectMobile = (props) => {
-    const { translations, currentSelection, isOpen, closeDropdown, isLoading, dataId, innerHelperText, filteredData, isRequiredField, onItemSelect, onItemDeselect, tooltipAddons, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, withSearch } = props;
-    const [searchValue, setSearchValue] = useState('');
+    const { translations, currentSelection, isOpen, closeDropdown, isLoading, dataId, innerHelperText, filteredData, isRequiredField, onItemSelect, onItemDeselect, tooltipAddons, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, withSearch, searchValue, setSearchValue } = props;
     const clickHandler = (isSelected) => ({ value }) => {
         setSearchValue('');
         if (!isSelected) {

package/components/Select/types.d.ts

@@ -66,6 +66,7 @@ interface TMultiSelectCompProps extends IFormCompProps, TSelectBaseProps {
 }
 export interface TMultiSingleTabPropTypes extends TMultiSelectCompProps {
     options: TSelectOptions;
+    applySelectedItems: () => void;
 }
 export interface TMultiSelectGroupedProps extends TMultiSelectCompProps {
     options: TSelectGroupOptions;
@@ -149,13 +150,13 @@ export interface ISingleSelectResponsiveProps {
     isRequiredField?: boolean;
     translations?: TSelectTranslations;
     language?: string;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
 }
 export interface ISingleSelectMobileProps extends ISingleSelectResponsiveProps {
     withSearch: boolean;
 }
 export interface ISingleSelectDesktopProps extends ISingleSelectResponsiveProps {
-    searchValue: string;
-    setSearchValue: (value: string) => void;
     withSearch?: boolean;
     dropdownWidth?: number;
     inputRef: HTMLInputElement | null;

package/package.json

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