hrm_ui_lib 3.1.62 → 3.1.63

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

@@ -7,6 +7,7 @@ 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';
+import { filterSearchData } from '../../Select/helpers';
 export const MultiBase = (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 || {};
@@ -71,10 +72,7 @@ export const MultiBase = (props) => {
             const newOptions = options.filter((item) => selectedValuesArray.indexOf(item.value) === -1);
             return [...selectedValues, ...newOptions];
         }
-        return options.filter((dataItem) => {
-            return (typeof dataItem.label === 'string' &&
-                dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
-        });
+        return filterSearchData(options, searchValue);
     }, [searchValue, options, selectedValues]);
     const selectAll = useCallback(() => {
         setAllSelected(true);

package/components/Select/MultiSelect/MultiSelectGrouped/MultiSelectGrouped.js

@@ -9,6 +9,7 @@ import { ContentTop } from '../../SharedComponents';
 import { DROPDOWN_MAX_HEIGHT } from '../../constants';
 import IconCaretUpFilled from '../../../SVGIcons/IconCaretUpFilled';
 import IconCaretDownFilled from '../../../SVGIcons/IconCaretDownFilled';
+import { filterSearchData } from '../../Select/helpers';
 export const MultiSelectGrouped = (props) => {
     const { isMobile, options, helperText, translations, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, isSearchAvailable, labelLeftIconProps, scrollableContentStyle, optionRightIconComponent, labelRightIconComponent, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
@@ -23,10 +24,7 @@ export const MultiSelectGrouped = (props) => {
         }
         return options.reduce((acc, group) => {
             const { data, title } = group;
-            const groupData = data.filter((dataItem) => {
-                return (typeof dataItem.label === 'string' &&
-                    dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
-            });
+            const groupData = filterSearchData(data, searchValue);
             if (groupData.length) {
                 return [
                     ...acc,

package/components/Select/MultiSelect/MultiSelectWithTabs/MultiSelectWithTabs.js

@@ -7,6 +7,7 @@ import { useGetElemSizes } from '../../../../hooks';
 import { OptionItem } from '../../../../helperComponents/OptionItem';
 import { ContentTop } from '../../SharedComponents';
 import { DROPDOWN_MAX_HEIGHT } from '../../constants';
+import { filterSearchData } from '../../Select/helpers';
 export const MultiSelectWithTabs = (props) => {
     const { options, scrollableContentStyle, selectedValues, onItemSelect, onItemDeselect, setSelectedValues, labelLeftIconProps, optionRightIconComponent, labelRightIconComponent, helperText, translations, isSearchAvailable, maxSelectCount, menuOptions, dataIdPrefix, closeDropdown } = props;
     const { emptyListMainMessage, emptyListSecondaryMessage } = translations;
@@ -20,10 +21,7 @@ export const MultiSelectWithTabs = (props) => {
         if (!searchValue) {
             return currentTabData;
         }
-        return currentTabData.filter((dataItem) => {
-            return (typeof dataItem.label === 'string' &&
-                dataItem.label.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase()));
-        });
+        return filterSearchData(currentTabData, searchValue);
     }, [searchValue, currentTabData]);
     const clearAll = useCallback(() => {
         setAllSelected(false);

package/components/Select/Select/helpers.d.ts

@@ -1 +1,2 @@
 export declare const filterOptions: (options: TSelectOptions, searchValue: string) => TSelectOptions;
+export declare const filterSearchData: (data: TSelectOptions, searchString: string) => TSelectOptions;

package/components/Select/Select/helpers.js

@@ -7,3 +7,11 @@ export const filterOptions = (options, searchValue) => {
             dataItem.label.toLowerCase().includes(searchValue.toLowerCase()));
     });
 };
+function containsSearchString(source, searchString) {
+    const sourceWords = String(source).toLowerCase();
+    const targetWords = searchString.toLowerCase().split(/\s+/);
+    return targetWords.every((word) => sourceWords.includes(word));
+}
+export const filterSearchData = (data, searchString) => {
+    return data.filter(({ label }) => containsSearchString(label, searchString));
+};

package/package.json

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