@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,99 @@
+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, { memo, useCallback, useRef, useState } from 'react';
+import { ConfigProvider } from 'antd';
+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
+import { StyledTable } from './styled';
+// Contexts
+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
+    const tableProps = useDataTableContext(useShallow(store => store.table));
+    const setTable = useDataTableContext(useShallow(store => store.setTable));
+    const _b = tableProps || {}, { rowSelection } = _b, restOfTable = __rest(_b, ["rowSelection"]);
+    // State
+    const [state, setState] = useState({
+        columns: [],
+        tableHeight: 0,
+    });
+    const { columns } = state;
+    // Ref
+    const tableRef = useRef(null);
+    // Variables
+    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]);
+    // 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)) }));
+                    }) }));
+            });
+        }
+    }, [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, 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: {
+                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) {
+                    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) => ({
+                    tableRef,
+                    disableResize: index === ((columns === null || columns === void 0 ? void 0 : 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),
+                spinning: !!tableProps.loading,
+            }, tableLayout: "fixed" }))));
+});

package/es/components/organism/DataTable/components/Table/styled.d.ts

@@ -0,0 +1,11 @@
+export declare const StyledTable: import("styled-components").StyledComponent<import("antd/es/table/interface").RefTable & {
+    displayName?: string | undefined;
+    SELECTION_COLUMN: {};
+    EXPAND_COLUMN: {};
+    SELECTION_ALL: "SELECT_ALL";
+    SELECTION_INVERT: "SELECT_INVERT";
+    SELECTION_NONE: "SELECT_NONE";
+    Column: typeof import("antd/es/table/Column").default;
+    ColumnGroup: typeof import("antd/es/table/ColumnGroup").default;
+    Summary: typeof import("rc-table/lib/Footer/Summary").default;
+}, any, {}, never>;

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

@@ -0,0 +1,118 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Table } from '@antscorp/antsomi-ui/es/components/organism/Table';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { blue1, gray5 } = globalToken || {};
+export const StyledTable = styled(Table) `
+  &.antsomi-table-wrapper {
+    max-height: 100%;
+    overflow: auto;
+
+    .antsomi-table-header {
+      flex-shrink: 0;
+
+      th.antsomi-table-cell:nth-last-child(2) {
+        border-inline-end: 0px !important;
+      }
+    }
+
+    .antsomi-spin-nested-loading {
+      height: 100%;
+
+      .antsomi-spin-container {
+        height: 100%;
+      }
+    }
+
+    .antsomi-table {
+      height: 100%;
+      &.antsomi-table-bordered > .antsomi-table-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        border-inline-start: 0px;
+
+        /* Remove border endline for last column */
+        > .antsomi-table-content {
+          > table {
+            > thead > tr > th:last-child,
+            > tbody > tr > td:last-child {
+              border-inline-end: 0px;
+            }
+          }
+        }
+      }
+
+      .antsomi-table-cell.antsomi-table-cell-scrollbar {
+        border-inline-end: 0px !important;
+      }
+
+      .antsomi-table-cell:last-child {
+        border-inline-end: 0px !important;
+      }
+
+      .antsomi-table-body {
+        &::-webkit-scrollbar-thumb {
+          background: transparent;
+        }
+
+        &:hover {
+          &::-webkit-scrollbar-thumb {
+            background: ${gray5};
+          }
+        }
+      }
+    }
+
+    .antsomi-table-row {
+      .antsomi-table-cell[aria-resizable='true'] {
+        border-inline-end: 2px solid ${blue1} !important;
+      }
+    }
+  }
+
+  thead.antsomi-table-thead {
+    position: relative;
+    z-index: 20;
+  }
+
+  /* Style handle resize */
+  .resizable-handle-wrapper {
+    position: absolute;
+    top: 0px;
+    right: -10px;
+    width: 20px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    z-index: 10;
+    cursor: col-resize;
+
+    .resizable-handle {
+      width: 2px;
+      background-color: ${blue1};
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+
+      &::after {
+        content: '';
+        position: absolute;
+        height: 8px;
+        width: 8px;
+        top: 16px;
+        border-radius: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid ${blue1};
+      }
+    }
+
+    &:hover .resizable-handle {
+      opacity: 1;
+    }
+  }
+`;

