@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,21 +1,9 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { ConfigProvider, theme } from 'antd';
 import { DATA_TABLE_THEME } from '../constants';
 const { getDesignToken } = theme;
 export const AntdTableConfigProvider = props => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (React.createElement(ConfigProvider, Object.assign({ theme: DATA_TABLE_THEME }, restProps), children));
+    const { children, ...restProps } = props;
+    return (_jsx(ConfigProvider, { theme: DATA_TABLE_THEME, ...restProps, children: children }));
 };
 export const dataTableGlobalToken = getDesignToken(DATA_TABLE_THEME);

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

@@ -1,8 +1,7 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Contexts
 import { DataTableContext } from '../contexts/DataTableContext';
 export const DataTableProvider = props => {
     const { children, store } = props;
-    return React.createElement(DataTableContext.Provider, { value: store }, children);
+    return _jsx(DataTableContext.Provider, { value: store, children: children });
 };

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

@@ -3,10 +3,36 @@ import { createStore } from 'zustand';
 import { cloneDeep, merge } from 'lodash';
 // Constants
 import { dataTableInitialState } from '../constants';
-export const createDataTableStore = (initProps) => createStore()(set => (Object.assign(Object.assign({}, merge(cloneDeep(dataTableInitialState), cloneDeep(initProps))), { 
+export const createDataTableStore = (initProps) => createStore()(set => ({
+    /* State */
+    ...merge(cloneDeep(dataTableInitialState), cloneDeep(initProps)),
     /* Actions */
-    setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))), setFilter: filter => {
-        set(store => (Object.assign(Object.assign({}, store), { filter: Object.assign(Object.assign({}, store.filter), filter) })));
-    }, setModifyColumn: modifyColumn => set(store => (Object.assign(Object.assign({}, store), { modifyColumn: Object.assign(Object.assign({}, store.modifyColumn), modifyColumn) }))), setTable: table => set(store => (Object.assign(Object.assign({}, store), { table: Object.assign(Object.assign({}, store.table), table) }))), setToolbar: toolbar => set(store => (Object.assign(Object.assign({}, store), { toolbar: Object.assign(Object.assign({}, store.toolbar), toolbar) }))), setPagination: pagination => {
-        set(store => (Object.assign(Object.assign({}, store), { pagination: Object.assign(Object.assign({}, store.pagination), pagination) })));
-    } })));
+    setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))),
+    setFilter: filter => {
+        set(store => ({
+            ...store,
+            filter: {
+                ...store.filter,
+                ...filter,
+            },
+        }));
+    },
+    setModifyColumn: modifyColumn => set(store => ({
+        ...store,
+        modifyColumn: {
+            ...store.modifyColumn,
+            ...modifyColumn,
+        },
+    })),
+    setTable: table => set(store => ({ ...store, table: { ...store.table, ...table } })),
+    setToolbar: toolbar => set(store => ({ ...store, toolbar: { ...store.toolbar, ...toolbar } })),
+    setPagination: pagination => {
+        set(store => ({
+            ...store,
+            pagination: {
+                ...store.pagination,
+                ...pagination,
+            },
+        }));
+    },
+}));

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

@@ -1,9 +1,7 @@
 /// <reference types="react" />
 export declare const DataTableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/button/button").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
-    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
-}, any, {
+export declare const ActionButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<import("react").LegacyRef<HTMLElement>>>, any, {
     $hide?: boolean | undefined;
 }, 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>;

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

@@ -1,7 +1,8 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex, Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const DataTableWrapper = styled.div `
   display: flex;
@@ -21,12 +22,12 @@ export const IconButton = styled.div `
 
   i {
     font-size: 14px;
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    color: ${globalToken?.bw8};
   }
 
   &:hover {
     i {
-      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+      color: ${globalToken?.bw10};
     }
   }
 `;
@@ -40,7 +41,7 @@ export const ActionButton = styled(Button) `
   padding: 3px 0px !important;
   font-size: 8px !important;
   line-height: 1 !important;
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8} !important;
+  color: ${globalToken?.bw8} !important;
 
   ${props => props.$hide && `visibility: hidden !important;`}
 
