@antscorp/antsomi-ui 1.3.5-beta.942 → 1.3.5-beta.944

package/es/components/molecules/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import { Space, Typography } from 'antd';
 import Icon from '@antscorp/icons';
 import { StyledInputDropdownRoot } from './styled';
 import clsx from 'clsx';
-import './style.scss';
+import './style.css';
 export { Dropdown } from 'antd';
 const DefaultExpandIcon = _jsx(Icon, { type: "icon-ants-expand-more" });
 export const InputDropdown = (props) => {

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -10,14 +10,12 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { AccountSharing } from '@antscorp/antsomi-ui/es/components/organism/AccountSharing';
 import { Help } from '@antscorp/antsomi-ui/es/components/organism/Help';
 import { Notification } from '@antscorp/antsomi-ui/es/components/organism/Notification';
-import { ConversationAnalyticProvider, ConversationAnalytic } from '@antscorp/antsomi-genai';
 // Constants
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '@antscorp/antsomi-ui/es/providers/AppConfigProvider';
 import { isNil } from 'lodash';
 import { useCustomRouter } from '@antscorp/antsomi-ui/es/hooks';
-import '@antscorp/antsomi-genai/css';
 const SubLogoAntsomi = 'https://st-media-template.antsomi.com/icons/antsomi/antsomi.png';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 // const DOUBLE_RIGHT_POINTING = '»'
@@ -117,5 +115,5 @@ export const HeaderV2 = memo(props => {
         onSelectAccount?.(userId);
     };
     const QUOTE_ENTITY = _jsx(_Fragment, { children: "\u00BB" });
-    return (_jsx(ConversationAnalyticProvider, { children: _jsxs(HeaderV2Styled, { "$show": show, className: className || '', style: style, children: [_jsxs("div", { className: "left-side", children: [showLogo && (_jsx(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo, children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) })), _jsx(AccountSelection, { ...accountSelectionProps, currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true }), _jsxs("div", { className: "title-container", "data-test": "page-title", children: [breadcrumbs ? (_jsx("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs", children: breadcrumbs.map((item, index) => (_jsxs(React.Fragment, { children: [isNil(item.useExternalLink) && !item.useExternalLink ? (_jsx(Link, { to: item.link || '', className: "header-breadcrumbs__item", children: item.title })) : (_jsx("a", { href: item.link, className: "header-breadcrumbs__item", children: item.title })), breadcrumbs.length === index + 1 ? null : _jsxs(_Fragment, { children: ["\u2002", QUOTE_ENTITY, "\u2002"] })] }, `${item.title}_${item.link}`))) })) : null, typeof pageTitle === 'string' ? (_jsx("div", { className: "page-title", children: pageTitle })) : (pageTitle)] })] }), _jsxs("div", { "data-test": "header-menu", className: "right-side", children: [_jsxs(Flex, { gap: 10, children: [rightContent, _jsx(ConversationAnalytic, {}), showHelp ? _jsx(Help, { configs: helpConfigProps, ...helpProps }) : null, showNotification ? _jsx(Notification, { ...notificationConfigProps }) : null] }), showAccountSharing ? (_jsx(AccountSharing, { isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess, ...accountSharingPropsFormatted, ...accountSharingProps })) : null] })] }) }));
+    return (_jsxs(HeaderV2Styled, { "$show": show, className: className || '', style: style, children: [_jsxs("div", { className: "left-side", children: [showLogo && (_jsx(LogoWrapper, { className: "logo-wrapper", onClick: onCLickLogo, children: _jsx("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }) })), _jsx(AccountSelection, { ...accountSelectionProps, currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true }), _jsxs("div", { className: "title-container", "data-test": "page-title", children: [breadcrumbs ? (_jsx("div", { className: "header-breadcrumbs", "data-test": "breadcrumbs", children: breadcrumbs.map((item, index) => (_jsxs(React.Fragment, { children: [isNil(item.useExternalLink) && !item.useExternalLink ? (_jsx(Link, { to: item.link || '', className: "header-breadcrumbs__item", children: item.title })) : (_jsx("a", { href: item.link, className: "header-breadcrumbs__item", children: item.title })), breadcrumbs.length === index + 1 ? null : _jsxs(_Fragment, { children: ["\u2002", QUOTE_ENTITY, "\u2002"] })] }, `${item.title}_${item.link}`))) })) : null, typeof pageTitle === 'string' ? (_jsx("div", { className: "page-title", children: pageTitle })) : (pageTitle)] })] }), _jsxs("div", { "data-test": "header-menu", className: "right-side", children: [_jsxs(Flex, { gap: 10, children: [rightContent, showHelp ? _jsx(Help, { configs: helpConfigProps, ...helpProps }) : null, showNotification ? _jsx(Notification, { ...notificationConfigProps }) : null] }), showAccountSharing ? (_jsx(AccountSharing, { isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess, ...accountSharingPropsFormatted, ...accountSharingProps })) : null] })] }));
 });

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.942",
+  "version": "1.3.5-beta.944",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,8 +61,6 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@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",
     "@antscorp/image-editor": "1.0.2",
@@ -163,16 +161,16 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-docs": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
+    "@storybook/addon-docs": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
     "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/manager-api": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-webpack5": "^8.4.6",
-    "@storybook/theming": "^8.4.6",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/manager-api": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/theming": "^8.5.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.0",
@@ -214,7 +212,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "file-loader": "^6.2.0",
     "googleapis": "^142.0.0",
     "husky": "^8.0.3",
@@ -232,7 +230,7 @@
     "react-router-dom": "5.1.0 || 6.14.2",
     "sass": "^1.77.8",
     "sass-loader": "^16.0.1",
-    "storybook": "^8.4.6",
+    "storybook": "^8.5.0",
     "style-loader": "^4.0.0",
     "styled-components": "^6",
     "terser-webpack-plugin": "^5.3.10",

package/es/components/molecules/Dropdown/style.scss

@@ -1,9 +0,0 @@
-.antsomi-input-dropdown-overlay {
-  .antsomi-dropdown-menu {
-    overflow: hidden;
-
-    &:hover {
-      overflow: auto;
-    }
-  }
-}