@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -0,0 +1,110 @@
+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, { useMemo } from 'react';
+// Components
+import { Input, Popover, Icon, Divider, Flex, Scrollbars, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
+// Styled
+import { FilterSelectFieldsContent } from './styled';
+import { IconButton } from '../../styled';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+import { serializeFilterMetricsToMenuItems } from '../../utils';
+import styled from 'styled-components';
+const ScrollWrapper = styled.div `
+  overflow-y: auto;
+`;
+const TestWrapper = styled.div `
+  /* Container styling */
+  &.container {
+    position: relative;
+    height: 400px;
+    width: 80%;
+    overflow: hidden;
+  }
+
+  /* Scrollable content styling */
+  .scrollable-content {
+    height: 100%;
+    width: 100%;
+    overflow-y: scroll;
+    padding-right: 20px; /* Add some space for the custom scrollbar */
+  }
+
+  /* Styling the scrollbar for Webkit browsers */
+  .scrollable-content::-webkit-scrollbar {
+    width: 16px;
+  }
+
+  .scrollable-content::-webkit-scrollbar-track {
+    background: #bd4b4b;
+  }
+
+  .scrollable-content::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 8px;
+    border: 4px solid transparent; /* Creates space around the thumb */
+    background-clip: content-box; /* Prevents thumb from extending into the border */
+  }
+
+  .scrollable-content::-webkit-scrollbar-thumb:hover {
+    background: #555;
+  }
+
+  /* Ensure scrollbar appears over other elements */
+  .scrollable-content::-webkit-scrollbar {
+    z-index: 10;
+    position: relative;
+  }
+
+  /* Styling for other browsers (standard) */
+  .scrollable-content {
+    scrollbar-color: #888 #f1f1f1; /* thumb and track colors */
+    scrollbar-width: thin; /* thin scrollbar */
+  }
+
+  /* Example item styling */
+  .item {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+`;
+export const SavedFilterAndMetrics = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    const savedFilter = useDataTableContext(store => store.filter.savedFilter);
+    const filterMetrics = useDataTableContext(store => store.filter.filterMetrics);
+    // Variables
+    const { list, selected } = savedFilter || {};
+    // Memos
+    const filterMetricItems = useMemo(() => serializeFilterMetricsToMenuItems(filterMetrics || []), [filterMetrics]);
+    console.log({ filterMetricItems });
+    // Handlers
+    const renderSavedFilter = () => (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: list === null || list === void 0 ? void 0 : list.map(({ id, name, removable }) => ({
+            key: id,
+            label: (React.createElement(Flex, { align: "center", justify: "space-between" },
+                name,
+                !!removable && (React.createElement(IconButton, null,
+                    React.createElement(Icon, { type: "icon-ants-outline-delete" }))))),
+        })) }));
+    const renderFilterMetrics = () => (React.createElement(Menu, { mode: "inline", inlineIndent: 10, items: filterMetricItems }));
+    const content = (React.createElement(FilterSelectFieldsContent, null,
+        React.createElement(Input, { bordered: false, className: "search-input", autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
+        React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
+        React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
+            renderSavedFilter(),
+            React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
+            renderFilterMetrics())));
+    return (React.createElement(Popover, Object.assign({ content: content, trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomLeft" }, restProps), children));
+};

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

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

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

@@ -0,0 +1,20 @@
+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 from 'react';
+import { FilterWrapper } from './styled';
+import { AddFilterButton } from './AddFilterButton';
+export const Filter = props => {
+    const restProps = __rest(props, []);
+    return (React.createElement(FilterWrapper, { align: "center" },
+        React.createElement(AddFilterButton, null)));
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const FilterWrapper: 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 FilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterSelectFieldsContent: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,26 @@
+// Libraries
+import styled from 'styled-components';
+// Componets
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const FilterWrapper = styled(Flex) ``;
+export const FilterButton = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+/* Filter Item */
+export const FilterSelectFieldsContent = styled.div `
+  .search-input {
+    margin-top: 8px;
+    input {
+      background-color: #fff !important;
+    }
+
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,17 @@
+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 from 'react';
+export const ModifyColumn = props => {
+    const restProps = __rest(props, []);
+    return React.createElement("div", null, "ModifyColumn");
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlexProps } from 'antd/lib';
+type TChangePageSizePayload = {
+    pageSize: number;
+    page: number;
+};
+interface PaginationProps extends Omit<FlexProps, 'children' | 'onChange'> {
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (payload: TChangePageSizePayload) => void;
+}
+export declare const Pagination: React.FC<PaginationProps>;
+export {};

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

@@ -0,0 +1,59 @@
+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, { useMemo } from 'react';
+// Components
+import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Flex, Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { ActionButton, PaginationWrapper } from './styled';
+// Constants
+import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../constants';
+const { Text } = Typography;
+export const Pagination = props => {
+    // Props
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 70, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "onChange"]);
+    // Instance
+    const { t } = i18nInstance;
+    // Memo
+    const paginationSizeOptions = useMemo(() => PAGE_SIZE_OPTIONS.map(pageSize => ({ label: pageSize.toString(), value: pageSize })), []);
+    // Variables
+    const disabledNext = page * pageSize >= total;
+    const disabledPrevious = page === 1;
+    // Handlers
+    const onChangePagination = (payload) => {
+        if (onChange) {
+            onChange(Object.assign({ page,
+                pageSize }, payload));
+        }
+    };
+    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", gap: 10 }, restProps),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(Text, null,
+                t(translations.pagination.showRow).toString(),
+                ":"),
+            React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
+        React.createElement(Text, null, `${page * pageSize - pageSize + 1} - ${Math.min(page * pageSize, total)} of ${total}`),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
+                React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
+                React.createElement(Icon, { type: "icon-ants-last-page", size: 12 })))));
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PaginationWrapper: 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 ActionButton: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,34 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const PaginationWrapper = styled(Flex) `
+  height: 60px;
+
+  .show-row-select {
+    width: 50px;
+  }
+`;
+export const ActionButton = styled.div `
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.3s;
+
+  ${props => props.disabled &&
+    css `
+      pointer-events: none;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+    `}
+
+  &:hover {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+  }
+
+  cursor: pointer;
+`;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+interface HandleProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'onResize'> {
+    onResize?: (e: React.SyntheticEvent<Element, Event>, data: ResizeCallbackData) => void;
+    width?: number;
+    handleProps?: HandleProps;
+}
+export declare const ResizableCell: React.FC<ResizableCellProps>;
+export {};

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

@@ -0,0 +1,29 @@
+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 from 'react';
+import { Resizable } from 'react-resizable';
+export const ResizableCell = props => {
+    var _a;
+    const { width, onResize, handleProps } = props, restProps = __rest(props, ["width", "onResize", "handleProps"]);
+    const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
+    if (isRowSelectionCol || !width) {
+        return React.createElement("th", Object.assign({}, restProps));
+    }
+    return (React.createElement(Resizable, { width: width || 0, height: 0, handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+                e.stopPropagation();
+            } },
+            React.createElement("span", Object.assign({ 
+                /* react-resizable-handle */
+                className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: false } },
+        React.createElement("th", Object.assign({}, restProps))));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TableProps as AntdTableProps } from 'antd';
+interface TableProps extends AntdTableProps<any> {
+}
+export declare const Table: React.FC<TableProps>;
+export {};

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

@@ -0,0 +1,70 @@
+// Libraries
+import React, { memo, useCallback, useRef, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+// Components
+import { ResizableCell } from './ResizableCell';
+// 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 { cloneDeep } from 'lodash';
+export const Table = memo(() => {
+    var _a;
+    // Store
+    const tableProps = useDataTableContext(useShallow(store => store.table));
+    const addButton = useDataTableContext(useShallow(store => store.toolbar.addButton));
+    console.log('🚀 ~ constTable:React.FC<TableProps>=memo ~ addButton:', addButton);
+    // State
+    const [state, setState] = useState({
+        columns: [],
+        tableHeight: 0,
+    });
+    const { columns } = state;
+    console.log('🚀 ~ constTable:React.FC<TableProps>=memo ~ columns:', columns);
+    // Ref
+    const tableRef = useRef(null);
+    // Variables
+    const { scroll } = tableProps;
+    // Handles
+    const handleResize = useCallback((index) => (e, { size }) => {
+        const nextColumns = cloneDeep(columns || []);
+        nextColumns[index] = Object.assign(Object.assign({}, nextColumns[index]), { width: size.width });
+        setState(prev => (Object.assign(Object.assign({}, prev), { columns: nextColumns })));
+    }, [columns]);
+    // 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, _b;
+                        return (Object.assign(Object.assign({}, col), { width: index === (((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1
+                                ? 'auto'
+                                : (_b = col.width) !== null && _b !== void 0 ? _b : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH) }));
+                    }) }));
+            });
+        }
+    }, [tableProps.columns]);
+    return (React.createElement(StyledTable, Object.assign({}, tableProps, { ref: ref => {
+            tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
+        }, scroll: Object.assign(Object.assign({}, scroll), { x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || 'max-content' }), components: {
+            header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
+        } }, (!!(tableProps === null || tableProps === void 0 ? void 0 : tableProps.dataSource) && {
+        rowSelection: Object.assign({ fixed: true, columnWidth: DEFAULT_ROW_SELECTION_WIDTH }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection),
+    }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => {
+                var _a;
+                return ({
+                    width: column.width,
+                    handleProps: {
+                        style: {
+                            height: (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
+                        },
+                    },
+                    onResize: handleResize(index),
+                });
+            } }))), bordered: true, pagination: false })));
+});

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,67 @@
+// 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';
+export const StyledTable = styled(Table) `
+  &.antsomi-table-wrapper {
+    .antsomi-table.antsomi-table-bordered > .antsomi-table-container {
+      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;
+          }
+        }
+      }
+    }
+  }
+
+  thead.antsomi-table-thead {
+    position: relative;
+    z-index: 20;
+  }
+
+  /* Style handle resize */
+
+  .resizable-handle-wrapper {
+    position: absolute;
+    top: 0px;
+    right: -10.5px;
+    width: 20px;
+    display: flex;
+    justify-content: center;
+    z-index: 20;
+    cursor: col-resize;
+
+    .resizable-handle {
+      width: 2px;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: opacity 0.2s ease-in-out;
+
+      &::after {
+        content: '';
+        position: absolute;
+        height: 8px;
+        width: 8px;
+        top: 16px;
+        border-radius: 100%;
+        box-sizing: border-box;
+        background-color: #fff;
+        border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+      }
+    }
+
+    &:hover .resizable-handle {
+      opacity: 1;
+    }
+  }
+`;

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,48 @@
+// Libraries
+import React, { memo } from 'react';
+import { CollapseButton, ToolbarWrapper } from './styled';
+// Components
+import { AddButton } from '../AddButton';
+import { Filter } from '../Filter';
+import { ToolbarActionButtons } from '../ToolbarActionButton';
+import { Divider, Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import { useDataTableContext } from '../../contexts/DataTableContext';
+export const Toolbar = memo(props => {
+    // Store
+    const toolbarProps = useDataTableContext(store => store.toolbar);
+    console.log('🚀 ~ toolbarProps:', toolbarProps);
+    // 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 } })));
+        }
+        return null;
+    };
+    return (React.createElement(ToolbarWrapper, { align: "center", justify: "space-between" },
+        React.createElement(Flex, { align: "center" },
+            renderAddButton(),
+            React.createElement(Filter, null)),
+        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,
+                    } }),
+                React.createElement(CollapseButton, { "$collapsed": !!collapsed, onClick: () => onCollapse && onCollapse(!collapsed) },
+                    React.createElement(Icon, { type: "icon-ants-angle-down", size: 12 })))))));
+});

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

@@ -0,0 +1,5 @@
+/// <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, {}, never>;
+export declare const CollapseButton: import("styled-components").StyledComponent<"div", any, {
+    $collapsed: boolean;
+}, never>;

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

@@ -0,0 +1,28 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Providers
+import { dataTableGlobalToken } from '../../providers';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const { toolbarHeight, toolbarPadding } = dataTableGlobalToken || {};
+export const ToolbarWrapper = styled(Flex) `
+  height: ${toolbarHeight}px;
+  background-color: #fff;
+  padding: ${toolbarPadding};
+`;
+export const CollapseButton = styled.div `
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  margin: 0px 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.2s ease;
+
+  ${props => css `
+    transform: rotate(${props.$collapsed ? 0 : -180}deg);
+  `}
+`;

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

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