@antscorp/antsomi-ui 2.0.72 → 2.0.73

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

@@ -48,7 +48,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './SelectAssociatedTag';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -48,4 +48,3 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './SelectAssociatedTag';

package/es/components/molecules/SearchPopover/utils.js

@@ -14,7 +14,7 @@ export const defaultSearch = (opt, search, config) => {
 };
 export const calDefaultListHeightInPopover = (params) => {
     const { listLength, itemSpacing, itemSize } = params;
-    const DEFAULT_NUM_ITEM_SHOWED = 4;
+    const DEFAULT_NUM_ITEM_SHOWED = 6;
     const itemLength = min([DEFAULT_NUM_ITEM_SHOWED, listLength]);
     return calInlineListSize(itemLength || 0, itemSize, itemSpacing);
 };

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

@@ -9,9 +9,7 @@ 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, {
-    isError?: boolean | undefined;
-}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, 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: ${p => (p.isError ? `1px solid ${THEME.token?.colorError}` : 'none')} !important;
-  background-color: ${p => (p.isError ? THEME.token?.bw0 : THEME.token?.blue2)} !important;
+  border: none !important;
+  background-color: ${THEME.token?.blue2} !important;
   cursor: pointer !important;
 
   .antsomi-tag-close-icon {

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

@@ -16,15 +16,13 @@ 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, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, } from './utils';
-import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, } from './utils';
+import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, 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;
+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, defaultCssVariables, tagifyDefaultProps, } from './constants';
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -34,7 +32,6 @@ 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
@@ -441,11 +438,6 @@ 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) {
@@ -489,11 +481,7 @@ 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: {
@@ -552,29 +540,52 @@ const TagifyInput = forwardRef((props, ref) => {
                         while ((match = regex.exec(value)) !== null) {
                             const [, personalizeContent] = match;
                             const [tagCode] = personalizeContent.split('||');
-                            const { label: tagLabel, type, status, statusMsg, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
+                            const { label: tagLabel, isValid, message, type, isRemoved, hasViewPermission, } = getPersonalizeTagInfo(tagCode, attributes, errorAttributes);
+                            const isPromotionCode = type === PROMOTION_CODE;
                             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) {
-                                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;
+                                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,
+                                        });
+                                    }
                                 }
-                                // Remove all existing attributes
-                                sanitizeTagAttributes(tagElement);
-                                // Update new tag attributes
-                                const tagAttributes = getTagAttributes({
-                                    type: type,
-                                    status,
-                                    statusMsg,
-                                    displayName: tagLabel,
-                                });
-                                applyTagAttributes(tagElement, tagAttributes);
                             }
                         }
                     }