package/es/components/organism/DataTable/components/Toolbar/RowSelectedControl.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface RowSelectedControlProps {
+}
+export declare const RowSelectedControl: React.FC<RowSelectedControlProps>;
+export {};

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

@@ -0,0 +1,30 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Dropdown } from '@antscorp/antsomi-ui/es/components/molecules';
+// Styled
+import { RowSelectedControlWrapper } from './styled';
+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 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));
+        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 (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,
+        }))));
+});

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.d.ts

@@ -0,0 +1,10 @@
+import { PopoverProps } from 'antd';
+import React from 'react';
+import { TSearchActionButton, TSearchItem } from '../../types';
+interface SearchPopoverProps extends PopoverProps, TSearchActionButton {
+    onAddFilter?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onClick?: (searchItem: TSearchItem, index: number) => void;
+}
+export declare const SearchPopover: React.FC<SearchPopoverProps>;
+export {};

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

@@ -0,0 +1,130 @@
+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, { useState } from 'react';
+import styled from 'styled-components';
+import clsx from 'clsx';
+// Components
+import { Input, Popover, Divider, Typography, Scrollbars, Icon, Spin, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Hooks
+import { useCustomRouter, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+// Utils
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Styles
+import { FilterSection, IconWrapper, StyledSearchItem } from './styled';
+import { FilterButton } from '../../styled';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { Text } = Typography;
+const { t } = i18nInstance;
+// Styled
+const StyledContent = styled.div `
+  padding-top: 8px;
+
+  .or-go-to {
+    display: flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 10px;
+  }
+
+  .antsomi-menu-item .antsomi-typography {
+    font-weight: 500;
+
+    &.text-link {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : 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"]);
+    // Hooks
+    const { navigate } = useCustomRouter();
+    // State
+    const [state, setState] = useState({
+        searchValue: '',
+        isOpenPopover: false,
+    });
+    // Variables
+    const { searchValue, isOpenPopover } = state;
+    // Memo
+    const filteredSearchList = useDeepCompareMemo(() => {
+        let draftSearchList = [];
+        // Check if is not client search then return list from props
+        if (!isClientSearch) {
+            draftSearchList = searchList || [];
+        }
+        else {
+            // Client search
+            draftSearchList = (searchList || []).filter(({ label }) => searchStringQuery(label, searchValue));
+        }
+        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: () => {
+                    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));
+        });
+    }, [isClientSearch, itemSearchRender, searchList, searchValue]);
+    // Handlers
+    const handleAddFilter = () => {
+        onAddFilter(searchValue);
+        setState(prev => (Object.assign(Object.assign({}, 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' } })));
+    };
+    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)));
+    };
+    const content = (React.createElement(StyledContent, null,
+        React.createElement(Input.CustomSearch, { value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+                onSearch(searchValue);
+            }, onPressEnter: () => {
+                handleAddFilter();
+            } }),
+        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 => {
+            // Reset search value to empty when close popover
+            setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), { isOpenPopover: open }), (!open && { searchValue: '' }))));
+        } }), children));
+};

package/es/components/organism/DataTable/components/Toolbar/ToolbarActionButtons.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface ToolbarActionButtonsProps {
+}
+export declare const ToolbarActionButtons: React.FC<ToolbarActionButtonsProps>;
+export {};

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

@@ -0,0 +1,86 @@
+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, { memo, useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+// Components
+import { SearchPopover } from './SearchPopover';
+import { ModifyColumn } from '../ModifyColumn';
+// Styled
+import { ToolbarActionButtonWrapper } from './styled';
+import { ActionButton } from '../../styled';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+// Constants
+import { TOOLBAR_ACTION_OPTIONS } from '../../constants';
+// Types
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+// Utils
+import { renderActionButtons } from '@antscorp/antsomi-ui/es/utils';
+import { flatFilterMetrics } from '../../utils';
+export const ToolbarActionButtons = memo(() => {
+    // Store
+    const actionButtons = useDataTableContext(useShallow(store => store.toolbar.actionButtons));
+    const { filters, filterMetrics, onChangeFilters = () => { }, } = useDataTableContext(useShallow(store => store.filter));
+    // Memo
+    const flattenFilterMetrics = useMemo(() => flatFilterMetrics(filterMetrics || []), [filterMetrics]);
+    if (!actionButtons)
+        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()); });
+        // If metric is exist then call function setFilter to push new filter from metric and value
+        if (metric && addFilterInfo) {
+            const { id, dataType } = metric;
+            const { operator } = addFilterInfo || {};
+            onChangeFilters([
+                {
+                    column: id,
+                    operator,
+                    value,
+                    dataType,
+                },
+            ]);
+        }
+    };
+    // Renders
+    const renderComponent = (action) => {
+        const { key, label, buttonProps, icon, customRender } = action;
+        const actionButton = (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps),
+            React.createElement(Icon, { type: icon, size: 18 }),
+            `${label}`.toUpperCase()));
+        // 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) => {
+                        if (isAddFilterFromSearchItem) {
+                            onAddFilterFromSearch(searchItem.label, addFilterInfo);
+                        }
+                        onClickSearchItem === null || onClickSearchItem === void 0 ? void 0 : onClickSearchItem(searchItem, index);
+                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }), actionButton));
+            }
+            case 'COLUMN': {
+                return React.createElement(ModifyColumn, { key: key }, actionButton);
+            }
+            default:
+                return actionButton;
+        }
+    };
+    return (React.createElement(ToolbarActionButtonWrapper, { align: "center", gap: 2 }, renderActionButtons({
+        renderComponent,
+        actionButtons,
+        defaultActionOptions: TOOLBAR_ACTION_OPTIONS,
+    })));
+});

package/es/components/organism/DataTable/components/Toolbar/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToolbarProps } from '../../types';
+export declare const Toolbar: React.FC<ToolbarProps>;

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

@@ -0,0 +1,66 @@
+// Libraries
+import React, { memo } from 'react';
+import { CollapseButton, ToolbarWrapper } from './styled';
+// Components
+import { AddButton } from '../AddButton';
+import { Filter } from '../Filter';
+import { ToolbarActionButtons } from './ToolbarActionButtons';
+import { Divider, Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import { FilterActionButton } from '../Filter/FilterActionButton';
+// Hooks
+import { useDataTableContext } from '../../contexts/DataTableContext';
+import { useOutsideClick } from '@antscorp/antsomi-ui/es/hooks/useOutsideClick';
+import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
+import { RowSelectedControl } from './RowSelectedControl';
+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 isFilterActive = useDataTableContext(store => store.filter.isFilterActive);
+    const setFilter = useDataTableContext(store => store.setFilter);
+    // Refs
+    const { ref } = useOutsideClick(() => setFilter({
+        isFilterActive: false,
+    }), [`.${EXCEPTION_OFF_FILTER_CLASS}`]);
+    // Variables
+    const { addButton, collapse } = toolbarProps;
+    const { collapsed, onCollapse } = collapse || {};
+    // Handlers
+    const renderAddButton = () => {
+        let addButtonComponent = null;
+        if (typeof addButton === 'function') {
+            addButtonComponent = addButton(React.createElement(AddButton, { show: true }));
+        }
+        if (typeof addButton === 'object') {
+            addButtonComponent = React.createElement(AddButton, Object.assign({}, 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 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" },
+            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))));
+});

package/es/components/organism/DataTable/components/Toolbar/styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const ToolbarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $isFilterActive: boolean;
+}, never>;
+export declare const CollapseButton: import("styled-components").StyledComponent<"div", any, {
+    $collapsed: boolean;
+}, never>;
+export declare const ToolbarActionButtonWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const FilterSection: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const RowSelectedControlWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** Search Popover */
+export declare const StyledSearchItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;