@antscorp/antsomi-ui 1.3.5-beta.871 → 1.3.5-beta.872

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

@@ -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.d.ts

@@ -46,7 +46,6 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -46,4 +46,3 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
-export * from './NotificationStatus';

package/es/components/icons/LazyIcon/LazyIcon.d.ts

@@ -208,7 +208,6 @@ export declare const LazyIcon: {
     InteractiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     InvisibleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     InvitePeopleIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
-    IpRestrictionIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     IssueBugIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ItemRecommendationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     JourneyTactic30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -246,6 +245,7 @@ export declare const LazyIcon: {
     MoveToIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     MuteIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NodeViewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    NoteNewIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationSettingIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     NotificationsActiveIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -329,6 +329,7 @@ export declare const LazyIcon: {
     StoreIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     StudioTemplates30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SubtractRadiusIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    SummarizeIconIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SupportAssistantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Survey30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     SurveyDirectorProfileIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -214,7 +214,6 @@ export const LazyIcon = {
     InteractiveIcon: lazy(() => import('../InteractiveIcon').then(m => ({ default: m.InteractiveIcon }))),
     InvisibleIcon: lazy(() => import('../InvisibleIcon').then(m => ({ default: m.InvisibleIcon }))),
     InvitePeopleIcon: lazy(() => import('../InvitePeopleIcon').then(m => ({ default: m.InvitePeopleIcon }))),
-    IpRestrictionIcon: lazy(() => import('../IpRestrictionIcon').then(m => ({ default: m.IpRestrictionIcon }))),
     IssueBugIcon: lazy(() => import('../IssueBugIcon').then(m => ({ default: m.IssueBugIcon }))),
     ItemRecommendationIcon: lazy(() => import('../ItemRecommendationIcon').then(m => ({ default: m.ItemRecommendationIcon }))),
     JourneyTactic30Icon: lazy(() => import('../JourneyTactic30Icon').then(m => ({ default: m.JourneyTactic30Icon }))),
@@ -250,6 +249,7 @@ export const LazyIcon = {
     MoveToIcon: lazy(() => import('../MoveToIcon').then(m => ({ default: m.MoveToIcon }))),
     MuteIcon: lazy(() => import('../MuteIcon').then(m => ({ default: m.MuteIcon }))),
     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 }))),
@@ -335,6 +335,7 @@ export const LazyIcon = {
     StoreIcon: lazy(() => import('../StoreIcon').then(m => ({ default: m.StoreIcon }))),
     StudioTemplates30Icon: lazy(() => import('../StudioTemplates30Icon').then(m => ({ default: m.StudioTemplates30Icon }))),
     SubtractRadiusIcon: lazy(() => import('../SubtractRadiusIcon').then(m => ({ default: m.SubtractRadiusIcon }))),
+    SummarizeIconIcon: lazy(() => import('../SummarizeIconIcon').then(m => ({ default: m.SummarizeIconIcon }))),
     SupportAssistantIcon: lazy(() => import('../SupportAssistantIcon').then(m => ({ default: m.SupportAssistantIcon }))),
     Survey30Icon: lazy(() => import('../Survey30Icon').then(m => ({ default: m.Survey30Icon }))),
     SurveyDirectorProfileIcon: lazy(() => import('../SurveyDirectorProfileIcon').then(m => ({ default: m.SurveyDirectorProfileIcon }))),

package/es/components/icons/NoteNewIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const NoteNewIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/NoteNewIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const NoteNewIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.17969 14.0781L16.7188 6.5L17.5 7.28125L9.92188 14.8203H9.17969V14.0781ZM20.3125 1.73438C20.1562 1.57812 19.9219 1.5 19.7266 1.5C19.4922 1.5 19.2969 1.57812 19.1406 1.73438L17.6172 3.25781L20.7422 6.38281L22.2656 4.85938C22.5781 4.54688 22.5781 4 22.2656 3.6875L20.3125 1.73438ZM19.8438 7.28125L16.7188 4.15625L7.5 13.375V16.5H10.625L19.8438 7.28125ZM17.9844 13V19.9844H4.01562V6.01562H11V4H4.01562C2.89062 4 2 4.89062 2 6.01562V19.9844C2 21.1094 2.89062 22 4.01562 22H17.9844C19.1094 22 20 21.1094 20 19.9844V13H17.9844Z", fill: "currentColor" }) }));
+});

