@antscorp/antsomi-ui 1.3.6-beta.4 → 1.3.6-beta.41

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

@@ -18,8 +18,10 @@ export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, al
     else if (capitalization === CapitalizationType.LOWERCASE) {
         letterPart = letterPart.toLowerCase();
     }
-    else if (capitalization === CapitalizationType.TITLE_CASE && letterPart.length > 0) {
-        letterPart = letterPart.charAt(0).toUpperCase() + letterPart.slice(1).toLowerCase();
+    else if (capitalization === CapitalizationType.RANDOM) {
+        letterPart = Array.from(letterPart)
+            .map(char => (Math.random() < 0.5 ? char.toUpperCase() : char.toLowerCase()))
+            .join('');
     }
     // Order characters
     let finalCode = '';
@@ -46,7 +48,7 @@ export const generateCodeWithPrefixAndSuffix = (code, prefix, suffix, separator)
         finalCode = `${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
     return finalCode;
 };
-export const calculateTotalCodes = (numberOfLetters, numberOfDigits, characterType) => {
+export const calculateTotalCodes = ({ numberOfLetters, numberOfDigits, characterType, }) => {
     let totalCodes = 0;
     switch (characterType) {
         case CharacterType.LETTERS:

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -16,7 +16,7 @@ import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, onToggleCollapse, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, mask = false, classNames, collapsed: propCollapsed, onToggleCollapse, closable = false, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -99,17 +99,22 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
-    const handleToggleDrawerSize = () => {
+    const handleToggleDrawerSize = useCallback((updatedCollapsed) => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
-        toggleCollapseDrawer(!collapseDrawer);
-        onToggleCollapse?.(!collapseDrawer);
+        toggleCollapseDrawer(updatedCollapsed ?? !collapseDrawer);
+        onToggleCollapse?.(updatedCollapsed ?? !collapseDrawer);
         /**
          * Set local storage last collapsed
          */
         if (name) {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
-    };
+    }, [collapseDrawer, name, onToggleCollapse, toggleCollapseDrawer]);
+    useEffect(() => {
+        if (propCollapsed !== undefined) {
+            handleToggleDrawerSize(propCollapsed);
+        }
+    }, [propCollapsed, handleToggleDrawerSize]);
     return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,

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

@@ -14,6 +14,7 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
     classNames?: DrawerProps['classNames'] & {
         btnToogleSize?: string;
     };
+    collapsed?: boolean;
     onToggleCollapse?: (collapsed: boolean) => void;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {

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

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

package/es/components/molecules/EditingListV2/EditingList.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
 import { useMemo } from 'react';
+// Components
 import { Suspense } from '../../atoms';
 import { ListItem, LazyComponent } from './components';
 const { Popover } = LazyComponent;
 export const EditingListV2 = (props) => {
-    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'right', className, onChange, } = props;
+    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'leftBottom', className, onChange, } = props;
+    const popoverOptions = useMemo(() => options.filter(opt => !opt.errorMessage), [options]);
     const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
     // const isSelectAll = selectedOptions.length === options.length;
     const handleRemove = (removedKey) => {
         const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
         onChange?.(selectedKeys);
     };
-    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: options, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
+    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: popoverOptions, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
 };

package/es/components/molecules/EditingListV2/components/List/List.js

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Spin, Typography } from '../../../../atoms';
+// Libraries
+import { useState } from 'react';
 import { isEmpty } from 'lodash';
-import { CLS } from '../../utils';
+// Components
+import { Spin, Typography, Tooltip } from '../../../../atoms';
 import { List } from 'antd';
-import { CloseIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { CloseIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Utils
+import { CLS } from '../../utils';
+// Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-import { useState } from 'react';
 export const ListItem = (props) => {
     const { isLoading, selectOptions, onClickRemove, removable } = props;
     const [hover, setHover] = useState('');
@@ -18,6 +22,7 @@ export const ListItem = (props) => {
     const items = selectOptions.map(opt => ({
         className: CLS.ListItem.default,
         key: opt.key,
+        errorMessage: opt.errorMessage,
         label: renderLabel(opt.label),
     }));
     if (isLoading) {
@@ -29,10 +34,15 @@ export const ListItem = (props) => {
     return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
                 display: 'flex',
                 alignItems: 'center',
-                border: '1px solid #B8CFE6',
+                border: `1px solid ${item.errorMessage ? '#EF3340' : '#B8CFE6'}`,
                 borderRadius: '4px',
                 padding: '10px',
                 marginBottom: '10px',
                 minHeight: '40px',
-            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, ' ', hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { flexShrink: 0 }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })) }));
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, _jsxs("div", { style: {
+                        flexShrink: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '5px',
+                    }, children: [item.errorMessage && (_jsx(Tooltip, { title: item.errorMessage, children: _jsx(WarningIcon, { size: 18 }) })), hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })] })) }));
 };

package/es/components/molecules/EditingListV2/components/Loadable.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-export declare const Title: import("react").LazyExoticComponent<(props: {
-    title: import("react").ReactNode;
-    showNum: boolean;
-    selectedAmount?: number | undefined;
-    optionAmount?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
 export declare const Popover: import("react").LazyExoticComponent<(props: {
     placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "topLeft" | "topRight" | "bottomRight" | undefined;
     options: import("../types").Option[];

package/es/components/molecules/EditingListV2/components/Loadable.js

@@ -1,3 +1,2 @@
 import { lazy } from 'react';
-export const Title = lazy(() => import('./Title').then(module => ({ default: module.Title })));
 export const Popover = lazy(() => import('./Popover').then(module => ({ default: module.Popover })));

package/es/components/molecules/EditingListV2/components/Popover/Popover.js

@@ -1,17 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/jsx-boolean-value */
+// Components
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
-import { AddIcon } from '../../../../icons';
 import { PopoverAddField } from '../../../SearchPopover';
+// Icons
+import { AddIcon } from '../../../../icons';
 export const Popover = (props) => {
     const { options, selected, addButtonLabel, onChange, placement } = props;
-    return (_jsx(_Fragment, { children: _jsx(PopoverAddField, { style: { margin: 0 }, fields: options, placement: placement, selected: selected, 
-            // onApply={value =>
-            //   updateUnsubscribeSetting([
-            //     {
-            //       fieldPath: 'settings.unsubscribePreferences.preferenceListIds',
-            //       data: value as unknown as string,
-            //     },
-            //   ])
-            // }
-            onApply: onChange, children: _jsxs(Button, { type: "text", children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }) }));
+    return (_jsx(PopoverAddField, { style: { margin: 0, position: 'absolute', width: '300px' }, fields: options, placement: placement, selected: selected, onApply: onChange, isAllowEmpty: true, children: _jsxs(Button, { type: "text", children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }));
 };

package/es/components/molecules/EditingListV2/components/index.d.ts

@@ -1,6 +1,3 @@
 export { ListItem } from './List';
-export { Action } from './Action';
-export { Search } from './Search';
 export { Popover } from './Popover';
-export { Title } from './Title';
 export * as LazyComponent from './Loadable';

package/es/components/molecules/EditingListV2/components/index.js

@@ -1,6 +1,3 @@
 export { ListItem } from './List';
-export { Action } from './Action';
-export { Search } from './Search';
 export { Popover } from './Popover';
-export { Title } from './Title';
 export * as LazyComponent from './Loadable';

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

@@ -2,6 +2,7 @@
 export type Option = {
     key: string;
     label: React.ReactNode;
+    errorMessage?: string;
     search?: string;
 };
 export type EditingListProps = {
@@ -14,5 +15,6 @@ export type EditingListProps = {
     isLoading?: boolean;
     emptyDescription?: string;
     removable?: boolean;
+    isAllowEmpty?: boolean;
     onChange?: (selected: string[]) => void;
 };

package/es/components/molecules/InputSelectAttribute/index.js

@@ -14,6 +14,7 @@ import { EmptyData } from '../EmptyData';
 import { Dashboard30Icon, ErrorIcon } from '../../icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { TAG_TYPE } from '../TagifyInput';
 const InputSelectAttribute = (props) => {
     const { value, errorMsg, label, isErrorTag, sourceOptions = [], mapCodeOptions = {}, onChange, } = props;
     const [form] = Form.useForm();
@@ -27,7 +28,7 @@ const InputSelectAttribute = (props) => {
         return [];
     }, [sourceValue, mapCodeOptions]);
     const initCodeTitleField = useMemo(() => {
-        if (sourceValue === 'allocated_code') {
+        if (sourceValue === TAG_TYPE.PROMOTION_CODE) {
             return 'Allocated Code';
         }
         return upperFirst(translate(translations._ITEM_NAME_ATTRIBUTE, 'attribute'));
@@ -98,7 +99,9 @@ const InputSelectAttribute = (props) => {
                     height: 32,
                     padding: '4px 12px 4px 4px',
                     borderBottom: `1px solid ${errorMsg ? THEME.token?.colorError : THEME.token?.blue1}`,
-                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (get(mapCodeBySource, [value?.code, 'label'], value?.code)) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
+                }, children: [_jsx("div", { style: { width: '100%', cursor: 'pointer' }, onClick: onOpenModal, children: isObjValue && (_jsx(Tag, { isError: isErrorTag, children: isErrorTag ? (_jsxs(Flex, { gap: 5, align: "center", children: ["Unknown", _jsx(Tooltip, { title: "The used dynamic content is removed", children: _jsx(ErrorIcon, { size: 16 }) })] })) : (_jsx(Typography.Text, { ellipsis: {
+                                    tooltip: get(mapCodeBySource, [value?.code, 'label'], value?.code),
+                                }, style: { maxWidth: 150 }, children: get(mapCodeBySource, [value?.code, 'label'], value?.code) })) })) }), _jsx(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: '#222', cursor: 'pointer' }, onClick: onDeselect })] }));
         }
         else {
             element = (_jsx(StyledSelect, { mode: "multiple", options: [{ value: '', label: 'Or select a field' }], notFoundContent: null, onSelect: onOpenModal, style: { width: '100%', borderTop: 'none', borderLeft: 'none', borderRight: 'none' }, onDeselect: onDeselect, autoClearSearchValue: false, searchValue: typeof value === 'string' ? value : '', onSearch: onChangeInput, status: errorMsg ? 'error' : undefined, placeholder: typeof value === 'string' ? value : translate(translations.inputYourValue.title), "$isPlaceholder": !value, "$isError": !!errorMsg, dropdownStyle: {

package/es/components/molecules/InputSelectAttribute/styled.js

@@ -5,8 +5,13 @@ import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledSelect = styled(Select) `
-  .antsomi-select-selection-search {
-    width: fit-content !important;
+  .antsomi-select-selection-overflow .antsomi-select-selection-overflow-item {
+    flex: 1;
+
+    .antsomi-select-selection-search {
+      width: fit-content !important;
+      flex: 1;
+    }
   }
 
   ${({ $isError }) => $isError

package/es/components/molecules/SearchPopover/SearchPopover.d.ts

@@ -1,3 +1,2 @@
-import './styles.scss';
 import { SearchPopoverProps } from './types';
 export declare const SearchPopover: (props: SearchPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover } from 'antd';
-import './styles.scss';
 import clsx from 'clsx';
 import { StyledInput } from './styled';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
@@ -8,5 +7,5 @@ import { SearchIcon } from '../../icons';
 export const SearchPopover = (props) => {
     const { inputSearchProps = {}, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('search-popover-overlay', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
 };

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

@@ -7,7 +7,7 @@ import { PopoverSelect } from '../PopoverSelect';
 import { Flex, Typography } from 'antd';
 import { IconField } from '@antscorp/antsomi-ui/es/components/atoms/IconField';
 export const PopoverAddField = (props) => {
-    const { fields, onSearchPredicate, className, children, ...rest } = props;
+    const { fields, onSearchPredicate, className, children, isAllowEmpty, ...rest } = props;
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
     const handleOnSearchPredicate = useCallback((option) => {
         const originalField = originalFieldByKey.get(option.key);
@@ -27,5 +27,5 @@ export const PopoverAddField = (props) => {
                         selected: params.selected.includes(field.key),
                     })] })),
     })), [fields]);
