@antscorp/antsomi-ui 1.3.5-beta.979 → 1.3.5-beta.980

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

@@ -16,11 +16,12 @@ 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, } from './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';
 // Constants
-import { DETECT_LINK, EMOJI, ERROR_TAG, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, WARNING_TAG, TAG_TYPE, defaultCssVariables, tagifyDefaultProps, } from './constants';
+import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
 const { CUSTOM_TAG } = TAG_TYPE;
+const { READONLY_TAG, 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, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties = {}, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
@@ -572,12 +573,8 @@ const TagifyInput = forwardRef((props, ref) => {
                                 if (!isCustomTag) {
                                     tagTextNode.textContent = tagLabel;
                                 }
-                                // Clear all previous attributes
-                                tagElement.removeAttribute(INVALID_TAG);
-                                tagElement.removeAttribute(ERROR_TAG);
-                                tagElement.removeAttribute(WARNING_TAG);
-                                tagElement.removeAttribute(READONLY_TAG);
-                                tagElement.removeAttribute(MESSAGE_TAG);
+                                // Remove all existing attributes
+                                sanitizeTagAttributes(tagElement);
                                 // In case promotion pool has something wrong
                                 if (message) {
                                     if (isRemoved || isArchived || !isActive || isExpired) {
@@ -618,12 +615,8 @@ const TagifyInput = forwardRef((props, ref) => {
                          */
                         if (tagTextNode) {
                             tagTextNode.textContent = tagLabel;
-                            // Clear all previous attributes
-                            tagElement.removeAttribute(INVALID_TAG);
-                            tagElement.removeAttribute(ERROR_TAG);
-                            tagElement.removeAttribute(WARNING_TAG);
-                            tagElement.removeAttribute(READONLY_TAG);
-                            tagElement.removeAttribute(MESSAGE_TAG);
+                            // Remove all existing attributes
+                            sanitizeTagAttributes(tagElement);
                             // In case promotion pool has something wrong
                             if (!isValid && message) {
                                 tagElement.setAttribute(ERROR_TAG, 'true');
@@ -645,40 +638,40 @@ const TagifyInput = forwardRef((props, ref) => {
             const tagElements = tagifyRef.current.getTagElms();
             const { pattern, name: cachePatternName } = patternHandlers[PERSONALIZE_PTN];
             tagElements.forEach(tagElement => {
-                const tagData = tagifyRef.current?.getSetTagData(tagElement);
-                if (tagData) {
-                    const { type, value } = tagData;
-                    const isCustomTag = type === CUSTOM_TAG;
-                    // Skip if it is not a custom tag
-                    if (!isCustomTag || !value)
-                        return;
-                    // 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;
-                        /*
-                         * Just only update to the correct text of the tag
-                         * NOTE: Do not actually affect raw data
-                         */
-                        tagData.label = property.displayName;
-                        tagData.bgColorPersonalizeType = property.type;
-                        tagifyRef.current?.replaceTag(tagElement, tagData);
-                        // Mark the tag as changed
-                        isChangeOccurred = true;
+                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);
-                // Make silent update -> do not callback data out
-                tagifyRef.current?.update({ withoutChangeEvent: true });
             }
         }
     }, []);
@@ -833,8 +826,8 @@ 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, tagProperties);
-    }, [mapAttributes, mapErrorAttributes, tagProperties, makeValidLabelTags]);
+        makeValidLabelTags(mapAttributes, mapErrorAttributes, {});
+    }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
     useLayoutEffect(() => {
         if (tagProperties) {
             executeTagProperties(tagProperties);

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

@@ -4,6 +4,17 @@ 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 READONLY_TAG: "readonly-tag";
     readonly INVALID_TAG: "invalid-tag";
@@ -13,8 +24,11 @@ export declare const TAG_CUSTOM_ATTRIBUTES: {
     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", ERROR_TAG: "error-tag", WARNING_TAG: "warning-tag";
+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", 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;

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

@@ -5,6 +5,17 @@ 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 = {
     READONLY_TAG: 'readonly-tag',
     INVALID_TAG: 'invalid-tag',
@@ -14,8 +25,11 @@ export const TAG_CUSTOM_ATTRIBUTES = {
     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, ERROR_TAG, WARNING_TAG, } = TAG_CUSTOM_ATTRIBUTES;
+export const { 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`,

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

@@ -1,14 +1,17 @@
 /// <reference types="yaireo__tagify" />
 import { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
-import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_COLOR, TAG_TYPE } from './constants';
+import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_COLOR, TAG_STATUS, TAG_TYPE } from './constants';
 import { type CSSProperties } from 'react';
 export type TagType = (typeof TAG_TYPE)[keyof typeof TAG_TYPE];
 export type TagTypeProperty = Exclude<TagType, 'detect_link' | 'emoji' | 'shortlink'>;
-export type TagProperties = Record<string, {
+export type TagProperty = {
     [key: string]: any;
     displayName: string;
     type: TagTypeProperty;
-}>;
+};
+export type TagProperties = Record<string, TagProperty>;
+export type TagAttribute = [string, string];
+export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;

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

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, EmojiCollection, EmojiTag, TagDataCustomize, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -48,6 +48,11 @@ export declare const getEmojiTag: ({ src, emoji, code }: EmojiTag) => string;
 export declare const isPersonalizeTagType: (type: TagType) => boolean;
 export declare const isShortLinkTagType: (type: TagType) => boolean;
 export declare const isCustomTagType: (type: TagType) => boolean;
+export declare const sanitizeTagAttributes: (tagElement: HTMLElement) => void;
+export declare const applyTagAttributes: (element: HTMLElement, attributes: TagAttribute[]) => void;
+export declare const getStatusTagAttributes: (statusMsg: string) => Record<string, TagAttribute[]>;
+export declare const getTagContentAttributes: (propertyType: string) => TagAttribute[];
+export declare const getTagAttributes: (property: TagProperty) => TagAttribute[];
 export declare const generateTagContent: (params: {
     tagData: TagDataCustomize;
     content: string;

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

@@ -1,11 +1,13 @@
 // Libraries
 import stringReplaceToArray from 'string-replace-to-array';
 // Constants
-import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, } from './constants';
+import { EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, SHORT_LINK_V2, TAG_CUSTOM_ATTRIBUTES, TAG_STATUS, TAG_TYPE, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
 const { CUSTOMER, VISITOR, EVENT, JOURNEY, CAMPAIGN, VARIANT, PROMOTION_CODE, CUSTOM_FN, OBJECT_WIDGET, CONTENT_SOURCE_GROUP, ALLOCATED_CODE, CUSTOM_TAG, } = TAG_TYPE;
+const { READONLY_TAG, INVALID_TAG, MESSAGE_TAG, ERROR_TAG, WARNING_TAG, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
+const { REMOVED, ARCHIVED, INACTIVE, INVALID, EXPIRED, WARNING, DO_NOT_VIEW, ERROR } = TAG_STATUS;
 /*
  * Custom error type for JSON parse errors
  */
@@ -405,13 +407,69 @@ export const isPersonalizeTagType = (type) => [
 ].includes(type);
 export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
 export const isCustomTagType = (type) => type === CUSTOM_TAG;
+export const sanitizeTagAttributes = (tagElement) => {
+    const attributesToRemove = [INVALID_TAG, ERROR_TAG, WARNING_TAG, READONLY_TAG, MESSAGE_TAG];
+    attributesToRemove.forEach(attr => tagElement.removeAttribute(attr));
+};
+export const applyTagAttributes = (element, attributes) => {
+    attributes.forEach(([attr, value]) => element.setAttribute(attr, value));
+};
+export const getStatusTagAttributes = (statusMsg) => {
+    const statusAttributes = {
+        error: [
+            [ERROR_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+        warning: [
+            [WARNING_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+        invalid: [
+            [READONLY_TAG, 'true'],
+            [INVALID_TAG, 'true'],
+            [MESSAGE_TAG, statusMsg],
+        ],
+    };
+    return statusAttributes;
+};
+export const getTagContentAttributes = (propertyType) => [
+    [`data-${PRIORITY_COLOR_TYPE}`, propertyType],
+    [`data-${BG_COLOR_PERSONALIZE_TYPE}`, propertyType],
+];
+export const getTagAttributes = (property) => {
+    const { status, statusMsg, type } = property;
+    const attributes = [[BG_COLOR_PERSONALIZE_TYPE_V2, type]];
+    if (!statusMsg)
+        return attributes;
+    const statusAttributes = getStatusTagAttributes(statusMsg);
+    switch (status) {
+        case REMOVED:
+        case ARCHIVED:
+        case EXPIRED:
+        case ERROR:
+        case INACTIVE:
+            attributes.push(...statusAttributes.error);
+            break;
+        case WARNING:
+        case DO_NOT_VIEW:
+            attributes.push(...statusAttributes.warning);
+            break;
+        case INVALID:
+            attributes.push(...statusAttributes.invalid);
+            break;
+        default: {
+            break;
+        }
+    }
+    return attributes;
+};
 export const generateTagContent = (params) => {
     const { tagData, content } = params;
     let dataAttrsString = '';
     const dataAttrs = new Map([['tag-type', tagData.type]]);
     if (tagData.bgColorPersonalizeType) {
-        dataAttrs.set('priority-color-type', tagData.bgColorPersonalizeType);
-        dataAttrs.set('bg-color-personalize-type', tagData.bgColorPersonalizeType);
+        dataAttrs.set(PRIORITY_COLOR_TYPE, tagData.bgColorPersonalizeType);
+        dataAttrs.set(BG_COLOR_PERSONALIZE_TYPE, tagData.bgColorPersonalizeType);
     }
     if (tagData.type === TAG_TYPE.SHORT_LINK) {
         const { shortlinkType } = tagData;

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

@@ -55,20 +55,19 @@ export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceho
 
   ${$isSingleLineText &&
     css `
-      white-space: nowrap;
-      overflow: auto;
+    white-space: nowrap;
+    overflow: auto;
 
-      br {
-        display: none;
-      }
+    br {
+      display: none;
+    }
 
-      div, p {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: auto
-        overflow-y: hidden;
-      }
-`}
+    div,
+    p {
+      display: inline-block;
+      white-space: nowrap;
+    }
+  `}
 `;
 const getBackgroundColor = (tag) => {
     const { type } = tag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.979",
+  "version": "1.3.5-beta.980",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",