npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.961 → 1.3.5-beta.963 - Mend

@antscorp/antsomi-ui 1.3.5-beta.961 → 1.3.5-beta.963

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/es/components/molecules/DisplayFormat/DisplayFormatSelect.js CHANGED Viewed

@@ -5,11 +5,11 @@ import { DisplayFormatSettings } from './DisplayFormatSettings';
 // Types
 import { Select } from '../Select';
 // Constants
-import { DYNAMIC_CONTENT_ATTR_DF_TYPE, NUMBER_SETTINGS_DEFAULT, DATETIME_SETTINGS_DEFAULT, } from './constants';
+import { DYNAMIC_CONTENT_ATTR_DF_TYPE, NUMBER_SETTINGS_DEFAULT, DATETIME_SETTINGS_DEFAULT, DYNAMIC_CONTENT_DF_FORMAT_TYPE, } from './constants';
 import { useUpdateEffect } from '@antscorp/antsomi-ui/es/hooks';
 export const DisplayFormatSelect = props => {
-    const { onSettingChange, formatType = 'number', setting = formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT, disabled, infos, url, ...rest } = props;
-    const { type: settingType = 'number' } = setting || {};
+    const { onSettingChange, formatType, setting = formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT, disabled, infos, url, ...rest } = props;
+    const { type: settingType = DYNAMIC_CONTENT_DF_FORMAT_TYPE[formatType] } = setting || {};
     // Memo
     const typeOptions = useMemo(() => DYNAMIC_CONTENT_ATTR_DF_TYPE.filter(dfType => dfType.dataType === formatType), [formatType]);
     // Effects
@@ -17,9 +17,9 @@ export const DisplayFormatSelect = props => {
         onSettingChange(formatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [formatType]);
-    return (typeOptions.length > 0 && (_jsxs("div", { ...rest, style: { display: 'flex', flexDirection: 'column', gap: '16px' }, children: [_jsx(Select, { disabled: disabled, value: settingType, options: typeOptions, onSelect: type => onSettingChange({
+    return (typeOptions.length > 0 && (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, ...rest, children: [_jsx(Select, { disabled: disabled, value: settingType, options: typeOptions, onSelect: type => onSettingChange({
                     ...setting,
-                    type,
+                    type: type,
                 }) }), _jsx(DisplayFormatSettings, { disabled: disabled, onSettingsChange: setting => {
                     onSettingChange(setting);
                 }, displayFormatType: settingType, formatSettings: setting, url: url ?? '', infos: infos ?? {} })] })));

package/es/components/molecules/DisplayFormat/DisplayFormatSettings.js CHANGED Viewed

@@ -12,39 +12,39 @@ import { formatDatetimeDF, formatNumberDF } from './utils';
 import { DATE_TIME_EXAMPLE, DATETIME_SETTINGS_DEFAULT, NUMBER_SETTINGS_DEFAULT, NUMBER_EXAMPLE, } from './constants';
 export const DisplayFormatSettings = props => {
     const { infos, url, displayFormatType, formatSettings, dynamicContentType, onSettingsChange, disabled, ...rest } = props;
-    const [settings, setSettings] = useState(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
+    const [settings, setSettings] = useState(formatSettings ??
+        (displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT));
     const [showDetailEdit, setShowDetailEdit] = useState(false);
-    const [formatType, setFormatType] = useState(displayFormatType);
     useEffect(() => {
         setSettings(displayFormatType === 'datetime' ? DATETIME_SETTINGS_DEFAULT : NUMBER_SETTINGS_DEFAULT);
-        setFormatType(displayFormatType);
     }, [displayFormatType]);
     useEffect(() => {
         if (Object.keys(formatSettings).length > 0) {
             setSettings(formatSettings);
         }
     }, [formatSettings]);
-    //  const handleChange = (updatedSettings: TDatetimeFormatSetting) => {
-    //     if (onSettingsChange) {
-    //       onSettingsChange({
-    //         ...updatedSettings,
-    //         type: 'datetime',
-    //         language: portalLanguage,
-    //       });
-    //     }
-    //   };
+    const handleChangeFormat = (updatedSettings) => {
+        if (onSettingsChange) {
+            onSettingsChange({
+                ...updatedSettings,
+                type: displayFormatType,
+            });
+        }
+    };
     const renderFormatDisplay = () => {
         let formatDFValue = '';
         // Numeric Attribute DF
-        if (formatType === 'number' || formatType === 'currency' || formatType === 'percentage') {
-            formatDFValue = formatNumberDF(NUMBER_EXAMPLE, formatType, settings);
+        if (displayFormatType === 'number' ||
+            displayFormatType === 'currency' ||
+            displayFormatType === 'percentage') {
+            formatDFValue = formatNumberDF(NUMBER_EXAMPLE, displayFormatType, settings);
         }
         // Datetime Attribute DF
-        if (formatType === 'datetime') {
+        if (displayFormatType === 'datetime') {
             formatDFValue = formatDatetimeDF(DATE_TIME_EXAMPLE, settings);
         }
-        return (_jsxs("div", { ...rest, className: "ants-flex ants-flex-wrap ants-items-center ants-mt-4 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, children: [_jsx(Text, { size: 11, className: "text-[11px] ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
-                        __html: `${translate(translations._ACT_PREVIEW)}: <bdo dir='ltr'>${formatDFValue}</bdo>`,
+        return (_jsxs("div", { className: "ants-flex ants-flex-wrap ants-items-center ants-mt-1 ants-gap-2 ant-flex-row", style: { display: 'flex', alignItems: 'end', gap: '8px', marginBottom: '5px' }, ...rest, children: [_jsx(Text, { size: 11, className: "ants-flex", color: "#7F7F7F", dangerouslySetInnerHTML: {
+                        __html: `${translate(translations._ACT_PREVIEW)}: &nbsp;<bdo dir='ltr'>${formatDFValue}</bdo>`,
                     } }), _jsx(Button, { disabled: disabled, size: "small", icon: _jsx(EditIcon, { width: 16, height: 16, color: "#005EB8" }), className: "ants-border-none", style: {
                         marginTop: '1px',
                         backgroundColor: showDetailEdit ? '#DEEFFE' : 'transparent',
@@ -54,14 +54,14 @@ export const DisplayFormatSettings = props => {
                     }, onClick: () => setShowDetailEdit(prevShow => !prevShow) })] }));
     };
     const renderFormatSetting = () => {
-        switch (formatType) {
+        switch (displayFormatType) {
             case 'number':
             case 'percentage':
             case 'currency': {
-                return (_jsx(FormatNumber, { ...settings, onSettingsChange: onSettingsChange, type: formatType, url: url, infos: infos }));
+                return (_jsx(FormatNumber, { ...settings, onSettingsChange: handleChangeFormat, type: displayFormatType, url: url, infos: infos }));
             }
             case 'datetime': {
-                return (_jsx(FormatDatetime, { ...settings, onSettingsChange: onSettingsChange, type: formatType, dynamicContentType: dynamicContentType }));
+                return (_jsx(FormatDatetime, { ...settings, onSettingsChange: handleChangeFormat, type: displayFormatType, dynamicContentType: dynamicContentType }));
             }
             default: {
                 return null;

package/es/components/molecules/DisplayFormat/components/FormatDatetime.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ export type TDatetimeFormatSetting = {
     hasDateFormat: boolean;
     hasTimeFormat: boolean;
     dateParseFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY/MM/DD';
-    timeParseFormat: '12hour' | '24hour' | string;
+    timeParseFormat: '12hour' | '24hour';
     dateParseOption: 'short' | 'medium' | 'long' | undefined;
     timeParseOption: 'short' | 'medium' | 'long' | undefined;
     language?: string;

package/es/components/molecules/DisplayFormat/components/FormatDatetime.js CHANGED Viewed

@@ -42,7 +42,13 @@ export const FormatDatetime = (props) => {
     return (_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'start' }, children: [_jsx(Checkbox, { style: { marginTop: '4px' }, checked: hasDateFormat, disabled: hasDateFormat && !hasTimeFormat, onChange: e => handleChange({
                             ...dfSettings,
                             hasDateFormat: e.target.checked,
-                        }) }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }, children: [_jsx("span", { style: { width: '135px' }, children: translate(translations._TITL_DISPLAY_DATE_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasDateFormat, defaultValue: dateParseFormat, options: DATE_FORMAT_OPTIONS, onChange: value => {
+                        }) }), _jsxs("div", { style: { width: '100%' }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    marginBottom: '4px',
+                                    width: '100%',
+                                    justifyContent: 'space-between',
+                                }, children: [_jsx("span", { style: { fontSize: '12px' }, children: translate(translations._TITL_DISPLAY_DATE_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasDateFormat, defaultValue: dateParseFormat, options: DATE_FORMAT_OPTIONS, onChange: value => {
                                             handleChange({
                                                 ...dfSettings,
                                                 dateParseFormat: value,
@@ -51,10 +57,21 @@ export const FormatDatetime = (props) => {
                                         } })] }), _jsx(RadioGroup, { disabled: !hasDateFormat, defaultValue: dateParseOption, onChange: e => handleChange({
                                     ...dfSettings,
                                     dateParseOption: e.target.value,
-                                }), children: _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsx(Radio, { value: "short", children: dateFormatExamples.SHORT }), _jsx(Radio, { value: "medium", children: dateFormatExamples.MEDIUM }), _jsx(Radio, { value: "long", children: dateFormatExamples.LONG })] }) })] })] }), _jsxs("div", { style: { display: 'flex', gap: '16px', alignItems: 'start', marginTop: '10px' }, children: [_jsx(Checkbox, { style: { marginTop: '4px' }, checked: hasTimeFormat, disabled: hasTimeFormat && !hasDateFormat, onChange: e => handleChange({
+                                }), children: _jsxs(Space, { direction: "vertical", size: "middle", children: [_jsx(Radio, { value: "short", children: dateFormatExamples.SHORT }), _jsx(Radio, { value: "medium", children: dateFormatExamples.MEDIUM }), _jsx(Radio, { value: "long", children: dateFormatExamples.LONG })] }) })] })] }), _jsxs("div", { style: {
+                    display: 'flex',
+                    gap: '16px',
+                    alignItems: 'start',
+                    marginTop: '10px',
+                }, children: [_jsx(Checkbox, { style: { marginTop: '4px' }, checked: hasTimeFormat, disabled: hasTimeFormat && !hasDateFormat, onChange: e => handleChange({
                             ...dfSettings,
                             hasTimeFormat: e.target.checked,
-                        }) }), _jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }, children: [_jsx("span", { style: { width: '135px' }, children: translate(translations._TITL_DISPLAY_TIME_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: TIME_FORMAT_OPTIONS, onChange: value => {
+                        }) }), _jsxs("div", { style: { width: '100%' }, children: [_jsxs("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    width: '100%',
+                                    marginBottom: '4px',
+                                }, children: [_jsx("span", { style: { fontSize: '12px' }, children: translate(translations._TITL_DISPLAY_TIME_AS) }), _jsx(Select, { style: { width: 150 }, disabled: !hasTimeFormat, defaultValue: timeParseFormat, options: TIME_FORMAT_OPTIONS, onChange: value => {
                                             handleChange({
                                                 ...dfSettings,
                                                 timeParseFormat: value,

package/es/components/molecules/DisplayFormat/components/FormatNumber.d.ts CHANGED Viewed

@@ -42,7 +42,6 @@ export type TNumberFormatSettings = {
 };
 type FormatNumberProps = {
     onSettingsChange?: (settingValues: TNumberFormatSettings) => void;
-    type: TDisplayFormat;
 } & TNumberFormatSettings & {
     infos: PayloadInfo;
     url: string;

package/es/components/molecules/DisplayFormat/components/FormatNumber.js CHANGED Viewed

@@ -15,11 +15,15 @@ import { translate, translations } from '@antscorp/antsomi-locales';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { DecreaseDecimalIcon, IncreaseDecimalIcon, ViewDetailsInformationIcon, } from '../../../icons';
 import { CURRENCY_REGEX, DECIMAL_PLACES_REGEX } from '../regex';
+import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+import { MEDIA_TEMPLATE_API } from '@antscorp/antsomi-ui/es/constants';
 const groupingOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.GROUPING_SEPARATOR;
 const decimalOptions = ATTRIBUTE_NUMBERIC_FORMAT_OPTION.DECIMAL_SEPARATOR;
 export const FormatNumber = (props) => {
     const { t, language } = i18nInstance;
-    const { onSettingsChange, type: displayType, infos, url } = props;
+    const { onSettingsChange, type: formatType, infos, url } = props;
+    const { appConfig } = useAppConfigContext();
+    const { auth, env } = appConfig || {};
     const { currencyCode, decimalPlaces, grouping, decimal, prefixType, isCompact } = props;
     const settingValues = {
         decimalPlaces,
@@ -28,6 +32,7 @@ export const FormatNumber = (props) => {
         isCompact,
         currencyCode,
         prefixType,
+        type: formatType,
     };
     const [listCurrencyOptions, setListCurrencyOptions] = useState([]);
     const [isLoadingCurrencyOptions, setIsLoadingCurrencyOptions] = useState(true);
@@ -36,7 +41,7 @@ export const FormatNumber = (props) => {
         if (onSettingsChange) {
             onSettingsChange({
                 ...settingValues,
-                type: displayType,
+                // type: displayType,
             });
         }
     };
@@ -54,7 +59,7 @@ export const FormatNumber = (props) => {
             else {
                 setIsLoadingCurrencyOptions(true);
                 try {
-                    const data = await getCurrencyList({ lang: language, url }, infos);
+                    const data = await getCurrencyList({ lang: language, url: `${MEDIA_TEMPLATE_API[env || 'sandbox-cdp']}/api/v1` }, auth || {});
                     const currencies = data.reduce((accumulate, currency) => {
                         if (Currencies[currency.code]) {
                             accumulate.push({
@@ -96,10 +101,10 @@ export const FormatNumber = (props) => {
         ...decimal,
         ...(decimal.value === grouping && { disabled: true }),
     })), [grouping]);
-    return (_jsxs(Form, { style: { width: '100%', fontSize: '12px' }, labelAlign: "left", children: [displayType === 'currency' && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { labelCol: { span: 3 }, wrapperCol: { span: 21 }, label: translate(translations._TITL_CURRENCY), colon: false, children: _jsxs(Radio.Group, { value: prefixType, onChange: ({ target: { value } }) => onChangeSettingsHandle({
+    return (_jsxs(Form, { style: { width: '100%', fontSize: '12px' }, labelAlign: "left", children: [formatType === 'currency' && (_jsxs(_Fragment, { children: [_jsx(Form.Item, { labelCol: { span: 10 }, wrapperCol: { span: 14 }, label: translate(translations._TITL_CURRENCY), colon: false, children: _jsxs(Radio.Group, { value: prefixType, onChange: ({ target: { value } }) => onChangeSettingsHandle({
                                 ...settingValues,
                                 prefixType: value,
-                            }), children: [_jsx(Radio, { style: { fontSize: 12 }, value: "code", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencyCode) }), _jsx(Radio, { style: { fontSize: 12 }, value: "symbol", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencySymbol) })] }) }), _jsx(Form.Item, { label: " ", labelCol: { span: 3 }, wrapperCol: { span: 21 }, colon: false, children: _jsx(Select, { style: { width: 150 }, disabled: isLoadingCurrencyOptions, options: listCurrencyOptions, value: currencyCode, onChange: value => onChangeSettingsHandle({
+                            }), children: [_jsx(Radio, { style: { fontSize: 12 }, value: "code", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencyCode) }), _jsx(Radio, { style: { fontSize: 12 }, value: "symbol", children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.currencySymbol) })] }) }), _jsx(Form.Item, { label: " ", labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 150 }, disabled: isLoadingCurrencyOptions, options: listCurrencyOptions, value: currencyCode, onChange: value => onChangeSettingsHandle({
                                 ...settingValues,
                                 currencyCode: value,
                             }), showSearch: true }) })] })), _jsx(Form.Item, { children: _jsx(Checkbox, { style: { fontSize: 12 }, checked: isCompact, onChange: ({ target: { checked } }) => {
@@ -107,18 +112,18 @@ export const FormatNumber = (props) => {
                             ...settingValues,
                             isCompact: checked,
                         });
-                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 3 }, wrapperCol: { span: 21 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
+                    }, children: t(translations.dynamicContent.modal.label.formNumberDisplayFormat.compact) }) }), _jsx(Form.Item, { label: decimalPlacesLabel, style: { marginBottom: 12 }, colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsxs("div", { style: { display: 'flex', marginLeft: '55px', gap: '15px' }, children: [_jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, disabled: decimalPlaces <= 0, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces - 1,
                             }), size: "small", icon: _jsx(DecreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) }), _jsx(Button, { style: { border: 'none', boxShadow: 'none', borderRadius: '5px' }, onClick: () => onChangeSettingsHandle({
                                 ...settingValues,
                                 decimalPlaces: decimalPlaces + 1,
                             }), size: "small", icon: _jsx(IncreaseDecimalIcon, { color: "#005EB8", style: { padding: '2px' } }) })] }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_GROUPING) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 3 }, wrapperCol: { span: 21 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
+                                .groupingIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), colon: false, labelCol: { span: 10 }, wrapperCol: { span: 14 }, children: _jsx(Select, { style: { width: 100 }, value: grouping, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         grouping: value,
                     }), options: listGroupingSeparatorOptions }) }), _jsx(Form.Item, { label: _jsxs(_Fragment, { children: [_jsx("span", { style: { marginRight: '6px' }, children: translate(translations._DISPLAY_DECIMAL) }), _jsx(Tooltip, { placement: "top", title: t(translations.dynamicContent.modal.label.formNumberDisplayFormat
-                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 3 }, wrapperCol: { span: 21 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
+                                .decimalIconTooltipTitle), style: { marginLeft: 4, opacity: 0.4 }, children: _jsx(ViewDetailsInformationIcon, { size: 14 }) })] }), labelCol: { span: 10 }, wrapperCol: { span: 14 }, colon: false, children: _jsx(Select, { style: { width: 100 }, value: decimal, onChange: value => onChangeSettingsHandle({
                         ...settingValues,
                         decimal: value,
                     }), options: listDecimalSeparatorOptions }) })] }));

package/es/components/molecules/DisplayFormat/constants.d.ts CHANGED Viewed

@@ -145,3 +145,7 @@ export declare const TIME_FORMAT_LIST: {
 export declare const GROUPING_OPTIONS: {};
 export declare const NUMBER_SETTINGS_DEFAULT: TNumberFormatSettings;
 export declare const DATETIME_SETTINGS_DEFAULT: TDatetimeFormatSetting;
+export declare const DYNAMIC_CONTENT_DF_FORMAT_TYPE: {
+    number: string;
+    datetime: string;
+};

package/es/components/molecules/DisplayFormat/constants.js CHANGED Viewed

@@ -235,3 +235,7 @@ export const DATETIME_SETTINGS_DEFAULT = {
     timeParseFormat: '12hour',
     type: 'datetime',
 };
+export const DYNAMIC_CONTENT_DF_FORMAT_TYPE = {
+    number: 'number',
+    datetime: 'datetime',
+};

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

@@ -23,7 +23,7 @@ import { DETECT_LINK, EMOJI, ERROR_TAG, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE
 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, tagProperties, 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, onTagRemove, onChange, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -451,6 +451,11 @@ const TagifyInput = forwardRef((props, ref) => {
             onTagClick(event.detail);
         }
     }, [onTagClick]);
+    const onTagifyRemoveTag = useCallback((event) => {
+        if (event.detail && onTagRemove) {
+            onTagRemove(event.detail);
+        }
+    }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
     const onTagifyTyping = useCallback((event) => {
         if (event.detail) {
@@ -852,11 +857,13 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('click', onTagItemClick);
             tagifyInstance.on('input', onInputTagifyDebounce);
             tagifyInstance.on('change', onTagifyChangedDebounce);
+            tagifyInstance.on('remove', onTagifyRemoveTag);
         }
         // Off listen to Tagify events
         return () => {
             if (tagifyInstance) {
                 tagifyInstance.off('click', onTagItemClick);
+                tagifyInstance.off('remove', onTagifyRemoveTag);
                 if (onInputTagifyDebounce) {
                     tagifyInstance.off('input', onInputTagifyDebounce);
                 }
@@ -865,7 +872,7 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
             }
         };
-    }, [onTagItemClick, onTagifyTyping, onTagifyChanged]);
+    }, [onTagItemClick, onTagifyTyping, onTagifyChanged, onTagifyRemoveTag]);
     // At the first render, need to update URL to tag to show hint in the tooltip with tag
     useEffect(() => {
         detectReplaceURLToTag();

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

@@ -131,6 +131,11 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is removed.
+     * Receives the tag detail as parameter, allowing custom actions on tag removal.
+     */
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.

package/es/components/molecules/index.d.ts CHANGED Viewed

@@ -64,6 +64,7 @@ export * from './Tabs';
 export * from './TagifyInput';
 export * from './EmojiCollections';
 export * from './EmojiPopover';
+export * from './DisplayFormat';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js CHANGED Viewed

@@ -64,6 +64,7 @@ export * from './Tabs';
 export * from './TagifyInput';
 export * from './EmojiCollections';
 export * from './EmojiPopover';
+export * from './DisplayFormat';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/constants/api.js CHANGED Viewed

@@ -16,7 +16,7 @@ export const CDP_API = {
 export const MEDIA_TEMPLATE_API = {
     [ENV.DEV]: 'https://sandbox-media-template.antsomi.com',
     [ENV.SANDBOX]: 'https://sandbox-media-template.antsomi.com',
-    [ENV.SANDBOX_CDP]: 'https://sandbox-media-template.antsomi.com',
+    [ENV.SANDBOX_CDP]: 'https://sandbox-media-template.antsomi.com/cdp',
     [ENV.STAGING]: 'https://staging-media-template.antsomi.com',
     [ENV.PROD]: 'https://media-template.antsomi.com',
 };

package/package.json CHANGED Viewed

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