@antscorp/antsomi-ui 2.0.6 → 2.0.8-3.text-editor-beta.1

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

@@ -1,8 +1,8 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 // Styled
 import styled, { css } from 'styled-components';
 // Components
 import { Input as InputAntd } from 'antd';
+import { Button } from '../Button';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledInput = styled(InputAntd) `
@@ -13,18 +13,18 @@ export const StyledInput = styled(InputAntd) `
   padding-left: 5px;
   padding-right: 5px;
   font-family: 'Roboto';
-  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   --tw-shadow: 0 1px 0 0 #e0e0e0;
   --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 
   &::placeholder {
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.accent5};
+    color: ${THEME.token?.accent5};
   }
 
   &:hover {
-    background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+    background-color: ${THEME.token?.blue0};
   }
 
   transition-property: all;
@@ -43,7 +43,7 @@ export const StyledInput = styled(InputAntd) `
 
   &:active,
   &:focus {
-    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue0};
+    background-color: ${THEME.token?.blue0};
     --tw-shadow: 0 1px 0 0 #194e8d;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -51,8 +51,8 @@ export const StyledInput = styled(InputAntd) `
   }
 
   &:disabled {
-    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.accent1};
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.accent5};
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -66,18 +66,18 @@ export const TextArea = styled(InputAntd.TextArea) `
   padding-left: 5px;
   padding-right: 5px;
   font-family: 'Roboto';
-  font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
+  font-size: ${THEME.token?.fontSize}px;
   --tw-shadow: 0 1px 0 0 #e0e0e0;
   --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 
   &::placeholder {
-    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.accent5};
+    color: ${THEME.token?.accent5};
   }
 
   &:hover {
-    background-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0};
+    background-color: ${THEME.token?.blue0};
   }
 
   transition-property: all;
@@ -86,7 +86,7 @@ export const TextArea = styled(InputAntd.TextArea) `
 
   &:active,
   &:focus {
-    background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue0};
+    background-color: ${THEME.token?.blue0};
     --tw-shadow: 0 1px 0 0 #194e8d;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -94,8 +94,8 @@ export const TextArea = styled(InputAntd.TextArea) `
   }
 
   &:disabled {
-    background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent1};
-    color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5};
+    background-color: ${THEME.token?.accent1};
+    color: ${THEME.token?.accent5};
     --tw-shadow: 0 1px 0 0 #e0e0e0;
     --tw-shadow-colored: 0 1px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
@@ -112,3 +112,6 @@ export const StyledSearchInput = styled(InputAntd) `
     background-color: transparent;
   }
 `;
