@antscorp/antsomi-ui 1.3.5-beta.477 → 1.3.5-beta.478

package/es/components/organism/DataTable/components/Filter/FilterItem.js

@@ -28,12 +28,12 @@ export const FilterItem = props => {
         if (dayjs(value).isValid()) {
             return dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
         }
-        // Check value is an array and operator is MATCHES_ANY
-        if (Array.isArray(value) && operator === MATCHES_ANY) {
-            return value.map(item => item.title).join(', ');
+        // Check value is an array
+        if (Array.isArray(value)) {
+            return value.map(item => item.title || item).join(', ');
         }
         return value;
-    }, [operator, value]);
+    }, [value]);
     const serializeOperator = useMemo(() => {
         var _a;
         const operatorLabel = ((_a = Object.values(OPERATORS_OPTION).find(({ value }) => value === operator)) === null || _a === void 0 ? void 0 : _a.label) || '';

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { isEmpty, pick } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
@@ -92,12 +92,12 @@ export function useDataTableListing(props) {
         ? apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
         : apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny.general;
     // Memos
-    const mapObject = useMemo(() => ({
+    const mapObject = useDeepCompareMemo(() => ({
         objType: object === null || object === void 0 ? void 0 : object.type,
         objId: object === null || object === void 0 ? void 0 : object.objectId,
     }), [object === null || object === void 0 ? void 0 : object.objectId, object === null || object === void 0 ? void 0 : object.type]);
-    const localStorageKey = useMemo(() => `${TABLE_LISTING_PREFIX}${name}`, [name]);
-    const localStorageValues = useMemo(() => parseJSONFromLocalStorage(localStorageKey) || {}, [localStorageKey]);
+    const localStorageKey = useDeepCompareMemo(() => `${TABLE_LISTING_PREFIX}${name}`, [name]);
+    const localStorageValues = useDeepCompareMemo(() => parseJSONFromLocalStorage(localStorageKey) || {}, [localStorageKey]);
     // Queries
     const getColumnMetrics = useGetColumnMetrics({
         args: {
@@ -248,7 +248,7 @@ export function useDataTableListing(props) {
         name: filterName,
         removable: true,
     }))) || []), [savedFiltersData]);
-    const tableColumns = useMemo(() => {
+    const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
         // Check if has column toggle then add toggle switch column
@@ -296,7 +296,7 @@ export function useDataTableListing(props) {
         const { itemMapKeys, icon, link } = searchProps || {};
         return ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody.map(searchItem => (Object.assign(Object.assign({}, Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: searchItem[value] })), {})), { icon: typeof icon === 'function' ? icon(searchItem) : icon, link: typeof link === 'function' ? link(searchItem) : link })))) || []);
     }, [searchListingData, searchProps]);
-    const matchesAnyList = useMemo(() => {
+    const matchesAnyList = useDeepCompareMemo(() => {
         /**
          * If `selectedFilterItem` has a column, the function will attempt to find a matching property in the `matchesAny`
          * object by converting the column name to lowercase. If such a property does not exist, it will default to using

package/es/components/organism/DataTable/utils/filter.js

@@ -160,7 +160,7 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         case OPERATORS_CODE.MATCHES_ANY:
         case OPERATORS_CODE.NOT_MATCHES: {
             const { list, isLoading } = matchesAny || {};
-            return (React.createElement(MatchesAnySelect, { selectedItems: value, popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue }));
+            return (React.createElement(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue }));
         }
         case OPERATORS_CODE.AFTER:
         case OPERATORS_CODE.AFTER_DATE:

package/es/utils/common.js

@@ -449,7 +449,7 @@ export const removeAccent = (str) => {
     return str;
 };
 /** Remove all accents and convert string to lower case, remove leading and trailing white space */
-export const simplifyString = (str) => removeAccent(str.toLowerCase().trim()) || '';
+export const simplifyString = (str) => removeAccent(`${str || ''}`.toLowerCase().trim()) || '';
 /**
  * @param str target string
  * @param queryStr search query

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.477",
+  "version": "1.3.5-beta.478",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",