@antscorp/antsomi-ui 1.3.5-beta.284 → 1.3.5-beta.286

package/es/components/atoms/Icon/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-interface IconProps {
+import { IconProps as OriginIconProps } from '../../icons/type';
+export interface IconProps extends OriginIconProps {
     size?: number;
     width?: number;
     height?: number;
@@ -7,4 +8,3 @@ interface IconProps {
     style?: React.CSSProperties;
 }
 export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;
-export {};

package/es/components/atoms/Scrollbars/Scrollbars.d.ts

@@ -0,0 +1,5 @@
+import { ScrollbarProps as CustomScrollbarProps } from 'react-custom-scrollbars';
+import React from 'react';
+export interface ScrollbarsProps extends CustomScrollbarProps {
+}
+export declare const Scrollbars: React.FC<ScrollbarsProps>;

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -0,0 +1,31 @@
+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 { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
+// Libraries
+import React from 'react';
+// Styled
+import { HorizontalTrack, ScrollbarsWrapper, ThumbBar, VerticalTrack } from './styled';
+import { cloneDeep } from 'lodash';
+const THUMB_SIZE = 4;
+export const Scrollbars = props => {
+    const { autoHide = true, autoHeight = true, autoHeightMax = 500 } = props, restProps = __rest(props, ["autoHide", "autoHeight", "autoHeightMax"]);
+    return (React.createElement(ScrollbarsWrapper, null,
+        React.createElement(CustomScrollbars, Object.assign({ autoHide: autoHide, autoHeight: autoHeight, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({}, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({}, props)), renderTrackVertical: props => React.createElement(VerticalTrack, Object.assign({}, props)), renderTrackHorizontal: props => React.createElement(HorizontalTrack, Object.assign({}, props)), renderView: props => {
+                const { style } = props || {};
+                const newStyle = cloneDeep(style);
+                newStyle.marginBottom = -THUMB_SIZE;
+                newStyle.marginRight = -THUMB_SIZE;
+                newStyle.minHeight = THUMB_SIZE;
+                newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
+                return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
+            }, hideTracksWhenNotNeeded: true }, restProps))));
+};

package/es/components/atoms/Scrollbars/index.d.ts

@@ -0,0 +1,2 @@
+export { Scrollbars } from './Scrollbars';
+export type { ScrollbarsProps } from './Scrollbars';

package/es/components/atoms/Scrollbars/index.js

@@ -0,0 +1 @@
+export { Scrollbars } from './Scrollbars';

package/es/components/atoms/Scrollbars/styled.d.ts

@@ -0,0 +1,4 @@
+export declare const ScrollbarsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ThumbBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const VerticalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalTrack: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/Scrollbars/styled.js

@@ -0,0 +1,29 @@
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ScrollbarsWrapper = styled.div ``;
+export const ThumbBar = styled.div `
+  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  border-radius: 4px;
+`;
+export const VerticalTrack = styled.div `
+  position: absolute;
+  width: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 2px;
+  top: 2px;
+  border-radius: 4px;
+`;
+export const HorizontalTrack = styled.div `
+  position: absolute;
+  height: 4px !important;
+  transition: opacity 200ms ease 0s;
+  opacity: 0;
+  right: 2px;
+  bottom: 2px;
+  left: 2px;
+  border-radius: 4px;
+`;

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

@@ -40,6 +40,7 @@ export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
+export * from './Scrollbars';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -40,3 +40,4 @@ export * from './MobileFrame';
 export * from './MobileFrameV2';
 export * from './SlideBar';
 export * from './ReactIframe';
+export * from './Scrollbars';

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -10,23 +10,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
+import { ConfigProvider } from 'antd';
+import { isNil } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
-import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
+import { CloseBtn, Content, DrawerHeader, LeftMenu, MenuFooter, MenuItem, StyledDrawer, } from './styled';
 // Constants
-import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { BREAK_POINT, DRAWER_DETAIL_LOCAL_STORAGE_KEY, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
 import { ToggleDrawerSizeButton } from './components';
 // Hooks
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
-import { ConfigProvider } from 'antd';
+// Utils
+import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max' } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize"]);
+    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
     const { onClose = () => { } } = props;
-    const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
+    const _b = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _b, restOfCloseIcon = __rest(_b, ["show", "onClick"]);
     // Hooks
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
@@ -46,6 +50,14 @@ export const DrawerDetail = props => {
                 break;
         }
     }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    // Get cache collapse from local storage
+    useEffect(() => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        const cachedCollapse = localStorageValues[name || ''];
+        if (!isNil(cachedCollapse)) {
+            toggleCollapseDrawer(cachedCollapse);
+        }
+    }, [name, toggleCollapseDrawer]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -75,6 +87,17 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
+    // Handlers
+    const handleToggleDrawerSize = () => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        toggleCollapseDrawer(!collapseDrawer);
+        /**
+         * Set local storage last collapsed
+         */
+        if (name) {
+            localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
+        }
+    };
     return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
         React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
                 body: 'drawer-detail-body',
@@ -84,7 +107,7 @@ export const DrawerDetail = props => {
                     onClose(e);
                 } }),
                 React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
             showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
                 React.createElement("div", null,
                     showClose && (React.createElement(CloseBtn, { onClick: onClose },
@@ -92,6 +115,8 @@ export const DrawerDetail = props => {
                     React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
                         React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
                 React.createElement(MenuFooter, null, footer))),
-            React.createElement(Content, null, children))));
+            React.createElement(Content, null,
+                (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
+                children))));
 };
 DrawerDetail.defaultProps = {};