+export const StyledIconWrapper = styled(Button) `
+  padding: 4px;
+`;

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -8,16 +8,15 @@ const EditCaretPositioning = {};
 if (window.getSelection && document.createRange) {
     // saves caret position(s)
     EditCaretPositioning.saveSelection = function (containerEl) {
-        var _a;
         try {
-            let range = (_a = window === null || window === void 0 ? void 0 : window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
-            let preSelectionRange = range === null || range === void 0 ? void 0 : range.cloneRange();
-            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.selectNodeContents(containerEl);
-            preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.setEnd(range === null || range === void 0 ? void 0 : range.startContainer, range === null || range === void 0 ? void 0 : range.startOffset);
-            let start = preSelectionRange === null || preSelectionRange === void 0 ? void 0 : preSelectionRange.toString().length;
+            let range = window?.getSelection()?.getRangeAt(0);
+            let preSelectionRange = range?.cloneRange();
+            preSelectionRange?.selectNodeContents(containerEl);
+            preSelectionRange?.setEnd(range?.startContainer, range?.startOffset);
+            let start = preSelectionRange?.toString().length;
             return {
                 start: start,
-                end: start + (range === null || range === void 0 ? void 0 : range.toString().length),
+                end: start + range?.toString().length,
             };
         }
         catch (e) {
@@ -74,8 +73,8 @@ if (window.getSelection && document.createRange) {
                 range.collapse(true);
             }
         }
-        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
-        sel === null || sel === void 0 ? void 0 : sel.addRange(range);
+        sel?.removeAllRanges();
+        sel?.addRange(range);
     };
 }
 else if (document.selection && document.body.createTextRange) {

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

@@ -1,10 +1,5 @@
-import React from 'react';
 import { InputDynamicProps } from './types';
-export declare const AllowDynamicType: {
-    readonly SHORTLINK: "shortlink";
-    readonly ADDPERSONALIZATION: "addPersonalization";
-};
 export declare const InputDynamic: {
-    (props: InputDynamicProps): React.JSX.Element;
+    (props: InputDynamicProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: InputDynamicProps;
 };

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -1,6 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
 // Libraries
-import React, { useState, useLayoutEffect, useEffect, useRef, useCallback, useMemo, } from 'react';
+import { useState, useLayoutEffect, useEffect, useRef, useCallback, useMemo, } from 'react';
 import classnames from 'classnames';
 import { has, isEmpty, omit } from 'lodash';
 // Components
@@ -11,17 +12,14 @@ import { AddDynamicContent } from '../../molecules/AddDynamicContent';
 import { PopupShortLink } from './PopupShortLink';
 import Icon from '@antscorp/icons';
 // Utils
-import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils';
+import { getObjectPropSafely, random, safeParse } from '@antscorp/antsomi-ui/es/utils/common';
 import { convertBreakTag, convertDivToBreakTag, convertHtmlText, genShortLinkValue, getInsertLinkPatternWithAppendSpaceEnd, getInsertPatternWithAppendSpaceEnd, handleUpdateInputPersonalization, initialValue, mapLabelPersonalization, pasteHtmlAtCaret, removeHtmlTag, spacingNonTracking, validateHTMLTags, createElement, getBgColorByContentSourceType, } from './utils';
 // Hooks
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { AllowDynamicType } from './constants';
 const PATH = 'src/components/atoms/InputDynamic/InputDynamic.tsx';
-export const AllowDynamicType = {
-    SHORTLINK: 'shortlink',
-    ADDPERSONALIZATION: 'addPersonalization',
-};
 const defaultProps = {
     value: '',
     isViewMode: false,
@@ -88,14 +86,14 @@ export const InputDynamic = (props) => {
         return true;
     }, [apiConfig, allowDynamicOptions]);
     const onTriggerChange = (event = null) => {
-        var _a;
         try {
-            let tmp = (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
+            let tmp = personalizationInputRef.current?.innerHTML;
             if (event !== null) {
                 caretPositionRef.current = CaretPositioning.saveSelection(event.currentTarget);
                 tmp = event.currentTarget.innerHTML;
             }
-            tmp = tmp === null || tmp === void 0 ? void 0 : tmp.replace(
+            tmp = tmp
+                ?.replace(
             // replace old non tracking url to detect url
             /<button(?=[^>]*class="insert-word")[^>]*value=['"]#(?:{nontrackurl\()?(https?:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)(?:\)})?['"][^>]*>.*?<\/button>/g, match => {
                 const url = match.match(/(https?:\/\/[0-9a-zA-Z-\./?_=&%:#*@;]+)(?![^ ])/);
@@ -103,7 +101,8 @@ export const InputDynamic = (props) => {
                     return `<span id="${random(5)}" class="detect-url">${url[1]}</span>`;
                 }
                 return match; // If no match found, return the original string
-            }).replace(
+            })
+                .replace(
             // replace url to detect url
             /((?<!class="detect-url">|#{shortlink(?:_static)?\(|<span style="line-height: 20px;margin-right: 8px;pointer-events:none;">)\bhttps*:\/\/[0-9a-zA-Z-{}|"\./?_=&%:#*@;]+)/g, match => `<span id="${random(5)}" class="detect-url">${match}</span>`);
             tmp = convertDivToBreakTag(tmp);
@@ -128,29 +127,34 @@ export const InputDynamic = (props) => {
         setIsShowPopover(false);
     };
     const handleOpenChangeAddDynamicContent = useCallback((newChange) => {
-        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { visible: newChange })));
+        setDynamicContent(prev => ({
+            ...prev,
+            visible: newChange,
+        }));
     }, []);
     const handleOpenChange = (newOpen) => {
         if (disabled)
             return;
-        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '' })));
+        setDynamicContent(prev => ({
+            ...prev,
+            activeTagId: '',
+        }));
         setIsShowPopover(newOpen);
     };
     const callback = (type, data) => {
-        var _a, _b;
         switch (type) {
             case 'REPLACE_DETECTED_URL': {
-                const innerHTML = getObjectPropSafely(() => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML; }, '');
+                const innerHTML = getObjectPropSafely(() => personalizationInputRef.current?.innerHTML, '');
                 if (innerHTML) {
                     // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
-                    const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
+                    const index = Array.from(personalizationInputRef.current?.childNodes).findIndex((element) => element.id === data.id);
                     if (index !== -1) {
                         const range = document.createRange(); // Tạo một đối tượng Range
                         const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                        range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
+                        range.setStart(personalizationInputRef.current?.childNodes[index], 0); // Đặt điểm bắt đầu của Range
                         range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                        sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
+                        sel?.removeAllRanges(); // Xóa tất cả các Range hiện có
+                        sel?.addRange(range); // Thêm Range mới vào Selection
                         caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
                         const newDataUpdate = innerHTML.replace(data.outerHTML, '');
                         personalizationInputRef.current.innerHTML = newDataUpdate;
@@ -170,7 +174,6 @@ export const InputDynamic = (props) => {
         }, ms);
     };
     const onPaste = (e) => {
-        var _a;
         // cancel paste
         e.preventDefault();
         // get text representation of clipboard
@@ -178,7 +181,7 @@ export const InputDynamic = (props) => {
         handleChangeInputDebounce(ms);
         // insert text manually
         document.execCommand('insertHTML', false, text);
-        (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        personalizationInputRef.current?.focus();
     };
     const handleInsertSortLink = (url, type) => {
         try {
@@ -203,7 +206,7 @@ export const InputDynamic = (props) => {
         }
     };
     const handleCloseAddDynamicContent = () => {
-        setDynamicContent(Object.assign(Object.assign({}, dynamicContent), { visible: false }));
+        setDynamicContent({ ...dynamicContent, visible: false });
     };
     const handleInsertText = (dataObj) => {
         try {
@@ -234,7 +237,15 @@ export const InputDynamic = (props) => {
                     if (element && element.parentNode) {
                         element.parentNode.replaceChild(newElement, element);
                     }
-                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: dynamicContent.activeTagId, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [dynamicContent.activeTagId]: dataObj }), visible: false })));
+                    setDynamicContent(prev => ({
+                        ...prev,
+                        activeTagId: dynamicContent.activeTagId,
+                        defaultData: {
+                            ...(prev.defaultData || {}),
+                            [dynamicContent.activeTagId]: dataObj,
+                        },
+                        visible: false,
+                    }));
                     onTriggerChange();
                     return;
                 }
@@ -244,7 +255,15 @@ export const InputDynamic = (props) => {
                     caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
                     onTriggerChange();
                 });
-                setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id, defaultData: Object.assign(Object.assign({}, (prev.defaultData || {})), { [id]: dataObj }), visible: false })));
+                setDynamicContent(prev => ({
+                    ...prev,
+                    activeTagId: id,
+                    defaultData: {
+                        ...(prev.defaultData || {}),
+                        [id]: dataObj,
+                    },
+                    visible: false,
+                }));
             }
         }
         catch (error) {
@@ -313,11 +332,19 @@ export const InputDynamic = (props) => {
                     const shortLink = value.replace(/#|{|}|/g, '').split('(');
                     if (shortLink && shortLink.length >= 2) {
                         const link = shortLink[1].substring(0, shortLink[1].length - 1) || '';
-                        setInitSelectedProperties(prev => (Object.assign(Object.assign({}, prev), { link, keyTag: shortLink[0], urlDetected: e.currentTarget })));
+                        setInitSelectedProperties(prev => ({
+                            ...prev,
+                            link,
+                            keyTag: shortLink[0],
+                            urlDetected: e.currentTarget,
+                        }));
                         toggleShortLinkModal();
                     }
                     else {
-                        setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: id })));
+                        setDynamicContent(prev => ({
+                            ...prev,
+                            activeTagId: id,
+                        }));
                         handleOpenChangeAddDynamicContent(true);
                     }
                 }
