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

package/es/components/icons/DataIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const DataIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/DataIcon.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { forwardRef } from 'react';
+export const DataIcon = forwardRef((props, ref) => {
+    const restProps = __rest(props, []);
+    return (React.createElement("svg", Object.assign({ ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.002 6.5C19.002 7.88071 15.6499 9 11.515 9C7.38 9 4.02795 7.88071 4.02795 6.5C4.02795 5.11929 7.38 4 11.515 4C15.6499 4 19.002 5.11929 19.002 6.5ZM18.974 12.131C18.974 13.42 15.622 14.465 11.487 14.465C7.352 14.465 4 13.419 4 12.131V8.46204C4 9.75104 7.352 10.795 11.487 10.795C15.622 10.795 18.974 9.74904 18.974 8.46204V12.131ZM18.974 17.8423C18.974 19.1313 15.622 20.1763 11.487 20.1763C7.352 20.1763 4 19.1303 4 17.8423V14.1733C4 15.4623 7.352 16.5063 11.487 16.5063C15.622 16.5063 18.974 15.4603 18.974 14.1733V17.8423Z", fill: "currentColor" })));
+});

package/es/components/icons/index.d.ts

@@ -54,3 +54,4 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
+export { DataIcon } from './DataIcon';

package/es/components/icons/index.js

@@ -54,3 +54,4 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
+export { DataIcon } from './DataIcon';

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -30,6 +30,7 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Utils
 import { flatTree, recursiveSearchItems } from '@antscorp/antsomi-ui/es/utils';
+import { DataIcon } from '../../icons';
 const initialState = {
     isOpenPopover: false,
 };
@@ -205,7 +206,7 @@ export const MatchesAny = props => {
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
             React.createElement(Spin, { spinning: loading },
-                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: "icon-ants-database", description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+                React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                             transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                             transition: 'transform 0.3s ease',
                         }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) })))))));

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

@@ -33,7 +33,11 @@ export const AddFilterButton = memo(() => {
                 });
             } })) : (React.createElement(SavedFilterAndMetrics, { onSelectFilterMetric: onSelectFilterMetric, onSelectSavedFilter: () => {
                 setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
-            } }))), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomLeft", destroyTooltipOnHide: true, onOpenChange: open => {
+            } }))), trigger: ['click'], overlayInnerStyle: {
+            width: 300,
+            padding: 0,
+            overflow: selectedFilterMetric ? 'visible' : 'hidden',
+        }, arrow: false, placement: "bottomLeft", destroyTooltipOnHide: true, onOpenChange: open => {
             setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: open })));
             if (!open) {
                 /* Reset filter metric */

package/es/components/organism/DataTable/components/Filter/FilterCondition/index.js

@@ -5,8 +5,9 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Select, Form, ApplyPopupContent } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
 import { OPERATORS, OPERATORS_OPTION } from '@antscorp/antsomi-ui/es/constants/condition';
-import { renderValueField } from '../../../utils';
 import { EXCEPTION_OFF_FILTER_CLASS } from '../../../constants/filter';
+// Utils
+import { renderValueField } from '../../../utils';
 const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
 export const FilterCondition = props => {
     // Props
@@ -88,7 +89,7 @@ export const FilterCondition = props => {
                 React.createElement(Form.Item, { name: "operator", noStyle: true },
                     React.createElement(Select, { value: operator, options: operatorList, onChange: () => form.setFieldsValue({
                             value: '',
-                        }), dropdownRender: menu => (React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS, onClick: e => e.stopPropagation() }, menu)) })),
+                        }), getPopupContainer: triggerNode => triggerNode.parentElement, dropdownRender: menu => (React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS, onClick: e => e.stopPropagation() }, menu)) })),
                 React.createElement(Form.Item, { name: "value", noStyle: true }),
                 renderValueField({
                     filterMetric,

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/components/Table/ResizableCell.js

@@ -33,19 +33,22 @@ export const ResizableCell = props => {
     if (isRowSelectionCol || !width || disableResize) {
         return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: onClick }), CellHeaderContent));
     }
