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

package/es/components/organism/ContentSources/reducer.js

@@ -0,0 +1,112 @@
+// Libraries
+import produce from 'immer';
+import { has } from 'lodash';
+// Utils
+import { initGroup as initContentSourceGroup } from './utils';
+// Constants
+import { CONTENT_SOURCES_SETTINGS_DEFAULT } from './constants';
+export const initialContentSourceState = {
+    serviceAuth: {},
+    mode: 'CDP',
+    contentSources: CONTENT_SOURCES_SETTINGS_DEFAULT,
+};
+export const contentSourceReducer = (state, action) => produce(state, draft => {
+    switch (action.type) {
+        case 'SERVICE_AUTH': {
+            const { serviceAuth } = action.payload;
+            draft.serviceAuth = serviceAuth;
+            break;
+        }
+        case 'MODE_VIEW': {
+            const { mode } = action.payload;
+            draft.mode = mode;
+            break;
+        }
+        case 'UPDATE_CONTENT_SOURCE_SETTINGS': {
+            const { contentSources } = action.payload;
+            draft.contentSources = contentSources;
+            break;
+        }
+        case 'EXPANDED': {
+            const { expanded } = action.payload;
+            draft.contentSources.expanded = expanded;
+            break;
+        }
+        case 'ADD_CONTENT_SOURCE': {
+            let i = 1;
+            let groupName = `Group ${i}`;
+            while (state.contentSources.groups.some(g => g.groupName === groupName)) {
+                ++i;
+                groupName = `Group ${i}`;
+            }
+            const initContentSource = initContentSourceGroup(groupName);
+            draft.contentSources.groups.push(initContentSource);
+            draft.contentSources.expanded.push(initContentSource.groupId);
+            break;
+        }
+        case 'SET_CONTENT_SOURCE_GROUP': {
+            const { groupId, values } = action.payload;
+            const index = state.contentSources.groups.findIndex(g => g.groupId === groupId);
+            if (index !== -1) {
+                const group = state.contentSources.groups[index];
+                draft.contentSources.groups[index] = Object.assign(Object.assign({}, group), values);
+            }
+            break;
+        }
+        case 'DELETE_CONTENT_SOURCE_GROUP': {
+            const { groupId } = action.payload;
+            const index = state.contentSources.groups.findIndex(g => g.groupId === groupId);
+            if (index !== -1) {
+                draft.contentSources.groups.splice(index, 1);
+                draft.contentSources.expanded = state.contentSources.expanded.filter(id => id !== groupId);
+            }
+            break;
+        }
+        case 'SET_CONTENT_SOURCE_GROUP_BODATA': {
+            const { boDataByGroupId } = action.payload;
+            draft.contentSources.groups.map(g => {
+                if (has(boDataByGroupId, g.groupId)) {
+                    g.data = boDataByGroupId[g.groupId];
+                }
+                return g;
+            });
+            break;
+        }
+        case 'EMIT_ITEM_TYPE_CHANGE': {
+            draft.contentSources.emitItemTypeChange += 1;
+            break;
+        }
+        default: {
+            return state;
+        }
+    }
+});
+// Action Creators
+export const setContentSourceGroup = (payload) => ({
+    type: 'SET_CONTENT_SOURCE_GROUP',
+    payload,
+});
+export const deleteContentSourceGroup = (groupId) => ({
+    type: 'DELETE_CONTENT_SOURCE_GROUP',
+    payload: { groupId },
+});
+export const updateModeView = (mode) => ({
+    type: 'MODE_VIEW',
+    payload: { mode },
+});
+export const updateContentSourceSettings = (contentSources) => ({
+    type: 'UPDATE_CONTENT_SOURCE_SETTINGS',
+    payload: {
+        contentSources,
+    },
+});
+export const setContentSourceGroupBOData = (boDataByGroupId) => ({
+    type: 'SET_CONTENT_SOURCE_GROUP_BODATA',
+    payload: {
+        boDataByGroupId,
+    },
+});
+export const emitItemTypeChange = () => ({
+    type: 'EMIT_ITEM_TYPE_CHANGE',
+    payload: null,
+});

package/es/components/organism/ContentSources/styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ContentSourceModeView } from './types';
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperPanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCollapsePanel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/collapse/CollapsePanel").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const WrapperFallback: import("styled-components").StyledComponent<"div", any, {
+    mode: ContentSourceModeView;
+}, never>;