package/es/components/icons/{IpRestrictionIcon.d.ts → SummarizeIconIcon.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IconProps } from './types';
-export declare const IpRestrictionIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const SummarizeIconIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/SummarizeIconIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const SummarizeIconIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 25 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7.5 20C6.97005 19.9984 6.46225 19.7872 6.08752 19.4125C5.71279 19.0377 5.50158 18.5299 5.5 18L5.51001 6C5.51 5.4713 5.71934 4.9641 6.09225 4.58931C6.46517 4.21452 6.9713 4.00264 7.5 4H17.5C18.0299 4.00158 18.5377 4.2128 18.9125 4.58753C19.2872 4.96227 19.4984 5.47005 19.5 6V18C19.4984 18.5299 19.2872 19.0377 18.9125 19.4125C18.5377 19.7872 18.0299 19.9984 17.5 20H7.5ZM7.5 18H17.5V6H7.5V18ZM8.5 16V14H10.5V16H8.5ZM11.5 15V14H15.5V15H11.5ZM8.5 13V11H10.5V13H8.5ZM11.5 12V11H15.5V12H11.5ZM8.5 10V8H10.5V10H8.5ZM11.5 9V8H15.5V9H11.5Z", fill: "currentColor" }) }));
+});

package/es/components/icons/index.d.ts

@@ -206,7 +206,6 @@ export { Integration30Icon } from './Integration30Icon';
 export { InteractiveIcon } from './InteractiveIcon';
 export { InvisibleIcon } from './InvisibleIcon';
 export { InvitePeopleIcon } from './InvitePeopleIcon';
-export { IpRestrictionIcon } from './IpRestrictionIcon';
 export { IssueBugIcon } from './IssueBugIcon';
 export { ItemRecommendationIcon } from './ItemRecommendationIcon';
 export { JourneyTactic30Icon } from './JourneyTactic30Icon';
@@ -242,6 +241,7 @@ export { MoreInfoIcon } from './MoreInfoIcon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
+export { NoteNewIcon } from './NoteNewIcon';
 export { NotificationIcon } from './NotificationIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
@@ -325,6 +325,7 @@ export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
 export { StudioTemplates30Icon } from './StudioTemplates30Icon';
 export { SubtractRadiusIcon } from './SubtractRadiusIcon';
+export { SummarizeIconIcon } from './SummarizeIconIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { Survey30Icon } from './Survey30Icon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';

package/es/components/icons/index.js

@@ -206,7 +206,6 @@ export { Integration30Icon } from './Integration30Icon';
 export { InteractiveIcon } from './InteractiveIcon';
 export { InvisibleIcon } from './InvisibleIcon';
 export { InvitePeopleIcon } from './InvitePeopleIcon';
-export { IpRestrictionIcon } from './IpRestrictionIcon';
 export { IssueBugIcon } from './IssueBugIcon';
 export { ItemRecommendationIcon } from './ItemRecommendationIcon';
 export { JourneyTactic30Icon } from './JourneyTactic30Icon';
@@ -242,6 +241,7 @@ export { MoreInfoIcon } from './MoreInfoIcon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
+export { NoteNewIcon } from './NoteNewIcon';
 export { NotificationIcon } from './NotificationIcon';
 export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
@@ -325,6 +325,7 @@ export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
 export { StudioTemplates30Icon } from './StudioTemplates30Icon';
 export { SubtractRadiusIcon } from './SubtractRadiusIcon';
+export { SummarizeIconIcon } from './SummarizeIconIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { Survey30Icon } from './Survey30Icon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';

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/AccountSelection/index.d.ts

@@ -1,3 +1,4 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
-export { AccountListing, type AccountListingHandle } from './AccountListing';
+export { AccountListing } from './AccountListing';
+export type { AccountListingHandle } from './AccountListing';
 export { useAccountSelection } from './hooks';

