@antscorp/antsomi-ui 2.0.113 → 2.0.115

package/es/components/molecules/InputSelectAttribute/index.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Libraries
+import { memo, useCallback, useMemo, useState } from 'react';
+import { get, has, keyBy, upperFirst } from 'lodash';
+import { Flex, Form, Select, Tooltip, Typography } from 'antd';
+// Translations
+import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
+// Components
+import Icon from '@antscorp/icons';
+import { ModalV2 } from '../ModalV2';
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { StyledSelect } from './styled';
+import { EmptyData } from '../EmptyData';
+import { Dashboard30Icon, ErrorIcon } from '../../icons';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
+const InputSelectAttribute = (props) => {
+    const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
+    const [form] = Form.useForm();
+    const sourceValue = Form.useWatch('source', form);
+    // States
+    const [openModal, setOpenModal] = useState(false);
+    const codeOptions = useMemo(() => {
+        if (sourceValue) {
+            return get(mapCodeOptions, sourceValue, []);
+        }
+        return [];
+    }, [sourceValue, mapCodeOptions]);
+    const initCodeTitleField = useMemo(() => {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
+            return 'Allocated Code';
+        }
+        return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
+    }, [sourceValue]);
+    const mapCodeBySource = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(get(mapCodeOptions, value?.source, []), 'value');
+    }, [mapCodeOptions, value]);
+    const mapSourceOptions = useMemo(() => {
+        if (typeof value === 'string')
+            return {};
+        return keyBy(sourceOptions, 'value');
+    }, [sourceOptions, value]);
+    const getCodeDefaultBySource = useCallback((source) => get(mapCodeOptions, [source, '0', 'value'], ''), [mapCodeOptions]);
+    const onOpenModal = useCallback(() => {
+        if (value && typeof value !== 'string') {
+            const isExistCode = has(mapCodeBySource, [value?.code, 'label']);
+            const isExistSource = has(mapSourceOptions, [value?.source]);
+            form.setFieldsValue({
+                source: isExistSource ? value?.source : undefined,
+                code: isExistCode ? value?.code : undefined,
+            });
+        }
+        else {
+            const source = sourceOptions[0]?.value || '';
+            const code = getCodeDefaultBySource(source);
+            form.setFieldsValue({ source, code });
+        }
+        setOpenModal(true);
+    }, [value, mapCodeBySource, form, sourceOptions, mapSourceOptions, getCodeDefaultBySource]);
+    const onDeselect = useCallback(() => {
+        onChange({ value: '', valueType: 'input' });
+    }, [onChange]);
+    const onHideModal = useCallback(() => {
+        setOpenModal(false);
+    }, []);
+    const onAfterClose = useCallback(() => {
+        form.resetFields();
+    }, [form]);
+    const onOk = async () => {
+        try {
+            // Validate form fields before getting values
+            const values = await form.validateFields();
+            if (typeof values !== 'string') {
+                const newValue = {
+                    source: values?.source,
+                    code: values?.code,
+                };
+                onChange({ value: newValue, valueType: 'select' });
+            }
+            setOpenModal(false);
+        }
+        catch (errorInfo) {
+            // eslint-disable-next-line no-console
+            console.error('Validation Failed:', errorInfo);
+        }
+    };
+    const onChangeInput = useCallback((val) => {
+        onChange({ value: val, valueType: 'input' });
+    }, [onChange]);
+    const onValuesChange = useCallback((changedValues) => {
+        // If source changed -> set new code based on new source
+        if (changedValues?.source) {
+            const newCode = getCodeDefaultBySource(changedValues.source);
+            form.setFieldValue('code', newCode);
+        }
+    }, [form, getCodeDefaultBySource]);
+    const renderInput = () => {
+        let element = null;
+        const isObjValue = value && typeof value !== 'string';
+        if (openModal || isObjValue) {
+            element = (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    height: 32,
+                    padding: '4px 12px 4px 4px',
+                    borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], value?.code) })) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+        }
+        else {
+            element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {
+                    ...(openModal ? { display: 'none' } : {}),
+                } }));
+        }
+        return element;
+    };
+    return (_jsxs(_Fragment, { children: [renderInput(), errorMsg ? (_jsx(Typography.Text, { style: { marginLeft: 8, color: THEME.token?.red8, marginTop: 5 }, children: errorMsg })) : null, _jsx(ModalV2, { title: translate(translations._PREDICT_MODEL_SELECT_ATTRIBUTE, 'Select attribute'), okText: translate(translations._ACT_APPLY, 'Apply'), open: openModal, onOk: onOk, onCancel: onHideModal, afterClose: onAfterClose, destroyOnClose: true, centered: true, children: _jsxs(Form, { colon: false, form: form, onValuesChange: onValuesChange, children: [_jsx(Form.Item, { label: translate(translations._TITL_PERSONALIZATION_TYPE, 'Content Source'), name: "source", required: true, labelCol: { span: 6 }, labelAlign: "left", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), options: sourceOptions, placeholder: "Please select an item" }) }), _jsx(Form.Item, { label: label || initCodeTitleField, required: true, labelCol: { span: 6 }, labelAlign: "left", name: "code", rules: [{ required: true, message: 'Please select field!' }], children: _jsx(Select, { suffixIcon: _jsx(Icon, { type: "icon-ants-expand-more", style: { fontSize: '20px', color: THEME.token?.colorIcon } }), notFoundContent: _jsx(EmptyData, { size: "small", icon: _jsx(Dashboard30Icon, {}), description: "No personalized content in this journey" }), placeholder: "Please select an item", options: codeOptions }) })] }) })] }));
+};
+export default memo(InputSelectAttribute);

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