package/es/components/organism/ContentSources/styled.js

@@ -0,0 +1,58 @@
+import CollapsePanel from 'antd/es/collapse/CollapsePanel';
+import styled, { css } from 'styled-components';
+export const ContentContainer = styled.div `
+  .no-border-top.antsomi-collapse {
+    border-block-start: none;
+  }
+
+  .input__wrapper .input-custom-size {
+    font-weight: bold;
+    font-size: 14px;
+  }
+`;
+export const WrapperPanelHeader = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 32px;
+  gap: 32px;
+  width: 100%;
+`;
+export const StyledCollapsePanel = styled(CollapsePanel) `
+  border-bottom: none !important;
+
+  .ant-collapse-header {
+    flex-wrap: wrap !important;
+    padding: 12px 0px !important;
+
+    .ant-collapse-arrow {
+      margin-right: 0px !important;
+      right: 0px !important;
+    }
+  }
+
+  .ant-collapse-content {
+    border-top: none !important;
+    border-bottom: none !important;
+
+    .ant-collapse-content-box {
+      padding: 8px 0px 16px;
+    }
+  }
+
+  i[type='icon-antsomi-expand-more'] {
+    top: 27px !important;
+  }
+`;
+export const WrapperFallback = styled.div `
+  display: flex;
+
+  ${props => props.mode === 'CDP'
+    ? css `
+          align-items: center;
+        `
+    : css `
+          flex-direction: column;
+          gap: 12px;
+        `}
+`;

package/es/components/organism/ContentSources/types.d.ts

@@ -0,0 +1,149 @@
+import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
+import { TFilters } from '../../atoms/InputDynamic/types';
+export interface JourneySettings {
+    unsubscribeSegmentType?: string | null;
+    triggerType?: string | null;
+    triggerEvent?: {
+        eventActionId: number | string;
+        eventCategoryId: number | string;
+        insightPropertyIds: any[];
+    };
+}
+export type ContentSourceModeView = 'CDP' | 'MEDIA';
+export type TRanking = {
+    type: 'algorithms' | 'custom';
+    algorithms: {
+        sort: 'mix' | 'order';
+        value: {
+            value: string;
+            quantity: number;
+            by?: string;
+            last?: number;
+            to?: string;
+            sort_type?: 'desc' | 'asc';
+            [key: string]: any;
+        }[];
+        filters: string[];
+    };
+    custom: string;
+};
+export type TContentSourceGroup = {
+    groupId: string;
+    groupName: string;
+    filters: TFilters;
+    ranking: TRanking;
+    itemTypeId: number | null;
+    itemTypeName: string | null;
+    itemTypeDisplay: string | null;
+    fallback: string;
+    level?: string;
+    data?: Record<string, any>[];
+};
+export type TContentSourceSettings = {
+    groups: TContentSourceGroup[];
+    expanded: string[];
+    isLoadingDataBO: boolean;
+    emitItemTypeChange: number;
+};
+export interface HideOptionTypes {
+    filter?: boolean;
+    level?: boolean;
+    ranking?: boolean;
+}
+export type TRelationship = {
+    enabled: 1 | 0;
+    parent_attr: string;
+    recommendation_level: string;
+};
+interface Action {
+    type: string;
+    payload: any;
+}
+interface ActionServiceAuth extends Action {
+    type: 'SERVICE_AUTH';
+    payload: {
+        serviceAuth: TServiceAuth;
+    };
+}
+interface ActionUpdateSource extends Action {
+    type: 'BO_TYPE';
+    payload: {
+        itemTypeId: TContentSourceGroup['itemTypeId'];
+    };
+}
+interface ActionUpdateExpanded extends Action {
+    type: 'EXPANDED';
+    payload: {
+        expanded: string[];
+    };
+}
+interface ActionUpdateFilter extends Action {
+    type: 'FILTER';
+    payload: {
+        conditions: TContentSourceGroup['filters'];
+    };
+}
+interface ActionUpdateFallback extends Action {
+    type: 'FALLBACK';
+    payload: {
+        fallback: TContentSourceGroup['fallback'];
+    };
+}
+interface ActionUpdateName extends Action {
+    type: 'NAME';
+    payload: {
+        name: string;
+    };
+}
+interface ActionUpdateAlgorithms extends Action {
+    type: 'ALGORITHMS';
+    payload: {
+        ranking: TRanking;
+    };
+}
+interface ActionUpdateLevel extends Action {
+    type: 'LEVEL';
+    payload: {
+        level?: string;
+    };
+}
+interface ActionAddContentSource extends Action {
+    type: 'ADD_CONTENT_SOURCE';
+}
+export interface ActionSetContentSourceGroup extends Action {
+    type: 'SET_CONTENT_SOURCE_GROUP';
+    payload: {
+        groupId: string;
+        values: Partial<TContentSourceGroup>;
+        ignoreUndoAction?: boolean;
+    };
+}
+export interface ActionDeleteContentSourceGroup extends Action {
+    type: 'DELETE_CONTENT_SOURCE_GROUP';
+    payload: {
+        groupId: string;
+    };
+}
+export interface ActionUpdateModeView extends Action {
+    type: 'MODE_VIEW';
+    payload: {
+        mode: ContentSourceModeView;
+    };
+}
+export interface ActionUpdateContentSourceSettings extends Action {
+    type: 'UPDATE_CONTENT_SOURCE_SETTINGS';
+    payload: {
+        contentSources: TContentSourceSettings;
+    };
+}
+export interface ActionSetContentSourceGroupBOData extends Action {
+    type: 'SET_CONTENT_SOURCE_GROUP_BODATA';
+    payload: {
+        boDataByGroupId: Record<string, any[]>;
+    };
+}
+export interface ActionEmitItemTypeChange extends Action {
+    type: 'EMIT_ITEM_TYPE_CHANGE';
+}
+export type UpdateGroupAction = ActionUpdateContentSourceSettings | ActionSetContentSourceGroupBOData | ActionServiceAuth | ActionAddContentSource | ActionUpdateModeView | ActionDeleteContentSourceGroup | ActionSetContentSourceGroup | ActionUpdateSource | ActionUpdateFilter | ActionUpdateFallback | ActionUpdateName | ActionUpdateAlgorithms | ActionUpdateExpanded | ActionUpdateLevel | ActionEmitItemTypeChange;
+export {};

package/es/components/organism/ContentSources/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/ContentSources/utils.d.ts

@@ -0,0 +1,29 @@
+import { TContentSourceGroup } from './types';
+export declare const initGroup: (groupName: string) => TContentSourceGroup;
+export declare const TRANSLATE_TEXT: {
+    group: string;
+    selectCsTitle: string;
+    csTitle: string;
+    selectAnItem: string;
+    addGroup: string;
+    fallback: string;
+    groupName: string;
+};
+export declare const buildOptionArchive: (list: any[], selected: any) => any[];
+export declare const convertValue: (listBO: any, itemTypeId: any) => any;
+export declare const isCheckBOArchiveDelete: (listBO: any, itemTypeId: any) => string;
+export declare const isCheckStatusAttr: (listBO: any, itemTypeId: any, listAttribute: any, field: any) => {
+    errorMessage: string;
+    isDisable: boolean;
+};
+export declare const checkStatusCollection: ({ listBO, itemTypeId, listCollection, field, checkDisable, }: {
+    listBO?: any[];
+    itemTypeId?: number | null;
+    listCollection?: any[];
+    field?: string;
+    checkDisable?: boolean;
+}) => {
+    errorMessage: string;
+    isDisable: boolean;
+};
+export declare const optionNotExitsValue: (options: any, value: any) => any;

package/es/components/organism/ContentSources/utils.js

@@ -0,0 +1,150 @@
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Utils
+import { random } from '@antscorp/antsomi-ui/es/utils';
+// Constants
+import { FILTERS_DEFAULT, PRODUCT_RANKING_DEFAULT, FALLBACK_SELECTION, } from '@antscorp/antsomi-ui/es/constants/contentSource';
+import { ATTRIBUTE_STATUS, BO_STATUS, COLLECTION_STATUS, } from '../../molecules/AddDynamicContent/constants';
+export const initGroup = (groupName) => ({
+    groupId: `csg${random(5)}`,
+    groupName,
+    itemTypeId: null,
+    itemTypeName: null,
+    itemTypeDisplay: null,
+    filters: FILTERS_DEFAULT,
+    ranking: PRODUCT_RANKING_DEFAULT,
+    fallback: FALLBACK_SELECTION.MOST_SEEN.value,
+    level: undefined,
+    data: [],
+});
+const { t } = i18nInstance;
+export const TRANSLATE_TEXT = {
+    group: t(translations.group.title, 'Group'),
+    selectCsTitle: t(translations.selectContentSource.title, 'Content source'),
+    csTitle: t(translations.contentSource.title, 'Content Source'),
+    selectAnItem: t(translations.selectAnItem.title, 'Select an item'),
+    addGroup: t(translations.addGroup.title, 'Add Group'),
+    fallback: t(translations.fallback.title, 'Fallback'),
+    groupName: t(translations.groupName.title, 'Group Name'),
+};
+export const buildOptionArchive = (list, selected) => {
+    const arrSelected = Array.isArray(selected) ? selected : [selected];
+    const result = (list === null || list === void 0 ? void 0 : list.filter(each => parseInt(each.status) !== 4 || arrSelected.includes(each.value))) || [];
+    return result;
+};
+export const convertValue = (listBO, itemTypeId) => {
+    if (itemTypeId) {
+        const selected = listBO === null || listBO === void 0 ? void 0 : listBO.find((bo) => bo.value === itemTypeId);
+        if (!selected) {
+            return `[ID - ${itemTypeId}]`;
+        }
+    }
+    return itemTypeId;
+};
+export const isCheckBOArchiveDelete = (listBO, itemTypeId) => {
+    let errorMessage = '';
+    if (itemTypeId) {
+        const selected = listBO === null || listBO === void 0 ? void 0 : listBO.find((bo) => bo.value === itemTypeId);
+        if (selected) {
+            if (BO_STATUS[selected.model.status]) {
+                errorMessage = BO_STATUS[selected.model.status].errorMessage;
+            }
+        }
+        else {
+            errorMessage = BO_STATUS.DELETE.errorMessage;
+        }
+    }
+    return errorMessage;
+};
+export const isCheckStatusAttr = (listBO, itemTypeId, listAttribute, field) => {
+    let errorMessage = '';
+    let isDisable = false;
+    const isEmptyField = !field || (Array.isArray(field) && !field.length);
+    // If field is empty then return empty errorMessage
+    if (isEmptyField || !(listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.length)) {
+        return {
+            errorMessage: '',
+            isDisable: false,
+        };
+    }
+    const selected = listBO === null || listBO === void 0 ? void 0 : listBO.find((bo) => bo.value === itemTypeId);
+    const selectedAttr = listAttribute === null || listAttribute === void 0 ? void 0 : listAttribute.find((bo) => Array.isArray(field) ? field.includes(bo.value) : bo.value === field);
+    // TH1 : BO is Archive or Delete
+    if (itemTypeId) {
+        if (selected) {
+            if (BO_STATUS[selected.model.status]) {
+                errorMessage = BO_STATUS[selected.model.status].errorMessage;
+                isDisable = true;
+            }
+            else if (selectedAttr) {
+                if (ATTRIBUTE_STATUS[selectedAttr.status]) {
+                    errorMessage = ATTRIBUTE_STATUS[selectedAttr.status].errorMessage;
+                }
+            }
+            else {
+                errorMessage = field ? ATTRIBUTE_STATUS.DELETE.errorMessage : '';
+            }
+        }
+        else {
+            errorMessage = BO_STATUS.DELETE.errorMessage;
+            isDisable = true;
+        }
+    }
+    return { errorMessage, isDisable };
+};
+export const checkStatusCollection = ({ listBO, itemTypeId, listCollection, field, checkDisable, }) => {
+    let errorMessage = '';
+    let isDisable = false;
+    const isEmptyField = !field || (Array.isArray(field) && !field.length);
+    // If field is empty, listAttribute is empty array then return empty errorMessage
+    if (isEmptyField || !(listCollection === null || listCollection === void 0 ? void 0 : listCollection.length)) {
+        return {
+            errorMessage: '',
+            isDisable: false,
+        };
+    }
+    const selectedAttrs = listCollection === null || listCollection === void 0 ? void 0 : listCollection.filter(bo => Array.isArray(field) ? field.includes(bo.value) : bo.value === field);
+    if (!(selectedAttrs === null || selectedAttrs === void 0 ? void 0 : selectedAttrs.length)) {
+        errorMessage = COLLECTION_STATUS.DELETE.errorMessage;
+    }
+    else {
+        const selectedAttrError = selectedAttrs.find(selectedAttr => COLLECTION_STATUS[selectedAttr.status]);
+        if (selectedAttrError) {
+            switch (true) {
+                case selectedAttrError.status === COLLECTION_STATUS[4].value:
+                    errorMessage = COLLECTION_STATUS[4].errorMessage;
+                    break;
+                case selectedAttrError.status === COLLECTION_STATUS[2].value && checkDisable:
+                    errorMessage = COLLECTION_STATUS[2].errorMessage;
+                    break;
+                default:
+                    break;
+            }
+        }
+    }
+    if (Array.isArray(listBO) && !!itemTypeId) {
+        const selectedBO = listBO === null || listBO === void 0 ? void 0 : listBO.find(bo => bo.value === itemTypeId);
+        if (!selectedBO) {
+            errorMessage = BO_STATUS.DELETE.errorMessage;
+            isDisable = true;
+        }
+        else {
+            if (BO_STATUS[selectedBO.status]) {
+                errorMessage = BO_STATUS[selectedBO.status].errorMessage;
+                isDisable = true;
+            }
+        }
+    }
+    return { errorMessage, isDisable };
+};
+export const optionNotExitsValue = (options, value) => {
+    const arrValue = Array.isArray(value) ? value : [value];
+    if (value) {
+        const selected = options === null || options === void 0 ? void 0 : options.find((item) => arrValue.includes(item.value));
+        if (!selected) {
+            return `[ID - ${value}]`;
+        }
+    }
+    return value;
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DataTableProps } from './types';
+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

@@ -0,0 +1,46 @@
+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 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 { useDataTableStore } from './hooks/useDataTableStore';
+function DataTableComponent(props) {
+    // Hooks
+    const { pagination, toolbar, setPagination } = useDataTable(props);
+    const { show: showToolbar = true } = toolbar || {};
+    return (React.createElement(DataTableWrapper, null,
+        !!showToolbar && React.createElement(Toolbar, null),
+        React.createElement(Table, null),
+        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 { store } = props, restOfProps = __rest(props, ["store"]);
+    const defaultStore = useDataTableStore(restOfProps);
+    return (React.createElement(AntdTableConfigProvider, null,
+        React.createElement(DataTableProvider, { store: store || defaultStore },
+            React.createElement(DataTableComponent, Object.assign({}, restOfProps)))));
+}
+DataTable.useDataTableStore = useDataTableStore;

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,34 @@
+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;
+  flex-shrink: 0;
+  cursor: pointer;
+`;
+export const AddButton = memo(props => {
+    const { show = true } = 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,48 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+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';
+// Constants
+import { EXCEPTION_OFF_FILTER_CLASS } from '../../constants/filter';
+export const AddFilterButton = memo(() => {
+    const { t } = i18nInstance;
+    const { openPopover, selectedFilterMetric, matchesAny, onSelectFilterMetric, onApplyFilterMetricCondition, onClickAddFilter, onChangeFilterCondition, onMatchesAnyLoadMore, setState: setAddFilterConditionState, } = useAddFilterCondition();
+    return (React.createElement(Popover, { open: openPopover, content: React.createElement("div", { className: EXCEPTION_OFF_FILTER_CLASS }, selectedFilterMetric ? (React.createElement(FilterCondition, { filterMetric: selectedFilterMetric, matchesAny: matchesAny, onCancel: () => onSelectFilterMetric(undefined), onApply: ({ operator, value }) => {
+                onApplyFilterMetricCondition({
+                    filterMetric: selectedFilterMetric,
+                    operator,
+                    value,
+                });
+                onSelectFilterMetric(undefined);
+                setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
+            }, onLoadMore: () => onMatchesAnyLoadMore(selectedFilterMetric.id), onChange: condition => {
+                const { id, dataType } = selectedFilterMetric;
+                const { operator, value } = condition || {};
+                onChangeFilterCondition({
+                    column: id,
+                    operator,
+                    value,
+                    dataType,
+                });
+            } })) : (React.createElement(SavedFilterAndMetrics, { onSelectFilterMetric: onSelectFilterMetric, onSelectSavedFilter: () => {
+                setAddFilterConditionState(prev => (Object.assign(Object.assign({}, prev), { openPopover: false })));
+            } }))), trigger: ['click'], overlayInnerStyle: {
+            width: 300,
+            padding: 0,
+            overflow: selectedFilterMetric ? 'visible' : 'hidden',
+        }, 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 {};