@@ -343,7 +370,7 @@ export const InputDynamic = (props) => {
     useEffect(() => {
         let listElement = [];
         const handleMouseOver = (e, targetRect) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            e?.stopPropagation();
             const viewportTop = window.pageYOffset;
             const viewportLeft = window.pageXOffset;
             const offsetWidth = targetRect.width / 2;
@@ -357,15 +384,16 @@ export const InputDynamic = (props) => {
             });
         };
         const handleMouseOut = (e) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
+            e?.stopPropagation();
             setTooltipHover({ x: 0, y: 0 });
         };
         const handleClickDetectUrl = (e) => {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
-            setInitSelectedProperties(prev => {
-                var _a;
-                return (Object.assign(Object.assign({}, prev), { link: ((_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.textContent) || '', urlDetected: e === null || e === void 0 ? void 0 : e.currentTarget }));
-            });
+            e?.stopPropagation();
+            setInitSelectedProperties(prev => ({
+                ...prev,
+                link: e?.currentTarget?.textContent || '',
+                urlDetected: e?.currentTarget,
+            }));
             toggleShortLinkModal();
         };
         if (!isViewMode) {
@@ -396,18 +424,18 @@ export const InputDynamic = (props) => {
         const buttonElement = document.querySelectorAll('.insert-word');
         const listBtnElement = buttonElement && Array.from(buttonElement);
         const handleRemoveTag = (e) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
-            if (e && ((_a = e.target) === null || _a === void 0 ? void 0 : _a.nodeName) === 'EM' && ((_b = e.target) === null || _b === void 0 ? void 0 : _b.className) === 'editor-icon-remove') {
+            if (e && e.target?.nodeName === 'EM' && e.target?.className === 'editor-icon-remove') {
                 e.stopPropagation();
-                if (((_c = e.target) === null || _c === void 0 ? void 0 : _c.parentElement) &&
-                    has(dynamicContent.defaultData, [(_e = (_d = e.target) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _e === void 0 ? void 0 : _e.id])) {
-                    setDynamicContent(prev => {
-                        var _a, _b;
-                        return (Object.assign(Object.assign({}, prev), { activeTagId: '', defaultData: omit(prev.defaultData, [(_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.id]) }));
-                    });
+                if (e.target?.parentElement &&
+                    has(dynamicContent.defaultData, [e.target?.parentElement?.id])) {
+                    setDynamicContent(prev => ({
+                        ...prev,
+                        activeTagId: '',
+                        defaultData: omit(prev.defaultData, [e.target?.parentElement?.id]),
+                    }));
                 }
-                (_g = (_f = e.target) === null || _f === void 0 ? void 0 : _f.parentElement) === null || _g === void 0 ? void 0 : _g.remove();
-                setTextValue(personalizationInputRef && ((_h = personalizationInputRef.current) === null || _h === void 0 ? void 0 : _h.innerHTML));
+                e.target?.parentElement?.remove();
+                setTextValue(personalizationInputRef && personalizationInputRef.current?.innerHTML);
             }
         };
         listIconRemove.forEach(eachIcon => {
@@ -450,21 +478,20 @@ export const InputDynamic = (props) => {
         }
     }, [addMessageToQueue, onError, textValue]);
     const renderContentDynamicOptions = () => {
-        if (!(allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length)) {
+        if (!allowDynamicOptions?.length) {
             return null;
         }
-        return allowDynamicOptions.map((dynamicKey) => (React.createElement(DynamicItem, { key: dynamicKey, onClick: e => handleClickDynamicItem(e, dynamicKey) }, mapLabelPersonalization(dynamicKey))));
+        return allowDynamicOptions.map((dynamicKey) => (_jsx(DynamicItem, { onClick: e => handleClickDynamicItem(e, dynamicKey), children: mapLabelPersonalization(dynamicKey) }, dynamicKey)));
     };
     const renderAddPersonalizationView = () => {
-        var _a, _b;
         if (isViewMode) {
             return null;
         }
-        const isRenderPopover = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) > 1;
-        const isOnlyOneOpt = allowDynamicOptions && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.length) === 1;
-        const hasOnlyPersonalization = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.ADDPERSONALIZATION));
-        const hasOnlyShortlink = isOnlyOneOpt && (allowDynamicOptions === null || allowDynamicOptions === void 0 ? void 0 : allowDynamicOptions.includes(AllowDynamicType.SHORTLINK));
-        const iconPersonalization = (React.createElement(Icon, { type: "icon-ants-person-alt", onClick: e => {
+        const isRenderPopover = allowDynamicOptions && allowDynamicOptions?.length > 1;
+        const isOnlyOneOpt = allowDynamicOptions && allowDynamicOptions?.length === 1;
+        const hasOnlyPersonalization = isOnlyOneOpt && allowDynamicOptions?.includes(AllowDynamicType.ADDPERSONALIZATION);
+        const hasOnlyShortlink = isOnlyOneOpt && allowDynamicOptions?.includes(AllowDynamicType.SHORTLINK);
+        const iconPersonalization = (_jsx(Icon, { type: "icon-ants-person-alt", onClick: e => {
                 e.stopPropagation();
                 if (disabled || isRenderPopover)
                     return;
@@ -474,7 +501,11 @@ export const InputDynamic = (props) => {
                 }
                 else if (hasOnlyPersonalization) {
                     // Open Personalization modal
-                    setDynamicContent(prev => (Object.assign(Object.assign({}, prev), { activeTagId: '', visible: true })));
+                    setDynamicContent(prev => ({
+                        ...prev,
+                        activeTagId: '',
+                        visible: true,
+                    }));
                 }
                 else {
                     toggleShortLinkModal();
@@ -482,37 +513,34 @@ export const InputDynamic = (props) => {
             }, className: "customize-antsomi-profile", style: {
                 width: 24,
                 height: 24,
-                color: disabled ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextDisabled : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary,
+                color: disabled ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
                 cursor: disabled ? 'not-allowed' : 'pointer',
             } }));
         if (!isRenderPopover) {
             return iconPersonalization;
         }
-        return (React.createElement(Popover, { content: renderContentDynamicOptions(), placement: "bottomLeft", rootClassName: "no-padding-content", trigger: "click", open: isShowPopover, onOpenChange: handleOpenChange }, iconPersonalization));
+        return (_jsx(Popover, { content: renderContentDynamicOptions(), placement: "bottomLeft", rootClassName: "no-padding-content", trigger: "click", open: isShowPopover, onOpenChange: handleOpenChange, children: iconPersonalization }));
     };
-    return (React.createElement(WrapperInputStyle, { id: "ants-ui-input-personalization" },
-        React.createElement("div", { className: classnames({
-                'input-wrapper-outter': true,
-                'styles-input-wrapper': !isViewMode,
-                'input-error': (errors === null || errors === void 0 ? void 0 : errors.length) && (errors === null || errors === void 0 ? void 0 : errors.length) > 0,
-            }), style: Object.assign(Object.assign({}, (isViewMode && {
-                padding: 0,
-                minHeight: 0,
-                fontSize: 12,
-                border: 'none',
-            })), { width: '100%' }), onClick: () => { var _a; return (_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
-            React.createElement("div", { className: "input-personal", style: {
-                    display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
-                }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: {
-                    __html: getDangerouslySetInnerHTML(textValue),
-                }, onPaste: onPaste }),
-            renderAddPersonalizationView()),
-        React.createElement(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x }, "Click on the link to convert it to a shortlink"),
-        popoverOpenShortLink && (React.createElement(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback })),
-        isRenderAddDynamicContent && (React.createElement(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: showIndex, showDisplayFormat: showDisplayFormat, isShowCustomFunction: isShowCustomFunction, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
-                handleInsertText(value);
-            }, onCancel: () => handleCloseAddDynamicContent() }))));
+    return (_jsxs(WrapperInputStyle, { id: "ants-ui-input-personalization", children: [_jsxs("div", { className: classnames({
+                    'input-wrapper-outter': true,
+                    'styles-input-wrapper': !isViewMode,
+                    'input-error': errors?.length && errors?.length > 0,
+                }), style: {
+                    ...(isViewMode && {
+                        padding: 0,
+                        minHeight: 0,
+                        fontSize: 12,
+                        border: 'none',
+                    }),
+                    width: '100%',
+                }, onClick: () => personalizationInputRef.current?.focus(), children: [_jsx("div", { className: "input-personal", style: {
+                            display: textValue && textValue !== '<br>' ? 'inline-block' : undefined,
+                        }, contentEditable: !isViewMode, onBlur: onTriggerChange, onKeyPress: handleKeyPress, ref: personalizationInputRef, 
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML: {
+                            __html: getDangerouslySetInnerHTML(textValue),
+                        }, onPaste: onPaste }), renderAddPersonalizationView()] }), _jsx(TooltipHover, { isShow: tooltipHoverDebounce.x > 0 && tooltipHoverDebounce.y > 0, top: tooltipHoverDebounce.y, left: tooltipHoverDebounce.x, children: "Click on the link to convert it to a shortlink" }), popoverOpenShortLink && (_jsx(PopupShortLink, { open: popoverOpenShortLink, disabledOpts: disabledOpts, onOk: handleInsertSortLink, onClose: toggleShortLinkModal, initSelectedProperties: initSelectedProperties, callback: callback })), isRenderAddDynamicContent && (_jsx(AddDynamicContent, { APIConfig: apiConfig, defaultDynamicIndex: 1, showIndex: showIndex, showDisplayFormat: showDisplayFormat, isShowCustomFunction: isShowCustomFunction, visible: dynamicContent.visible, defaultData: dynamicContent.defaultData[dynamicContent.activeTagId] || {}, journeySettings: dynamicContent.journeySettings, contentSources: dynamicContent.contentSources, onOk: (value) => {
+                    handleInsertText(value);
+                }, onCancel: () => handleCloseAddDynamicContent() }))] }));
 };
 InputDynamic.defaultProps = defaultProps;

package/es/components/atoms/InputDynamic/PopupShortLink.js

@@ -1,14 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Col, Row } from 'antd';
 // Molecules
-import { Modal } from '../../molecules';
+import { Modal } from '@antscorp/antsomi-ui/es/components/molecules/Modal';
 // Components
-import { Radio } from '../Radio';
+import { Radio } from '@antscorp/antsomi-ui/es/components/atoms/Radio';
 // Styled
 import { InputShortLink, InputWrapper } from './styled';
 // Utils
-import { validateURL } from './utils';
+import { validateURL } from '@antscorp/antsomi-ui/es/utils/validateURL';
 const OPTIONS = [
     {
         value: 'individual',
@@ -31,23 +32,37 @@ export const PopupShortLink = props => {
         if (initSelectedProperties && initSelectedProperties.keyTag) {
             type = initSelectedProperties.keyTag === 'shortlink' ? 'individual' : 'general';
         }
-        setState(prev => (Object.assign(Object.assign({}, prev), { link: initSelectedProperties.link, type: type })));
+        setState(prev => ({
+            ...prev,
+            link: initSelectedProperties.link,
+            type: type,
+        }));
     }, [initSelectedProperties, setState]);
     const handleClose = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { link: '', error: '' })));
+        setState(prev => ({
+            ...prev,
+            link: '',
+            error: '',
+        }));
         if (onClose)
             onClose();
     };
     const handleValidate = ({ urlString = state.link, afterValidate }) => {
         const isValid = validateURL(urlString);
-        setState(prev => (Object.assign(Object.assign({}, prev), { error: isValid ? '' : 'Invalid URL' })));
+        setState(prev => ({
+            ...prev,
+            error: isValid ? '' : 'Invalid URL',
+        }));
         if (typeof afterValidate === 'function')
             afterValidate(isValid);
     };
     const handleOnChange = (value) => {
         if (state.error)
             handleValidate({ urlString: value });
-        setState(prev => (Object.assign(Object.assign({}, prev), { link: value })));
+        setState(prev => ({
+            ...prev,
+            link: value,
+        }));
     };
     const handleOnOK = () => {
         handleValidate({
@@ -63,23 +78,13 @@ export const PopupShortLink = props => {
         });
     };
     const onChangeType = (event) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { type: event.target.value })));
+        setState(prev => ({
+            ...prev,
+            type: event.target.value,
+        }));
     };
