@antscorp/antsomi-ui 2.0.114 → 2.0.115

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: {
@@ -538,21 +550,21 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         const additionalTagAttrs = getAttributesString(additionalAttributes);
-        return `
-        <tag
-          contenteditable='false'
-          spellcheck='false'
-          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
-          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
-          ${tagify.getAttributes(tagData)}
-          ${additionalTagAttrs}
-        >
-          ${closeIcon}
-
+        return `
+        <tag
+          contenteditable='false'
+          spellcheck='false'
+          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
+          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+          ${tagify.getAttributes(tagData)}
+          ${additionalTagAttrs}
+        >
+          ${closeIcon}
+
           ${generateTagContent({
             tagData,
             content: visibleTagContent,
-        })}
+        })}
         </tag>`;
     }, []);
     /*
@@ -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 === '') {
@@ -911,44 +999,44 @@ const TagifyInput = forwardRef((props, ref) => {
         if (!tagifyTooltip) {
             const style = document.createElement('style');
             style.type = 'text/css';
-            style.appendChild(document.createTextNode(`
-          .tagify__tooltip {
-            display: none;
-            position: fixed;
-            background-color: #595959;
-            border-radius: 10px;
-            color: #ffffff;
-            padding: 6px;
-            z-index: 10000;
-            max-width: 280px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-          }
-
-          .tagify__tooltip_content {
-            width: 100%;
-            max-width: 250px;
-            height: auto;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-            line-height: 16px;
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-          }
-
-          .tagify__tooltip_content:before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 50%;
-            left: auto;
-            background-color: #595959;
-            width: 10px;
-            height: 10px;
-            transform: rotate(45deg) translate(50%,-50%);
-            border-radius: 1px;
-          }
+            style.appendChild(document.createTextNode(`
+          .tagify__tooltip {
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          }
+
+          .tagify__tooltip_content {
+            width: 100%;
+            max-width: 250px;
+            height: auto;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+          }
+
+          .tagify__tooltip_content:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 50%;
+            left: auto;
+            background-color: #595959;
+            width: 10px;
+            height: 10px;
+            transform: rotate(45deg) translate(50%,-50%);
+            border-radius: 1px;
+          }
         `));
             document.head.appendChild(style);
             const tooltipWrapper = document.createElement('div');

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: {

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

@@ -5,15 +5,32 @@ export const DIMENSIONS = {
     TAG_H: 24,
 };
 export const { MIN_H_WRAPPER, TAG_H } = DIMENSIONS;
+export const TAG_STATUS = {
+    REMOVED: 'removed',
+    ARCHIVED: 'archived',
+    ACTIVE: 'active',
+    INACTIVE: 'inactive',
+    EXPIRED: 'expired',
+    WARNING: 'warning',
+    ERROR: 'error',
+    INVALID: 'invalid',
+    DO_NOT_VIEW: 'do-not-view',
+};
 export const TAG_CUSTOM_ATTRIBUTES = {
+    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 const { READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, } = TAG_CUSTOM_ATTRIBUTES;
+export const { PREPARING_ST, READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,
@@ -58,6 +75,7 @@ export const tagifyDefaultProps = {
     placeholder: undefined,
     minWidthPlaceholder: 130,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
+    mapErrorAttributes: {},
     onChange: () => { },
 };
 export const TAG_TYPE = {
@@ -75,9 +93,12 @@ export const TAG_TYPE = {
     SHORT_LINK_V2: 'shortlink_v2',
     DETECT_LINK: 'detect_link',
     CONTENT_SOURCE_GROUP: 'groups',
+    ALLOCATED_CODE: 'allocated_code',
+    CUSTOM_TAG: 'custom_tag', // Refer to all tag type
     UNSUBSCRIBE_WHATSAPP: 'unsubscribe_whatsapp',
 };
-export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, UNSUBSCRIBE_WHATSAPP, } = TAG_TYPE;
+export const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, EMOJI, DETECT_LINK, SHORT_LINK, SHORT_LINK_V2, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, ALLOCATED_CODE, CUSTOM_TAG, UNSUBSCRIBE_WHATSAPP, } = TAG_TYPE;
+export const TAG_TYPE_LIST = Object.freeze(Object.values(TAG_TYPE));
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -107,6 +128,8 @@ export const TAG_COLOR = {
     [CUSTOM_FN]: '#bbefbe',
     [CONTENT_SOURCE_GROUP]: '#ffdd9f',
     [EMOJI]: 'transparent',
+    [ALLOCATED_CODE]: '#DAA7F8',
+    [CUSTOM_TAG]: 'transparent',
     [UNSUBSCRIBE_WHATSAPP]: '#cafedd',
 };
 export const EMOJI_COLLECTIONS = {

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

@@ -1,11 +1,9 @@
-import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagTypeProperty } from './types';
 interface TagInfo {
     label: string;
     type: string;
-    isValid: boolean;
-    message?: string;
-    isRemoved?: boolean;
-    hasViewPermission?: boolean;
+    status: string;
+    statusMsg: string;
 }
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.
@@ -18,7 +16,15 @@ export declare function getCachedRegex(pattern: string, flags?: string, cacheKey
 export declare const detectURLRegex: RegExp;
 export declare const tagRegexStringPattern = "\\[\\[({.*?})\\]\\]";
 export declare function acceptablePatternChecking(pattern: AcceptablePattern, acceptablePattern: Array<AcceptablePattern>): boolean;
-export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes?: MapAttributesProps, mapErrorAttributes?: MapAttributesProps) => TagInfo;
+/**
+ * Extracts the custom tag ID from a merge code if the tag type is a custom tag.
+ *
+ * @param {TagTypeProperty} tagType - The type of the tag to check.
+ * @param {string} mergeCode - The merge code containing the tag information, typically in the format "type.customTagId||additionalInfo".
+ * @returns {string} The extracted custom tag ID if the tag type is a custom tag; otherwise, empty string.
+ */
+export declare const getCustomTagId: (tagType: TagTypeProperty, mergeCode: string) => string;
+export declare const getPersonalizeTagInfo: (originalTag: string, mapAttributes: MapAttributesProps, mapErrorAttributes: MapAttributesProps) => TagInfo;
 export declare const getShortLinkTagInfo: (params: {
     type: string;
     label: string;