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

package/es/__tests__/fileMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = 'test-file-stub';

package/es/__tests__/styleMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

package/es/components/atoms/NotificationStatus/NotificationStatus.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { notification } from 'antd';
+import { MAP_BY_TYPE, STYLE_NOTIFICATION } from './constants';
+import { Content, Title } from './styled';
+import { Icon } from '../Icon';
+const useNotificationStatus = () => {
+    const [api, contextHolder] = notification.useNotification();
+    const showNotification = ({ title = '', message = '', type = 'success', timeout = 4, }) => {
+        const info = MAP_BY_TYPE[type];
+        return api[type]({
+            message: _jsx(Title, { color: info.color, children: title }),
+            description: _jsx(Content, { children: message }),
+            duration: timeout,
+            style: {
+                ...STYLE_NOTIFICATION,
+                borderLeft: `4px solid ${info.color}`,
+            },
+            placement: 'bottomLeft',
+            closeIcon: _jsx(Icon, { size: 14, color: "#595959", type: "icon-ants-remove-slim" }),
+        });
+    };
+    return {
+        contextHolder,
+        showNotification,
+    };
+};
+export default useNotificationStatus;

package/es/components/atoms/NotificationStatus/constants/index.js

@@ -0,0 +1,15 @@
+export const MAP_BY_TYPE = {
+    success: {
+        color: '#12B800',
+    },
+    error: {
+        color: '#ef3340',
+    },
+};
+export const STYLE_NOTIFICATION = {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '10px',
+    padding: '15px',
+    borderRadius: '10px',
+};

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

@@ -0,0 +1 @@
+export { default as useNotificationStatus } from './NotificationStatus';

package/es/components/atoms/NotificationStatus/styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+export const Title = styled.div `
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 20px;
+  color: ${props => props.color || '#000'};
+`;
+export const WrapperIcon = styled.div `
+  display: flex;
+  align-items: center;
+`;
+export const Content = styled.div `
+  color: #7f7f7f;
+`;

package/es/components/atoms/Popover/styled.js

@@ -0,0 +1,5 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Popover as AntdPopover } from 'antd';
+export const PopoverWrapper = styled(AntdPopover) ``;

package/es/components/atoms/RateV2/RateV2.js

@@ -29,7 +29,7 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
     // The real current value that will be return to parent component by onChange function
     // currWidth = value * STAR_WIDTH
     const [currWidth, setCurrWidth] = useState(0);
-    const handleMouseMove = e => {
+    const handleMouseMove = (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
         const x = e.clientX - rect.left;
         const hoverWidth = Math.round(x);
@@ -48,7 +48,7 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
             setCurrWidth(width);
             setFillWidth(width);
         }
-    }, [value]);
+    }, [value, type]);
     return (_jsxs("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
             position: 'relative',
             width: `${fullWidth}px`,

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

@@ -270,9 +270,7 @@ export const SlideBar = props => {
                     fontSize: `${BTN_ADD_SIZE}px`,
                     cursor: disabledAdd ? 'not-allowed' : 'pointer',
                     color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
-                }, 
-                // disabled={disabledAdd}
-                onClick: (e) => {
+                }, onClick: (e) => {
                     e.stopPropagation();
                     if (!disabledAdd) {
                         handleAddSlide();

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

@@ -10,11 +10,16 @@ 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 = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    const restProps = omit(props, ['tooltipVisible']);
     if (isNegative) {
-        return (_jsx(SliderWrapper, { isNegative: true, width: calculateWidth, className: className, children: _jsx(AntdSlider, { ...omit(restProps, ['marks', 'className']), marks: {
+        return (_jsx(SliderWrapper, { isNegative: true, width: calculateWidth, className: className, children: _jsx(AntdSlider, { ...omit(restProps, ['marks', 'className']), tooltip: tooltipVisible !== 'default' && {
+                    open: tooltipVisible,
+                }, marks: {
                     0: ' ',
                 } }) }));
     }
-    return (_jsx(SliderWrapper, { className: className, children: _jsx(AntdSlider, { ...restProps }) }));
+    return (_jsx(SliderWrapper, { className: className, children: _jsx(AntdSlider, { ...restProps, tooltip: tooltipVisible !== 'default' && {
+                open: tooltipVisible,
+            } }) }));
 });

package/es/components/atoms/index.js

@@ -47,4 +47,5 @@ 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,6 +56,7 @@ 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 => ({
@@ -67,7 +68,6 @@ 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 }))),
-    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 }))),
+    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 }))),
     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 }))),
