@antscorp/antsomi-ui 1.3.5-beta.402 → 1.3.5-beta.403

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

@@ -28,5 +28,8 @@ export declare const Input: string & import("styled-components").StyledComponent
     Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
 }, {}> & {
     DefaultInput: typeof AntdInput;
+    CustomSearch: typeof SearchInput;
 };
+declare const SearchInput: React.FC<InputProps>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+export {};

package/es/components/atoms/Input/Input.js

@@ -16,11 +16,12 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // Types
 import { Input as AntdInput } from 'antd';
 // Components
-import { RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledInput } from './styled';
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = props => {
     // Props
@@ -95,6 +96,8 @@ OriginInput.defaultProps = {
     withWrapper: true,
 };
 export const Input = OriginInput;
+const SearchInput = props => (React.createElement(Input, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { className: `${props.className} antsomi-search-input` })));
+Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;
 Input.Password = AntdInput.Password;

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

@@ -4,3 +4,4 @@ export interface InputNumberProps extends AntdInputNumberProps {
     showHandler?: boolean;
 }
 export declare const InputNumber: React.FC<InputNumberProps>;
+export declare const FormatInputNumber: React.FC<InputNumberProps>;

package/es/components/atoms/InputNumber/InputNumber.js

@@ -13,8 +13,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import clsx from 'clsx';
 import { InputNumber as AntdInputNumber } from 'antd';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Icons
 import Icon from '@antscorp/icons';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { t } = i18nInstance;
 export const InputNumber = props => {
     // Props
     const { showHandler, className } = props, restOfProps = __rest(props, ["showHandler", "className"]);
@@ -25,3 +29,20 @@ export const InputNumber = props => {
 InputNumber.defaultProps = {
     showHandler: true,
 };
+export const FormatInputNumber = InputNumber;
+FormatInputNumber.defaultProps = {
+    formatter: (value, info) => {
+        if (info.userTyping)
+            return (value === null || value === void 0 ? void 0 : value.toString()) || '';
+        if (!value)
+            return '';
+        // Split the value into integer and decimal parts
+        const parts = value.toString().split('.');
+        // Format the integer part with commas
+        const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        // Combine the formatted integer part with the decimal part (if any)
+        return parts[1] ? `${integerPart}.${parts[1].slice(0, 3)}` : `${integerPart}`;
+    },
+    placeholder: `${t(translations.format)}: 1,234.560`,
+    parser: value => value === null || value === void 0 ? void 0 : value.replace(/,/g, ''),
+};

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

@@ -1 +1 @@
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';

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

@@ -1 +1 @@
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';

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

@@ -1,7 +1,7 @@
 export { Divider } from './Divider';
 export { DividerPure } from './DividerPure';
 export { Input, TextArea } from './Input';
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';
 export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';

package/es/components/atoms/index.js

@@ -1,7 +1,7 @@
 export { Divider } from './Divider';
 export { DividerPure } from './DividerPure';
 export { Input, TextArea } from './Input';
-export { InputNumber } from './InputNumber';
+export { InputNumber, FormatInputNumber } from './InputNumber';
 export { Radio, RadioGroupSub, RadioButton } from './Radio';
 export { Space } from './Space';
 export { Tag } from './Tag';

package/es/components/molecules/EmptyData/EmptyData.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
-export interface EmptyDataProps {
+import { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+export interface EmptyDataProps extends Omit<FlexProps, 'children' | 'title'> {
+    showIcon?: boolean;
     size?: TUISize;
     icon?: React.ReactNode;
     title?: React.ReactNode;

package/es/components/molecules/EmptyData/EmptyData.js

@@ -1,3 +1,14 @@
+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 { LoadingOutlined } from '@ant-design/icons';
@@ -10,12 +21,13 @@ import { Icon } from '@antscorp/antsomi-ui/es/components';
 import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
 const { Text } = Typography;
 export const EmptyData = props => {
-    const { size = 'medium', icon = 'icon-ants-media', title, subTitle, description, loading, className, image, imageClassName, imageStyle, children, } = props;
-    return (React.createElement(EmptyWrapper, { className: className },
+    const { size = 'medium', icon = 'icon-ants-media', showIcon = true, title, subTitle, description, loading, className, image, imageClassName, imageStyle, children } = props, restOfProps = __rest(props, ["size", "icon", "showIcon", "title", "subTitle", "description", "loading", "className", "image", "imageClassName", "imageStyle", "children"]);
+    return (React.createElement(EmptyWrapper, Object.assign({ className: className }, restOfProps),
         React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
-            !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
-            image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
-                React.createElement("img", { src: image, alt: "" }))),
+            !!showIcon && (React.createElement(React.Fragment, null,
+                !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
+                image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
+                    React.createElement("img", { src: image, alt: "" }))))),
             loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
                 title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
                 subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),

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

@@ -9,6 +9,7 @@ import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
 export const EmptyWrapper = styled(Flex) `
   width: 100%;
   height: 100%;
+  padding: 20px;
 
   .title {
     font-size: 14px;

package/es/components/molecules/HeaderV2/HeaderV2.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AccountSelectionProps } from '../AccountSelection';
 import { AccountSharingProps } from '../../organism';
 import { IHelpProps } from '../../organism/Help/types';
-import { envType } from '@antscorp/antsomi-ui/es/types/config';
+import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 interface Breadcrumb {
     title: string;
     link?: string;
@@ -31,7 +31,7 @@ export interface HeaderV2Props {
     useURLParam?: boolean;
     rightContent?: React.ReactNode;
     config?: {
-        env?: envType;
+        env?: TEnv;
         language?: string;
         userId?: number;
         portalId?: number;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -234,7 +234,7 @@ export const ThumbnailCard = (props) => {
     // Handlers
     const handleRemoveThumbnail = e => {
         e.stopPropagation();
-        modal.confirm(Object.assign(Object.assign({ title: 'Remove template', centered: true, icon: React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px' } }), content: (React.createElement("div", null,
+        modal.confirm(Object.assign(Object.assign({ title: 'Remove template', centered: true, icon: (React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px', marginRight: 13 } })), content: (React.createElement("div", null,
                 React.createElement("p", null, "Are you sure you want to remove the template?"),
                 React.createElement("p", null, "This action can not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
                 if (onOk)

package/es/components/molecules/Tree/Tree.d.ts

@@ -0,0 +1,2 @@
+export { Tree } from 'antd';
+export type { TreeProps, TreeDataNode } from 'antd';

package/es/components/molecules/Tree/Tree.js

@@ -0,0 +1 @@
+export { Tree } from 'antd';

package/es/components/molecules/Tree/index.d.ts

@@ -0,0 +1 @@
+export * from './Tree';

package/es/components/molecules/Tree/index.js

@@ -0,0 +1 @@
+export * from './Tree';

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

@@ -55,6 +55,7 @@ export * from './Drawer';
 export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
+export * from './Tree';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -55,6 +55,7 @@ export * from './Drawer';
 export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
+export * from './Tree';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

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

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

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

@@ -1,6 +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;
+};
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { useRef } from 'react';
+import React from 'react';
 // Hooks
 import { useDataTable } from './hooks';
 // Styled
@@ -11,23 +22,24 @@ import { Table, Pagination, Toolbar } from './components';
 import { DataTableProvider } from './providers/DataTableProvider';
 import { AntdTableConfigProvider } from './providers';
 // Store
-import { createDataTableStore } from './stores';
+import { useDataTableStore } from './hooks/useDataTableStore';
 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 })));
+        React.createElement(Pagination, Object.assign({ id: "data-table-pagination" }, pagination, { onChange: payload => {
+                var _a;
+                setPagination(payload);
+                (_a = pagination === null || pagination === void 0 ? void 0 : pagination.onChange) === null || _a === void 0 ? void 0 : _a.call(pagination, payload);
+            } }))));
 }
 export function DataTable(props) {
-    const storeRef = useRef();
-    if (!storeRef.current) {
-        storeRef.current = createDataTableStore(props);
-    }
-    if (!storeRef.current)
-        return null;
+    const { store } = props, restOfProps = __rest(props, ["store"]);
+    const defaultStore = useDataTableStore(restOfProps);
     return (React.createElement(AntdTableConfigProvider, null,
-        React.createElement(DataTableProvider, { store: storeRef.current },
-            React.createElement(DataTableComponent, Object.assign({}, props)))));
+        React.createElement(DataTableProvider, { store: store || defaultStore },
+            React.createElement(DataTableComponent, Object.assign({}, restOfProps)))));
 }
+DataTable.useDataTableStore = useDataTableStore;

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

@@ -1,30 +1,35 @@
-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';
+import { Button, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { FilterCondition } from './FilterCondition';
+import { SavedFilterAndMetrics } from './SavedFilterAndMetrics';
+// Hooks
+import { useAddFilterCondition } from '../../hooks';
 // 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, []);
+// Constants
+import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
+export const AddFilterButton = memo(() => {
     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()))));
+    const { openPopover, selectedFilterMetric, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, setState: setAddFilterConditionState, } = useAddFilterCondition();
+    return (React.createElement(Popover, { open: openPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, selectedFilterMetric ? (React.createElement(FilterCondition, { filterMetric: selectedFilterMetric, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
+                onApplyFilterMetricCondition({
+                    filterMetric: selectedFilterMetric,
+                    operator,
+                    value,
+                });
+                onSelectFilterMetric(undefined);
+                setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
+            } })) : (React.createElement(SavedFilterAndMetrics, { onSelectFilterMetric: onSelectFilterMetric, onSelectSavedFilter: () => {
+                setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
+            } }))), trigger: ['click'], overlayInnerStyle: { width: 300, padding: 0 }, arrow: false, placement: "bottomLeft", destroyTooltipOnHide: true, onOpenChange: open => {
+            setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: open })));
+            if (!open) {
+                /* Reset filter metric */
+                onSelectFilterMetric(undefined);
+            }
+        } },
+        React.createElement(Button, { type: "text", onClick: () => onClickAddFilter() }, t(translations.filter.addFilter).toString())));
 });

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

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

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

@@ -0,0 +1,124 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import React, { memo, useState } from 'react';
+// Components
+import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Modal } from '@antscorp/antsomi-ui/es/components/molecules';
+// Utils
+import { renderActionButtons } from '@antscorp/antsomi-ui/es/utils';
+// Styled
+import { ActionButton } from '../../styled';
+import { EXCEPTION_OFF_FILTER_CLASS, FILTER_ACTION_OPTIONS } from '../../constants/filter';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+import { SaveFilterPopover } from './SaveFilterPopover';
+// Constants
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { t } = i18nInstance;
+export const FilterActionButton = memo(() => {
+    // Store
+    const actionButtons = useDataTableContext(store => store.filter.actionButtons);
+    const { filters, savedFilter, onSaveFilter = () => Promise.resolve(), onChangeFilters = () => { }, } = useDataTableContext(store => store.filter);
+    const setFilter = useDataTableContext(store => store.setFilter);
+    // State
+    const [state, setState] = useState({
+        openSaveFilterPopover: false,
+        saveFilterLoading: false,
+    });
+    // Variables
+    const { saveFilterLoading, openSaveFilterPopover } = state;
+    // Hooks
+    const [modal, context] = Modal.useModal();
+    // Handlers
+    const handleClickActionButton = (key) => {
+        switch (key) {
+            case 'CLOSE':
+                setFilter({
+                    isFilterActive: false,
+                });
+                break;
+            case 'RESET': {
+                onChangeFilters([]);
+                break;
+            }
+            default:
+                break;
+        }
+    };
+    /* Handle render action buttons */
+    const renderComponent = ({ key, label, buttonProps, icon, customRender }, option) => {
+        const actionButton = (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps, { 
+            // Handle hide action button except close button when filter is active
+            onClick: e => {
+                if (buttonProps && buttonProps.onClick) {
+                    buttonProps.onClick(e);
+                }
+                handleClickActionButton(key);
+            }, "$hide": key !== 'CLOSE' && !(filters === null || filters === void 0 ? void 0 : filters.length) }),
+            React.createElement(Flex, { align: "center", justify: "center", style: { height: 24, width: 24, flexShrink: 0 } },
+                React.createElement(Icon, { type: icon, size: (option === null || option === void 0 ? void 0 : option.iconSize) || 18 })),
+            `${label}`.toUpperCase()));
+        // If action has customer render props then return it not handle more
+        if (customRender) {
+            return actionButton;
+        }
+        switch (key) {
+            case 'SAVE': {
+                return (React.createElement(SaveFilterPopover, { open: openSaveFilterPopover, onApply: (name) => __awaiter(void 0, void 0, void 0, function* () {
+                        var _a;
+                        const existSavedFilter = (_a = savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.list) === null || _a === void 0 ? void 0 : _a.find(savedFilter => savedFilter.name.trim() === name);
+                        if (existSavedFilter) {
+                            modal.confirm({
+                                title: t(translations.dataTableFilter.replaceFilterSet.title).toString(),
+                                centered: true,
+                                content: t(translations.dataTableFilter.replaceFilterSet.description, {
+                                    filterName: name,
+                                }).toString(),
+                                icon: React.createElement("div", null),
+                                wrapClassName: EXCEPTION_OFF_FILTER_CLASS,
+                                okText: t(translations.global.replace).toString(),
+                                onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                                    return new Promise((resolve, reject) => {
+                                        onSaveFilter({
+                                            filters: filters || [],
+                                            name,
+                                            existSavedFilter,
+                                        })
+                                            .then(() => resolve(true))
+                                            .catch(() => reject());
+                                    });
+                                }),
+                            });
+                        }
+                        else {
+                            setState(prev => (Object.assign(Object.assign({}, prev), { saveFilterLoading: true })));
+                            yield onSaveFilter({
+                                filters: filters || [],
+                                name,
+                            });
+                            setState(prev => (Object.assign(Object.assign({}, prev), { saveFilterLoading: false, openSaveFilterPopover: false })));
+                        }
+                    }), onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { openSaveFilterPopover: false }))), loading: saveFilterLoading, onOpenChange: open => setState(prev => (Object.assign(Object.assign({}, prev), { openSaveFilterPopover: open }))) }, actionButton));
+            }
+            default:
+                return actionButton;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { align: "center", gap: 2 }, renderActionButtons({
+            renderComponent,
+            // CLOSE ACTION ALWAYS VISIBLE
+            actionButtons: Object.assign(Object.assign({}, actionButtons), { CLOSE: Object.assign({}, actionButtons === null || actionButtons === void 0 ? void 0 : actionButtons.CLOSE) }),
+            defaultActionOptions: FILTER_ACTION_OPTIONS,
+        })),
+        context));
+});

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FilterItem, FilterMetricItem } from '../../../types';
+type TFormType = {
+    operator: string;
+    value: any;
+};
+interface FilterConditionProps {
+    filterMetric: FilterMetricItem;
+    filterCondition?: FilterItem;
+    onCancel?: () => void;
+    onApply?: (values: TFormType) => void;
+}
+export declare const FilterCondition: React.FC<FilterConditionProps>;
+export {};

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

@@ -0,0 +1,99 @@
+// Libraries
+import React, { useEffect, useMemo } from 'react';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Select, Form } from '@antscorp/antsomi-ui/es/components/molecules';
+import { ApplyPopupContent } from '../../common/ApplyPopupContent';
+// Constants
+import { OPERATORS, OPERATORS_OPTION } from '@antscorp/antsomi-ui/es/constants/condition';
+import { renderValueField } from '../../../utils';
+import { EXCEPTION_OFF_FILTER_CLASS } from '../../../constants/filter';
+const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
+export const FilterCondition = props => {
+    // Props
+    const { filterMetric, filterCondition, onCancel, onApply } = props;
+    console.log('🚀 ~ filterMetric, filterCondition:', filterMetric, filterCondition);
+    // Hooks
+    const [form] = Form.useForm();
+    // Form
+    const operator = Form.useWatch('operator', form);
+    const value = Form.useWatch('value', form);
+    // Variables
+    const { name, dataType, operators } = filterMetric;
+    // Memos
+    const operatorList = useMemo(() => { var _a; return operators || Object.values(((_a = OPERATORS[dataType || '']) === null || _a === void 0 ? void 0 : _a.list) || []); }, [dataType, operators]);
+    const isDisableApply = useMemo(() => {
+        let isDisable = false;
+        switch (operator) {
+            case BETWEEN.value: {
+                const [firstValue, secondValue] = (value === null || value === void 0 ? void 0 : value.split('AND')) || [];
+                isDisable = isNaN(parseInt(firstValue)) || isNaN(parseInt(secondValue));
+                break;
+            }
+            case EXISTS.value:
+            case NOT_EXISTS.value: {
+                isDisable = false;
+                break;
+            }
+            default: {
+                if (Array.isArray(value) && !value.length) {
+                    isDisable = true;
+                }
+                else {
+                    isDisable = !value;
+                }
+                break;
+            }
+        }
+        return isDisable;
+    }, [operator, value]);
+    // Effects
+    /* Handle set default operator when mount */
+    useEffect(() => {
+        var _a;
+        form.setFieldsValue({
+            operator: ((_a = operatorList[0]) === null || _a === void 0 ? void 0 : _a.value) || '',
+        });
+    }, [form, operatorList]);
+    /* Update filter condition values */
+    useEffect(() => {
+        if (filterCondition) {
+            form.setFieldsValue({
+                operator: filterCondition.operator,
+                value: filterCondition.value,
+            });
+        }
+    }, [filterCondition, form]);
+    // Handlers
+    const onFinishForm = (values) => {
+        if (onApply) {
+            onApply(values);
+        }
+    };
+    const handleCancel = () => {
+        form.resetFields();
+        if (onCancel) {
+            onCancel();
+        }
+    };
+    return (React.createElement(ApplyPopupContent, { title: name, applyButtonProps: {
+            disabled: isDisableApply,
+        }, onCancel: handleCancel, onApply: () => form.submit() },
+        React.createElement(Form, { form: form, layout: "vertical", onFinish: onFinishForm },
+            React.createElement(Flex, { vertical: true, gap: 20 },
+                React.createElement(Form.Item, { name: "operator", noStyle: true },
+                    React.createElement(Select, { value: operator, options: operatorList, onChange: () => form.setFieldsValue({
+                            value: '',
+                        }), dropdownRender: menu => React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, menu) })),
+                React.createElement(Form.Item, { name: "value", noStyle: true }),
+                renderValueField({
+                    filterMetric,
+                    operator,
+                    value,
+                    onChangeValue: value => {
+                        form.setFieldsValue({
+                            value,
+                        });
+                    },
+                })))));
+};

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

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

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

@@ -0,0 +1,42 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const FilterConditionWrapper = styled.div `
+  .filter-condition {
+    &__body {
+      padding: 15px;
+    }
+
+    &__title {
+      font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSizeXL}px;
+      font-weight: 500;
+    }
+
+    &__footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      padding: 15px;
+      gap: 10px;
+      border-top: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+    }
+  }
+`;
+export const CloseButton = styled(Flex) `
+  width: 24px;
+  height: 24px;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+  }
+
+  i {
+    font-size: 12px;
+  }
+`;