-    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
+    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), isAllowEmpty: isAllowEmpty || false, children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
 };

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

@@ -14,7 +14,7 @@ import { VirtualizedMenu } from '../../../VirtualizedMenu';
 import { ITEM_SIZE, ITEM_SPACING } from '../../../VirtualizedMenu/config';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
-    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, onCancel, onApply, onSearchPredicate, ...rest } = props;
+    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
     const { value: searchValue, searchConfig, ...restInputSearchProps } = inputSearchProps;
@@ -26,7 +26,7 @@ export const PopoverSelect = (props) => {
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     const [search, setSearch] = useState('');
     const [showSelected, setShowSelected] = useState(false);
-    const applyDisabled = selectedKeys.size === 0;
+    const applyDisabled = selectedKeys.size === 0 && !isAllowEmpty;
     const options = useMemo(() => typeof optionsProp === 'function'
         ? optionsProp({ selected: [...selectedKeys] })
         : optionsProp, [optionsProp, selectedKeys]);

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

@@ -9,6 +9,7 @@ export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps & {
         searchConfig?: SearchConfig;
     };
+    isAllowEmpty?: boolean;
 } & PopoverProps>;
 export type Option = {
     key: string;

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

@@ -21,10 +21,10 @@ import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTag
 // 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 { READONLY_TAG, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
+const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, 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, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -35,6 +35,7 @@ const TagifyInput = forwardRef((props, ref) => {
     const tagifyWrapperRef = useRef(null);
     const placeholderRef = useRef(null);
     const lastRange = useRef(null);
+    const tagLength = tagifyRef?.current?.getTagElms().length;
     // Memoizations
     const cssVariablesMemoized = useMemo(() => _.assign({}, defaultCssVariables, cssTagifyVariables || {}), [cssTagifyVariables]);
     // Only run in the first render
@@ -500,7 +501,11 @@ const TagifyInput = forwardRef((props, ref) => {
             case EMOJI: {
                 closeIcon = '';
                 const emojiPath = emojiManufacturer(value, collection);
-                visibleTagContent = getEmojiTag({ src: emojiPath, emoji: label, code: value });
+                visibleTagContent = getEmojiTag({
+                    src: emojiPath,
+                    emoji: label,
+                    code: value,
+                });
                 break;
             }
             case DETECT_LINK: {
@@ -789,27 +794,28 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [disabled, placeholder, readonly]);
     // Set readonly for each tag
     useEffect(() => {
-        if (tagifyRef.current && typeof readonlyTag !== 'undefined') {
+        if (tagifyRef.current && tagLength && typeof readonlyTag !== 'undefined') {
             const tagElementList = tagifyRef.current.getTagElms();
             tagElementList.forEach((tagElement) => {
                 const tagType = _.get(tagElement, '__tagifyTagData.type', '');
                 const isPersonalizeTag = isPersonalizeTagType(tagType);
+                const isCustomTag = isCustomTagType(tagType);
                 // Only support readonly for personalize tag
-                if (!isPersonalizeTag)
+                if (!isPersonalizeTag && !isCustomTag)
                     return;
                 // Caution: Don't use readonly attribute -> readonly attribute Tagify library managed
                 if (readonlyTag) {
-                    tagElement.setAttribute(READONLY_TAG, readonlyTag.toString());
+                    tagElement.setAttribute(PREPARING_ST, readonlyTag.toString());
                 }
                 else {
                     // Only remove readonly-tag attribute if the invalid attribute is not existing
                     if (!tagElement.hasAttribute(INVALID_TAG)) {
-                        tagElement.removeAttribute(READONLY_TAG);
+                        tagElement.removeAttribute(PREPARING_ST);
                     }
                 }
             });
         }
-    }, [readonlyTag]);
+    }, [readonlyTag, tagLength]);
     // Set max personalize tags
     useLayoutEffect(() => {
         if (tagifyRef.current && typeof maxPersonalizeTags !== 'undefined') {
@@ -823,10 +829,10 @@ const TagifyInput = forwardRef((props, ref) => {
         makeValidLabelTags(mapAttributes, mapErrorAttributes);
     }, [mapAttributes, mapErrorAttributes, makeValidLabelTags]);
     useLayoutEffect(() => {
-        if (tagProperties) {
+        if (tagProperties && tagLength) {
             executeTagProperties(tagProperties);
         }
-    }, [tagProperties, executeTagProperties]);
+    }, [tagProperties, tagLength, executeTagProperties]);
     // Listen to Tagify events
     useEffect(() => {
         const { current: tagifyInstance } = tagifyRef || {};
@@ -874,18 +880,24 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
                 // Convert the string to tagify pattern
                 const content = parseTagStringToTagify(textValue, acceptableTagPattern);
+                setIsLineBreak(hasLineBreak(textValue));
                 tagifyRef.current.loadOriginalValues(content);
                 // Need to sync label of the tags if any map attribute is changed to make correct label
                 makeValidLabelTags(mapAttributes, mapErrorAttributes);
+                if (tagProperties) {
+                    executeTagProperties(tagProperties);
+                }
             }
         }
     }, [
         initialValue,
         mapAttributes,
+        tagProperties,
         mapErrorAttributes,
         escapeHTML,
         acceptableTagPattern,
         makeValidLabelTags,
+        executeTagProperties,
     ]);
     useEffect(() => {
         if (tagifyRef.current && initialValue === '') {
@@ -945,6 +957,11 @@ 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);

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

@@ -16,6 +16,7 @@ export declare const TAG_STATUS: {
     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";
@@ -28,7 +29,7 @@ export declare const TAG_CUSTOM_ATTRIBUTES: {
     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", PRIORITY_COLOR_TYPE: "priority-color-type", BG_COLOR_PERSONALIZE_TYPE: "bg-color-personalize-type", 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 defaultCssVariables: {
     '--input-color': string | undefined;
     '--input-font-size': string;

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

@@ -17,6 +17,7 @@ export const TAG_STATUS = {
     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',
@@ -29,7 +30,7 @@ export const TAG_CUSTOM_ATTRIBUTES = {
     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, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
+export const { PREPARING_ST, READONLY_TAG, INVALID_TAG, REMOVED_TAG, NO_VIEW_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP, ERROR_TAG, WARNING_TAG, PRIORITY_COLOR_TYPE, BG_COLOR_PERSONALIZE_TYPE, BG_COLOR_PERSONALIZE_TYPE_V2, } = TAG_CUSTOM_ATTRIBUTES;
 export const defaultCssVariables = {
     '--input-color': globalToken?.colorText,
     '--input-font-size': `${globalToken?.fontSize}px`,

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

@@ -6,7 +6,7 @@ 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 { PREPARING_ST, 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
@@ -616,9 +616,12 @@ export function isTagClickable(tagify, tag, tagData) {
         return false;
     }
     const isValidType = isValidTagType(type);
+    const preparingSetting = tag.getAttribute(PREPARING_ST);
     const readonlyTag = tag.getAttribute(READONLY_TAG);
+    const isTagReadonly = readonlyTag && readonlyTag === 'true';
+    const isPreparingSetting = preparingSetting && preparingSetting === 'true';
     const { readonly } = tagify.settings;
-    return !(readonly || (readonlyTag && readonlyTag === 'true') || !isValidType);
+    return !(readonly || isTagReadonly || isPreparingSetting || !isValidType);
 }
 /**
  * Finds text nodes within an HTML element that contain URLs.

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, TAG_TYPE_LIST, } 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, PREPARING_ST, } from './constants';
 export const getTagifyStyled = ({ $maxHeight, $tagifyFullWidth }) => css `
   ${$maxHeight &&
     css `
@@ -170,7 +170,8 @@ export const getTagifyTagStyled = (_wrapperProps) => css `
     height: fit-content;
   }
 
-  &[${READONLY_TAG}='true'] {
+  &[${READONLY_TAG}='true'],
+  &[${PREPARING_ST}='true'] {
     cursor: not-allowed;
   }