package/es/components/molecules/AddDynamicContent/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 export type TDisplayFormat = 'number' | 'percentage' | 'currency' | 'datetime';
 type DisplayFormatProps = {

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/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.d.ts

@@ -3,7 +3,6 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
-    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

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, ...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;
@@ -47,25 +47,29 @@ export const DrawerDetail = props => {
     useEffect(() => {
         if (matchesSmallScreen) {
             toggleCollapseDrawer(false);
+            onToggleCollapse?.(false);
         }
         switch (defaultSize) {
             case 'max':
                 toggleCollapseDrawer(false);
+                onToggleCollapse?.(false);
                 break;
             case 'min':
             default:
                 toggleCollapseDrawer(true);
+                onToggleCollapse?.(true);
                 break;
         }
-    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer, onToggleCollapse]);
     // Get cache collapse from local storage
     useEffect(() => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
         const cachedCollapse = localStorageValues[name || ''];
         if (!isNil(cachedCollapse)) {
             toggleCollapseDrawer(cachedCollapse);
+            onToggleCollapse?.(cachedCollapse);
         }
-    }, [name, toggleCollapseDrawer]);
+    }, [name, toggleCollapseDrawer, onToggleCollapse]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -98,6 +102,7 @@ export const DrawerDetail = props => {
     const handleToggleDrawerSize = () => {
         const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
         toggleCollapseDrawer(!collapseDrawer);
+        onToggleCollapse?.(!collapseDrawer);
         /**
          * Set local storage last collapsed
          */
@@ -115,7 +120,7 @@ export const DrawerDetail = props => {
             motionAppear: false,
             motionEnter: false,
             motionLeave: false,
-        }, mask: mask, classNames: {
+        }, classNames: {
             body: 'drawer-detail-body',
         }, contentWrapperStyle: {
             transition: 'none',
@@ -126,5 +131,5 @@ export const DrawerDetail = props => {
                     onClose(e);
                 }, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), showExpandButton && !fullScreen && (_jsx(ToggleDrawerSizeButton, { style: {
                     ...(!showMenu && { background: '#ffffff' }),
-                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { "data-test": "left-menu", className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { "data-test": "close-btn", onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
+                }, onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })), showMenu && (_jsxs(LeftMenu, { className: "animate__animated animate__fadeIn", children: [_jsxs("div", { children: [showClose && (_jsx(CloseBtn, { onClick: onClose, children: _jsx(Icon, { type: "icon-ants-remove-slim", size: 14 }) })), _jsx(Flex, { vertical: true, gap: 10, align: "center", justify: "center", children: items?.map((item) => (_jsx(Tooltip, { title: item?.label, mouseEnterDelay: 0.3, placement: "right", children: _jsx(MenuItem, { className: selectedKeys?.includes(item.key) ? 'active' : '', onClick: () => onClick && onClick(item), children: item.icon }, item?.key) }, item?.key))) })] }), _jsx(MenuFooter, { children: footer })] })), _jsxs(Content, { className: "drawer-detail-content", children: [headerProps?.children && (_jsx(DrawerHeader, { align: "center", ...restOfHeaderProps, children: headerChildren })), children] })] }));
 };

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

@@ -11,6 +11,7 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
     headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
+    onToggleCollapse?: (collapsed: boolean) => void;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;

package/es/components/molecules/EditableName/EditableName.js

@@ -52,7 +52,7 @@ export const EditableName = React.forwardRef((props, ref) => {
             inputRefElement?.input?.removeEventListener('wheel', preventWheel);
         };
     }, []);
-    return (_jsxs(InputWrapperStyled, { "data-test": props['data-test'] || 'editable-name', className: className || '', style: style, ref: componentInViewRef, children: [_jsx(Tooltip, { title: value || internalValue, children: _jsx(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
+    return (_jsxs(InputWrapperStyled, { className: className || '', style: style, ref: componentInViewRef, children: [_jsx(Tooltip, { title: value || internalValue, children: _jsx(Input, { readOnly: readonly, ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue.current, value: value, onChange: event => {
                         const newValue = event.target.value;
                         if (spanRef.current)
                             spanRef.current.innerText = newValue;

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/MatchAnySelect/MatchesAnySelect.js

@@ -54,11 +54,7 @@ export function MatchesAny(props) {
         threshold: 0,
         initialIsIntersecting: false,
         onChange(isIntersecting) {
-            // Only load more items if the search input is empty and not in external search mode.
-            // This prevents loading more items when the user is searching for something specific.
-            const isNoNeedToLoadMore = !!searchValue && !isExternalSearch;
-            if (isIntersecting && !isNoNeedToLoadMore) {
-                // Load more items when the user reaches the end of the list.
+            if (isIntersecting) {
                 onLoadMore();
             }
         },
@@ -383,5 +379,5 @@ export function MatchesAnySelect(props) {
                         ...dropdownStyle,
                         display: 'none',
                         padding: 0,
-                    }, loading: loading, status: props.status || (error ? 'error' : undefined), ...restProps }), !!error && (_jsx(Text, { className: "ant-form-item-explain-error", type: "danger", children: error }))] }) }));
+                    }, loading: loading, status: props.status || (error ? 'error' : undefined), ...restProps }), !!error && _jsx(Text, { className: 'ant-form-item-explain-error', type: 'danger', children: error })] }) }));
 }

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
-import { translate as t, translations } from '@antscorp/antsomi-locales';
 // Styled
 import { RequestAccessStyled } from './styled';
