@antscorp/antsomi-ui 1.3.5-beta.934 → 1.3.5-beta.937

package/es/components/atoms/SlideBar/SlideBar.js

@@ -257,7 +257,7 @@ export const SlideBar = props => {
                                             if (!disabledDelete) {
                                                 handleDeleteSlide(state.cacheInfoClicked);
                                             }
-                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
+                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: 20, onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
     const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
     return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { isViewMode: isViewMode, children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
@@ -270,7 +270,9 @@ export const SlideBar = props => {
                     fontSize: `${BTN_ADD_SIZE}px`,
                     cursor: disabledAdd ? 'not-allowed' : 'pointer',
                     color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
-                }, onClick: (e) => {
+                }, 
+                // disabled={disabledAdd}
+                onClick: (e) => {
                     e.stopPropagation();
                     if (!disabledAdd) {
                         handleAddSlide();

package/es/components/atoms/Slider/index.js

@@ -10,16 +10,11 @@ export const Slider = memo(props => {
     const { range, value, min = 0, max = 0, className, tooltipVisible = false } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
-    // const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
-    const restProps = omit(props, ['tooltipVisible']);
+    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
     if (isNegative) {
-        return (_jsx(SliderWrapper, { isNegative: true, width: calculateWidth, className: className, children: _jsx(AntdSlider, { ...omit(restProps, ['marks', 'className']), tooltip: tooltipVisible !== 'default' && {
-                    open: tooltipVisible,
-                }, marks: {
+        return (_jsx(SliderWrapper, { isNegative: true, width: calculateWidth, className: className, children: _jsx(AntdSlider, { ...omit(restProps, ['marks', 'className']), marks: {
                     0: ' ',
                 } }) }));
     }
-    return (_jsx(SliderWrapper, { className: className, children: _jsx(AntdSlider, { ...restProps, tooltip: tooltipVisible !== 'default' && {
-                open: tooltipVisible,
-            } }) }));
+    return (_jsx(SliderWrapper, { className: className, children: _jsx(AntdSlider, { ...restProps }) }));
 });

package/es/components/atoms/index.js

@@ -47,5 +47,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
 export * from './List';

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -2,10 +2,10 @@ import { lazy } from 'react';
 export const LazyIcon = {
     AccountCircleIcon: lazy(() => import('../AccountCircleIcon').then(m => ({ default: m.AccountCircleIcon }))),
     AccountCircleOutlineIcon: lazy(() => import('../AccountCircleOutlineIcon').then(m => ({ default: m.AccountCircleOutlineIcon }))),
+    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AccountSharing30Icon: lazy(() => import('../AccountSharing30Icon').then(m => ({ default: m.AccountSharing30Icon }))),
     AccountSharingIcon: lazy(() => import('../AccountSharingIcon').then(m => ({ default: m.AccountSharingIcon }))),
     AccountTreeIcon: lazy(() => import('../AccountTreeIcon').then(m => ({ default: m.AccountTreeIcon }))),
-    Accounts30Icon: lazy(() => import('../Accounts30Icon').then(m => ({ default: m.Accounts30Icon }))),
     AddChartIcon: lazy(() => import('../AddChartIcon').then(m => ({ default: m.AddChartIcon }))),
     AddFolderIcon: lazy(() => import('../AddFolderIcon').then(m => ({ default: m.AddFolderIcon }))),
     AddIcon: lazy(() => import('../AddIcon').then(m => ({ default: m.AddIcon }))),
@@ -56,7 +56,6 @@ export const LazyIcon = {
     }))),
     ChatMentionIcon: lazy(() => import('../ChatMentionIcon').then(m => ({ default: m.ChatMentionIcon }))),
     ChatUnreadIcon: lazy(() => import('../ChatUnreadIcon').then(m => ({ default: m.ChatUnreadIcon }))),
-    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CheckboxChecked5RadiusIcon: lazy(() => import('../CheckboxChecked5RadiusIcon').then(m => ({ default: m.CheckboxChecked5RadiusIcon }))),
     CheckboxCheckedIcon: lazy(() => import('../CheckboxCheckedIcon').then(m => ({ default: m.CheckboxCheckedIcon }))),
     CheckboxIndeterminate5RadiusIcon: lazy(() => import('../CheckboxIndeterminate5RadiusIcon').then(m => ({
@@ -68,6 +67,7 @@ export const LazyIcon = {
     }))),
     CheckboxUncheckedIcon: lazy(() => import('../CheckboxUncheckedIcon').then(m => ({ default: m.CheckboxUncheckedIcon }))),
     ChecklistRtlIcon: lazy(() => import('../ChecklistRtlIcon').then(m => ({ default: m.ChecklistRtlIcon }))),
+    CheckSlimIcon: lazy(() => import('../CheckSlimIcon').then(m => ({ default: m.CheckSlimIcon }))),
     CircleAddElementIcon: lazy(() => import('../CircleAddElementIcon').then(m => ({ default: m.CircleAddElementIcon }))),
     CircleNotificationsIcon: lazy(() => import('../CircleNotificationsIcon').then(m => ({ default: m.CircleNotificationsIcon }))),
     CloseIcon: lazy(() => import('../CloseIcon').then(m => ({ default: m.CloseIcon }))),
@@ -102,15 +102,15 @@ export const LazyIcon = {
     DataDestinationIcon: lazy(() => import('../DataDestinationIcon').then(m => ({ default: m.DataDestinationIcon }))),
     DataEncryption30Icon: lazy(() => import('../DataEncryption30Icon').then(m => ({ default: m.DataEncryption30Icon }))),
     DataEncryptionIcon: lazy(() => import('../DataEncryptionIcon').then(m => ({ default: m.DataEncryptionIcon }))),
+    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DataIcon: lazy(() => import('../DataIcon').then(m => ({ default: m.DataIcon }))),
     DataRefreshIcon: lazy(() => import('../DataRefreshIcon').then(m => ({ default: m.DataRefreshIcon }))),
     DataSchema30Icon: lazy(() => import('../DataSchema30Icon').then(m => ({ default: m.DataSchema30Icon }))),
     DataSource30Icon: lazy(() => import('../DataSource30Icon').then(m => ({ default: m.DataSource30Icon }))),
-    DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
-    DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
-    Dataflows30Icon: lazy(() => import('../Dataflows30Icon').then(m => ({ default: m.Dataflows30Icon }))),
     DatasourceIcon: lazy(() => import('../DatasourceIcon').then(m => ({ default: m.DatasourceIcon }))),
     DatasourceSegment30Icon: lazy(() => import('../DatasourceSegment30Icon').then(m => ({ default: m.DatasourceSegment30Icon }))),
+    DataView30Icon: lazy(() => import('../DataView30Icon').then(m => ({ default: m.DataView30Icon }))),
+    DataViewIcon: lazy(() => import('../DataViewIcon').then(m => ({ default: m.DataViewIcon }))),
     DecreaseDecimalIcon: lazy(() => import('../DecreaseDecimalIcon').then(m => ({ default: m.DecreaseDecimalIcon }))),
     DeleteRemoveTrashIcon: lazy(() => import('../DeleteRemoveTrashIcon').then(m => ({ default: m.DeleteRemoveTrashIcon }))),
     DeliveryLogIcon: lazy(() => import('../DeliveryLogIcon').then(m => ({ default: m.DeliveryLogIcon }))),
@@ -187,13 +187,13 @@ export const LazyIcon = {
     ForwardIcon: lazy(() => import('../ForwardIcon').then(m => ({ default: m.ForwardIcon }))),
     FreeDrawIcon: lazy(() => import('../FreeDrawIcon').then(m => ({ default: m.FreeDrawIcon }))),
     FullReviewIcon: lazy(() => import('../FullReviewIcon').then(m => ({ default: m.FullReviewIcon }))),
-    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GalleryTemplateIcon: lazy(() => import('../GalleryTemplateIcon').then(m => ({ default: m.GalleryTemplateIcon }))),
     GeneralSettingIcon: lazy(() => import('../GeneralSettingIcon').then(m => ({ default: m.GeneralSettingIcon }))),
     GeneralSettings30Icon: lazy(() => import('../GeneralSettings30Icon').then(m => ({ default: m.GeneralSettings30Icon }))),
     GenerateAutoWizardIcon: lazy(() => import('../GenerateAutoWizardIcon').then(m => ({ default: m.GenerateAutoWizardIcon }))),
     Geofence30Icon: lazy(() => import('../Geofence30Icon').then(m => ({ default: m.Geofence30Icon }))),
     GetInsightIcon: lazy(() => import('../GetInsightIcon').then(m => ({ default: m.GetInsightIcon }))),
+    GPTIcon: lazy(() => import('../GPTIcon').then(m => ({ default: m.GPTIcon }))),
     GridViewIcon: lazy(() => import('../GridViewIcon').then(m => ({ default: m.GridViewIcon }))),
     GroupIcon: lazy(() => import('../GroupIcon').then(m => ({ default: m.GroupIcon }))),
     GroupLayerIcon: lazy(() => import('../GroupLayerIcon').then(m => ({ default: m.GroupLayerIcon }))),
@@ -255,8 +255,8 @@ export const LazyIcon = {
     NodeViewIcon: lazy(() => import('../NodeViewIcon').then(m => ({ default: m.NodeViewIcon }))),
     NoteNewIcon: lazy(() => import('../NoteNewIcon').then(m => ({ default: m.NoteNewIcon }))),
     NotificationIcon: lazy(() => import('../NotificationIcon').then(m => ({ default: m.NotificationIcon }))),
-    NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
     NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
+    NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
     OpenNewTabIcon: lazy(() => import('../OpenNewTabIcon').then(m => ({ default: m.OpenNewTabIcon }))),
     OpenUrlIcon: lazy(() => import('../OpenUrlIcon').then(m => ({ default: m.OpenUrlIcon }))),
     OrchestrationIcon: lazy(() => import('../OrchestrationIcon').then(m => ({ default: m.OrchestrationIcon }))),
@@ -309,7 +309,6 @@ export const LazyIcon = {
     ResumeIcon: lazy(() => import('../ResumeIcon').then(m => ({ default: m.ResumeIcon }))),
     RightExpandIcon: lazy(() => import('../RightExpandIcon').then(m => ({ default: m.RightExpandIcon }))),
     Role30Icon: lazy(() => import('../Role30Icon').then(m => ({ default: m.Role30Icon }))),
-    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SaveAsIcon: lazy(() => import('../SaveAsIcon').then(m => ({ default: m.SaveAsIcon }))),
     SaveIcon: lazy(() => import('../SaveIcon').then(m => ({ default: m.SaveIcon }))),
     ScheduleEmailDeliveryIcon: lazy(() => import('../ScheduleEmailDeliveryIcon').then(m => ({ default: m.ScheduleEmailDeliveryIcon }))),
@@ -333,6 +332,7 @@ export const LazyIcon = {
     SlideGroupIcon: lazy(() => import('../SlideGroupIcon').then(m => ({ default: m.SlideGroupIcon }))),
     Sort1Icon: lazy(() => import('../Sort1Icon').then(m => ({ default: m.Sort1Icon }))),
     SortIcon: lazy(() => import('../SortIcon').then(m => ({ default: m.SortIcon }))),
+    SQLWorkspace30Icon: lazy(() => import('../SQLWorkspace30Icon').then(m => ({ default: m.SQLWorkspace30Icon }))),
     SqlWorkspaceIcon: lazy(() => import('../SqlWorkspaceIcon').then(m => ({ default: m.SqlWorkspaceIcon }))),
     StatisticIcon: lazy(() => import('../StatisticIcon').then(m => ({ default: m.StatisticIcon }))),
     StickerIcon: lazy(() => import('../StickerIcon').then(m => ({ default: m.StickerIcon }))),
@@ -380,9 +380,9 @@ export const LazyIcon = {
     VisitorInformationIcon: lazy(() => import('../VisitorInformationIcon').then(m => ({ default: m.VisitorInformationIcon }))),
     WarningIcon: lazy(() => import('../WarningIcon').then(m => ({ default: m.WarningIcon }))),
     WebAssetIcon: lazy(() => import('../WebAssetIcon').then(m => ({ default: m.WebAssetIcon }))),
+    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WebIcon: lazy(() => import('../WebIcon').then(m => ({ default: m.WebIcon }))),
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
-    WebhookIcon: lazy(() => import('../WebhookIcon').then(m => ({ default: m.WebhookIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
 };

package/es/components/icons/index.js

@@ -1,9 +1,9 @@
 export { AccountCircleIcon } from './AccountCircleIcon';
 export { AccountCircleOutlineIcon } from './AccountCircleOutlineIcon';
+export { Accounts30Icon } from './Accounts30Icon';
 export { AccountSharing30Icon } from './AccountSharing30Icon';
 export { AccountSharingIcon } from './AccountSharingIcon';
 export { AccountTreeIcon } from './AccountTreeIcon';
-export { Accounts30Icon } from './Accounts30Icon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
@@ -52,7 +52,6 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
@@ -60,6 +59,7 @@ export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { ChecklistRtlIcon } from './ChecklistRtlIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -94,15 +94,15 @@ export { DataDestination30Icon } from './DataDestination30Icon';
 export { DataDestinationIcon } from './DataDestinationIcon';
 export { DataEncryption30Icon } from './DataEncryption30Icon';
 export { DataEncryptionIcon } from './DataEncryptionIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
 export { DataSchema30Icon } from './DataSchema30Icon';
 export { DataSource30Icon } from './DataSource30Icon';
-export { DataView30Icon } from './DataView30Icon';
-export { DataViewIcon } from './DataViewIcon';
-export { Dataflows30Icon } from './Dataflows30Icon';
 export { DatasourceIcon } from './DatasourceIcon';
 export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
+export { DataView30Icon } from './DataView30Icon';
+export { DataViewIcon } from './DataViewIcon';
 export { DecreaseDecimalIcon } from './DecreaseDecimalIcon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
@@ -179,13 +179,13 @@ export { Form30Icon } from './Form30Icon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GalleryTemplateIcon } from './GalleryTemplateIcon';
 export { GeneralSettingIcon } from './GeneralSettingIcon';
 export { GeneralSettings30Icon } from './GeneralSettings30Icon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { Geofence30Icon } from './Geofence30Icon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -247,8 +247,8 @@ export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NoteNewIcon } from './NoteNewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -299,7 +299,6 @@ export { RestoreDefaultIcon } from './RestoreDefaultIcon';
 export { ResumeIcon } from './ResumeIcon';
 export { RightExpandIcon } from './RightExpandIcon';
 export { Role30Icon } from './Role30Icon';
-export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SaveAsIcon } from './SaveAsIcon';
 export { SaveIcon } from './SaveIcon';
 export { ScheduleEmailDeliveryIcon } from './ScheduleEmailDeliveryIcon';
@@ -323,6 +322,7 @@ export { SignatureIcon } from './SignatureIcon';
 export { SlideGroupIcon } from './SlideGroupIcon';
 export { Sort1Icon } from './Sort1Icon';
 export { SortIcon } from './SortIcon';
+export { SQLWorkspace30Icon } from './SQLWorkspace30Icon';
 export { SqlWorkspaceIcon } from './SqlWorkspaceIcon';
 export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
@@ -370,8 +370,8 @@ export { VisitorIcon } from './VisitorIcon';
 export { VisitorInformationIcon } from './VisitorInformationIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
+export { WebhookIcon } from './WebhookIcon';
 export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
-export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -33,7 +33,7 @@ export const AccountListing = React.forwardRef((props, ref) => {
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [onChange, recentData]);
-    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length && recentData?.value?.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
+    return (_jsxs(AccountSelectionStyled, { className: className, children: [_jsx(Input, { placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: THEME.token?.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }), _jsx("div", { className: "account-list", children: _jsx("ul", { children: _jsxs(Scrollbars, { style: { width: '100%', height: showAllAccount ? '364px' : '410px' }, children: [recentData?.value?.length ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "recent-text", children: "Recent" }), recentData?.value
                                         .map(accountId => accountData?.find(account => account.userId === accountId))
                                         .filter((accountId, index, self) => Boolean(accountId) && index === self.indexOf(accountId))
                                         .map(account => (_jsx(AccountItem, { userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }, account.userId))), _jsx(Divider, { style: { margin: '8px 0', color: THEME.token?.bw3 } })] })) : null, accountData

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -10,15 +10,16 @@ import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
 import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
-    const initialized = useRef(false);
+    const initialed = useRef(false);
     const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value || initialized.current)
+        if (!value)
             return;
-        const needTriggerOut = !initialized.current;
+        const needTriggerOut = !initialed.current;
+        // console.log({ needTriggerOut });
         dispatch(initState(value, needTriggerOut));
-        initialized.current = true;
+        initialed.current = true;
     }, [value]);
     useLayoutEffect(() => {
         if (!state.open) {

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

@@ -2,7 +2,7 @@ export const TRIGGER_OUT_MODE = {
     auto: 'auto',
     manual: 'manual',
 };
-export const LOCAL_TIMEZONE = 'Asia/Hong_Kong' || Intl.DateTimeFormat().resolvedOptions().timeZone;
+export const LOCAL_TIMEZONE = Intl.DateTimeFormat().resolvedOptions().timeZone;
 export const RANGE_LIMIT = 365 * 2;
 export const DEFAULT_NUM_UP_TO = 30;
 export const AUTO_UPDATE_TO_KEY = {

package/es/components/molecules/CaptureScreen/CaptureScreen.js

@@ -786,8 +786,8 @@ CaptureScreen.defaultProps = {
     src: '',
     alt: 'CaptureScreen',
     defaultPositions: {
-        capture: null,
-        record: null,
+        capture: { x: 0, y: 0 },
+        record: { x: 0, y: 0 },
     },
     callback: () => { },
 };

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -42,7 +42,7 @@ const styleContainAlpha = {
 };
 const CustomPicker = props => {
     // Props
-    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors, ...restOf } = props;
+    const { className, style, children, onChange, onChangeComplete, presetColors, ...restOf } = props;
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -68,7 +68,7 @@ const CustomPicker = props => {
                                     width: '100%',
                                     height: 12,
                                     marginTop: 10,
-                                }, children: _jsx(Alpha, { ...restOf, pointer: HuePointer, onChange: onChange }) })] })] }), _jsxs("div", { style: { ...wrapperStyling, paddingBottom: 15 }, children: [_jsx(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }), isShowRgbaInput ? (_jsxs("div", { style: rgbaInputStyling, children: [_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "R" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "G" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "B" })] }), !isHideAlpha && (_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "A" })] }))] })) : (_jsxs(EditableInputWrapper, { children: [_jsx(EditableInput, { value: props.color, onChange: onChange }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "HEX" })] })), _jsx(Button, { onClick: () => {
+                                }, children: _jsx(Alpha, { ...restOf, pointer: HuePointer, onChange: onChange }) })] })] }), _jsxs("div", { style: { ...wrapperStyling, paddingBottom: 15 }, children: [_jsx(Icon, { type: "icon-ants-unfold-more", style: { cursor: 'pointer', fontSize: '20px' }, onClick: () => setShowRgbaInput(!isShowRgbaInput) }), isShowRgbaInput ? (_jsxs("div", { style: rgbaInputStyling, children: [_jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.r, controls: false, onChange: value => onChangeRgbaColor('r', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "R" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.g, controls: false, onChange: value => onChangeRgbaColor('g', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "G" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "B" })] }), _jsxs("div", { style: rgbaStyling, children: [_jsx(InputNumberWrapper, { value: props.rgb?.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "A" })] })] })) : (_jsxs(EditableInputWrapper, { children: [_jsx(EditableInput, { value: props.color, onChange: onChange }), _jsx(Text, { style: { position: 'absolute', bottom: '-20px' }, children: "HEX" })] })), _jsx(Button, { onClick: () => {
                             setShowRgbaInput(true);
                             onChange('rgba(0, 0, 0, 0)');
                         }, children: "Clear" })] }), presetColors ? (_jsxs("div", { children: [_jsx(Divider, {}), presetColors] })) : null] }));

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

