@antscorp/antsomi-ui 1.3.7-beta.67 → 1.3.7-beta.68

package/es/components/icons/document/IconGallery.d.ts

@@ -1,12 +1 @@
-import React from 'react';
-declare global {
-    interface NodeRequire {
-        context: (directory: string, useSubdirectories: boolean, regExp: RegExp) => {
-            keys: () => string[];
-            (id: string): {
-                default: React.ComponentType;
-            };
-        };
-    }
-}
 export declare const IconGallery: () => import("react/jsx-runtime").JSX.Element;

package/es/components/icons/document/IconGallery.js

@@ -1,22 +1,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference types="vite/client" />
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { ConfigProvider } from '@antscorp/antsomi-ui/es/providers';
 import { searchMatchAny } from '@antscorp/antsomi-ui/es/utils';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { message } from 'antd';
-import { useMemo, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { Flex, Input, Typography } from '../../index';
 import { IconGalleryStyled } from './styled';
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 const REGEX_DATA_SEARCH = /(?<=\/\/ search tag: ).*/g;
-const requireContext = require.context('../', false, /\.tsx$/);
-const icons = requireContext
-    .keys()
-    .filter(key => key.startsWith('./'))
-    .map(key => {
-    const componentName = key.replace('./', '').replace('.tsx', '');
-    const Component = requireContext(key)[componentName];
-    const compiledCode = requireContext(key)[componentName]?.render?.toString() || '';
-    // console.log('🚀 ~ compiledCode:', compiledCode);
+const COLUMNS = 5;
+const ROW_ESTIMATE_SIZE = 140;
+// Vite equivalent of webpack's `require.context('../', false, /\.tsx$/)`.
+const iconModules = import.meta.glob('../*.tsx', { eager: true });
+const icons = Object.entries(iconModules).map(([path, mod]) => {
+    const componentName = path.replace('../', '').replace('.tsx', '');
+    const Component = mod[componentName];
+    const compiledCode = Component?.render?.toString() || '';
     const dataSearch = compiledCode.match(REGEX_DATA_SEARCH);
     return {
         name: componentName,
@@ -26,6 +27,7 @@ const icons = requireContext
 });
 export const IconGallery = () => {
     const [search, setSearch] = useState('');
+    const scrollContainerRef = useRef(null);
     const debounceSearchValue = useDebounce(search, 300);
     const invalidIcons = [];
     const validIcons = useMemo(() => icons.filter(iconObj => {
@@ -35,14 +37,32 @@ export const IconGallery = () => {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
-    return (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx(Flex, { className: "grid-container", gap: 16, children: validIcons
-                            .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
-                            .map(item => {
-                            const { Component, name } = item;
-                            return (_jsxs("div", { className: "grid-item", onClick: () => {
-                                    const copiedText = `<${name} />`;
-                                    navigator.clipboard.writeText(copiedText);
-                                    message.success(`${copiedText} copied to clipboard 🚀`);
-                                }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
-                        }) })] }) }) }));
+    const filteredIcons = useMemo(() => validIcons.filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue)), [validIcons, debounceSearchValue]);
+    const rows = useMemo(() => {
+        const chunked = [];
+        for (let i = 0; i < filteredIcons.length; i += COLUMNS) {
+            chunked.push(filteredIcons.slice(i, i + COLUMNS));
+        }
+        return chunked;
+    }, [filteredIcons]);
+    const rowVirtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: () => scrollContainerRef.current,
+        estimateSize: () => ROW_ESTIMATE_SIZE,
+        overscan: 5,
+    });
+    return (_jsx(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI, children: _jsx(ConfigProvider, { children: _jsxs(IconGalleryStyled, { children: [invalidIcons.length > 0 ? (_jsxs("div", { children: [_jsx("h4", { children: "These components below are invalid (check name and file name is correct?)" }), invalidIcons.map(item => (_jsx("strong", { style: { color: 'red' }, children: _jsx("pre", { children: item.name }) }, item.name)))] })) : null, _jsx(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }), _jsx("div", { ref: scrollContainerRef, className: "grid-scroll-container", children: _jsx("div", { style: { position: 'relative', width: '100%', height: rowVirtualizer.getTotalSize() }, children: rowVirtualizer.getVirtualItems().map(virtualRow => (_jsx(Flex, { ref: rowVirtualizer.measureElement, "data-index": virtualRow.index, className: "grid-container", gap: 16, style: {
+                                    position: 'absolute',
+                                    top: 0,
+                                    left: 0,
+                                    width: '100%',
+                                    transform: `translateY(${virtualRow.start}px)`,
+                                }, children: rows[virtualRow.index].map(item => {
+                                    const { Component, name } = item;
+                                    return (_jsxs("div", { className: "grid-item", onClick: () => {
+                                            const copiedText = `<${name} />`;
+                                            navigator.clipboard.writeText(copiedText);
+                                            message.success(`${copiedText} copied to clipboard 🚀`);
+                                        }, children: [_jsx(Component, {}), _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: name })] }, name));
+                                }) }, virtualRow.key))) }) })] }) }) }));
 };

