@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,14 +1,4 @@
-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;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
 import React, { useEffect, useMemo, useState } from 'react';
 import { Resizable } from 'react-resizable';
@@ -16,28 +6,30 @@ import { MIN_COLUMN_WIDTH } from '../../constants';
 // Components
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ResizableCell = props => {
-    var _a;
-    const { width: widthProp, handleProps, disableResize, children, style, fixed, index, tableRef, onResizeStop, onClick = () => { } } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "children", "style", "fixed", "index", "tableRef", "onResizeStop", "onClick"]);
+    const { width: widthProp, handleProps, disableResize, children, style, fixed, index, tableRef, onResizeStop, onClick = () => { }, ...restProps } = props;
     // Ref
     const isResizing = React.useRef(false);
     // State
     const [width, setWidth] = useState(widthProp);
     // Memos
-    const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
+    const columnStyle = useMemo(() => ({
+        ...style,
+        zIndex: fixed ? 100 - (index || 0) : undefined,
+    }), [style, fixed, index]);
     // Effect
     useEffect(() => {
         setWidth(widthProp);
     }, [widthProp]);
-    const CellHeaderContent = (React.createElement(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' } }, children));
-    const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
+    const CellHeaderContent = (_jsx(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' }, children: children }));
+    const isRowSelectionCol = props?.className?.includes('antsomi-table-selection-column');
     if (isRowSelectionCol || !width || disableResize) {
-        return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: onClick }), CellHeaderContent));
+        return (_jsx("th", { ...restProps, style: columnStyle, onClick: onClick, children: CellHeaderContent }));
     }
     const handleStyleResizable = (type) => {
-        var _a;
-        (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-body > table > tbody.antsomi-table-tbody > .antsomi-table-row').forEach(rowEl => {
-            var _a;
-            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column):not(.antsomi-table-row-expand-icon-cell)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
+        tableRef?.current
+            ?.querySelectorAll('.antsomi-table-body > table > tbody.antsomi-table-tbody > .antsomi-table-row')
+            .forEach(rowEl => {
+            const cell = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column):not(.antsomi-table-row-expand-icon-cell)`)?.[index ?? 0];
             if (cell) {
                 if (type === 'add') {
                     return cell.setAttribute('aria-resizable', 'true');
@@ -46,18 +38,16 @@ export const ResizableCell = props => {
             }
         });
     };
-    return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+    return (_jsx(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: _jsx("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;
+            }, onMouseEnter: () => handleStyleResizable('add'), onMouseLeave: () => handleStyleResizable('remove'), children: _jsx("span", { className: "resizable-handle", ...handleProps }) }), onResize: (_e, data) => {
             const { size } = data; // Destructure size from the resize data
             // Update the state with the new width
             setWidth(size.width);
             // Select all column elements within the table body colgroup
-            const resizeColEls = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col):not(.antsomi-table-expand-icon-col)`);
+            const resizeColEls = tableRef?.current?.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col):not(.antsomi-table-expand-icon-col)`);
             // Select the specific column element to resize
-            const resizeColEl = resizeColEls === null || resizeColEls === void 0 ? void 0 : resizeColEls[index !== null && index !== void 0 ? index : 0];
+            const resizeColEl = resizeColEls?.[index ?? 0];
             // If the column element exists, update its width style
             if (resizeColEl) {
                 resizeColEl.style.width = `${size.width}px`;
@@ -71,10 +61,9 @@ export const ResizableCell = props => {
             if (onResizeStop) {
                 onResizeStop(...args);
             }
-        }, draggableOpts: { enableUserSelectHack: true } },
-        React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: e => {
+        }, draggableOpts: { enableUserSelectHack: true }, children: _jsx("th", { ...restProps, style: columnStyle, onClick: e => {
                 if (!isResizing.current) {
                     onClick(e);
                 }
-            } }), CellHeaderContent)));
+            }, children: CellHeaderContent }) }));
 };

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

@@ -1,16 +1,6 @@
-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;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useCallback, useRef, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { ConfigProvider } from 'antd';
 import { useShallow } from 'zustand/react/shallow';
 // Components
@@ -32,11 +22,10 @@ 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
     const tableProps = useDataTableContext(useShallow(store => store.table));
     const setTable = useDataTableContext(useShallow(store => store.setTable));
-    const _b = tableProps || {}, { rowSelection } = _b, restOfTable = __rest(_b, ["rowSelection"]);
+    const { rowSelection, ...restOfTable } = tableProps || {};
     // State
     const [state, setState] = useState({
         columns: [],
@@ -49,51 +38,63 @@ export const Table = memo(() => {
     const { scroll, columnWidths } = tableProps;
     // Handles
     const onResizeStop = useCallback((index) => (e, { size }) => {
-        var _a;
-        (_a = tableProps.onColumnResize) === null || _a === void 0 ? void 0 : _a.call(tableProps, { index, width: size.width });
+        tableProps.onColumnResize?.({ index, width: size.width });
     }, [tableProps]);
     // Effects
     useDeepCompareEffect(() => {
         if (tableProps.columns) {
-            setState(prev => {
-                var _a;
-                return (Object.assign(Object.assign({}, prev), { columns: (_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map((col, index) => {
-                        var _a;
-                        return (Object.assign(Object.assign({}, col), { width: (columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[index]) ||
-                                ((_a = col.width) !== null && _a !== void 0 ? _a : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH)) }));
-                    }) }));
-            });
+            setState(prev => ({
+                ...prev,
+                columns: tableProps.columns?.map((col, index) => ({
+                    ...col,
+                    width: columnWidths?.[index] ||
+                        (col.width ?? (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH)),
+                })),
+            }));
         }
     }, [tableProps.columns, columnWidths]);
-    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, size: 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: {
-                header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
-            } }, (Array.isArray(tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource) &&
-            (tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource.length) &&
-            !!rowSelection && {
-            rowSelection: Object.assign(Object.assign({ fixed: true, columnWidth: DEFAULT_ROW_SELECTION_WIDTH }, rowSelection), { onChange(selectedRowKeys, selectedRows, info) {
-                    var _a;
-                    setTable({
-                        rowSelection: Object.assign(Object.assign({}, rowSelection), { selectedRowKeys }),
-                    });
-                    (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, selectedRowKeys, selectedRows, info);
-                } }),
-        }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { sortIcon(props) {
+    return (_jsx(ConfigProvider, { theme: { token: { motion: false } }, renderEmpty: () => (_jsx(EmptyData, { icon: _jsx(DataIcon, { color: globalToken?.bw5, size: 48 }), description: t(translations.noData).toString() })), children: _jsx(StyledTable, { ...restOfTable, ref: ref => {
+                tableRef.current = ref?.nativeElement;
+            }, scroll: { ...scroll, y: scroll?.y || '100%', x: scroll?.x || '100%' }, components: {
+                header: {
+                    cell: ResizableCell,
+                    ...tableProps?.components?.header,
+                },
+            }, ...(Array.isArray(tableProps?.dataSource) &&
+                tableProps?.dataSource.length &&
+                !!rowSelection && {
+                rowSelection: {
+                    fixed: true,
+                    columnWidth: DEFAULT_ROW_SELECTION_WIDTH,
+                    ...rowSelection,
+                    onChange(selectedRowKeys, selectedRows, info) {
+                        setTable({
+                            rowSelection: {
+                                ...rowSelection,
+                                selectedRowKeys,
+                            },
+                        });
+                        rowSelection?.onChange?.(selectedRowKeys, selectedRows, info);
+                    },
+                },
+            }), columns: columns?.map((col, index) => ({
+                ...col,
+                sortIcon(props) {
                     const { sortOrder } = props;
                     if (!sortOrder)
                         return null;
-                    return (React.createElement(Icon, { type: `icon-ants-${sortOrder === 'ascend' ? 'arrow-up-square' : 'arrow-down-square'}`, size: 16, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }));
-                }, onHeaderCell: (column) => ({
+                    return (_jsx(Icon, { type: `icon-ants-${sortOrder === 'ascend' ? 'arrow-up-square' : 'arrow-down-square'}`, size: 16, color: globalToken?.bw8 }));
+                },
+                onHeaderCell: (column) => ({
                     tableRef,
-                    disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
+                    disableResize: index === (columns?.length || 1) - 1,
                     fixed: column.fixed,
                     width: column.width,
                     index,
                     onResizeStop: onResizeStop(index),
-                }) }))), bordered: true, showSorterTooltip: false, sortDirections: ['descend', 'ascend'], pagination: false, loading: {
-                indicator: React.createElement(Spin, null),
+                }),
+            })), bordered: true, showSorterTooltip: false, sortDirections: ['descend', 'ascend'], pagination: false, loading: {
+                indicator: _jsx(Spin, {}),
                 spinning: !!tableProps.loading,
-            }, tableLayout: "fixed" }))));
+            }, tableLayout: "fixed" }) }));
 });

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

@@ -1,16 +1,6 @@
-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;
-};
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 // Components
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
@@ -18,12 +8,12 @@ const initialState = {
     isOpenPopover: false,
 };
 export const GroupByPopover = props => {
-    const { options, selectedKey, onChange = () => { } } = props, restProps = __rest(props, ["options", "selectedKey", "onChange"]);
+    const { options, selectedKey, onChange = () => { }, ...restProps } = props;
     const [state, setState] = useState(initialState);
     const { isOpenPopover } = state;
-    const popoverContent = (React.createElement(Menu, { selectedKeys: [selectedKey || ''], items: options, onSelect: info => {
-            setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+    const popoverContent = (_jsx(Menu, { selectedKeys: [selectedKey || ''], items: options, onSelect: info => {
+            setState(prev => ({ ...prev, isOpenPopover: false }));
             onChange(info.key);
         } }));
-    return (React.createElement(Popover, Object.assign({}, restProps, { open: isOpenPopover, content: popoverContent, trigger: ['click'], arrow: false, overlayInnerStyle: { padding: 0, width: 200 }, placement: "bottomRight", onOpenChange: open => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: open }))) })));
+    return (_jsx(Popover, { ...restProps, open: isOpenPopover, content: popoverContent, trigger: ['click'], arrow: false, overlayInnerStyle: { padding: 0, width: 200 }, placement: "bottomRight", onOpenChange: open => setState(prev => ({ ...prev, isOpenPopover: open })) }));
 };

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Dropdown } from '@antscorp/antsomi-ui/es/components/molecules';
@@ -9,22 +10,18 @@ import { useDataTableContext } from '../../contexts/DataTableContext';
 // Utils
 import { renderActionButtons } from '@antscorp/antsomi-ui/es/utils';
 export const RowSelectedControl = memo(() => {
-    const selectedRowKeys = useDataTableContext(store => { var _a; return (_a = store.table.rowSelection) === null || _a === void 0 ? void 0 : _a.selectedRowKeys; });
+    const selectedRowKeys = useDataTableContext(store => store.table.rowSelection?.selectedRowKeys);
     const selectedRowButtons = useDataTableContext(store => store.toolbar.selectedRowButtons);
     const renderComponent = (actionButton) => {
         const { label, key, customRender, dropdownProps } = actionButton;
-        const buttonComponent = (React.createElement(Flex, { key: key, align: "center", className: "action-button" }, label));
+        const buttonComponent = (_jsx(Flex, { align: "center", className: "action-button", children: label }, key));
         if (customRender) {
             return buttonComponent;
         }
-        return (dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.menu) ? (React.createElement(Dropdown, Object.assign({ key: key, trigger: ['click'], arrow: false, placement: "bottomLeft", overlayStyle: { minWidth: 200 } }, dropdownProps), buttonComponent)) : (buttonComponent);
+        return dropdownProps?.menu ? (_jsx(Dropdown, { trigger: ['click'], arrow: false, placement: "bottomLeft", overlayStyle: { minWidth: 200 }, ...dropdownProps, children: buttonComponent }, key)) : (buttonComponent);
     };
-    return (React.createElement(RowSelectedControlWrapper, { className: "selected-control", align: "center" },
-        React.createElement(Flex, { className: "selected-count-label", align: "center" },
-            (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length) || 0,
-            " selected"),
-        React.createElement(Flex, { gap: 5, className: "action-buttons" }, renderActionButtons({
-            renderComponent,
-            actionButtons: selectedRowButtons,
-        }))));
+    return (_jsxs(RowSelectedControlWrapper, { className: "selected-control", align: "center", children: [_jsxs(Flex, { className: "selected-count-label", align: "center", children: [selectedRowKeys?.length || 0, " selected"] }), _jsx(Flex, { gap: 5, className: "action-buttons", children: renderActionButtons({
+                    renderComponent,
+                    actionButtons: selectedRowButtons,
+                }) })] }));
 });

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

@@ -1,15 +1,5 @@
-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;
-};
-import React, { useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import styled from 'styled-components';
 import clsx from 'clsx';
 // Components
@@ -44,12 +34,12 @@ const StyledContent = styled.div `
     font-weight: 500;
 
     &.text-link {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      color: ${globalToken?.colorPrimary};
     }
   }
 `;
 export const SearchPopover = props => {
-    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"]);
+    const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, searchItemProps, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender, ...restProps } = props;
     // Hooks
     const { navigate } = useCustomRouter();
     // State
@@ -74,70 +64,53 @@ export const SearchPopover = props => {
         }
         return draftSearchList.map((searchItem, index) => {
             const { id, label, link, icon } = searchItem;
-            const Label = (React.createElement(React.Fragment, null,
-                icon && React.createElement(IconWrapper, null, icon),
-                React.createElement(Typography.Text, Object.assign({ ellipsis: { tooltip: label } }, searchItemProps, { className: clsx(`${link ? 'text-link' : ''}`, searchItemProps === null || searchItemProps === void 0 ? void 0 : searchItemProps.className) }), label)));
-            return (React.createElement(StyledSearchItem, { key: id, align: "center", gap: 6, onClick: () => {
+            const Label = (_jsxs(_Fragment, { children: [icon && _jsx(IconWrapper, { children: icon }), _jsx(Typography.Text, { ellipsis: { tooltip: label }, ...searchItemProps, className: clsx(`${link ? 'text-link' : ''}`, searchItemProps?.className), children: label })] }));
+            return (_jsx(StyledSearchItem, { align: "center", gap: 6, onClick: () => {
                     onClick(searchItem, index);
                     if (link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem) {
                         navigate(link);
                     }
-                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
-                } }, itemSearchRender ? itemSearchRender(searchItem, index, Label) : Label));
+                    setState(prev => ({ ...prev, isOpenPopover: false }));
+                }, children: itemSearchRender ? itemSearchRender(searchItem, index, Label) : Label }, id));
         });
     }, [isClientSearch, itemSearchRender, searchList, searchValue]);
     // Handlers
     const handleAddFilter = (value) => {
         onAddFilter(value || searchValue);
-        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false, searchValue: '' })));
+        setState(prev => ({ ...prev, isOpenPopover: false, searchValue: '' }));
     };
     // Renderers
     const renderFilterSection = () => {
         // If search value is empty then return null not show filter section
         if (!searchValue)
             return null;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(FilterSection, { align: "center", gap: 6, onClick: () => handleAddFilter() },
-                React.createElement(FilterButton, null,
-                    React.createElement(Icon, { type: "icon-ants-filter-slim", size: 18 })),
-                React.createElement(Text, { ellipsis: {
-                        tooltip: `${t(translations.dataTableFilter.filterBy, { objectName })} ${searchValue}`,
-                    } },
-                    t(translations.dataTableFilter.filterBy, { objectName }).toString(),
-                    " \u00A0",
-                    React.createElement(Text, { strong: true }, searchValue))),
-            React.createElement(Divider, { style: { margin: '8px 0px' } })));
+        return (_jsxs(_Fragment, { children: [_jsxs(FilterSection, { align: "center", gap: 6, onClick: () => handleAddFilter(), children: [_jsx(FilterButton, { children: _jsx(Icon, { type: "icon-ants-filter-slim", size: 18 }) }), _jsxs(Text, { ellipsis: {
+                                tooltip: `${t(translations.dataTableFilter.filterBy, { objectName })} ${searchValue}`,
+                            }, children: [t(translations.dataTableFilter.filterBy, { objectName }).toString(), " \u00A0", _jsx(Text, { strong: true, children: searchValue })] })] }), _jsx(Divider, { style: { margin: '8px 0px' } })] }));
     };
     const renderSearchList = () => {
         if (!filteredSearchList.length)
-            return React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() });
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Text, { className: "or-go-to" }, t(translations.dataTableFilter.orGoTo).toString()),
-            React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 200 }, filteredSearchList)));
+            return _jsx(EmptyData, { showIcon: false, title: t(translations.noData).toString() });
+        return (_jsxs(_Fragment, { children: [_jsx(Text, { className: "or-go-to", children: t(translations.dataTableFilter.orGoTo).toString() }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: 200, children: filteredSearchList })] }));
     };
-    const content = (React.createElement(StyledContent, null,
-        React.createElement(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
-                setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
-                onSearch(searchValue);
-            }, onPressEnter: e => {
-                handleAddFilter(e.target.value);
-            } }),
-        React.createElement(Divider, { style: { margin: '8px 0px' } }),
-        renderFilterSection(),
-        React.createElement(Spin, { spinning: loading }, renderSearchList())));
-    return (React.createElement(Popover, Object.assign({ open: isOpenPopover, content: content, overlayInnerStyle: { width: 300, padding: 0 }, trigger: ['click'], arrow: false, placement: "bottomRight" }, restProps, { onOpenChange: open => {
+    const content = (_jsxs(StyledContent, { children: [_jsx(Input.CustomSearch, { ref: searchInputRef, autoFocus: true, value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
+                    setState(prev => ({ ...prev, searchValue }));
+                    onSearch(searchValue);
+                }, onPressEnter: e => {
+                    handleAddFilter(e.target.value);
+                } }), _jsx(Divider, { style: { margin: '8px 0px' } }), renderFilterSection(), _jsx(Spin, { spinning: loading, children: renderSearchList() })] }));
+    return (_jsx(Popover, { open: isOpenPopover, content: content, overlayInnerStyle: { width: 300, padding: 0 }, trigger: ['click'], arrow: false, placement: "bottomRight", ...restProps, onOpenChange: open => {
             // Reset search value to empty when close popover
-            setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), { isOpenPopover: open }), (!open && { searchValue: '' }))));
+            setState(prev => ({ ...prev, isOpenPopover: open, ...(!open && { searchValue: '' }) }));
             // Auto focus search input when popover is open
             if (open) {
                 setTimeout(() => {
-                    var _a;
-                    (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                    searchInputRef.current?.focus();
                 }, 200);
             }
             // Clear search when close popover
             if (!open) {
                 onSearch('');
             }
-        } }), children));
+        }, children: children }));
 };

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

@@ -1,16 +1,6 @@
-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;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 // Components
 import { SearchPopover } from './SearchPopover';
@@ -39,7 +29,7 @@ export const ToolbarActionButtons = memo(() => {
         return null;
     // Handlers
     const onAddFilterFromSearch = (value, addFilterInfo) => {
-        const metric = flattenFilterMetrics.find(metric => { var _a; return metric.id.toString().toUpperCase() === ((_a = addFilterInfo === null || addFilterInfo === void 0 ? void 0 : addFilterInfo.metricId) === null || _a === void 0 ? void 0 : _a.toString().toUpperCase()); });
+        const metric = flattenFilterMetrics.find(metric => metric.id.toString().toUpperCase() === addFilterInfo?.metricId?.toString().toUpperCase());
         // If metric is exist then call function setFilter to push new filter from metric and value
         if (metric && addFilterInfo) {
             const { id, dataType } = metric;
@@ -59,46 +49,44 @@ export const ToolbarActionButtons = memo(() => {
         const { key, label: actionLabel, buttonProps, icon: actionIcon, customRender } = action;
         const actionButton = (payload) => {
             const { icon = actionIcon, label = actionLabel } = payload || {};
-            return (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps),
-                React.createElement("div", { className: "action-icon" }, typeof icon === 'string' ? React.createElement(Icon, { type: icon }) : icon),
-                `${label}`.toUpperCase()));
+            return (_jsxs(ActionButton, { type: "text", ...buttonProps, children: [_jsx("div", { className: "action-icon", children: typeof icon === 'string' ? _jsx(Icon, { type: icon }) : icon }), `${label}`.toUpperCase()] }, key));
         };
         // If customRender is exist then return custom render instead of render internal component
         if (customRender)
             return actionButton();
         switch (key) {
             case 'SEARCH': {
-                const _a = action, { addFilterInfo, onClickSearchItem, isAddFilterFromSearchItem } = _a, restOfAction = __rest(_a, ["addFilterInfo", "onClickSearchItem", "isAddFilterFromSearchItem"]);
-                return (React.createElement(SearchPopover, Object.assign({ key: key }, restOfAction, { isAddFilterFromSearchItem: isAddFilterFromSearchItem, onClickSearchItem: onClickSearchItem, onClick: (searchItem, index) => {
+                const { addFilterInfo, onClickSearchItem, isAddFilterFromSearchItem, ...restOfAction } = action;
+                return (_jsx(SearchPopover, { ...restOfAction, isAddFilterFromSearchItem: isAddFilterFromSearchItem, onClickSearchItem: onClickSearchItem, onClick: (searchItem, index) => {
                         if (isAddFilterFromSearchItem) {
                             onAddFilterFromSearch(searchItem.label, addFilterInfo);
                         }
-                        onClickSearchItem === null || onClickSearchItem === void 0 ? void 0 : onClickSearchItem(searchItem, index);
-                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }), actionButton()));
+                        onClickSearchItem?.(searchItem, index);
+                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo), children: actionButton() }, key));
             }
             case 'COLUMN': {
-                return React.createElement(ModifyColumn, { key: key }, actionButton());
+                return _jsx(ModifyColumn, { children: actionButton() }, key);
             }
             case 'GRID_VIEW': {
                 const { mode, onChangeMode = () => { } } = action;
-                return (React.createElement("div", { key: key, onClick: () => {
+                return (_jsx("div", { onClick: () => {
                         onChangeMode(mode === 'TABLE' ? 'GRID' : 'TABLE');
-                    } }, actionButton({
-                    icon: mode === 'TABLE' ? React.createElement(GridViewIcon, null) : React.createElement(TableIcon, null),
-                    label: mode === 'TABLE' ? 'Grid view' : 'Table',
-                })));
+                    }, children: actionButton({
+                        icon: mode === 'TABLE' ? _jsx(GridViewIcon, {}) : _jsx(TableIcon, {}),
+                        label: mode === 'TABLE' ? 'Grid view' : 'Table',
+                    }) }, key));
             }
             case 'GROUP_BY': {
                 const { selectedKey, options, onChange } = action;
-                return (React.createElement(GroupByPopover, { selectedKey: selectedKey, options: options, onChange: onChange }, actionButton()));
+                return (_jsx(GroupByPopover, { selectedKey: selectedKey, options: options, onChange: onChange, children: actionButton() }));
             }
             default:
                 return actionButton();
         }
     };
-    return (React.createElement(ToolbarActionButtonWrapper, { align: "center", gap: 2 }, renderActionButtons({
-        renderComponent,
-        actionButtons,
-        defaultActionOptions: TOOLBAR_ACTION_OPTIONS,
-    })));
+    return (_jsx(ToolbarActionButtonWrapper, { align: "center", gap: 2, children: renderActionButtons({
+            renderComponent,
+            actionButtons,
+            defaultActionOptions: TOOLBAR_ACTION_OPTIONS,
+        }) }));
 });

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

@@ -1,5 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { CollapseButton, ToolbarWrapper } from './styled';
 // Components
 import { AddButton } from '../AddButton';
@@ -16,7 +17,7 @@ import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
 export const Toolbar = memo(() => {
     // Store
     const toolbarProps = useDataTableContext(store => store.toolbar);
-    const selectedRowKeys = useDataTableContext(store => { var _a; return (_a = store.table.rowSelection) === null || _a === void 0 ? void 0 : _a.selectedRowKeys; });
+    const selectedRowKeys = useDataTableContext(store => store.table.rowSelection?.selectedRowKeys);
     const isFilterActive = useDataTableContext(store => store.filter.isFilterActive);
     const setFilter = useDataTableContext(store => store.setFilter);
     // console.count('toolbar render::');
@@ -31,39 +32,27 @@ export const Toolbar = memo(() => {
     const renderAddButton = () => {
         let addButtonComponent = null;
         if (typeof addButton === 'function') {
-            addButtonComponent = addButton(React.createElement(AddButton, { show: true }));
+            addButtonComponent = addButton(_jsx(AddButton, { show: true }));
         }
         if (typeof addButton === 'object') {
-            addButtonComponent = React.createElement(AddButton, Object.assign({}, addButton));
+            addButtonComponent = _jsx(AddButton, { ...addButton });
         }
         if (addButtonComponent) {
-            return (React.createElement(React.Fragment, null,
-                addButtonComponent,
-                React.createElement(Divider, { dashed: true, type: "vertical", style: {
-                        height: 38,
-                        margin: '0px 10px',
-                        borderWidth: 2,
-                        borderSpacing: 5,
-                        borderLeftStyle: 'dotted',
-                    } })));
+            return (_jsxs(_Fragment, { children: [addButtonComponent, _jsx(Divider, { dashed: true, type: "vertical", style: {
+                            height: 38,
+                            margin: '0px 10px',
+                            borderWidth: 2,
+                            borderSpacing: 5,
+                            borderLeftStyle: 'dotted',
+                        } })] }));
         }
         return null;
     };
-    return selectedRowKeys && selectedRowKeys.length ? (React.createElement(RowSelectedControl, null)) : (React.createElement(ToolbarWrapper, { ref: ref, "$isFilterActive": !!isFilterActive, align: "center", justify: "space-between", gap: 50 },
-        React.createElement(Flex, { align: "center", style: { width: '100%', overflow: 'auto' } },
-            !isFilterActive && renderAddButton(),
-            React.createElement(Filter, null)),
-        !isFilterActive ? (React.createElement(Flex, { align: "center" },
-            rightContent,
-            React.createElement(ToolbarActionButtons, null),
-            !!collapse && (React.createElement(Flex, { align: "center" },
-                React.createElement(Divider, { dashed: true, type: "vertical", style: {
-                        height: 38,
-                        margin: '0px 5px',
-                        borderWidth: 2,
-                        borderSpacing: 5,
-                        borderLeftStyle: 'dotted',
-                    } }),
-                React.createElement(CollapseButton, { "$collapsed": !!collapsed, onClick: () => onCollapse && onCollapse(!collapsed) },
-                    React.createElement(Icon, { type: "icon-ants-angle-down", size: 12 })))))) : (React.createElement(FilterActionButton, null))));
+    return selectedRowKeys && selectedRowKeys.length ? (_jsx(RowSelectedControl, {})) : (_jsxs(ToolbarWrapper, { ref: ref, "$isFilterActive": !!isFilterActive, align: "center", justify: "space-between", gap: 50, children: [_jsxs(Flex, { align: "center", style: { width: '100%', overflow: 'auto' }, children: [!isFilterActive && renderAddButton(), _jsx(Filter, {})] }), !isFilterActive ? (_jsxs(Flex, { align: "center", children: [rightContent, _jsx(ToolbarActionButtons, {}), !!collapse && (_jsxs(Flex, { align: "center", children: [_jsx(Divider, { dashed: true, type: "vertical", style: {
+                                    height: 38,
+                                    margin: '0px 5px',
+                                    borderWidth: 2,
+                                    borderSpacing: 5,
+                                    borderLeftStyle: 'dotted',
+                                } }), _jsx(CollapseButton, { "$collapsed": !!collapsed, onClick: () => onCollapse && onCollapse(!collapsed), children: _jsx(Icon, { type: "icon-ants-angle-down", size: 12 }) })] }))] })) : (_jsx(FilterActionButton, {}))] }));
 });