@@ -22,7 +22,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -71,7 +71,7 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
+    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
                             backgroundColor: color,
                             display: 'block',
                             width: 20,
@@ -83,7 +83,6 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
-    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

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, onToggleCollapse, closable = false, ...restProps } = props;
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true, onToggleCollapse, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -110,7 +110,7 @@ export const DrawerDetail = props => {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify({ ...localStorageValues, [name || '']: !collapseDrawer }));
         }
     };
-    return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
+    return (_jsxs(StyledDrawer, { push: false, closable: false, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,
             motionEnter: false,
@@ -120,7 +120,7 @@ export const DrawerDetail = props => {
             motionAppear: false,
             motionEnter: false,
             motionLeave: false,
-        }, mask: mask, classNames: {
+        }, classNames: {
             body: 'drawer-detail-body',
         }, contentWrapperStyle: {
             transition: 'none',

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 /* Components */
 import { Space } from '@antscorp/antsomi-ui/es/components/atoms/Space';
 import { Switch } from '@antscorp/antsomi-ui/es/components/atoms/Switch';
@@ -35,7 +35,7 @@ export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) =
     [settings]);
     const filteredSetting = useMemo(() => {
         if (!showSettings || showSettings?.length === 0) {
-            return Object.keys(settingMap).map(keySetting => (_jsx(React.Fragment, { children: settingMap[keySetting] }, keySetting)));
+            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

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

@@ -10,12 +10,14 @@ 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 = '»'
@@ -115,5 +117,5 @@ export const HeaderV2 = memo(props => {
         onSelectAccount?.(userId);
     };
     const QUOTE_ENTITY = _jsx(_Fragment, { children: "\u00BB" });
-    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] })] }));
+    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] })] }) }));
 });

