@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,2 @@
+export * from './Filter';
+export type * from './types';

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

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

package/es/components/organism/Filter/providers/AntdFilterConfigProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ConfigProviderProps } from 'antd';
+interface AntdConfigProviderV2Props extends ConfigProviderProps {
+}
+export declare const AntdFilterConfigProvider: React.FC<AntdConfigProviderV2Props>;
+export {};

package/es/components/organism/Filter/providers/AntdFilterConfigProvider.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 { ConfigProvider } from 'antd';
+// Constants
+import { FILTER_THEME } from '../constants';
+export const AntdFilterConfigProvider = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(ConfigProvider, Object.assign({ theme: FILTER_THEME }, restProps), children));
+};

package/es/components/organism/Filter/providers/FilterProvider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FilterProps } from '../types';
+interface FilterProviderProps extends Partial<FilterProps> {
+}
+export declare const FilterProvider: React.FC<React.PropsWithChildren<FilterProviderProps>>;
+export {};

package/es/components/organism/Filter/providers/FilterProvider.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;
+};
+// Contexts
+import React, { useRef } from 'react';
+// Contexts
+import { FilterContext } from '../contexts/FilterContext';
+// Sore
+import { createFilterStore } from '../store/FilterStore';
+// Hooks
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+export const FilterProvider = props => {
+    const { children } = props, restOfProps = __rest(props, ["children"]);
+    console.log('🚀 ~ restOfProps:', restOfProps);
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = createFilterStore(restOfProps);
+    }
+    useDeepCompareEffect(() => {
+        if (storeRef.current) {
+            storeRef.current.getState().setFilter(restOfProps);
+        }
+    }, [restOfProps]);
+    return React.createElement(FilterContext.Provider, { value: storeRef.current }, children);
+};

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

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

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

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

package/es/components/organism/Filter/store/FilterStore.d.ts

@@ -0,0 +1,2 @@
+import { FilterProps, FilterStore } from '../types';
+export declare const createFilterStore: (props: Partial<FilterProps>) => import("zustand").StoreApi<FilterStore>;

package/es/components/organism/Filter/store/FilterStore.js

@@ -0,0 +1,6 @@
+// Libraries
+import deepmerge from 'deepmerge';
+import { createStore } from 'zustand';
+// Constants
+import { FILTER_INITIAL_STATE } from '../constants';
+export const createFilterStore = (props) => createStore(set => (Object.assign(Object.assign({}, deepmerge(FILTER_INITIAL_STATE, props)), { setFilter: newFilter => set(store => (Object.assign(Object.assign({}, store), newFilter))) })));

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

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

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

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

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