@@ -584,7 +595,7 @@ const TagifyInput = forwardRef((props, ref) => {
                         if (!isAccepted)
                             return;
                         const { url, shortener, label } = tagData;
-                        const { label: tagLabel, type: tagType, status, statusMsg, } = getShortLinkTagInfo({
+                        const { label: tagLabel, isValid, message, type: tagType, } = getShortLinkTagInfo({
                             type,
                             label,
                             shortener,
@@ -599,16 +610,22 @@ const TagifyInput = forwardRef((props, ref) => {
                          */
                         if (tagTextNode) {
                             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);
+                            // 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,
+                                });
+                            }
                         }
                     }
                 }
@@ -616,52 +633,6 @@ 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, {
@@ -765,50 +736,6 @@ 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(() => {
@@ -826,28 +753,27 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [disabled, placeholder, readonly]);
     // Set readonly for each tag
     useEffect(() => {
-        if (tagifyRef.current && tagLength && typeof readonlyTag !== 'undefined') {
+        if (tagifyRef.current && 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 && !isCustomTag)
+                if (!isPersonalizeTag)
                     return;
                 // Caution: Don't use readonly attribute -> readonly attribute Tagify library managed
                 if (readonlyTag) {
-                    tagElement.setAttribute(PREPARING_ST, readonlyTag.toString());
+                    tagElement.setAttribute(READONLY_TAG, readonlyTag.toString());
                 }
                 else {
                     // Only remove readonly-tag attribute if the invalid attribute is not existing
                     if (!tagElement.hasAttribute(INVALID_TAG)) {
-                        tagElement.removeAttribute(PREPARING_ST);
+                        tagElement.removeAttribute(READONLY_TAG);
                     }
                 }
             });
         }
-    }, [readonlyTag, tagLength]);
+    }, [readonlyTag]);
     // Set max personalize tags
     useLayoutEffect(() => {
         if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {
@@ -858,13 +784,10 @@ const TagifyInput = forwardRef((props, ref) => {
      * Need to sync label of the tags if any map attribute is changed to make correct label
      * */
     useDeepCompareEffect(() => {
-        makeValidLabelTags(mapAttributes, mapErrorAttributes);
-    }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
-    useLayoutEffect(() => {
-        if (tagProperties && tagLength) {
-            executeTagProperties(tagProperties);
+        if (!_.isEmpty(mapAttributes)) {
+            makeValidLabelTags(mapAttributes, mapErrorAttributes);
         }
-    }, [tagProperties, tagLength, executeTagProperties]);
+    }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -876,13 +799,11 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('click', onTagItemClick);
             tagifyInstance.on('input', onInputTagifyDebounce);
             tagifyInstance.on('change', onTagifyChangedDebounce);
-            tagifyInstance.on('remove', onTagifyRemoveTag);
         }
         // Off listen to Tagify events
         return () => {
             if (tagifyInstance) {
                 tagifyInstance.off('click', onTagItemClick);
-                tagifyInstance.off('remove', onTagifyRemoveTag);
                 if (onInputTagifyDebounce) {
                     tagifyInstance.off('input', onInputTagifyDebounce);
                 }
@@ -891,7 +812,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
             }
         };
-    }, [onTagItemClick, onTagifyTyping, onTagifyChanged, onTagifyRemoveTag]);
+    }, [onTagItemClick, onTagifyTyping, onTagifyChanged]);
     // At the first render, need to update URL to tag to show hint in the tooltip with tag
     useEffect(() => {
         detectReplaceURLToTag();
@@ -912,24 +833,20 @@ 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
-                makeValidLabelTags(mapAttributes, mapErrorAttributes);
-                if (tagProperties) {
-                    executeTagProperties(tagProperties);
+                if (!_.isEmpty(mapAttributes)) {
+                    makeValidLabelTags(mapAttributes, mapErrorAttributes);
                 }
             }
         }
     }, [
         initialValue,
         mapAttributes,
-        tagProperties,
         mapErrorAttributes,
         escapeHTML,
         acceptableTagPattern,
         makeValidLabelTags,
-        executeTagProperties,
     ]);
     useEffect(() => {
         if (tagifyRef.current && initialValue === '') {
@@ -989,14 +906,9 @@ const TagifyInput = forwardRef((props, ref) => {
     }, []);
     useDeepCompareEffect(() => {
         const showTooltip = (tagElement) => {
-            const isTagReadonly = tagifyRef.current?.settings.readonly;
-            const tagType = tagElement.getAttribute('type');
-            // If tag is readonly and tag type is hint for link, do not show the tooltip
-            if (isTagReadonly && tagType === DETECT_LINK)
-                return;
             const tagRect = tagElement.getBoundingClientRect();
-            const errorTag = tagElement.getAttribute(ERROR_TAG);
-            const warningTag = tagElement.getAttribute(WARNING_TAG);
+            const removeTag = tagElement.getAttribute(REMOVED_TAG);
+            const noViewTag = tagElement.getAttribute(NO_VIEW_TAG);
             const invalidTag = tagElement.getAttribute(INVALID_TAG);
             const messageTag = tagElement.getAttribute(MESSAGE_TAG);
             const forceShowTooltipAttr = tagElement.getAttribute(FORCE_SHOW_TOOLTIP);
@@ -1009,19 +921,15 @@ const TagifyInput = forwardRef((props, ref) => {
             const tooltip = document.querySelector('.tagify__tooltip');
             tooltip?.setAttribute('style', 'display: block !important;visibility: hidden !important;');
             const tooltipRect = tooltip?.getBoundingClientRect();
-            const hasWrongAttribute = errorTag === 'true' || warningTag === 'true' || invalidTag === 'true';
+            const hasWrongAttribute = removeTag === 'true' || noViewTag === 'true' || invalidTag === 'true';
             const isTooltipVisible = tooltipRect && hasWrongAttribute;
             const isForceVisible = tooltipRect && forceShowTooltipAttr === 'true';
             if (isTooltipVisible || isForceVisible) {
-                const offsetTop = 30;
-                const top = tagRect.y - offsetTop;
                 if (tooltipRect?.width > tagRect.width) {
-                    const left = tagRect.x - (tooltipRect?.width - tagRect.width) / 2;
-                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${top}px;left:${left}px;`);
+                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${tagRect.y - tagRect.height - 10}px;left:${tagRect.x - (tooltipRect?.width - tagRect.width) / 2}px;`);
                 }
                 else {
-                    const left = tagRect.x + (tagRect?.width - tooltipRect.width) / 2;
-                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${top}px;left:${left}px;`);
+                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${tagRect.y - tagRect.height - 10}px;left:${tagRect.x + (tagRect?.width - tooltipRect.width) / 2}px;`);
                 }
             }
         };

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

@@ -4,32 +4,15 @@ 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 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 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 defaultCssVariables: {
     '--input-color': string | undefined;
     '--input-font-size': string;
@@ -74,11 +57,8 @@ 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";
 };
-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";
-export declare const TAG_TYPE_LIST: readonly ("campaign" | "event" | "custom" | "emoji" | "visitor" | "customer" | "groups" | "shortlink" | "story" | "variant" | "objectWidget" | "promotion_code" | "shortlink_v2" | "detect_link" | "allocated_code" | "custom_tag")[];
+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";
 export declare const SHORT_LINK_TYPE: {
     readonly INDIVIDUAL: "shortlink";
     readonly GENERAL: "shortlink_static";
@@ -108,8 +88,6 @@ export declare const TAG_COLOR: {
     readonly custom: "#bbefbe";
     readonly groups: "#ffdd9f";
     readonly emoji: "transparent";
-    readonly allocated_code: "#DAA7F8";
-    readonly custom_tag: "transparent";
 };
 export declare const EMOJI_COLLECTIONS: {
     readonly COMMON: "common";

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

@@ -5,32 +5,15 @@ 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 { 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 { READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,
@@ -72,7 +55,6 @@ export const tagifyDefaultProps = {
     placeholder: undefined,
     minWidthPlaceholder: 130,
     acceptableTagPattern: DEFAULT_ACCEPT_TAGS,
-    mapErrorAttributes: {},
     onChange: () => { },
 };
 export const TAG_TYPE = {
@@ -90,11 +72,8 @@ 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
 };
-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, } = TAG_TYPE;
-export const TAG_TYPE_LIST = Object.freeze(Object.values(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, } = TAG_TYPE;
 export const SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -124,8 +103,6 @@ export const TAG_COLOR = {
     [CUSTOM_FN]: '#bbefbe',
     [CONTENT_SOURCE_GROUP]: '#ffdd9f',
     [EMOJI]: 'transparent',
-    [ALLOCATED_CODE]: '#DAA7F8',
-    [CUSTOM_TAG]: 'transparent',
 };
 export const EMOJI_COLLECTIONS = {
     COMMON: 'common',

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

@@ -1,9 +1,11 @@
-import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper, TagTypeProperty } from './types';
+import type { AcceptablePattern, MapAttributesProps, PatterTagName, PatternHandlerWrapper } from './types';
 interface TagInfo {
     label: string;
     type: string;
-    status: string;
-    statusMsg: string;
+    isValid: boolean;
+    message?: string;
+    isRemoved?: boolean;
+    hasViewPermission?: boolean;
 }
 /**
  * Retrieves a cached regular expression or compiles and caches it if not found.
@@ -16,15 +18,7 @@ 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;
-/**
- * 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 getPersonalizeTagInfo: (originalTag: string, mapAttributes?: MapAttributesProps, mapErrorAttributes?: MapAttributesProps) => TagInfo;
 export declare const getShortLinkTagInfo: (params: {
     type: string;
     label: string;