@antscorp/antsomi-ui 1.3.5-beta.873 → 1.3.5-beta.874

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/{SummarizeIconIcon.d.ts → IpRestrictionIcon.d.ts}

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IconProps } from './types';
-export declare const SummarizeIconIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+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>>>;
@@ -245,7 +246,6 @@ 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,7 +329,6 @@ 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,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 }))),
@@ -249,7 +250,6 @@ 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,7 +335,6 @@ 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/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';
@@ -241,7 +242,6 @@ 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,7 +325,6 @@ 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,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';
@@ -241,7 +242,6 @@ 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,7 +325,6 @@ 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 ? (_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, ...restProps } = props;
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { children: headerChildren, ...restOfHeaderProps } = headerProps || {};
     const { onClose = () => { } } = props;
@@ -47,29 +47,25 @@ 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, onToggleCollapse]);
+    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
     // 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, onToggleCollapse]);
+    }, [name, toggleCollapseDrawer]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -102,7 +98,6 @@ 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
          */
@@ -120,7 +115,7 @@ export const DrawerDetail = props => {
             motionAppear: false,
             motionEnter: false,
             motionLeave: false,
-        }, classNames: {
+        }, mask: mask, classNames: {
             body: 'drawer-detail-body',
         }, contentWrapperStyle: {
             transition: 'none',
@@ -131,5 +126,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/DrawerDetail/types.d.ts

@@ -11,7 +11,6 @@ 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, { 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',