@@ -0,0 +1,14 @@
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react/jsx-runtime").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react/jsx-runtime").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react/jsx-runtime").JSX.Element;
+    };
+}, any, {
+    $isPlaceholder?: any;
+    $isError?: boolean | undefined;
+}, never>;

package/es/components/molecules/InputSelectAttribute/styled.js

@@ -0,0 +1,33 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const StyledSelect = styled(Select) `
+  .antsomi-select-selection-overflow .antsomi-select-selection-overflow-item {
+    flex: 1;
+
+    .antsomi-select-selection-search {
+      width: fit-content !important;
+      flex: 1;
+    }
+  }
+
+  ${({ $isError }) => $isError
+    ? css `
+          .antsomi-select-selector {
+            box-shadow: none !important;
+          }
+        `
+    : css ``}
+
+  .antsomi-select-selection-placeholder {
+    ${props => !props.$isPlaceholder
+    ? css `
+            color: rgba(0, 0, 0, 0.85);
+            font-size: ${THEME.token?.fontSize}px;
+          `
+    : css ``}
+  }
+`;

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

@@ -9,7 +9,9 @@ export declare const StyledSelect: import("styled-components").StyledComponent<(
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {
+    isError?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<"div", any, {
     borderColor?: any;
 }, never>;

package/es/components/molecules/SelectV2/styled.js

@@ -105,8 +105,8 @@ export const StyledTag = styled(Tag) `
   margin-right: 5px !important;
   padding: 5px 10px !important;
   border-radius: 15px !important;
-  border: none !important;
-  background-color: ${THEME.token?.blue2} !important;
+  border: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
+  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.blue2)} !important;
   cursor: pointer !important;
 
   .antsomi-tag-close-icon {

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -17,13 +17,15 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
-import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, preventUndoRedo, } from './utils';
+import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, } from './constants';
+import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
+const { CUSTOM_TAG } = TAG_TYPE;
+const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -33,6 +35,7 @@ const TagifyInput = forwardRef((props, ref) => {
     const tagifyWrapperRef = useRef(null);
     const placeholderRef = useRef(null);
     const lastRange = useRef(null);
+    const tagLength = tagifyRef?.current?.getTagElms().length;
     // Memoizations
     const cssVariablesMemoized = useMemo(() => _.assign({}, defaultCssVariables, cssTagifyVariables || {}), [cssTagifyVariables]);
     // Only run in the first render
@@ -454,6 +457,11 @@ const TagifyInput = forwardRef((props, ref) => {
             onTagClick(event.detail);
         }
     }, [onTagClick]);
+    const onTagifyRemoveTag = useCallback((event) => {
+        if (event.detail && onTagRemove) {
+            onTagRemove(event.detail);
+        }
+    }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
     const onTagifyTyping = useCallback((event) => {
         if (event.detail) {
@@ -523,7 +531,11 @@ const TagifyInput = forwardRef((props, ref) => {
             case EMOJI: {
                 closeIcon = '';
                 const emojiPath = emojiManufacturer(value, collection);
-                visibleTagContent = getEmojiTag({ src: emojiPath, emoji: label, code: value });
+                visibleTagContent = getEmojiTag({
+                    src: emojiPath,
+                    emoji: label,
+                    code: value,
+                });
                 break;
             }
             case DETECT_LINK: {
@@ -582,52 +594,29 @@ const TagifyInput = forwardRef((props, ref) => {
                         while ((match = regex.exec(value)) !== null) {
                             const [, personalizeContent] = match;
                             const [tagCode] = personalizeContent.split('||');
-                            const { label: tagLabel, isValid, message, type, isRemoved, hasViewPermission, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
-                            const isPromotionCode = type === PROMOTION_CODE;
+                            const { label: tagLabel, type, status, statusMsg, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
                             const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
                             /*
                              * Just only update to the correct text of the tag
                              * NOTE: Do not actually affect raw data
                              */
                             if (tagTextNode) {
-                                tagTextNode.textContent = tagLabel;
-                                // Clear all previous attributes
-                                tagElement.removeAttribute(REMOVED_TAG);
-                                tagElement.removeAttribute(NO_VIEW_TAG);
-                                tagElement.removeAttribute(INVALID_TAG);
-                                tagElement.removeAttribute(READONLY_TAG);
-                                tagElement.removeAttribute(MESSAGE_TAG);
-                                // In case promotion pool has something wrong
-                                if (isPromotionCode && message) {
-                                    if (isRemoved) {
-                                        tagElement.setAttribute(REMOVED_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'error',
-                                            statusMsg: message,
-                                        });
-                                    }
-                                    else if (!hasViewPermission) {
-                                        tagElement.setAttribute(NO_VIEW_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'warning',
-                                            statusMsg: message,
-                                        });
-                                    }
-                                    else if (!isValid) {
-                                        tagElement.setAttribute(READONLY_TAG, 'true');
-                                        tagElement.setAttribute(INVALID_TAG, 'true');
-                                        tagElement.setAttribute(MESSAGE_TAG, message);
-                                        tagifyRef.current?.getSetTagData(tagElement, {
-                                            ...tagData,
-                                            status: 'warning',
-                                            statusMsg: message,
-                                        });
-                                    }
+                                const isCustomTag = isCustomTagType(type);
+                                // NOTE: Custom tag type [CUSTOM_TAG] does not need to get label from map attribute
+                                // It's just get from [tagProperties] instead
+                                if (!isCustomTag) {
+                                    tagTextNode.textContent = tagLabel;
                                 }
+                                // Remove all existing attributes
+                                sanitizeTagAttributes(tagElement);
+                                // Update new tag attributes
+                                const tagAttributes = getTagAttributes({
+                                    type: type,
+                                    status,
+                                    statusMsg,
+                                    displayName: tagLabel,
+                                });
+                                applyTagAttributes(tagElement, tagAttributes);
                             }
                         }
                     }
@@ -637,7 +626,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (!isAccepted)
                             return;
                         const { url, shortener, label } = tagData;
-                        const { label: tagLabel, isValid, message, type: tagType, } = getShortLinkTagInfo({
+                        const { label: tagLabel, type: tagType, status, statusMsg, } = getShortLinkTagInfo({
                             type,
                             label,
                             shortener,
@@ -652,22 +641,16 @@ const TagifyInput = forwardRef((props, ref) => {
                          */
                         if (tagTextNode) {
                             tagTextNode.textContent = tagLabel;
-                            // Clear all previous attributes
-                            tagElement.removeAttribute(REMOVED_TAG);
-                            tagElement.removeAttribute(NO_VIEW_TAG);
-                            tagElement.removeAttribute(INVALID_TAG);
-                            tagElement.removeAttribute(READONLY_TAG);
-                            tagElement.removeAttribute(MESSAGE_TAG);
-                            // In case promotion pool has something wrong
-                            if (!isValid && message) {
-                                tagElement.setAttribute(REMOVED_TAG, 'true');
-                                tagElement.setAttribute(MESSAGE_TAG, message);
-                                tagifyRef.current?.getSetTagData(tagElement, {
-                                    ...tagData,
-                                    status: 'error',
-                                    statusMsg: message,
-                                });
-                            }
+                            // Remove all existing attributes
+                            sanitizeTagAttributes(tagElement);
+                            // Update new tag attributes
+                            const tagAttributes = getTagAttributes({
+                                type: type,
+                                status,
+                                statusMsg,
+                                displayName: tagLabel,
+                            });
+                            applyTagAttributes(tagElement, tagAttributes);
                         }
                     }
                 }
@@ -675,6 +658,52 @@ const TagifyInput = forwardRef((props, ref) => {
             setTooltipRefresher(prev => prev + 1);
         }
     }, [acceptableTagPattern]);
+    /*
+     * Execute tag properties for each tag
+     */
+    const executeTagProperties = useCallback((properties) => {
+        if (tagifyRef.current) {
+            let isChangeOccurred = false;
+            const tagElements = tagifyRef.current.getTagElms();
+            const { pattern, name: cachePatternName } = patternHandlers[PERSONALIZE_PTN];
+            tagElements.forEach(tagElement => {
+                const { __tagifyTagData: tagData } = tagElement;
+                if (!tagData || tagData?.type !== CUSTOM_TAG || !tagData?.value)
+                    return;
+                const { type, value } = tagData;
+                // Use the cached regex instead of creating a new one each time
+                const regex = getCachedRegex(pattern, 'g', cachePatternName);
+                let match;
+                // Iterate over matches of the current pattern
+                // eslint-disable-next-line no-cond-assign
+                while ((match = regex.exec(value)) !== null) {
+                    const [, contentCode] = match;
+                    const customTagId = getCustomTagId(type, contentCode);
+                    const property = _.get(properties, customTagId);
+                    if (!customTagId || !property)
+                        continue;
+                    const { displayName } = property;
+                    // Update tag text (but not raw data)
+                    tagifyRef.current?.setTagTextNode(tagElement, displayName);
+                    isChangeOccurred = true;
+                    // Remove all existing attributes
+                    sanitizeTagAttributes(tagElement);
+                    // Update new tag attributes
+                    const tagAttributes = getTagAttributes(property);
+                    applyTagAttributes(tagElement, tagAttributes);
+                    // Update tag content element attributes
+                    const tagContentEl = tagElement.querySelector('.tagify__tag-content');
+                    if (tagContentEl) {
+                        const tagContentAttributes = getTagContentAttributes(property.type);
+                        applyTagAttributes(tagContentEl, tagContentAttributes);
+                    }
+                }
+            });
+            if (isChangeOccurred) {
+                setTooltipRefresher(prev => prev + 1);
+            }
+        }
+    }, []);
     const initializeTagify = useCallback(() => {
         if (inputRef.current && !tagifyRef.current) {
             tagifyRef.current = new Tagify(inputRef.current, {
@@ -789,6 +818,50 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         };
     }, [initializeTagify]);
+    useEffect(() => {
+        if (tagifyRef.current && tagLength && _.isFunction(onTagRemove)) {
+            // Because the remove tag event is not triggered when the tag is removed with Backspace or drag selection tags
+            // we need to listen to the input element to detect when a tag is removed
+            let mutationQueue = [];
+            let processing = false;
+            const processMutations = () => {
+                processing = true;
+                const relevantNodes = mutationQueue.flatMap(mutation => [...mutation.removedNodes].filter(node => {
+                    const isUpdatedTag = mutation.addedNodes.length > 0;
+                    return !isUpdatedTag && node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'TAG';
+                }));
+                relevantNodes.forEach(node => {
+                    try {
+                        const tagData = tagifyRef.current?.getSetTagData(node);
+                        if (tagData && tagData.type === CUSTOM_TAG && !tagData?.__removed) {
+                            onTagRemove({ data: tagData });
+                        }
+                    }
+                    catch (error) {
+                        // biome-ignore lint/suspicious/noConsole: <explanation>
+                        console.error('Error while removing tag with Backspace', error);
+                    }
+                });
+                mutationQueue = [];
+                processing = false;
+            };
+            const observer = new MutationObserver(mutations => {
+                mutationQueue.push(...mutations);
+                if (!processing) {
+                    requestAnimationFrame(processMutations); // Ensures all mutations are processed efficiently
+                }
+            });
+            observer.observe(tagifyRef.current.DOM.input, {
+                childList: true, // Only observe direct child additions/removals
+                subtree: false, // Prevent deep observation
+                attributes: false, // Ignore attribute changes
+                characterData: false, // Ignore text content changes
+            });
+            return () => {
+                observer.disconnect();
+            };
+        }
+    }, [tagLength, onTagRemove]);
     // Settings some tagify attributes
     // Set [readonly, disabled, placeholder]
     useEffect(() => {
@@ -806,27 +879,28 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [disabled, placeholder, readonly]);
     // Set readonly for each tag
     useEffect(() => {
-        if (tagifyRef.current && typeof readonlyTag !== 'undefined') {
+        if (tagifyRef.current && tagLength && typeof readonlyTag !== 'undefined') {
             const tagElementList = tagifyRef.current.getTagElms();
             tagElementList.forEach((tagElement) => {
                 const tagType = _.get(tagElement, '__tagifyTagData.type', '');
                 const isPersonalizeTag = isPersonalizeTagType(tagType);
+                const isCustomTag = isCustomTagType(tagType);
                 // Only support readonly for personalize tag
-                if (!isPersonalizeTag)
+                if (!isPersonalizeTag && !isCustomTag)
                     return;
                 // Caution: Don't use readonly attribute -> readonly attribute Tagify library managed
                 if (readonlyTag) {
-                    tagElement.setAttribute(READONLY_TAG, readonlyTag.toString());
+                    tagElement.setAttribute(PREPARING_ST, readonlyTag.toString());
                 }
                 else {
                     // Only remove readonly-tag attribute if the invalid attribute is not existing
                     if (!tagElement.hasAttribute(INVALID_TAG)) {
-                        tagElement.removeAttribute(READONLY_TAG);
+                        tagElement.removeAttribute(PREPARING_ST);
                     }
                 }
             });
         }
-    }, [readonlyTag]);
+    }, [readonlyTag, tagLength]);
     // Set max personalize tags
     useLayoutEffect(() => {
         if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {
@@ -837,10 +911,13 @@ const TagifyInput = forwardRef((props, ref) => {
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */
     useDeepCompareEffect(() => {
-        if (!_.isEmpty(mapAttributes)) {
-            makeValidLabelTags(mapAttributes, mapErrorAttributes);
-        }
+        makeValidLabelTags(mapAttributes, mapErrorAttributes);
     }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
+    useLayoutEffect(() => {
+        if (tagProperties && tagLength) {
+            executeTagProperties(tagProperties);
+        }
+    }, [tagProperties, tagLength, executeTagProperties]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -848,7 +925,11 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('click', onTagItemClick);
             tagifyInstance.on('input', onInputTagifyDebounce);
             tagifyInstance.on('change', onTagifyChangedDebounce);
+            tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (tagifyInstance.DOM.input) {
+                tagifyInstance.DOM.input.addEventListener('keydown', preventUndoRedo);
+            }
         }
         // Off listen to Tagify events
         return () => {
@@ -857,6 +938,9 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('input', onInputTagifyDebounce);
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (tagifyInstance.DOM.input) {
+                    tagifyInstance.DOM.input.removeEventListener('keydown', preventUndoRedo);
+                }
             }
         };
     }, [onTagItemClick, onInputTagifyDebounce, onTagifyChangedDebounce, onKeyDown]);
@@ -880,20 +964,24 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
                 // Convert the string to tagify pattern
                 const content = parseTagStringToTagify(textValue, acceptableTagPattern);
+                setIsLineBreak(hasLineBreak(textValue));
                 tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
-                if (!_.isEmpty(mapAttributes)) {
-                    makeValidLabelTags(mapAttributes, mapErrorAttributes);
+                makeValidLabelTags(mapAttributes, mapErrorAttributes);
+                if (tagProperties) {
+                    executeTagProperties(tagProperties);
                 }
             }
         }
     }, [
         initialValue,
         mapAttributes,
+        tagProperties,
         mapErrorAttributes,
         escapeHTML,
         acceptableTagPattern,
         makeValidLabelTags,
+        executeTagProperties,
     ]);
     useEffect(() => {
         if (tagifyRef.current && initialValue === '') {

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

@@ -4,15 +4,32 @@ export declare const DIMENSIONS: {
     readonly TAG_H: 24;
 };
 export declare const MIN_H_WRAPPER: 34, TAG_H: 24;
+export declare const TAG_STATUS: {
+    readonly REMOVED: "removed";
+    readonly ARCHIVED: "archived";
+    readonly ACTIVE: "active";
+    readonly INACTIVE: "inactive";
+    readonly EXPIRED: "expired";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+    readonly INVALID: "invalid";
+    readonly DO_NOT_VIEW: "do-not-view";
+};
 export declare const TAG_CUSTOM_ATTRIBUTES: {
+    readonly PREPARING_ST: "preparing-setting";
     readonly READONLY_TAG: "readonly-tag";
     readonly INVALID_TAG: "invalid-tag";
     readonly REMOVED_TAG: "removed-tag";
     readonly NO_VIEW_TAG: "no-view-tag";
     readonly MESSAGE_TAG: "message-tag";
     readonly FORCE_SHOW_TOOLTIP: "force-show-tooltip";
+    readonly ERROR_TAG: "error-tag";
+    readonly WARNING_TAG: "warning-tag";
+    readonly PRIORITY_COLOR_TYPE: "priority-color-type";
+    readonly BG_COLOR_PERSONALIZE_TYPE: "bg-color-personalize-type";
+    readonly BG_COLOR_PERSONALIZE_TYPE_V2: "bgColorPersonalizeType";
 };
-export declare const READONLY_TAG: "readonly-tag", INVALID_TAG: "invalid-tag", REMOVED_TAG: "removed-tag", NO_VIEW_TAG: "no-view-tag", MESSAGE_TAG: "message-tag", FORCE_SHOW_TOOLTIP: "force-show-tooltip";
+export declare const PREPARING_ST: "preparing-setting", READONLY_TAG: "readonly-tag", INVALID_TAG: "invalid-tag", REMOVED_TAG: "removed-tag", NO_VIEW_TAG: "no-view-tag", MESSAGE_TAG: "message-tag", FORCE_SHOW_TOOLTIP: "force-show-tooltip", ERROR_TAG: "error-tag", WARNING_TAG: "warning-tag", PRIORITY_COLOR_TYPE: "priority-color-type", BG_COLOR_PERSONALIZE_TYPE: "bg-color-personalize-type", BG_COLOR_PERSONALIZE_TYPE_V2: "bgColorPersonalizeType";
 export declare const defaultCssVariables: {
     '--input-color': string | undefined;
     '--input-font-size': string;
@@ -59,9 +76,12 @@ export declare const TAG_TYPE: {
     readonly SHORT_LINK_V2: "shortlink_v2";
     readonly DETECT_LINK: "detect_link";
     readonly CONTENT_SOURCE_GROUP: "groups";
+    readonly ALLOCATED_CODE: "allocated_code";
+    readonly CUSTOM_TAG: "custom_tag";
     readonly UNSUBSCRIBE_WHATSAPP: "unsubscribe_whatsapp";
 };
-export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", SHORT_LINK_V2: "shortlink_v2", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups", UNSUBSCRIBE_WHATSAPP: "unsubscribe_whatsapp";
+export declare const CUSTOMER: "customer", VISITOR: "visitor", EVENT: "event", JOURNEY: "story", CAMPAIGN: "campaign", VARIANT: "variant", PROMOTION_CODE: "promotion_code", CUSTOM_FN: "custom", EMOJI: "emoji", DETECT_LINK: "detect_link", SHORT_LINK: "shortlink", SHORT_LINK_V2: "shortlink_v2", OBJECT_WIDGET: "objectWidget", CONTENT_SOURCE_GROUP: "groups", ALLOCATED_CODE: "allocated_code", CUSTOM_TAG: "custom_tag", UNSUBSCRIBE_WHATSAPP: "unsubscribe_whatsapp";
+export declare const TAG_TYPE_LIST: readonly ("campaign" | "event" | "custom" | "emoji" | "variant" | "customer" | "visitor" | "groups" | "shortlink" | "objectWidget" | "promotion_code" | "story" | "shortlink_v2" | "detect_link" | "allocated_code" | "custom_tag" | "unsubscribe_whatsapp")[];
 export declare const SHORT_LINK_TYPE: {
     readonly INDIVIDUAL: "shortlink";
     readonly GENERAL: "shortlink_static";
@@ -91,6 +111,8 @@ export declare const TAG_COLOR: {
     readonly custom: "#bbefbe";
     readonly groups: "#ffdd9f";
     readonly emoji: "transparent";
+    readonly allocated_code: "#DAA7F8";
+    readonly custom_tag: "transparent";
     readonly unsubscribe_whatsapp: "#cafedd";
 };
 export declare const EMOJI_COLLECTIONS: {