package/es/components/molecules/DrawerDetail/constants.d.ts

@@ -4,10 +4,11 @@ declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
 declare const BREAK_POINT = "1440px";
+declare const DRAWER_DETAIL_LOCAL_STORAGE_KEY = "drawer-detail-collapses";
 declare const DRAWER_DETAIL_DIMENSION: {
     LAYER_2: {
         minWidth: string;
         maxWidth: string;
     };
 };
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

package/es/components/molecules/DrawerDetail/constants.js

@@ -4,6 +4,7 @@ const DRAWER_LARGE_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
 const BREAK_POINT = '1440px';
+const DRAWER_DETAIL_LOCAL_STORAGE_KEY = 'drawer-detail-collapses';
 const LAYER_2_MIN_WIDTH = '740px';
 const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
 const DRAWER_DETAIL_DIMENSION = {
@@ -12,4 +13,4 @@ const DRAWER_DETAIL_DIMENSION = {
         maxWidth: LAYER_2_MAX_WIDTH,
     },
 };
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

package/es/components/molecules/DrawerDetail/styled.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { DrawerHeaderProps } from './types';
 export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
 export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DrawerDetail/styled.js

@@ -1,5 +1,7 @@
 // Libraries
 import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Drawer
 import { Drawer } from '../Drawer';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -16,8 +18,8 @@ export const StyledDrawer = styled(Drawer) `
 
     .close-btn {
       position: absolute;
-      top: 24.5px;
-      right: 25px;
+      top: 20px;
+      right: 20px;
       width: 24px;
       height: 24px;
       display: flex;
@@ -103,4 +105,17 @@ export const MenuItem = styled.div `
     }
   }
 `;
+export const DrawerHeader = styled(Flex) `
+  position: sticky;
+  top: 0px;
+  height: 64px;
+  padding: 0px 20px;
+  box-sizing: border-box;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  z-index: 20;
+
+  ${props => props.height &&
+    `height: ${typeof props.height === 'string' ? props.height : `${props.height}px`};`}
+  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};`}
+`;
 export const MenuFooter = styled.div ``;

package/es/components/molecules/DrawerDetail/types.d.ts

@@ -1,18 +1,24 @@
 import React, { ReactNode } from 'react';
