@antscorp/antsomi-ui 1.3.5-beta.880 → 1.3.5-beta.881

package/es/__tests__/fileMock.test.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string;
+export = _exports;

package/es/__tests__/fileMock.test.js

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

package/es/__tests__/styleMock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/__tests__/styleMock.test.js

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

package/es/components/atoms/NotificationStatus/NotificationStatus.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+type TNotification = {
+    title: string;
+    message?: string;
+    type: 'success' | 'error';
+    timeout?: number;
+};
+declare const useNotificationStatus: () => {
+    contextHolder: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    showNotification: ({ title, message, type, timeout, }: TNotification) => void;
+};
+export default useNotificationStatus;

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

@@ -0,0 +1,15 @@
+export declare const MAP_BY_TYPE: {
+    readonly success: {
+        readonly color: "#12B800";
+    };
+    readonly error: {
+        readonly color: "#ef3340";
+    };
+};
+export declare const STYLE_NOTIFICATION: {
+    display: string;
+    alignItems: string;
+    gap: string;
+    padding: string;
+    borderRadius: string;
+};

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

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

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

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

package/es/components/atoms/NotificationStatus/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
+}, any, {}, never>;

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

@@ -46,6 +46,7 @@ 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,3 +46,4 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './NotificationStatus';

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

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

package/es/components/icons/IpRestrictionIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const IpRestrictionIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 30 30", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21.9688 8.98438C21.9688 5.09375 18.875 2 14.9844 2C11.0938 2 8 5.09375 8 8.98438C8 12.9947 12.0754 18.4546 14 20.8095V22.1707C13.1476 22.472 12.472 23.1476 12.1707 24H8C7.44772 24 7 24.4477 7 25C7 25.5523 7.44772 26 8 26H12.1707C12.5825 27.1652 13.6938 28 15 28C16.3062 28 17.4175 27.1652 17.8293 26H22C22.5523 26 23 25.5523 23 25C23 24.4477 22.5523 24 22 24H17.8293C17.528 23.1476 16.8524 22.472 16 22.1707V20.7713C17.9371 18.3959 21.9688 12.9731 21.9688 8.98438ZM14.9844 18.875C12.9219 16.2031 9.96875 11.8438 9.96875 8.98438C9.96875 6.21875 12.2188 3.96875 14.9844 3.96875C17.75 3.96875 20 6.21875 20 8.98438C20 11.8438 17.0938 16.1562 14.9844 18.875ZM14.9844 11.4688C13.625 11.4688 12.5 10.3438 12.5 8.98438C12.5 7.625 13.625 6.5 14.9844 6.5C16.3438 6.5 17.4688 7.625 17.4688 8.98438C17.4688 10.3438 16.3438 11.4688 14.9844 11.4688Z", fill: "currentColor" }) }));
+});

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

@@ -208,6 +208,7 @@ 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>>>;

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

@@ -214,6 +214,7 @@ 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 }))),

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

@@ -206,6 +206,7 @@ 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';

package/es/components/icons/index.js

@@ -206,6 +206,7 @@ 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';

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

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

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