@@ -56,11 +57,11 @@ export const ActionButton = styled(Button) `
 
   /* &:hover, */
   &:active {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+    color: ${globalToken?.colorPrimary} !important;
   }
 
   &:disabled {
-    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2} !important;
+    background-color: ${globalToken?.bw2} !important;
   }
 `;
 export const FilterMetricLabel = styled(Flex) `
@@ -68,7 +69,7 @@ export const FilterMetricLabel = styled(Flex) `
 
   i[class*='ants-icon-ants-expand-more'] {
     transform: rotate(-90deg);
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    color: ${globalToken?.bw8};
   }
 `;
 export const DataTableContent = styled.div `

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

@@ -1,8 +1,7 @@
-import React from 'react';
 import { MenuProps } from 'antd';
 import { FilterItem, FilterMetricItem, TApiFilter } from '../types';
 import { SavedFilter } from '@antscorp/antsomi-ui/es/models/DataTable/SavedFilter';
-import { FilterProps } from '../..';
+import type { FilterProps } from '@antscorp/antsomi-ui/es/components/organism/DataTable';
 import { TFormatFilterValue } from '../hooks/useDataTableListing/types';
 type MenuItem = Required<MenuProps>['items'][number];
 type TSerializeFilterMetricsToMenuItems = {
@@ -75,7 +74,7 @@ export declare const serializeFilterMetricsToMenuItems: ({ filterMetrics, level,
  * // ]
  */
 export declare const flatFilterMetrics: (filterMetrics: FilterMetricItem[]) => FilterMetricItem[];
-export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onLoadMore, onChangeValue, }: TRenderValueField) => React.JSX.Element | null;
+export declare const renderValueField: ({ filterMetric, operator, value, matchesAny, onLoadMore, onChangeValue, }: TRenderValueField) => import("react/jsx-runtime").JSX.Element | null;
 /**
  * Retrieves a filter metric by its name from a collection of filter metrics.
  *

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

@@ -1,13 +1,18 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms/Typography';
+import { Icon } from '@antscorp/antsomi-ui/es/components/atoms/Icon';
+import { FormatInputNumber } from '@antscorp/antsomi-ui/es/components/atoms/InputNumber';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
+import { Input } from '@antscorp/antsomi-ui/es/components/atoms/Input';
 import { DATE_TIME_FORMAT, DATE_TIME_FORMAT_DISPLAY, METRIC_TYPE, } from '@antscorp/antsomi-ui/es/constants';
-import { Menu } from '../..';
-import { DatePicker, MatchesAnySelect } from '../../../molecules';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism/Menu';
+import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules/DatePicker';
+import { MatchesAnySelect } from '@antscorp/antsomi-ui/es/components/molecules/MatchAnySelect';
 // Styled
 import { FilterMetricLabel } from '../styled';
 import { OPERATORS_CODE } from '@antscorp/antsomi-ui/es/constants/condition';
@@ -23,28 +28,30 @@ export const serializeFilterMetricsToMenuItems = ({ filterMetrics = [], level =
     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 label = (_jsxs(FilterMetricLabel, { align: "center", justify: "space-between", children: [_jsx(Typography.Text, { className: "ants-w-full", ellipsis: { tooltip: true }, children: metric.name }), isHasChild && isShowPopover ? _jsx(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({
+            label: !isEmpty(metric.children) && isShowPopover ? (_jsx(Popover, { content: _jsx(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),
+                    }), mode: "inline", inlineIndent: 5 }), placement: "rightTop", arrow: false, align: { offset: [10, -10] }, overlayInnerStyle: { width: 250, padding: 0 }, children: 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,
+        return {
+            ...menuItem,
+            ...(!!metric.children &&
+                !isEmpty(metric.children) &&
+                !level && {
+                children: serializeFilterMetricsToMenuItems({
+                    filterMetrics: metric.children || [],
+                    level: level + 1,
+                    onSelectFilterMetric,
+                    onClickFilterMetric,
+                }),
             }),
-        })), { onClick: () => onClickFilterMetric && !isHasChild && onClickFilterMetric(metric) });
+            onClick: () => onClickFilterMetric && !isHasChild && onClickFilterMetric(metric),
+        };
     });
 };
 /**
@@ -111,28 +118,22 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         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%' } }));
+            return (_jsx(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 ') : [];
+                const [firstValue, secondValue] = typeof value === 'string' ? 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 || ''}`) })));
+                        return (_jsxs(_Fragment, { children: [_jsx(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 || ''}`) }), _jsx(Text, { style: { flexShrink: 0, textTransform: 'lowercase' }, children: t(translations.and.title).toString() }), _jsx(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 (_jsxs(_Fragment, { children: [_jsx(FormatInputNumber, { value: firstValue || undefined, max: secondValue, style: { width: '100%' }, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) }), _jsx(Text, { style: { flexShrink: 0, textTransform: 'lowercase' }, children: t(translations.and.title).toString() }), _jsx(FormatInputNumber, { value: secondValue || undefined, min: firstValue, style: { width: '100%' }, onChange: value => onChangeValue(`${firstValue || ''} AND ${value || ''}`) })] }));
                     }
                 }
             };
-            return (React.createElement(Flex, { vertical: true, gap: 20 }, renderBetweenValue()));
+            return (_jsx(Flex, { vertical: true, gap: 20, children: renderBetweenValue() }));
         }
         case OPERATORS_CODE.EQUALS:
         case OPERATORS_CODE.IS:
@@ -140,10 +141,10 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
             switch (dataType) {
                 // Return InputNumber Field
                 case METRIC_TYPE.NUMBER:
-                    return (React.createElement(FormatInputNumber, { value: value, style: { width: '100%' }, onChange: value => onChangeValue(value) }));
+                    return (_jsx(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) }));
+                    return (_jsx(Input, { placeholder: t(translations.inputYourValue.title), onChange: e => onChangeValue(e.target.value) }));
             }
         }
         case OPERATORS_CODE.CONTAINS:
@@ -154,20 +155,20 @@ export const renderValueField = ({ filterMetric, operator, value, matchesAny, on
         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) }));
+            return (_jsx(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 }));
+            return (_jsx(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 }));
+            return (_jsx(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;
@@ -237,7 +238,10 @@ export const mapFiltersToApiFilters = (filters, includeDataType = false, formatF
             }
         }
         return {
-            [column]: Object.assign({ [operator]: serializeValue }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),
+            [column]: {
+                [operator]: serializeValue,
+                ...(includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] }),
+            },
         };
     });
     return serializedFilters;

package/es/components/organism/FilterSetting/components/common/InputArray/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
 import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
@@ -26,7 +25,7 @@ export const InputArray = props => {
             return onChange(newValue);
         }
     };
-    return (React.createElement(StyledSelect, { mode: "tags", required: required, focused: focused, placeholder: t(translations.pleaseInputValue.title).toString(), onInputKeyDown: onInputKeyDown, onDeselect: onRemove, value: value, tagRender: v => React.createElement(Tag, Object.assign({}, v), v.label), dropdownStyle: {
+    return (_jsx(StyledSelect, { mode: "tags", required: required, focused: focused, placeholder: t(translations.pleaseInputValue.title).toString(), onInputKeyDown: onInputKeyDown, onDeselect: onRemove, value: value, tagRender: v => _jsx(Tag, { ...v, children: v.label }), dropdownStyle: {
             display: 'none',
         } }));
 };

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

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 export declare const StyledSelect: import("styled-components").StyledComponent<{
-    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react").JSX.Element;
+    (props: import("@antscorp/antsomi-ui/es/components/molecules/SelectV2").SelectProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
-        suffixIcon: import("react").JSX.Element;
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
         filterOption: (input: any, option: any) => boolean;
-        tagRender: (props: any) => import("react").JSX.Element;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
         containerStyle: {};
         labelStyle: {};
-        clearIcon: import("react").JSX.Element;
+        clearIcon: import("react/jsx-runtime").JSX.Element;
     };
 }, any, {}, never>;

package/es/components/organism/FilterSetting/components/common/InputArray/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2';
 export const StyledSelect = styled(Select) `
   width: 100%;
   overflow: auto;

package/es/components/organism/FilterSetting/components/common/InputBoolean/index.js

@@ -1,20 +1,9 @@
-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 React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
 export const InputBoolean = props => {
-    const { value, options, onChange } = props, restOf = __rest(props, ["value", "options", "onChange"]);
-    return (React.createElement(Select, Object.assign({ value: value, options: [
+    const { value, options, onChange, ...restOf } = props;
+    return (_jsx(Select, { value: value, options: [
             { value: 'true', label: 'True' },
             { value: 'false', label: 'False' },
-        ], onChange: val => onChange(val) }, restOf)));
+        ], onChange: val => onChange(val), ...restOf }));
 };

package/es/components/organism/FilterSetting/components/common/InputCalendar/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Libraries
-import React, { useContext, useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import moment from 'moment';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Molecules
@@ -26,16 +27,16 @@ export const InputCalendar = props => {
             case true:
                 newValue =
                     (isAfterDate
-                        ? momentDate === null || momentDate === void 0 ? void 0 : momentDate.endOf('day').valueOf()
-                        : momentDate === null || momentDate === void 0 ? void 0 : momentDate.startOf('day').valueOf()) || null;
+                        ? momentDate?.endOf('day').valueOf()
+                        : momentDate?.startOf('day').valueOf()) || null;
                 break;
             default:
-                newValue = (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format(isAfterDate ? endDateFormat : defaultDateFormatAPI)) || null;
+                newValue = momentDate?.format(isAfterDate ? endDateFormat : defaultDateFormatAPI) || null;
                 break;
         }
         onChange(newValue);
     };
-    return (React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, placeholder: t(translations.selectDate.title).toString(), value: getValidMomentDate(moment(value, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeValue, popupStyle: { zIndex: 9999 }, style: {
+    return (_jsx(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, placeholder: t(translations.selectDate.title).toString(), value: getValidMomentDate(moment(value, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeValue, popupStyle: { zIndex: 9999 }, style: {
             width: '100%',
             borderTopWidth: '0px',
             borderLeftWidth: '0px',

package/es/components/organism/FilterSetting/components/common/InputCalendarBetween/index.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 import moment from 'moment';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Atoms
@@ -25,23 +26,20 @@ export const InputCalendarBetween = props => {
     const onChangeFrom = (_, dateString) => {
         const momentDate = getValidMomentDate(moment(dateString));
         const newDate = isFormatDateTimeMilliseconds
-            ? (momentDate === null || momentDate === void 0 ? void 0 : momentDate.startOf('day').valueOf()) || null
-            : (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format(defaultDateFormatAPI)) || null;
+            ? momentDate?.startOf('day').valueOf() || null
+            : momentDate?.format(defaultDateFormatAPI) || null;
         const newValue = isFormatDateTimeMilliseconds ? `${newDate} AND ${to}` : `${newDate}AND${to}`;
         onChange(newValue);
     };
     const onChangeTo = (_, dateString) => {
         const momentDate = getValidMomentDate(moment(dateString));
         const newDate = isFormatDateTimeMilliseconds
-            ? (momentDate === null || momentDate === void 0 ? void 0 : momentDate.endOf('day').valueOf()) || null
-            : (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format('YYYY-MM-DD 23:59:59')) || null;
+            ? momentDate?.endOf('day').valueOf() || null
+            : momentDate?.format('YYYY-MM-DD 23:59:59') || null;
         const newValue = isFormatDateTimeMilliseconds
             ? `${from} AND ${newDate}`
             : `${from}AND${newDate}`;
         onChange(newValue);
     };
-    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(from, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeFrom, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } }),
-        React.createElement(Text, { style: { marginLeft: 16, marginRight: 16 } }, t(translations.and.title).toString()),
-        React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(to, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeTo, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } })));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(from, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeFrom, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } }), _jsx(Text, { style: { marginLeft: 16, marginRight: 16 }, children: t(translations.and.title).toString() }), _jsx(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(to, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeTo, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } })] }));
 };

package/es/components/organism/FilterSetting/components/common/InputDateTimeAgo/index.js

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { InputNumberWithLabel as InputNumber, Select, } from '@antscorp/antsomi-ui/es/components/molecules';
 export const InputDateTimeAgo = props => {
     const { value, timeUnit, onChangeMultipleValue, required } = props;
@@ -13,9 +12,7 @@ export const InputDateTimeAgo = props => {
             time_unit: val,
         });
     };
-    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement(InputNumber, { required: required, value: value, onChange: onChangeTime, width: "100%" }),
-        React.createElement(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: optionsInputDateTimeAgo })));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { required: required, value: value, onChange: onChangeTime, width: "100%" }), _jsx(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: optionsInputDateTimeAgo })] }));
 };
 const optionsInputDateTimeAgo = [
     { value: 'DAY', label: 'Days' },

package/es/components/organism/FilterSetting/components/common/InputDateTimeBetweenAgo/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Translations
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -14,7 +13,7 @@ const DATE_TIME_BETWEEN_OPTIONS = [
 export const InputDateTimeBetweenAgo = props => {
     const { t } = i18nInstance;
     const { value, timeUnit, onChange } = props;
-    const [from, to] = (value === null || value === void 0 ? void 0 : value.split(' AND ')) || [];
+    const [from, to] = value?.split(' AND ') || [];
     const onChangeFrom = val => {
         const newValue = `${val} AND ${to}`;
         onChange({ value: newValue });
@@ -26,9 +25,5 @@ export const InputDateTimeBetweenAgo = props => {
     const onChangeUnit = val => {
         onChange({ time_unit: val });
     };
-    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", min: to }),
-        React.createElement(Text, { style: { margin: '0px 16px ' } }, t(translations.and.title).toString()),
-        React.createElement(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", max: from }),
-        React.createElement(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: Object.values(DATE_TIME_BETWEEN_OPTIONS) })));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", min: to }), _jsx(Text, { style: { margin: '0px 16px ' }, children: t(translations.and.title).toString() }), _jsx(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", max: from }), _jsx(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: Object.values(DATE_TIME_BETWEEN_OPTIONS) })] }));
 };

package/es/components/organism/FilterSetting/components/common/InputNumber/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 // Molecules
 import { InputNumberWithLabel as InputNumberAntd } from '@antscorp/antsomi-ui/es/components/molecules';
 export const InputNumber = props => {
@@ -7,5 +6,5 @@ export const InputNumber = props => {
     const onChangeValue = val => {
         onChange(val);
     };
-    return React.createElement(InputNumberAntd, { value: value, onChange: onChangeValue, width: "100%" });
+    return _jsx(InputNumberAntd, { value: value, onChange: onChangeValue, width: "100%" });
 };

package/es/components/organism/FilterSetting/components/common/InputNumberBetween/index.js

@@ -1,5 +1,4 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Translations
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -19,8 +18,5 @@ export const InputNumberBetween = props => {
         const newValue = `${from} AND ${val}`;
         onChange(newValue);
     };
-    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
-        React.createElement(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", max: to }),
-        React.createElement(Text, { style: { marginLeft: 16, marginRight: 16 } }, t(translations.and.title).toString()),
-        React.createElement(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", min: from })));
+    return (_jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [_jsx(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", max: to }), _jsx(Text, { style: { marginLeft: 16, marginRight: 16 }, children: t(translations.and.title).toString() }), _jsx(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", min: from })] }));
 };

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

@@ -54,18 +54,10 @@ export declare const StyledAutoComplete: import("styled-components").StyledCompo
 export declare const StyledDropdown: import("styled-components").StyledComponent<"div", any, {
     $isSearching: boolean;
 }, never>;
-export declare const StyledSelect: import("styled-components").StyledComponent<{
-    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): React.JSX.Element;
-    defaultProps: {
-        suffixIcon: React.JSX.Element;
-        filterOption: (input: any, option: any) => boolean;
-        tagRender: (props: any) => React.JSX.Element;
-        containerStyle: {};
-        labelStyle: {};
-        clearIcon: React.JSX.Element;
-    };
-}, any, any, never>;
-export declare const StyledTreeSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+export declare const StyledSelect: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {
+    $isPlaceholder?: any;
+}, never>;
+export declare const StyledTreeSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: React.ReactNode;
 } & React.RefAttributes<import("antd").RefSelectProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
     displayName?: string | undefined;