@@ -0,0 +1,10 @@
+/// <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, {
+    $isFilterActive: boolean;
+}, never>;
+export declare const FilterSelectFieldsContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterConditionListWrapper: 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 StyledFilterItem: 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 FilterMetricLabel: 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 IconButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,134 @@
+// 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';
+const TOKEN = {
+    toolbarHeight: 54,
+    toolbarPadding: '5px 15px',
+    filterToolbarColor: '#E8F0FE',
+};
+const { filterToolbarColor, toolbarHeight, toolbarPadding } = TOKEN;
+export const FilterWrapper = styled(Flex) `
+  width: 100%;
+  overflow: auto;
+  min-height: ${toolbarHeight}px;
+  padding: ${toolbarPadding};
+
+  ${p => css `
+    background-color: ${p.$isFilterActive ? filterToolbarColor : globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  `}
+`;
+/* Filter Item */
+export const FilterSelectFieldsContent = styled.div `
+  .search-input {
+    margin-top: 8px;
+
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+  }
+
+  .saved-filter {
+    &__item {
+      .remove-btn {
+        opacity: 0;
+        transform: all 300ms;
+      }
+
+      &:hover {
+        .remove-btn {
+          opacity: 1;
+        }
+      }
+    }
+  }
+`;
+/* Filter condition wrapper */
+export const FilterConditionListWrapper = styled(Flex) ``;
+export const StyledFilterItem = styled(Flex) `
+  position: relative;
+  height: 30px;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+  border-radius: 30px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+  width: fit-content;
+  max-width: 100%;
+  cursor: pointer;
+
+  > span:not(.filter-item__value) {
+    flex-shrink: 0;
+  }
+
+  * {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+  }
+
+  .filter-item {
+    &__value {
+      flex-shrink: 1;
+    }
+    &__close-btn {
+      position: absolute;
+      border-radius: 100%;
+      width: 20px;
+      height: 20px;
+      right: 5px;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: all 200ms;
+    }
+  }
+
+  &:hover {
+    .filter-item__close-btn {
+      opacity: 1;
+    }
+  }
+`;
+StyledFilterItem.defaultProps = {
+    align: 'center',
+    gap: 5,
+};
+export const FilterButton = styled.div `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+export const FilterMetricLabel = styled(Flex) `
+  width: 100%;
+
+  i[class*='ants-icon-ants-expand-more'] {
+    transform: rotate(-90deg);
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+`;
+export const IconButton = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+  flex-shrink: 0;
+
+  i {
+    font-size: 14px;
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+
+  &:hover {
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+    }
+  }
+`;

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

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { MatchesAnyItem } from '../../../molecules';
+import { FILTER_ACTION_KEYS } from '../constants';
+import { TActionButton, TConfirmResponse, TOperatorKey } from '@antscorp/antsomi-ui/es/types';
+export type TFormatFilterValue = Partial<Record<TOperatorKey, (value: any) => unknown>>;
+export type TActionFilterButtonKey<T extends string[] = []> = (typeof FILTER_ACTION_KEYS)[keyof typeof FILTER_ACTION_KEYS] | T[number];
+export interface SavedFilterItem {
+    id: string;
+    name: string;
+    removable?: boolean;
+}
+export interface FilterMetricItem {
+    id: string | number;
+    name: string;
+    dataType?: string;
+    children?: FilterMetricItem[];
+    operators?: {
+        label: string;
+        value: string;
+    }[];
+}
+export interface SavedFilter {
+    list?: SavedFilterItem[];
+    selected?: string | number;
+    onRemove?: (savedFilter: SavedFilterItem) => Promise<TConfirmResponse>;
+    onSelect?: (savedFilter: SavedFilterItem) => void;
+}
+export interface FilterItem {
+    column: string | number;
+    dataType?: string;
+    operator: string;
+    type?: number;
+    value: any;
+}
+export type TOnSaveFilterArgs = {
+    existSavedFilter?: SavedFilterItem;
+    name: string;
+    filters: FilterItem[];
+};
+export type TFilterActionButton<T extends TActionFilterButtonKey> = TActionButton & T extends 'CLOSE' ? {} : {};
+export interface FilterProps<TActionKey extends string[] = []> {
+    isFilterActive?: boolean;
+    savedFilter?: SavedFilter;
+    filterMetrics?: FilterMetricItem[];
+    filters?: FilterItem[];
+    matchesAny?: {
+        list?: MatchesAnyItem[];
+        isLoading?: boolean;
+    };
+    rightContent?: React.ReactNode;
+    leftContent?: React.ReactNode;
+    actionButtons?: Partial<Record<TActionFilterButtonKey<TActionKey>, TActionButton>>;
+    onChangeFilters?: (filters: FilterItem[]) => void;
+    onSaveFilter?: (args: TOnSaveFilterArgs) => Promise<TConfirmResponse>;
+    /** Handle callback when filter condition changed */
+    onChangeFilterCondition?: (filterItem: FilterItem) => void;
+    /** Handle callback when matches any load more */
+    onMatchesAnyLoadMore?: (metricId?: FilterMetricItem['id']) => void;
+}
+export type TApiFilter = Record<string, any>[];
+export interface FilterStore extends FilterProps {
+    setFilter: (filter: Partial<FilterProps>) => void;
+}

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

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

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { MenuProps } from 'antd';
+import { FilterItem, FilterMetricItem, TApiFilter, TFormatFilterValue } from '../types';
+import { SavedFilter } from '@antscorp/antsomi-ui/es/models/DataTable/SavedFilter';
+import { FilterProps } from '../..';
+type MenuItem = Required<MenuProps>['items'][number];
+type TSerializeFilterMetricsToMenuItems = {
+    filterMetrics: FilterMetricItem[];
+    level?: number;
+    onSelectFilterMetric?: MenuProps['onSelect'];
+    onClickFilterMetric?: (filterMetric: FilterMetricItem) => void;
+};
+type TRenderValueField = {
+    filterMetric: FilterMetricItem;
+    operator: string;
+    value?: any;
+    matchesAny?: FilterProps['matchesAny'];
+    onChangeValue?: (value: any) => void;
+    onLoadMore?: () => void;
+};
+type TGetFilterMetricByName = {
+    filterMetrics: FilterMetricItem[];
+    name: string;
+};
+export declare const serializeFilterMetricsToMenuItems: ({ filterMetrics, level, onSelectFilterMetric, onClickFilterMetric, }: TSerializeFilterMetricsToMenuItems) => MenuItem[];
+/**
+ * Flattens an array of filter metrics, including their nested children, into a single-level array.
+ *
+ * @param {FilterMetric[]} filterMetrics - The array of filter metrics to flatten. Each filter metric can contain
+ *                                         nested children which will also be included in the flattened result.
+ * @returns {FilterMetric[]} A single-level array of filter metrics, including all nested children.
+ *
+ * @example
+ * // Given the following input:
+ * const filterMetrics = [
+ *   {
+ *     id: 1,
+ *     name: 'Metric 1',
+ *     children: [
+ *       {
+ *         id: 2,
+ *         name: 'Metric 1.1',
+ *         children: []
+ *       },
+ *       {
+ *         id: 3,
+ *         name: 'Metric 1.2',
+ *         children: [
+ *           {
+ *             id: 4,
+ *             name: 'Metric 1.2.1',
+ *             children: []
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     id: 5,
+ *     name: 'Metric 2',
+ *     children: []
+ *   }
+ * ];
+ *
+ * // The output will be:
+ * const result = flatFilterMetrics(filterMetrics);
+ * // result will be:
+ * // [
+ * //   { id: 2, name: 'Metric 1.1', children: [] },
+ * //   { id: 4, name: 'Metric 1.2.1', children: [] },
+ * //   { id: 3, name: 'Metric 1.2', children: [...] },
+ * //   { id: 1, name: 'Metric 1', children: [...] },
+ * //   { id: 5, name: 'Metric 2', children: [] }
+ * // ]
+ */
+export declare const flatFilterMetrics: (filterMetrics: FilterMetricItem[]) => FilterMetricItem[];
+export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onLoadMore, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
+/**
+ * Retrieves a filter metric by its name from a collection of filter metrics.
+ *
+ * @typedef {Object} Metric
+ * @property {string} name - The name of the metric.
+ * @property {any} [otherProperties] - Other properties of the metric.
+ *
+ * @typedef {Object} TGetFilterMetricByName
+ * @property {Metric[]} filterMetrics - An array of filter metrics.
+ * @property {string} name - The name of the metric to find.
+ *
+ * @param {TGetFilterMetricByName} params - The parameters containing filter metrics and the name of the metric to find.
+ * @returns {Metric|undefined} The metric with the specified name, or undefined if not found.
+ */
+export declare const getFilterMetricByName: ({ filterMetrics, name, }: TGetFilterMetricByName) => FilterMetricItem | undefined;
+export declare const mapFiltersToRules: (filters: FilterItem[]) => SavedFilter['rules'];
+export declare const mapRulesToFilters: (rules: SavedFilter['rules']) => FilterItem[];
+export declare const mapFiltersToApiFilters: (filters: FilterItem[], includeDataType?: boolean, formatFilterValue?: TFormatFilterValue) => TApiFilter;
+export {};

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

@@ -0,0 +1,244 @@
+// Libraries
+import React from 'react';
+import { isEmpty } from 'lodash';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import dayjs from 'dayjs';
+// Components
+import { Popover, Typography, Icon, FormatInputNumber, Flex, Input } from '../../../atoms';
+import { DATE_TIME_FORMAT, DATE_TIME_FORMAT_DISPLAY, METRIC_TYPE, } from '@antscorp/antsomi-ui/es/constants';
+import { Menu } from '../..';
+import { DatePicker, MatchesAnySelect } from '../../../molecules';
+// Styled
+import { FilterMetricLabel } from '../styled';
+import { OPERATORS_CODE } from '@antscorp/antsomi-ui/es/constants/condition';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { EXCEPTION_OFF_FILTER_CLASS, METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_TYPE, } from '../constants';
+const { MATCHES, MATCHES_ANY, NOT_MATCHES, ON, BEFORE, BEFORE_DATE, AFTER, AFTER_DATE } = OPERATORS_CODE;
+const { t } = i18nInstance;
+const { Text } = Typography;
+/* Filter */
+export const serializeFilterMetricsToMenuItems = ({ filterMetrics = [], level = 0, onSelectFilterMetric, onClickFilterMetric, }) => {
+    const isShowPopover = level >= 1;
+    return filterMetrics.map(metric => {
+        const isHasChild = Array.isArray(metric.children) && metric.children.length;
+        /* Format label of filter metric */
+        const label = (React.createElement(FilterMetricLabel, { align: "center", justify: "space-between" },
+            React.createElement(Typography.Text, { className: "ants-w-full", ellipsis: { tooltip: true } }, metric.name),
+            isHasChild && isShowPopover ? React.createElement(Icon, { type: "icon-ants-expand-more", size: 20 }) : null));
+        const menuItem = {
+            key: metric.id,
+            label: !isEmpty(metric.children) && isShowPopover ? (React.createElement(Popover, { content: React.createElement(Menu, { items: serializeFilterMetricsToMenuItems({
+                        filterMetrics: metric.children || [],
+                        level: level + 1,
+                        onSelectFilterMetric,
+                        onClickFilterMetric,
+                    }), mode: "inline", inlineIndent: 5 }), placement: "rightTop", arrow: false, align: { offset: [10, -10] }, overlayInnerStyle: { width: 250, padding: 0 } }, label)) : (label),
+        };
+        return Object.assign(Object.assign(Object.assign({}, menuItem), (!!metric.children &&
+            !isEmpty(metric.children) &&
+            !level && {
+            children: serializeFilterMetricsToMenuItems({
+                filterMetrics: metric.children || [],
+                level: level + 1,
+                onSelectFilterMetric,
+                onClickFilterMetric,
+            }),
+        })), { onClick: () => onClickFilterMetric && !isHasChild && onClickFilterMetric(metric) });
+    });
+};
+/**
+ * Flattens an array of filter metrics, including their nested children, into a single-level array.
+ *
+ * @param {FilterMetric[]} filterMetrics - The array of filter metrics to flatten. Each filter metric can contain
+ *                                         nested children which will also be included in the flattened result.
+ * @returns {FilterMetric[]} A single-level array of filter metrics, including all nested children.
+ *
+ * @example
+ * // Given the following input:
+ * const filterMetrics = [
+ *   {
+ *     id: 1,
+ *     name: 'Metric 1',
+ *     children: [
+ *       {
+ *         id: 2,
+ *         name: 'Metric 1.1',
+ *         children: []
+ *       },
+ *       {
+ *         id: 3,
+ *         name: 'Metric 1.2',
+ *         children: [
+ *           {
+ *             id: 4,
+ *             name: 'Metric 1.2.1',
+ *             children: []
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     id: 5,
+ *     name: 'Metric 2',
+ *     children: []
+ *   }
+ * ];
+ *
+ * // The output will be:
+ * const result = flatFilterMetrics(filterMetrics);
+ * // result will be:
+ * // [
+ * //   { id: 2, name: 'Metric 1.1', children: [] },
+ * //   { id: 4, name: 'Metric 1.2.1', children: [] },
+ * //   { id: 3, name: 'Metric 1.2', children: [...] },
+ * //   { id: 1, name: 'Metric 1', children: [...] },
+ * //   { id: 5, name: 'Metric 2', children: [] }
+ * // ]
+ */
+export const flatFilterMetrics = (filterMetrics) => filterMetrics.reduce((acc, cur) => {
+    if (Array.isArray(cur.children) && cur.children.length) {
+        return [...acc, ...flatFilterMetrics(cur.children), cur];
+    }
+    return [...acc, cur];
+}, []);
+/* Render Value Field */
+export const renderValueField = ({ filterMetric, operator, value, matchesAny, onLoadMore = () => { }, onChangeValue = () => { }, }) => {
+    const { dataType, name } = filterMetric;
+    switch (operator) {
+        case OPERATORS_CODE.GREATER_THAN:
+        case OPERATORS_CODE.GREATER_THAN_EQUAL:
+        case OPERATORS_CODE.LESS_THAN:
+        case OPERATORS_CODE.LESS_THAN_EQUAL: {
+            return (React.createElement(FormatInputNumber, { value: value, placeholder: `${t(translations.format)}: 1,234.560`, onChange: onChangeValue, style: { width: '100%' } }));
+        }
+        case OPERATORS_CODE.BETWEEN: {
+            const renderBetweenValue = () => {
+                const [firstValue, secondValue] = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.split(' AND ') : [];
+                switch (dataType) {
+                    case METRIC_TYPE.DATE:
+                    case METRIC_TYPE.DATE_TIME: {
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(firstValue).isValid() ? dayjs(firstValue) : undefined, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) }),
+                            React.createElement(Text, { style: { flexShrink: 0, textTransform: 'lowercase' } }, t(translations.and.title).toString()),
+                            React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(secondValue).isValid() ? dayjs(secondValue) : undefined, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) })));
+                    }
+                    default: {
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(FormatInputNumber, { value: firstValue || undefined, max: secondValue, style: { width: '100%' }, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) }),
+                            React.createElement(Text, { style: { flexShrink: 0, textTransform: 'lowercase' } }, t(translations.and.title).toString()),
+                            React.createElement(FormatInputNumber, { value: secondValue || undefined, min: firstValue, style: { width: '100%' }, onChange: value => onChangeValue(`${firstValue || ''} AND ${value || ''}`) })));
+                    }
+                }
+            };
+            return (React.createElement(Flex, { vertical: true, gap: 20 }, renderBetweenValue()));
+        }
+        case OPERATORS_CODE.EQUALS:
+        case OPERATORS_CODE.IS:
+        case OPERATORS_CODE.NOT_EQUALS: {
+            switch (dataType) {
+                // Return InputNumber Field
+                case METRIC_TYPE.NUMBER:
+                    return (React.createElement(FormatInputNumber, { value: value, style: { width: '100%' }, onChange: value => onChangeValue(value) }));
+                // Return Input Field
+                default:
+                    return (React.createElement(Input, { placeholder: t(translations.inputYourValue.title), onChange: e => onChangeValue(e.target.value) }));
+            }
+        }
+        case OPERATORS_CODE.CONTAINS:
+        case OPERATORS_CODE.CONTAIN:
+        case OPERATORS_CODE.DOES_NOT_CONTAIN:
+        case OPERATORS_CODE.DOESNT_CONTAIN:
+        case OPERATORS_CODE.START_WITH:
+        case OPERATORS_CODE.END_WITH:
+        case OPERATORS_CODE.NOT_END_WITH:
+        case OPERATORS_CODE.NOT_START_WITH: {
+            return (React.createElement(Input, { value: value, placeholder: t(translations.inputYourValue.title), onChange: e => onChangeValue(e.target.value) }));
+        }
+        case OPERATORS_CODE.MATCHES:
+        case OPERATORS_CODE.MATCHES_ANY:
+        case OPERATORS_CODE.NOT_MATCHES: {
+            const { list, isLoading } = matchesAny || {};
+            return (React.createElement(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
+        }
+        case OPERATORS_CODE.AFTER:
+        case OPERATORS_CODE.AFTER_DATE:
+        case OPERATORS_CODE.BEFORE:
+        case OPERATORS_CODE.ON:
+        case OPERATORS_CODE.BEFORE_DATE: {
+            return (React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, getPopupContainer: trigger => trigger.parentElement, placement: "bottomLeft", popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: value && dayjs(value).isValid() ? dayjs(value) : undefined, onChange: onChangeValue }));
+        }
+        default:
+            return null;
+    }
+};
+/**
+ * Retrieves a filter metric by its name from a collection of filter metrics.
+ *
+ * @typedef {Object} Metric
+ * @property {string} name - The name of the metric.
+ * @property {any} [otherProperties] - Other properties of the metric.
+ *
+ * @typedef {Object} TGetFilterMetricByName
+ * @property {Metric[]} filterMetrics - An array of filter metrics.
+ * @property {string} name - The name of the metric to find.
+ *
+ * @param {TGetFilterMetricByName} params - The parameters containing filter metrics and the name of the metric to find.
+ * @returns {Metric|undefined} The metric with the specified name, or undefined if not found.
+ */
+export const getFilterMetricByName = ({ filterMetrics, name, }) => {
+    const flattenMetrics = flatFilterMetrics(filterMetrics);
+    return flattenMetrics.find(metric => metric.name === name);
+};
+export const mapFiltersToRules = (filters) => filters.map(({ column, operator, value, dataType }) => ({
+    dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'],
+    metricCode: column,
+    operatorValue: operator,
+    filterValue: value,
+}));
+export const mapRulesToFilters = (rules) => rules.map(({ dataType, metricCode, operatorValue, filterValue }) => ({
+    dataType: METRIC_MAP_NUMBER_TYPE[dataType || 1],
+    column: metricCode,
+    operator: operatorValue,
+    value: filterValue,
+}));
+export const mapFiltersToApiFilters = (filters, includeDataType = false, formatFilterValue) => {
+    const serializedFilters = filters.map(({ column, operator, value, dataType }) => {
+        let serializeValue = '';
+        if (formatFilterValue && formatFilterValue[operator]) {
+            serializeValue = formatFilterValue[operator](value);
+        }
+        else {
+            switch (operator) {
+                case MATCHES:
+                case MATCHES_ANY:
+                case NOT_MATCHES: {
+                    if (Array.isArray(value)) {
+                        // Check if value is object the return object.key otherwise return this value
+                        serializeValue = value.map(item => typeof item === 'object' ? item.key || item : item);
+                    }
+                    break;
+                }
+                /** Date time */
+                case AFTER:
+                case AFTER_DATE:
+                case BEFORE:
+                case ON:
+                case BEFORE_DATE: {
+                    if (dayjs(value).isValid()) {
+                        serializeValue = dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+                    }
+                    break;
+                }
+                default:
+                    serializeValue = value;
+                    break;
+            }
+        }
+        return {
+            [column]: Object.assign({ [operator]: serializeValue }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),
+        };
+    });
+    return serializedFilters;
+};

package/es/components/organism/FilterSetting/components/common/InputArray/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InputArrayProps {
+    value: string[];
+    onChange: (v: InputArrayProps['value']) => void;
+    required?: boolean;
+    focused?: boolean;
+}
+export declare const InputArray: React.FC<InputArrayProps>;
+export {};