package/es/components/molecules/RichMenu/RichMenuBlock/constants.js

@@ -721,7 +721,7 @@ export const SAMPLE_RICHMENU = {
         displayDefault: true,
     },
     image: {
-        imageUrl: 'https://s.cystack.net/portal/organizations/487b0f9dd9d8543312dc25e32ac71e4f/logo.jpg',
+        imageUrl: 'https://sandbox-st-media-template.antsomi.com/upload/2024/01/04/8d8cf39a-748f-435c-b6c6-b71b5facc739.gif',
         imageStyles: {
             borderTopLeftRadius: '0px',
             borderTopRightRadius: '0px',

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

@@ -4,7 +4,6 @@ import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
 import { Button } from '../../../../atoms/Button';
 import { Checkbox } from '../../../../atoms/Checkbox';
-import { Typography } from '../../../../atoms/Typography';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -105,9 +104,7 @@ export const PopoverSelect = (props) => {
         if (typeof option.label === 'function') {
             return option.label({ selected: selectedKeys.has(option.key) });
         }
-        return (_jsx(Typography.Text, { ellipsis: {
-                tooltip: option.label,
-            }, style: { maxWidth: 310 }, children: option.label }));
+        return option.label;
     };
     const items = filteredOptions.map(opt => ({
         key: opt.key,

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

@@ -16,17 +16,16 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, } from './utils';
-import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, } from './utils';
+import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getPersonalizeTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
-import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, defaultCssVariables, tagifyDefaultProps, } from './constants';
+import { DETECT_LINK, EMOJI, FORCE_SHOW_TOOLTIP, INVALID_TAG, MESSAGE_TAG, NO_VIEW_TAG, PERSONALIZE_PTN, PROMOTION_CODE, READONLY_TAG, REMOVED_TAG, SHORT_LINK, SHORT_LINK_PTN, defaultCssVariables, tagifyDefaultProps, } from './constants';
 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;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
-    const [labelTagRefreshness, setLabelTagRefreshness] = useState(1);
     // Refs
     const inputRef = useRef(null);
     const tagifyRef = useRef(null);
@@ -356,7 +355,7 @@ const TagifyInput = forwardRef((props, ref) => {
             if (newTag && tagifyRef.current) {
                 const { settings, value: currentTags } = tagifyRef.current;
                 const { readonly, maxTags } = settings;
-                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(tag.type));
+                const currentPersonalizeTags = currentTags.filter(tag => ![EMOJI, SHORT_LINK].includes(tag.type));
                 const currentPersonalizeTagsLength = currentPersonalizeTags.length;
                 // Check readonly
                 if (readonly)
@@ -372,7 +371,7 @@ const TagifyInput = forwardRef((props, ref) => {
                      * Validate the max limit before add new tag
                      * For emoji and short link, it will be passed
                      */
-                    if (![EMOJI, SHORT_LINK, SHORT_LINK_V2].includes(type) &&
+                    if (![EMOJI, SHORT_LINK].includes(type) &&
                         currentPersonalizeTagsLength >= maxTags)
                         return;
                     // Create new tag
@@ -403,11 +402,6 @@ const TagifyInput = forwardRef((props, ref) => {
                 throw new Error('Tagify instance is not initialized');
             }
         },
-        reset() {
-            if (tagifyRef.current) {
-                tagifyRef.current.removeAllTags();
-            }
-        },
         onReload: (newValue) => {
             if (!tagifyRef.current) {
                 throw new Error('Tagify instance is not initialized');
@@ -431,12 +425,6 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyRef.current.loadOriginalValues(newContent);
             }
         },
-        onLabelTagRefreshness() {
-            if (!tagifyRef.current) {
-                throw new Error('Tagify instance is not initialized');
-            }
-            setLabelTagRefreshness(prev => prev + 1);
-        },
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -529,7 +517,7 @@ const TagifyInput = forwardRef((props, ref) => {
      * Any map attribute change will sync label of the tags
      */
     const makeValidLabelTags = useCallback((attributes, errorAttributes) => {
-        if (tagifyRef.current && labelTagRefreshness) {
+        if (tagifyRef.current) {
             const tagElements = tagifyRef.current.getTagElms();
             const { pattern, name: cachePatternName, acceptablePattern: acceptableType, } = patternHandlers[PERSONALIZE_PTN];
             tagElements.forEach(tagElement => {
@@ -537,8 +525,6 @@ const TagifyInput = forwardRef((props, ref) => {
                 if (tagData) {
                     const { type, value } = tagData;
                     const isPersonalTag = isPersonalizeTagType(type);
-                    const isShortLinkTag = isShortLinkTagType(type);
-                    /** Case Personalize */
                     if (isPersonalTag && value) {
                         const isAccepted = acceptablePatternChecking(acceptableType, acceptableTagPattern);
                         // No need to continue if pattern is not accepted
@@ -601,50 +587,11 @@ const TagifyInput = forwardRef((props, ref) => {
                             }
                         }
                     }
-                    /** Case Short Link V2 Tag */
-                    if (isShortLinkTag) {
-                        const isAccepted = acceptablePatternChecking(SHORT_LINK_PTN, acceptableTagPattern);
-                        if (!isAccepted)
-                            return;
-                        const { url, shortener, label } = tagData;
-                        const { label: tagLabel, isValid, message, type: tagType, } = getShortLinkTagInfo({
-                            type,
-                            label,
-                            shortener,
-                            url,
-                            mapAttributes: attributes,
-                            mapErrorAttributes: errorAttributes,
-                        });
-                        const tagTextNode = tagifyRef.current?.getTagTextNode(tagElement);
-                        /*
-                         * Just only update to the correct text of the tag
-                         * NOTE: Do not actually affect raw data
-                         */
-                        if (tagTextNode) {
-                            tagTextNode.textContent = tagLabel;
-                            // Clear all previous attributes
-                            tagElement.removeAttribute(REMOVED_TAG);
-                            tagElement.removeAttribute(NO_VIEW_TAG);
-                            tagElement.removeAttribute(INVALID_TAG);
-                            tagElement.removeAttribute(READONLY_TAG);
-                            tagElement.removeAttribute(MESSAGE_TAG);
-                            // In case promotion pool has something wrong
-                            if (!isValid && message) {
-                                tagElement.setAttribute(REMOVED_TAG, 'true');
-                                tagElement.setAttribute(MESSAGE_TAG, message);
-                                tagifyRef.current?.getSetTagData(tagElement, {
-                                    ...tagData,
-                                    status: 'error',
-                                    statusMsg: message,
-                                });
-                            }
-                        }
-                    }
                 }
             });
             setTooltipRefresher(prev => prev + 1);
         }
-    }, [acceptableTagPattern, labelTagRefreshness]);
+    }, [acceptableTagPattern]);
     const initializeTagify = useCallback(() => {
         if (inputRef.current && !tagifyRef.current) {
             tagifyRef.current = new Tagify(inputRef.current, {
@@ -830,7 +777,7 @@ const TagifyInput = forwardRef((props, ref) => {
         detectReplaceURLToTag();
     }, [detectReplaceURLToTag]);
     // CAVEAT: Some case need to "FORCE" sync the original values to Tagify instance
-    useDeepCompareEffect(() => {
+    useEffect(() => {
         if (tagifyRef.current) {
             const { DOM, settings } = tagifyRef.current;
             const { empty } = settings.classNames;