-import type { DrawerProps, MenuProps as AntdProps } from 'antd';
+import type { DrawerProps, MenuProps as AntdProps, FlexProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export type TDefaultSize = 'max' | 'min';
-export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
+export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'title'> {
+    name?: string;
     fullScreen?: boolean;
     maxWidth?: string | number;
     minWidth?: string | number;
     defaultSize?: TDefaultSize;
+    headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;
 }
+export interface DrawerHeaderProps extends FlexProps {
+    height?: React.CSSProperties['height'];
+    showBorderBottom?: boolean;
+}
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;
     showExpandButton?: boolean;

package/es/components/molecules/EditableName/styled.js

@@ -7,6 +7,7 @@ export const InputWrapperStyled = styled.div `
   background-color: #fff;
   border-bottom: 1px solid transparent;
   max-width: 100%;
+  overflow: hidden;
 
   display: inline-flex;
   align-items: baseline;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DataTableProps } from './types';
+export declare function DataTable<TTableDataType>(props: DataTableProps<TTableDataType>): React.JSX.Element | null;

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

@@ -0,0 +1,33 @@
+/* eslint-disable react/function-component-definition */
+// Libraries
+import React, { useRef } from 'react';
+// Hooks
+import { useDataTable } from './hooks';
+// Styled
+import { DataTableWrapper } from './styled';
+// Components
+import { Table, Pagination, Toolbar } from './components';
+// Providers
+import { DataTableProvider } from './providers/DataTableProvider';
+import { AntdTableConfigProvider } from './providers';
+// Store
+import { createDataTableStore } from './stores';
+function DataTableComponent(props) {
+    // Hooks
+    const { pagination, setPagination } = useDataTable(props);
+    return (React.createElement(DataTableWrapper, null,
+        React.createElement(Toolbar, null),
+        React.createElement(Table, null),
+        React.createElement(Pagination, { id: "data-table-pagination", page: pagination.page, pageSize: pagination.pageSize, onChange: setPagination })));
+}
+export function DataTable(props) {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createDataTableStore(props);
+    }
+    if (!storeRef.current)
+        return null;
+    return (React.createElement(AntdTableConfigProvider, null,
+        React.createElement(DataTableProvider, { store: storeRef.current },
+            React.createElement(DataTableComponent, Object.assign({}, props)))));
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface AddButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export declare const AddButton: React.FC<AddButtonProps>;

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

@@ -0,0 +1,33 @@
+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 } from 'react';
+import styled from 'styled-components';
+// Components
+import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+const StyledAddButton = styled(Flex) `
+  border-radius: 100%;
+  width: 30px;
+  height: 30px;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+  color: #fff;
+  cursor: pointer;
+`;
+export const AddButton = memo(props => {
+    const { show } = props, restProps = __rest(props, ["show"]);
+    if (!show)
+        return null;
+    return (React.createElement(StyledAddButton, Object.assign({ align: "center", justify: "center" }, restProps),
+        React.createElement(Icon, { type: "icon-ants-plus-square", size: 14 })));
+});

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

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

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

@@ -0,0 +1,30 @@
+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 } from 'react';
+// Components
+import { Flex, Icon, Button } from '@antscorp/antsomi-ui/es/components/atoms';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { FilterButton } from './styled';
+import { SavedFilterAndMetrics } from './SavedFilterAndMetrics';
+export const AddFilterButton = memo(props => {
+    const restProps = __rest(props, []);
+    const { t } = i18nInstance;
+    return (React.createElement(Flex, { align: "center", gap: 7 },
+        React.createElement(FilterButton, null,
+            React.createElement(Icon, { type: "icon-ants-filter-slim", size: 18 })),
+        React.createElement(SavedFilterAndMetrics, null,
+            React.createElement(Button, { type: "text" }, t(translations.filter.addFilter).toString()))));
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { PopoverProps } from 'antd';
+interface FilterSelectFieldsProps extends PopoverProps {
+}
+export declare const SavedFilterAndMetrics: React.FC<React.PropsWithChildren<FilterSelectFieldsProps>>;
+export {};

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

@@ -0,0 +1,111 @@
+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';
+import { Scrollbars } from 'react-custom-scrollbars';
+// Components
+import { Input, Popover, Icon, Divider, Flex } 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", 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");
+};