-    const toggleCellClass = (className = 'resizable-cell') => {
+    const handleStyleResizable = (type) => {
         var _a, _b;
         (_b = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-row')) === null || _b === void 0 ? void 0 : _b.forEach(rowEl => {
             var _a;
-            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell`)) === null || _a === void 0 ? void 0 : _a[(index !== null && index !== void 0 ? index : 0) + 1];
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
             if (cell) {
-                cell.classList.toggle(className);
+                if (type === 'add') {
+                    return cell.setAttribute('aria-resizable', 'true');
+                }
+                cell.removeAttribute('aria-resizable');
             }
         });
     };
     return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
                 e.stopPropagation();
-            } },
+            }, onMouseEnter: () => handleStyleResizable('add'), onMouseLeave: () => handleStyleResizable('remove') },
             React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (_e, data) => {
             var _a;
             const { size } = data; // Destructure size from the resize data

package/es/components/organism/DataTable/components/Table/index.js

@@ -16,6 +16,8 @@ import { useShallow } from 'zustand/react/shallow';
 // Components
 import { ResizableCell } from './ResizableCell';
 import { Spin, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import { EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
+import { DataIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Hooks
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Styled
@@ -25,6 +27,10 @@ import { useDataTableContext } from '../../contexts/DataTableContext';
 // Constants
 import { DEFAULT_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_ROW_SELECTION_WIDTH, } from '../../constants';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { t } = i18nInstance;
 export const Table = memo(() => {
     var _a;
     // Store
@@ -59,7 +65,7 @@ export const Table = memo(() => {
             });
         }
     }, [tableProps.columns, columnWidths]);
-    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } } },
+    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } }, renderEmpty: () => (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.noData).toString() })) },
         React.createElement(StyledTable, Object.assign({}, restOfTable, { ref: ref => {
                 tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
             }, scroll: Object.assign(Object.assign({}, scroll), { y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || '100%', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {

package/es/components/organism/DataTable/components/Table/styled.js

@@ -65,13 +65,9 @@ export const StyledTable = styled(Table) `
       }
     }
 
-    .antsomi-table-tbody-virtual {
-      .antsomi-table-row {
-        .antsomi-table-cell {
-          &.resizable-cell {
-            border-inline-end: 2px solid ${blue1} !important;
-          }
-        }
+    .antsomi-table-row {
+      .antsomi-table-cell[aria-resizable='true'] {
+        border-inline-end: 2px solid ${blue1} !important;
       }
     }
   }

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js

@@ -50,7 +50,7 @@ const StyledContent = styled.div `
   }
 `;
 export const SearchPopover = props => {
-    const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender, searchItemProps } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "loading", "isAddFilterFromSearchItem", "onAddFilter", "onSearch", "onClick", "onClickSearchItem", "itemSearchRender", "searchItemProps"]);
+    const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, searchItemProps, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "loading", "isAddFilterFromSearchItem", "searchItemProps", "onAddFilter", "onSearch", "onClick", "onClickSearchItem", "itemSearchRender"]);
     // State
     const [state, setState] = useState({
         searchValue: '',

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: {
@@ -145,7 +145,6 @@ export function useDataTableListing(props) {
             retry: false,
         },
     });
-    console.log('getMatchesAnyList', getMatchesAnyList);
     // Variables
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
     const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
@@ -249,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
@@ -297,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,14 +160,14 @@ 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:
         case OPERATORS_CODE.BEFORE:
         case OPERATORS_CODE.ON:
         case OPERATORS_CODE.BEFORE_DATE: {
-            return (React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(value).isValid() ? dayjs(value) : undefined, onChange: onChangeValue }));
+            return (React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, getPopupContainer: trigger => trigger.parentElement, placement: "bottomLeft", popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: value && dayjs(value).isValid() ? dayjs(value) : undefined, onChange: onChangeValue }));
         }
         default:
             return null;

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.476",
+  "version": "1.3.5-beta.478",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",

package/es/components/organism/DataTable/components/Filter/FilterCondition/utils.js

@@ -1 +0,0 @@
-"use strict";