@antscorp/antsomi-ui 1.3.5-beta.941 → 1.3.5-beta.943

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

@@ -17,12 +17,13 @@ import '@yaireo/tagify/dist/tagify.css';
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
 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';
+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, defaultCssVariables, tagifyDefaultProps, } from './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';
+const { CUSTOM_TAG } = TAG_TYPE;
 const TagifyInput = forwardRef((props, ref) => {
     // 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;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes, mapErrorAttributes, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -629,6 +630,52 @@ const TagifyInput = forwardRef((props, ref) => {
             setTooltipRefresher(prev => prev + 1);
         }
     }, [acceptableTagPattern, labelTagRefreshness]);
+    /*
+     * 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 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;
+                    }
+                }
+            });
+            if (isChangeOccurred) {
+                setTooltipRefresher(prev => prev + 1);
+                // Make silent update -> do not callback data out
+                tagifyRef.current?.update({ withoutChangeEvent: true });
+            }
+        }
+    }, []);
     const initializeTagify = useCallback(() => {
         if (inputRef.current && !tagifyRef.current) {
             tagifyRef.current = new Tagify(inputRef.current, {
@@ -784,6 +831,11 @@ const TagifyInput = forwardRef((props, ref) => {
             makeValidLabelTags(mapAttributes, mapErrorAttributes);
         }
     }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
+    useLayoutEffect(() => {
+        if (tagProperties) {
+            executeTagProperties(tagProperties);
+        }
+    }, [tagProperties, executeTagProperties]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -921,11 +973,15 @@ const TagifyInput = forwardRef((props, ref) => {
             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) {
-                    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;`);
+                    const left = tagRect.x - (tooltipRect?.width - tagRect.width) / 2;
+                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${top}px;left:${left}px;`);
                 }
                 else {
-                    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;`);
+                    const left = tagRect.x + (tagRect?.width - tooltipRect.width) / 2;
+                    tooltip?.setAttribute('style', `visibility: visible !important;display: block !important;top:${top}px;left:${left}px;`);
                 }
             }
         };

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

@@ -75,8 +75,10 @@ export const TAG_TYPE = {
     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, } = 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 SHORT_LINK_TYPE = {
     INDIVIDUAL: 'shortlink', // Individual link
     GENERAL: 'shortlink_static', // General link
@@ -107,6 +109,7 @@ export const TAG_COLOR = {
     [CONTENT_SOURCE_GROUP]: '#ffdd9f',
     [EMOJI]: 'transparent',
     [ALLOCATED_CODE]: '#DAA7F8',
+    [CUSTOM_TAG]: 'transparent',
 };
 export const EMOJI_COLLECTIONS = {
     COMMON: 'common',

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

@@ -8,7 +8,8 @@ import { errorWrapper } from './errorWrapper';
 import { isViberEmoji } from './iconsViber';
 import { random } from '@antscorp/antsomi-ui/es/utils';
 // Constants
-import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, VIBER_EMOJI_PTN, } from './constants';
+import { CONTENT_SOURCE_GROUP, EMOJI, EMOJI_COLLECTIONS, LINE_EMOJI_PTN, PERSONALIZE_PTN, PREFIX_PATTERN_LINE_MESSAGE, PROMOTION_CODE, SHORT_LINK, SHORT_LINK_GENERAL_PTN, SHORT_LINK_INDIVIDUAL_PTN, SHORT_LINK_PTN, SHORT_LINK_TYPE, SHORT_LINK_V2, SHORT_LINK_V2_GENERAL_PTN, SHORT_LINK_V2_INDIVIDUAL_PTN, TAG_TYPE, VIBER_EMOJI_PTN, } from './constants';
+const { CUSTOM_TAG } = TAG_TYPE;
 /*
  * Usage to cache compiled regular expressions:
  * const regex = getCachedRegex(pattern, flags);
@@ -201,6 +202,21 @@ const getContentSourceLabel = (attributeName, subAttributeName, mapAttributes) =
     }
     return attributeName;
 };
+/**
+ * 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 const getCustomTagId = (tagType, mergeCode) => {
+    const isCustomTag = tagType === CUSTOM_TAG;
+    if (!isCustomTag)
+        return '';
+    const [tagCode] = mergeCode.split('||');
+    const [, customTagId] = tagCode.split('.');
+    return customTagId;
+};
 /**
  * Retrieves the label for a attribute tag.
  * @param {string} type - The type from the original tag.
@@ -273,7 +289,9 @@ export const getPersonalizeTagInfo = (originalTag, mapAttributes, mapErrorAttrib
                         if (mapErrorAttributes &&
                             mapErrorAttributes[type] &&
                             mapErrorAttributes[type][attributeName]) {
-                            const { isEdit = false, isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes[type][attributeName] || {};
+                            const { 
+                            // isEdit = false,
+                            isView = false, isExist = true, isArchived: _isArchived = false, isActive: _isActive = true, isExpired: _isExpired = false, } = mapErrorAttributes[type][attributeName] || {};
                             if (!isExist) {
                                 // Case Pool Removed
                                 isRemoved = !isExist;

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

@@ -1,7 +1,7 @@
 // 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 { CUSTOM_TAG, EMOJI_COLLECTIONS, PREFIX_PATTERN_LINE_MESSAGE, READONLY_TAG, SHORT_LINK_V2, TAG_TYPE, } from './constants';
 import { iconsViber } from './iconsViber';
 // Utils
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, patternHandlers, tagRegexStringPattern, } from './patternHandlers';
@@ -401,12 +401,17 @@ export const isPersonalizeTagType = (type) => [
     CUSTOM_FN,
     CONTENT_SOURCE_GROUP,
     ALLOCATED_CODE,
+    CUSTOM_TAG,
 ].includes(type);
 export const isShortLinkTagType = (type) => [SHORT_LINK_V2].includes(type);
 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);
+    }
     if (tagData.type === TAG_TYPE.SHORT_LINK) {
         const { shortlinkType } = tagData;
         dataAttrs.set(`tag-${TAG_TYPE.SHORT_LINK}-type`, shortlinkType);
@@ -420,7 +425,7 @@ export const generateTagContent = (params) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
     return `
-    <div ${dataAttrsString}>
+    <div ${dataAttrsString} class="tagify__tag-content">
       ${content}
     </div>
   `;

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

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { isString } from 'lodash';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import { DETECT_LINK, EMOJI, ERROR_TAG, MIN_H_WRAPPER, READONLY_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, WARNING_TAG, } from './constants';
+import { DETECT_LINK, EMOJI, ERROR_TAG, MIN_H_WRAPPER, READONLY_TAG, SHORT_LINK, SHORT_LINK_TYPE, SHORT_LINK_V2, TAG_COLOR, TAG_H, TAG_TYPE, WARNING_TAG, TAG_TYPE_LIST, } from './constants';
 export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   ${$maxHeight &&
     css `
@@ -70,47 +70,48 @@ export const getTagifyInputStyled = ({ $minWidth, $placeholder, $minWidthPlaceho
       }
 `}
 `;
-export const getStyledTags = () => {
-    const getBackgroundColor = (tag) => {
-        const { type } = tag;
-        switch (type) {
-            case TAG_TYPE.SHORT_LINK: {
-                const { shortlinkType } = tag;
-                if (!shortlinkType)
-                    break;
-                return TAG_COLOR[SHORT_LINK][shortlinkType];
-            }
-            case TAG_TYPE.SHORT_LINK_V2: {
-                const { shortlinkType } = tag;
-                if (!shortlinkType)
-                    break;
-                return TAG_COLOR[SHORT_LINK_V2][shortlinkType];
-            }
-            default: {
-                if (!type)
-                    return 'white';
-                return TAG_COLOR[type];
-            }
+const getBackgroundColor = (tag) => {
+    const { type } = tag;
+    switch (type) {
+        case TAG_TYPE.SHORT_LINK: {
+            const { shortlinkType } = tag;
+            if (!shortlinkType)
+                break;
+            return TAG_COLOR[SHORT_LINK][shortlinkType];
         }
-        return null;
-    };
-    const tagTypes = Object.values(TAG_TYPE);
-    const backgroundStyles = tagTypes
-        .map(type => {
-        const background = getBackgroundColor({ type });
-        if (!background)
-            return '';
-        return `
-        &[data-tag-type~='${type}'] {
-          background: ${getBackgroundColor({ type })};
-        };
-      `;
-    })
-        .join(' ');
+        case TAG_TYPE.SHORT_LINK_V2: {
+            const { shortlinkType } = tag;
+            if (!shortlinkType)
+                break;
+            return TAG_COLOR[SHORT_LINK_V2][shortlinkType];
+        }
+        default: {
+            if (!type)
+                return 'white';
+            return TAG_COLOR[type];
+        }
+    }
+    return null;
+};
+const tagListString = TAG_TYPE_LIST.map(tagType => `[data-tag-type~='${tagType}']`).join(',');
+const backgroundStyles = TAG_TYPE_LIST.map(type => {
+    const background = getBackgroundColor({ type });
+    if (!background)
+        return '';
     return `
+    &[data-tag-type~='${type}'] {
+      background: ${background};
+    }
+
+    &[data-priority-color-type~='${type}'][data-bg-color-personalize-type~='${type}'] {
+      background: ${background};
+    }
+  `;
+}).join(' ');
+export const getStyledTags = () => `
     // For case unknown tag
     &[data-tag-type]:not(:is(
-      ${tagTypes.map(tagType => `[data-tag-type~='${tagType}']`).join(',')}
+      ${tagListString}
     )) {
       background: ${globalToken?.accent7};
     };
@@ -122,40 +123,54 @@ export const getStyledTags = () => {
       padding: 0;
     };
 
+    &[data-tag-type~='${DETECT_LINK}'] {
+      border-radius: unset;
+      max-height: fit-content;
+
+      .tagify__tag-text {
+        max-width: fit-content;
+        white-space: normal;
+      }
+    };
+
     &[data-tag-type~='${TAG_TYPE.SHORT_LINK}'] {
       &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
         background: ${getBackgroundColor({
-        type: TAG_TYPE.SHORT_LINK,
-        shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
-    })};
+    type: TAG_TYPE.SHORT_LINK,
+    shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
+})};
       };
 
       &[data-tag-${TAG_TYPE.SHORT_LINK}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
         background: ${getBackgroundColor({
-        type: TAG_TYPE.SHORT_LINK,
-        shortlinkType: SHORT_LINK_TYPE.GENERAL,
-    })};
+    type: TAG_TYPE.SHORT_LINK,
+    shortlinkType: SHORT_LINK_TYPE.GENERAL,
+})};
       };
     }
     
     &[data-tag-type~='${TAG_TYPE.SHORT_LINK_V2}'] {
       &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.INDIVIDUAL}'] {
         background: ${getBackgroundColor({
-        type: TAG_TYPE.SHORT_LINK_V2,
-        shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
-    })};
+    type: TAG_TYPE.SHORT_LINK_V2,
+    shortlinkType: SHORT_LINK_TYPE.INDIVIDUAL,
+})};
       };
 
       &[data-tag-${TAG_TYPE.SHORT_LINK_V2}-type~='${SHORT_LINK_TYPE.GENERAL}'] {
         background: ${getBackgroundColor({
-        type: TAG_TYPE.SHORT_LINK_V2,
-        shortlinkType: SHORT_LINK_TYPE.GENERAL,
-    })};
+    type: TAG_TYPE.SHORT_LINK_V2,
+    shortlinkType: SHORT_LINK_TYPE.GENERAL,
+})};
       };
     }
   `;
-};
 export const getTagifyTagStyled = (_wrapperProps) => css `
+  &[type='${DETECT_LINK}'] {
+    max-width: fit-content;
+    height: fit-content;
+  }
+
   &[${READONLY_TAG}='true'] {
     cursor: not-allowed;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.941",
+  "version": "1.3.5-beta.943",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-genai": "1.0.1-beta-15",
+    "@antscorp/antsomi-genai": "1.0.1-beta-16",
     "@antscorp/antsomi-constants": "1.0.5-beta.2",
     "@antscorp/antsomi-locales": "1.0.28",
     "@antscorp/icons": "0.27.54",