@@ -3,6 +3,7 @@ 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 = {}, } = 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, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -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',
@@ -131,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, { 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] })] }));
+                }, 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] })] }));
 };

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, { 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, { "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 => {
                         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 { 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/MatchAnySelect/MatchesAnySelect.js

@@ -54,7 +54,11 @@ export function MatchesAny(props) {
         threshold: 0,
         initialIsIntersecting: false,
         onChange(isIntersecting) {
-            if (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.
                 onLoadMore();
             }
         },
@@ -379,5 +383,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.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 interface RequestAccessProps {
+    fullscreen?: boolean;
     className?: string;
     placeholder?: string;
     deniedTitle?: string;

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

@@ -1,15 +1,12 @@
 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 { fullscreen, 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);
     const [isLoading, setIsLoading] = useState(false);
     const messageRef = useRef(null);
@@ -19,10 +16,8 @@ export const RequestAccess = props => {
             try {
                 setIsLoading(true);
                 onRequest(message)
-                    .then(data => {
-                    if (data) {
-                        setIsSentRequest(true);
-                    }
+                    .then(() => {
+                    setIsSentRequest(true);
                 })
                     .finally(() => setIsLoading(false));
             }
@@ -36,5 +31,5 @@ export const RequestAccess = props => {
         if (onSwitchAccount)
             onSwitchAccount();
     };
-    return (_jsx(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}`, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Typography.Text, { className: "denied-title", children: isSentRequest ? (sentTitle) : (_jsxs(_Fragment, { children: [deniedTitle, _jsx(BlockIcon, {})] })) }), _jsx(Typography.Text, { className: "denied-sub-title", children: isSentRequest ? sentSubTitle : deniedSubTitle })] }), !isSentRequest ? (_jsx(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null, _jsxs(Flex, { className: "action-buttons", gap: 10, children: [isSentRequest ? null : (_jsx(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading, children: requestText })), _jsx(Button, { onClick: handleSwitchAccount, children: switchAccountText })] })] }) }));
+    return (_jsx(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}`, style: fullscreen ? { inset: 0, height: '100vh' } : {}, children: _jsxs(Flex, { vertical: true, gap: 20, children: [_jsxs(Flex, { vertical: true, gap: 5, children: [_jsx(Typography.Text, { className: "denied-title", children: isSentRequest ? (sentTitle) : (_jsxs(_Fragment, { children: [deniedTitle, _jsx(BlockIcon, {})] })) }), _jsx(Typography.Text, { className: "denied-sub-title", children: isSentRequest ? sentSubTitle : deniedSubTitle })] }), !isSentRequest ? (_jsx(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null, _jsxs(Flex, { className: "action-buttons", gap: 10, children: [isSentRequest ? null : (_jsx(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading, children: requestText })), _jsx(Button, { onClick: handleSwitchAccount, children: switchAccountText })] })] }) }));
 };

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

@@ -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 } from '../../../../atoms';
+import { Button, Checkbox, Typography } from '../../../../atoms';
 import { StyledAction, StyledFooter, StyledListFieldsWrapper } from './styled';
 import { EmptyData } from '../../../EmptyData';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
@@ -103,7 +103,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,

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

@@ -1,20 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import { useContext } from 'react';
+import { useContext, useState } from 'react';
 // Context
 import { SelectAccountContext } from './context';
 // Components
 import { ButtonViewAllStyled, ViewAllWrapper } from './styled';
-import { Popover } from '../../atoms';
+import { Icon, Input, 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 } = state;
+    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 handleRemove = ({ userId, index }) => {
         dispatch({ type: 'REMOVE_USER', payload: { userId, 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 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 group = state.listAccountGroup.find(u => u?.[state?.groupIdKey] === id);
                     if (!group) {
                         const user = users.find(u => u?.[userIdKey] === id);
@@ -24,7 +32,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]));
                 })
-                : usersSelected?.map((id, index) => {
+                : searchedUsers?.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,10 +10,11 @@ import ButtonAdd from './ButtonAdd';
 import ButtonViewAll from './ButtonViewAll';
 export const Content = () => {
     const { state, dispatch } = useContext(SelectAccountContext);
-    const { usersSelected, nameKey, userIdKey, users, disabled, className, styles } = state;
+    const { usersSelected, nameKey, userIdKey, users, disabled, className, styles, hideAddButton } = 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)
@@ -34,5 +35,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, {}), !state?.isViewMode && (!state?.onlyOne || !usersSelected?.length) && _jsx(ButtonAdd, {})] }));
+                }), state?.usersSelected?.length > state?.limitShow && _jsx(ButtonViewAll, {}), isHideAddButton ? null : _jsx(ButtonAdd, {})] }));
 };

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

@@ -136,6 +136,10 @@ 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,6 +31,8 @@ export type SelectAccountProps = {
     disabledAccount?: any[];
     limit?: number;
     limitShow?: number;
+    hideAddButton?: boolean;
+    showSearchViewAll?: boolean;
     className?: string;
     styles?: {
         wrapper?: React.CSSProperties;