package/es/components/icons/document/styled.js

@@ -1,11 +1,11 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const IconGalleryStyled = styled.div `
-  .grid-container {
-    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
-    /* row-gap: 16px; */
+  .grid-scroll-container {
+    position: relative;
     margin-top: 24px;
-    flex-wrap: wrap;
+    height: 70vh;
+    overflow-y: auto;
   }
 
   .grid-item {

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

@@ -401,5 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
-export { QRSetDashboardIcon } from './QRSetDashboardIcon';
 export { QRCodeManagementIcon } from './QRCodeManagementIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';

package/es/components/icons/index.js

@@ -401,5 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
-export { QRSetDashboardIcon } from './QRSetDashboardIcon';
 export { QRCodeManagementIcon } from './QRCodeManagementIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';

package/es/components/icons/types/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface IconProps extends React.ComponentPropsWithoutRef<'svg'> {
     size?: number;
 }

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const AccessDeniedWrapper: 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 AccessDeniedWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -44,7 +44,7 @@ export const AccountListing = React.forwardRef((props, ref) => {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onChange, recentData]);
-    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length && recentData?.value?.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
+    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
                                         .map(accountId => accountData?.find(account => account.userId === accountId))
                                         .filter((accountId, index, self) => Boolean(accountId) && index === self.indexOf(accountId))
                                         .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId))), _jsx(Divider, { style: { margin: '8px 0', color: THEME.token?.bw3 } })] })) : null, stateAccountData

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

@@ -1,3 +1,4 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
-export { AccountListing, type AccountListingHandle } from './AccountListing';
+export { AccountListing } from './AccountListing';
+export type { AccountListingHandle } from './AccountListing';
 export { useAccountSelection } from './hooks';

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

@@ -1,3 +1,34 @@
 import React from 'react';
-import { AddDynamicContentProps } from './types';
+import { APIConfig, TDataType } from './types';
+export interface LabeledValue {
+    label: string;
+    value: string;
+    dataType?: TDataType;
+    disabled?: boolean;
+    status?: any;
+}
+export interface LabeledTreeValue extends LabeledValue {
+    [key: string]: any;
+    children: LabeledTreeValue[];
+    disableCheckbox?: boolean;
+    selectable?: boolean;
+    checkable?: boolean;
+    type: number | null;
+    status?: any;
+}
+export interface AddDynamicContentProps {
+    defaultDynamicIndex?: number;
+    journeySettings: Record<string, any>;
+    contentSources: Record<string, any>;
+    additionalAttrProperties?: string[];
+    defaultData?: Record<string, any>;
+    visible: boolean;
+    showDisplayFormat?: boolean;
+    showIndex?: boolean;
+    onCancel?: () => void;
+    onOk?: (value: Record<string, any>) => void;
+    modalTitle?: string;
+    isShowCustomFunction?: boolean;
+    APIConfig: APIConfig;
+}
 export declare const AddDynamicContent: React.FC<AddDynamicContentProps>;

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -15,7 +15,6 @@ import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
 import { Form, Select, TreeSelect } from 'antd';
 import { TreeNode } from 'rc-tree-select';
 // Locales
-import { translate, translations as translationLib } from '@antscorp/antsomi-locales';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Query
@@ -34,7 +33,6 @@ import { buildMappingFields, buildOptionAttrArchive, checkStatusAttr, CUSTOM_TYP
 // Style
 import { EditorScript } from '../EditorScript';
 import { InputSuggestion, ModalCustom } from './styled';
-import { Input, Radio } from '../../atoms';
 const getMembers = (member) => {
     if (!member.children || !member.children.length) {
         return member;
@@ -305,12 +303,6 @@ export const AddDynamicContent = props => {
         }
         return false;
     }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes?.mainObjects]);
-    const eventBOAttributeLabel = useMemo(() => {
-        if (!selectedAttr?.itemTypeId || !listEventAttributes)
-            return '';
-        const boAttr = listEventAttributes.find(row => row.itemTypeId === selectedAttr?.itemTypeId);
-        return boAttr?.label;
-    }, [listEventAttributes, selectedAttr]);
     const itemTypeName = useMemo(() => {
         let draftItemTypeName = '';
         if (itemTypeId) {
@@ -424,8 +416,6 @@ export const AddDynamicContent = props => {
             [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: optionDataType[0].value,
-            [DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE]: '',
-            [DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE]: 'event',
         });
     }, [form]);
     useEffect(() => {
@@ -1129,7 +1119,7 @@ export const AddDynamicContent = props => {
                                     __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
                                 } })) : null, !showDetailEditDF && (_jsx(Button, { disabled: isActionArchive &&
                                     selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow), children: t(translations.edit.title) }))] }), children: _jsx(Select, { disabled: isActionArchive &&
-                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) }), renderDefaultValue()] }));
+                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) })] }));
     };
     const renderCustomerAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
@@ -1215,22 +1205,6 @@ export const AddDynamicContent = props => {
                     gap: '8px',
                 }, children: _jsx(DisplayFormat, { infos: infos, url: url, displayFormatType: selectedDFType, formatSettings: attrDFSettings, onSettingsChange: (values) => setAttrDFSettings(values), dynamicContentType: form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE) }) }));
     };
-    const renderGetFromData = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Get data from'), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE, required: true, children: _jsx(Radio.Group, { defaultValue: "event", options: [
-                {
-                    value: 'event',
-                    label: 'Event data',
-                },
-                {
-                    value: 'object',
-                    label: (_jsxs(Text, { children: [translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Data object'), ' ', _jsx("b", { children: eventBOAttributeLabel })] })),
-                    disabled: !selectedAttr?.itemTypeId,
-                },
-            ], style: {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 8,
-            } }) }));
-    const renderDefaultValue = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translations._TITL_DEFAULT_VALUE, 'Default value'), name: DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE, children: _jsx(Input, { placeholder: "Enter fallback text when data is unavailable" }) }));
     return (_jsx(ModalCustom, { closable: false, destroyOnClose: true, forceRender: true, mask: true, okButtonProps: { disabled: formSubmitDisabled }, title: modalTitle || t(translations.dynamicContent.modal.title.addDynamicContent), visible: visible, onCancel: handleOnCancelModal, onOk: handleOnOkModal, children: _jsxs(Spin, { spinning: isFetchingSourceBO ||
                 isFetchingListBoAttr ||
                 isFetchingEventAttr ||
@@ -1238,7 +1212,7 @@ export const AddDynamicContent = props => {
                 isFetchingPromotionCodeAttr ||
                 isFetchingDynamicContentAttr, children: [_jsxs(Form, { style: { width: '100%' }, form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
                         [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: listDynamicContentTypes[0].value,
-                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderVisitorAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderCustomerAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), renderGetFromData(), renderDefaultValue(), isShowEventIndexField
+                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderVisitorAttrFields() })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderCustomerAttrFields() })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), isShowEventIndexField
                                     ? renderIndexFields({ disabled: false, loading: false })
                                     : null] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value && (_jsxs(_Fragment, { children: [renderPromotionPoolFields(), renderPromotionCodeAttr()] })), selectedDynamicContentType && regexCSType.test(selectedDynamicContentType) && (_jsxs(_Fragment, { children: [renderBoAttrFields(), renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr })] })), showDisplayFormat && renderDisplayFormat()] }), showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(), isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (_jsx("div", { style: {
                         display: 'flex',

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
-import { TDisplayFormat } from '../../types';
-export type DisplayFormatProps = {
+export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
+type DisplayFormatProps = {
     onSettingsChange: (settings: any) => void;
     formatSettings: any;
     displayFormatType: TDisplayFormat;

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Libraries
 // Components
 import FormatDatetime from '../FormatDatetime/FormatDatetime';
 import FormatNumber from '../FormatNumber/FormatNumber';

package/es/components/molecules/AddDynamicContent/components/FormatNumber/FormatNumber.d.ts

@@ -1,5 +1,5 @@
+import { TDisplayFormat } from '../DisplayFormat';
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
-import { TDisplayFormat } from '../../types';
 declare const groupingOptions: {
     readonly COMMA: {
         readonly index: 0;
@@ -32,8 +32,8 @@ declare const decimalOptions: {
 export type TGroupingSeparator = (typeof groupingOptions)[keyof typeof groupingOptions]['value'];
 export type TDecimalSeparator = (typeof decimalOptions)[keyof typeof decimalOptions]['value'];
 export type TNumberFormatSettings = {
-    grouping: TGroupingSeparator;
     decimalPlaces: number;
+    grouping: TGroupingSeparator;
     decimal: TDecimalSeparator;
     isCompact: boolean;
     currencyCode: string;

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

@@ -1,3 +1,4 @@
+import { TDataType } from './types';
 export declare const DYNAMIC_CONTENT_SETTING_KEY: {
     EVENT: string;
     INDEX: string;
@@ -12,8 +13,6 @@ export declare const DYNAMIC_CONTENT_SETTING_KEY: {
     PERNAME: string;
     SAVE_AS_TEMPLATE: string;
     DATA_TYPE: string;
-    DATA_SOURCE: string;
-    DEFAULT_VALUE: string;
 };
 export declare const DYNAMIC_CONTENT_TYPE_KEY: {
     readonly BO_SETTINGS: "bo-settings";
@@ -30,27 +29,11 @@ export declare const DYNAMIC_CONTENT_TYPE: {
         value: string;
     };
 };
-export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: readonly [{
-    readonly label: "Number";
-    readonly value: "number";
-    readonly dataType: "number";
-}, {
-    readonly label: "Percentage";
-    readonly value: "percentage";
-    readonly dataType: "number";
-}, {
-    readonly label: "Currency";
-    readonly value: "currency";
-    readonly dataType: "number";
-}, {
-    readonly label: "Datetime";
-    readonly value: "datetime";
-    readonly dataType: "datetime";
-}, {
-    readonly label: "Raw string";
-    readonly value: "raw_string";
-    readonly dataType: "string";
-}];
+export declare const DYNAMIC_CONTENT_ATTR_DF_TYPE: {
+    label: string;
+    value: string;
+    dataType: TDataType;
+}[];
 export declare const DATA_TYPE: {
     [key: string]: {
         index: number;
@@ -117,19 +100,19 @@ export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
     };
 };
 export declare const COLLECTION_STATUS: {
-    readonly 2: {
-        readonly value: 2;
-        readonly label: "Disable";
-        readonly errorMessage: "This collection is disabled";
+    2: {
+        value: number;
+        label: string;
+        errorMessage: string;
     };
-    readonly 4: {
-        readonly value: 4;
-        readonly label: "Archive";
-        readonly errorMessage: "This collection is not available";
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
     };
-    readonly DELETE: {
-        readonly value: 3;
-        readonly label: "Delete";
-        readonly errorMessage: "This collection does not exist";
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
     };
 };

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

@@ -12,8 +12,6 @@ export const DYNAMIC_CONTENT_SETTING_KEY = {
     PERNAME: 'templateName',
     SAVE_AS_TEMPLATE: 'saveAsTemplate',
     DATA_TYPE: 'dataType',
-    DATA_SOURCE: 'dataSource',
-    DEFAULT_VALUE: 'defaultValue',
 };
 export const DYNAMIC_CONTENT_TYPE_KEY = {
     BO_SETTINGS: 'bo-settings',

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

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
-    children?: import("react").ReactNode;
-} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+export declare const InputSuggestion: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").BaseOptionType | import("rc-select/lib/Select").DefaultOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
     displayName?: string | undefined;
     Option: import("rc-select/lib/Option").OptionFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
 }, any, {}, never>;
 export declare const ModalCustom: import("styled-components").StyledComponent<import("react").FC<import("../Modal").ModalProps> & {
     confirm: (props: import("antd").ModalFuncProps) => {

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

@@ -11,35 +11,3 @@ export type APIParams = {
     url: string;
 } & Record<string, any>;
 export type DynamicContentType = (typeof DYNAMIC_CONTENT_TYPE_KEY)[keyof typeof DYNAMIC_CONTENT_TYPE_KEY];
-export interface LabeledValue {
-    label: string;
-    value: string;
-    dataType?: TDataType;
-    disabled?: boolean;
-    status?: any;
-}
-export interface LabeledTreeValue extends LabeledValue {
-    [key: string]: any;
-    children: LabeledTreeValue[];
-    disableCheckbox?: boolean;
-    selectable?: boolean;
-    checkable?: boolean;
-    type: number | null;
-    status?: any;
-}
-export interface AddDynamicContentProps {
-    defaultDynamicIndex?: number;
-    journeySettings: Record<string, any>;
-    contentSources: Record<string, any>;
-    additionalAttrProperties?: string[];
-    defaultData?: Record<string, any>;
-    visible: boolean;
-    showDisplayFormat?: boolean;
-    showIndex?: boolean;
-    onCancel?: () => void;
-    onOk?: (value: Record<string, any>) => void;
-    modalTitle?: string;
-    isShowCustomFunction?: boolean;
-    APIConfig: APIConfig;
-}
-export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';

package/es/components/molecules/AddDynamicContent/utils.d.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
 import type { TDatetimeFormatSetting, TNumberFormatSettings } from './components';
-import { LabeledTreeValue, LabeledValue } from './types';
+import { LabeledTreeValue, LabeledValue } from './AddDynamicContent';
 export declare function getStringFormatDateDF(formatSettings: TDatetimeFormatSetting): string;
 export declare function formatDatetimeDF(date: string | number | dayjs.Dayjs | Date, formatSettings: TDatetimeFormatSetting): string;
 export declare function formatNumberDF(number: number, fType: 'number' | 'percentage' | 'currency', fOptions?: Omit<TNumberFormatSettings, 'type'>): string;

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

@@ -4,7 +4,7 @@ export interface AlignEditProps {
     className?: string;
     align?: TAlign;
     onChange?: (align: TAlign) => void;
-    style?: Object;
+    style?: object;
 }
 export interface AlignSettingProps extends AlignEditProps {
     label?: string;

package/es/components/molecules/AlignSetting/utils.d.ts

@@ -1,3 +1,3 @@
 import { TAlign } from './index';
 export declare const mapAlignToJustifyContent: (value: TAlign) => "auto" | "center" | "end" | "start";
-export declare const mapJustifyContentToAlign: (value: 'start' | 'end' | 'center') => string | undefined;
+export declare const mapJustifyContentToAlign: (value: "start" | "end" | "center") => string | undefined;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -10,15 +10,16 @@ import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
 import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
-    const initialized = useRef(false);
+    const initialed = useRef(false);
     const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value || initialized.current)
+        if (!value)
             return;
-        const needTriggerOut = !initialized.current;
+        const needTriggerOut = !initialed.current;
+        // console.log({ needTriggerOut });
         dispatch(initState(value, needTriggerOut));
-        initialized.current = true;
+        initialed.current = true;
     }, [value]);
     useLayoutEffect(() => {
         if (!state.open) {

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -1,4 +1,14 @@
 import { Custom, RangeInfo, CalendarSelectionValue, RangeValue } from './types';
+export declare const ACTION_TYPES: {
+    readonly initState: "init_state";
+    readonly changeRangeType: "change_range_type";
+    readonly updateRangeInfo: "update_range_info";
+    readonly updateRangeValue: "update_range_value";
+    readonly changeAutoUpdateTo: "change_auto_update_to";
+    readonly togglePopover: "toggle_popover";
+    readonly apply: "apply";
+    readonly resetValue: "reset_value";
+};
 export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
     type: "change_range_type";
     payload: {
@@ -23,7 +33,7 @@ export declare const updateRangeValue: (rangeValue: RangeValue[], options?: {
         } | undefined;
     };
 };
-export declare const changeAutoUpdateTo: (value: Custom['autoUpdateTo']) => {
+export declare const changeAutoUpdateTo: (value: Custom["autoUpdateTo"]) => {
     type: "change_auto_update_to";
     payload: import("./types").AutoUpdateTo;
 };

package/es/components/molecules/CalendarSelection/actions.js

@@ -1,4 +1,13 @@
-import { ACTION_TYPES } from './constants';
+export const ACTION_TYPES = {
+    initState: 'init_state',
+    changeRangeType: 'change_range_type',
+    updateRangeInfo: 'update_range_info',
+    updateRangeValue: 'update_range_value',
+    changeAutoUpdateTo: 'change_auto_update_to',
+    togglePopover: 'toggle_popover',
+    apply: 'apply',
+    resetValue: 'reset_value',
+};
 export const changeRangeType = (rangeType, callback) => ({
     type: ACTION_TYPES.changeRangeType,
     payload: { rangeType, callback },

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.d.ts

@@ -1,3 +1,10 @@
 import React from 'react';
-import { TimeRangeDisplayProps } from '../../types';
+import { CalendarSelectionValue } from '../../types';
+export type TimeRangeDisplayProps = {
+    showType?: boolean;
+    formatStart?: string;
+    formatEnd?: string;
+    operator?: string;
+    render?: (value: CalendarSelectionValue, rangeSelectedTitle: string, rangeValueTitles: string[], handleOpenPopover: () => void) => React.ReactNode;
+};
 export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cls from 'clsx';
 import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-import { ACTION_TYPES } from '../../constants';
+import { ACTION_TYPES } from '../../actions';
 import { useCalendarSelectionContext } from '../../hooks';
 import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
 import { StyledBtnDisplayWrapper } from './styled';

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

@@ -1,3 +1,4 @@
+import { DaysUpToToday, DaysUpToYesterday } from './types';
 export declare const TRIGGER_OUT_MODE: {
     readonly auto: "auto";
     readonly manual: "manual";
@@ -64,6 +65,27 @@ export declare const MAP_TITLE: {
     monToToDay: string;
     monToSun: string;
 };
+export declare const MAP_TITLE_DISPLAY: {
+    days_up_to_yesterday: (rangeInfo: DaysUpToYesterday) => string;
+    days_up_to_today: (rangeInfo: DaysUpToToday) => string;
+    today: string;
+    yesterday: string;
+    last_7_days: string;
+    last_14_days: string;
+    this_month: string;
+    last_30_days: string;
+    last_month: string;
+    all_time: string;
+    last_week: string;
+    this_week: string;
+    this_quarter: string;
+    last_quarter: string;
+    custom: string;
+    sundayToToDay: string;
+    sundayToSat: string;
+    monToToDay: string;
+    monToSun: string;
+};
 export declare const RANGE_SELECTION_OPTIONS: Record<string, {
     key: string;
     label: string;
@@ -73,13 +95,3 @@ export declare const RANGE_SELECTION_OPTIONS: Record<string, {
         label: string;
     }[];
 }>;
-export declare const ACTION_TYPES: {
-    readonly initState: "init_state";
-    readonly changeRangeType: "change_range_type";
-    readonly updateRangeInfo: "update_range_info";
-    readonly updateRangeValue: "update_range_value";
-    readonly changeAutoUpdateTo: "change_auto_update_to";
-    readonly togglePopover: "toggle_popover";
-    readonly apply: "apply";
-    readonly resetValue: "reset_value";
-};