+// Translate
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { BlockIcon } from '../../icons';
+const { t } = i18nInstance;
 export const RequestAccess = props => {
     const { className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
     const [isSentRequest, setIsSentRequest] = useState(false);
@@ -16,8 +19,10 @@ export const RequestAccess = props => {
             try {
                 setIsLoading(true);
                 onRequest(message)
-                    .then(() => {
-                    setIsSentRequest(true);
+                    .then(data => {
+                    if (data) {
+                        setIsSentRequest(true);
+                    }
                 })
                     .finally(() => setIsLoading(false));
             }

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { SearchPopover } from '../../SearchPopover';
 import './styles.scss';
-import { Button, Checkbox, Typography } from '../../../../atoms';
+import { Button, Checkbox } from '../../../../atoms';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -103,9 +103,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/SelectAccount/ButtonViewAll.js

@@ -1,28 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useContext, useState } from 'react';
+import { useContext } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
 import { ButtonViewAllStyled, ViewAllWrapper } from './styled';
-import { Icon, Input, Popover } from '../../atoms';
+import { Popover } from '../../atoms';
 import AccountChip from './AccountChip';
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 const ButtonViewAll = () => {
     const { state, dispatch } = useContext(SelectAccountContext);
-    const { usersSelected, nameKey, userIdKey, users, styles, showSearchViewAll } = state;
-    const [search, setSearch] = useState('');
-    const searchedUsers = showSearchViewAll
-        ? usersSelected.filter(id => {
-            const user = users.find(u => u?.[userIdKey] === id);
-            return searchStringQuery(user?.[nameKey], search);
-        })
-        : usersSelected;
+    const { usersSelected, nameKey, userIdKey, users, styles } = state;
     const handleRemove = ({ userId, index }) => {
         dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
     };
-    const contentViewAll = () => (_jsxs(ViewAllWrapper, { children: [showSearchViewAll && (_jsx(Input, { value: search, placeholder: "Search", suffix: _jsx(Icon, { type: "icon-ants-search-2" }), onAfterChange: value => setSearch(value), debounce: 500 })), state.showOwnerDefault && _jsx(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }), state.type === 'group'
-                ? searchedUsers?.map((id, index) => {
+    const contentViewAll = () => (_jsxs(ViewAllWrapper, { children: [state.showOwnerDefault && _jsx(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }), state.type === 'group'
+                ? usersSelected?.map((id, index) => {
                     const group = state.listAccountGroup.find(u => u?.[state?.groupIdKey] === id);
                     if (!group) {
                         const user = users.find(u => u?.[userIdKey] === id);
@@ -32,7 +24,7 @@ const ButtonViewAll = () => {
                     }
                     return (_jsx(AccountChip, { user: group, value: group?.[state.groupIdKey], label: group?.[state?.groupNameKey], onRemove: () => handleRemove({ userId: group?.[state.groupIdKey], index }) }, group?.[state.groupIdKey]));
                 })
-                : searchedUsers?.map((id, index) => {
+                : usersSelected?.map((id, index) => {
                     const user = users.find(u => u?.[userIdKey] === id);
                     return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
                 })] }));

package/es/components/molecules/SelectAccount/Content.js

@@ -10,11 +10,10 @@ import ButtonAdd from './ButtonAdd';
 import ButtonViewAll from './ButtonViewAll';
 export const Content = () => {
     const { state, dispatch } = useContext(SelectAccountContext);
-    const { usersSelected, nameKey, userIdKey, users, disabled, className, styles, hideAddButton } = state;
+    const { usersSelected, nameKey, userIdKey, users, disabled, className, styles } = state;
     const handleRemove = ({ userId, index }) => {
         dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
     };
-    const isHideAddButton = hideAddButton || state?.isViewMode || (state?.onlyOne && usersSelected?.length);
     return (_jsxs(Wrapper, { className: `select-account ${className}`, style: { ...(styles?.wrapper || {}) }, disabled: !!disabled, children: [state.showOwnerDefault && _jsx(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }), state.type === 'group'
                 ? usersSelected?.map((id, index) => {
                     if (index >= state?.limitShow)
@@ -35,5 +34,5 @@ export const Content = () => {
                     if (!user)
                         return null;
                     return (_jsx(AccountChip, { user: user, value: user?.[userIdKey], label: user?.[nameKey], onRemove: () => handleRemove({ userId: user?.[userIdKey], index }) }, user?.[userIdKey]));
-                }), state?.usersSelected?.length > state?.limitShow && _jsx(ButtonViewAll, {}), isHideAddButton ? null : _jsx(ButtonAdd, {})] }));
+                }), state?.usersSelected?.length > state?.limitShow && _jsx(ButtonViewAll, {}), !state?.isViewMode && (!state?.onlyOne || !usersSelected?.length) && _jsx(ButtonAdd, {})] }));
 };

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

@@ -136,10 +136,6 @@ export const ViewAllWrapper = styled.div `
   flex-wrap: wrap;
   max-width: 300px;
   padding: 15px;
-
-  .input__wrapper {
-    width: 100%;
-  }
 `;
 export const ItemOnlyOne = styled.div `
   padding: 8px 10px;

package/es/components/molecules/SelectAccount/type.d.ts

@@ -31,8 +31,6 @@ export type SelectAccountProps = {
     disabledAccount?: any[];
     limit?: number;
     limitShow?: number;
-    hideAddButton?: boolean;
-    showSearchViewAll?: boolean;
     className?: string;
     styles?: {
         wrapper?: React.CSSProperties;