-    return (React.createElement(Modal, { open: open, onCancel: handleClose, title: React.createElement("div", { style: { color: 'rgba(0, 0, 0, 0.87)', fontWeight: 'normal', fontSize: '16px' } }, "Add Short Link"), okText: "OK", cancelText: "Cancel", closable: false, onOk: handleOnOK, okButtonProps: {
+    return (_jsxs(Modal, { open: open, onCancel: handleClose, title: _jsx("div", { style: { color: 'rgba(0, 0, 0, 0.87)', fontWeight: 'normal', fontSize: '16px' }, children: "Add Short Link" }), okText: "OK", cancelText: "Cancel", closable: false, onOk: handleOnOK, okButtonProps: {
             disabled: !validateURL(state.link),
             type: !validateURL(state.link) ? 'default' : 'primary',
-        } },
-        React.createElement(Row, null,
-            React.createElement(Col, { span: 6 },
-                React.createElement("span", { style: { fontSize: 12, color: '#000' } }, "Short link type")),
-            React.createElement(Col, { span: 18 },
-                React.createElement(Radio.Group, { onChange: onChangeType, value: state.type }, OPTIONS.map(each => (React.createElement(Radio, { key: each.value, disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value }, each.label)))))),
-        React.createElement(Row, null,
-            React.createElement(Col, { span: 24 },
-                React.createElement(InputWrapper, null,
-                    React.createElement(InputShortLink, { required: true, isReverseMask: true, isHideErrMessage: true, labelColor: "#000000", id: "input-short-link-url", label: "Your URL", value: state.link, onAfterChange: handleOnChange })))),
-        !!state.error && (React.createElement(Row, null,
-            React.createElement(Col, { span: 6 }),
-            React.createElement(Col, { span: 18 },
-                React.createElement("div", null, state.error))))));
+        }, children: [_jsxs(Row, { children: [_jsx(Col, { span: 6, children: _jsx("span", { style: { fontSize: 12, color: '#000' }, children: "Short link type" }) }), _jsx(Col, { span: 18, children: _jsx(Radio.Group, { onChange: onChangeType, value: state.type, children: OPTIONS.map(each => (_jsx(Radio, { disabled: disabledOpts && disabledOpts[each.value], name: "shortlink-type", value: each.value, children: each.label }, each.value))) }) })] }), _jsx(Row, { children: _jsx(Col, { span: 24, children: _jsx(InputWrapper, { children: _jsx(InputShortLink, { required: true, isReverseMask: true, isHideErrMessage: true, labelColor: "#000000", id: "input-short-link-url", label: "Your URL", value: state.link, onAfterChange: handleOnChange }) }) }) }), !!state.error && (_jsxs(Row, { children: [_jsx(Col, { span: 6 }), _jsx(Col, { span: 18, children: _jsx("div", { children: state.error }) })] }))] }));
 };

package/es/components/atoms/InputDynamic/constants.d.ts

@@ -13,6 +13,10 @@ export declare const DATE_AND_TIME_DEFAULT: {
         };
     };
 };
+export declare const AllowDynamicType: {
+    readonly SHORTLINK: "shortlink";
+    readonly ADDPERSONALIZATION: "addPersonalization";
+};
 export declare const MAP_DATA_TYPE: {
     number: {
         name: string;

package/es/components/atoms/InputDynamic/constants.js

@@ -13,6 +13,10 @@ export const DATE_AND_TIME_DEFAULT = {
         },
     },
 };
+export const AllowDynamicType = {
+    SHORTLINK: 'shortlink',
+    ADDPERSONALIZATION: 'addPersonalization',
+};
 export const MAP_DATA_TYPE = {
     number: {
         name: 'number',

package/es/components/atoms/InputDynamic/styled.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 export declare const WrapperInputStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SpanIcon: import("styled-components").StyledComponent<"span", any, {
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;