-    NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
     NotificationSettingIcon: lazy(() => import('../NotificationSettingIcon').then(m => ({ default: m.NotificationSettingIcon }))),
+    NotificationsActiveIcon: lazy(() => import('../NotificationsActiveIcon').then(m => ({ default: m.NotificationsActiveIcon }))),
     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,6 +309,7 @@ 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 }))),
@@ -332,7 +333,6 @@ 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,6 +52,7 @@ 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';
@@ -59,7 +60,6 @@ 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 { DatasourceIcon } from './DatasourceIcon';
-export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 export { DataView30Icon } from './DataView30Icon';
 export { DataViewIcon } from './DataViewIcon';
+export { Dataflows30Icon } from './Dataflows30Icon';
+export { DatasourceIcon } from './DatasourceIcon';
+export { DatasourceSegment30Icon } from './DatasourceSegment30Icon';
 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 { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
+export { NotificationsActiveIcon } from './NotificationsActiveIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { OrchestrationIcon } from './OrchestrationIcon';
@@ -299,6 +299,7 @@ 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';
@@ -322,7 +323,6 @@ 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 ? (_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 && recentData?.value?.length > 0 ? (_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,16 +10,15 @@ import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
 import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
-    const initialed = useRef(false);
+    const initialized = 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)
+        if (!value || initialized.current)
             return;
-        const needTriggerOut = !initialed.current;
-        // console.log({ needTriggerOut });
+        const needTriggerOut = !initialized.current;
         dispatch(initState(value, needTriggerOut));
-        initialed.current = true;
+        initialized.current = true;
     }, [value]);
     useLayoutEffect(() => {
         if (!state.open) {

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

@@ -42,7 +42,7 @@ const styleContainAlpha = {
 };
 const CustomPicker = props => {
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors, ...restOf } = props;
+    const { className, style, children, isHideAlpha, 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" })] }), _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" })] }), !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: () => {
                             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 = {}, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = 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, 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, 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: {
                             backgroundColor: color,
                             display: 'block',
                             width: 20,
@@ -83,6 +83,7 @@ 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, onToggleCollapse, ...restProps } = 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 { 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: false, width: drawerWidth, motion: {
+    return (_jsxs(StyledDrawer, { push: false, closable: closable, width: drawerWidth, motion: {
             visible: false,
             motionAppear: false,
             motionEnter: false,
@@ -120,7 +120,7 @@ export const DrawerDetail = props => {
             motionAppear: false,
             motionEnter: false,
             motionLeave: false,
-        }, classNames: {
+        }, mask: mask, 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 { useMemo } from 'react';
+import React, { 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 => settingMap[keySetting]);
+            return Object.keys(settingMap).map(keySetting => (_jsx(React.Fragment, { children: settingMap[keySetting] }, keySetting)));
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

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

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

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

@@ -4,6 +4,7 @@ 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';
@@ -104,7 +105,9 @@ export const PopoverSelect = (props) => {
         if (typeof option.label === 'function') {
             return option.label({ selected: selectedKeys.has(option.key) });
         }
-        return option.label;
+        return (_jsx(Typography.Text, { ellipsis: {
+                tooltip: option.label,
+            }, style: { maxWidth: 310 }, children: option.label }));
     };
     const items = filteredOptions.map(opt => ({
         key: opt.key,