@antscorp/antsomi-ui 2.0.57 → 2.0.59

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

@@ -343,6 +343,7 @@ export declare const LazyIcon: {
     TabGroupIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TableVer2Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    TaskAltIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     TextIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV130Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     ThirdPartyPluginV230Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
@@ -357,6 +358,8 @@ export declare const LazyIcon: {
     UnblockIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UndoIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     Unknown30Icon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    UnsubscribersIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    UnsubscribeIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UploadMenuIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     UserActivityIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;

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

@@ -349,6 +349,7 @@ export const LazyIcon = {
     TabGroupIcon: lazy(() => import('../TabGroupIcon').then(m => ({ default: m.TabGroupIcon }))),
     TableIcon: lazy(() => import('../TableIcon').then(m => ({ default: m.TableIcon }))),
     TableVer2Icon: lazy(() => import('../TableVer2Icon').then(m => ({ default: m.TableVer2Icon }))),
+    TaskAltIcon: lazy(() => import('../TaskAltIcon').then(m => ({ default: m.TaskAltIcon }))),
     TextIcon: lazy(() => import('../TextIcon').then(m => ({ default: m.TextIcon }))),
     ThirdPartyPluginV130Icon: lazy(() => import('../ThirdPartyPluginV130Icon').then(m => ({ default: m.ThirdPartyPluginV130Icon }))),
     ThirdPartyPluginV230Icon: lazy(() => import('../ThirdPartyPluginV230Icon').then(m => ({ default: m.ThirdPartyPluginV230Icon }))),
@@ -363,6 +364,8 @@ export const LazyIcon = {
     UnblockIcon: lazy(() => import('../UnblockIcon').then(m => ({ default: m.UnblockIcon }))),
     UndoIcon: lazy(() => import('../UndoIcon').then(m => ({ default: m.UndoIcon }))),
     Unknown30Icon: lazy(() => import('../Unknown30Icon').then(m => ({ default: m.Unknown30Icon }))),
+    UnsubscribersIcon: lazy(() => import('../UnsubscribersIcon').then(m => ({ default: m.UnsubscribersIcon }))),
+    UnsubscribeIcon: lazy(() => import('../UnsubscribeIcon').then(m => ({ default: m.UnsubscribeIcon }))),
     UploadIcon: lazy(() => import('../UploadIcon').then(m => ({ default: m.UploadIcon }))),
     UploadMenuIcon: lazy(() => import('../UploadMenuIcon').then(m => ({ default: m.UploadMenuIcon }))),
     UserActivityIcon: lazy(() => import('../UserActivityIcon').then(m => ({ default: m.UserActivityIcon }))),

package/es/components/icons/TaskAltIcon.js

@@ -3,5 +3,5 @@ import { forwardRef } from 'react';
 import { useIcon } from './hooks/useIcon';
 export const TaskAltIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "#fff", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q65 0 123 19t107 53l-58 59q-38-24-81-37.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35l65-65q11 32 17 66t6 70q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-56-216L254-466l56-56 114 114 400-401 56 56-456 457Z" }) }));
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q65 0 123 19t107 53l-58 59q-38-24-81-37.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35l65-65q11 32 17 66t6 70q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-56-216L254-466l56-56 114 114 400-401 56 56-456 457Z" }) }));
 });

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

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

package/es/components/icons/UnsubscribeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const UnsubscribeIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 -960 960 960", fill: "currentColor", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M480-440 160-640v400h320q0 21 3 40.5t9 39.5H160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v228q-18-9-38.5-15t-41.5-9v-124L480-440Zm0-80 320-200H160l320 200ZM760-40q-83 0-141.5-58.5T560-240q0-83 58.5-141.5T760-440q83 0 141.5 58.5T960-240q0 83-58.5 141.5T760-40ZM640-220h240v-40H640v40Zm-480-20v-480 480Z" }) }));
+});

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

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

package/es/components/icons/UnsubscribersIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const UnsubscribersIcon = 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: "M16.2695 20.3125C16.2695 21.3145 16.4839 22.2665 16.8693 23.125H2.5V21.8945L5.01953 19.375V13.1641C5.01953 11.2109 5.50781 9.51172 6.48438 8.06641C7.5 6.62109 8.88672 5.68359 10.6445 5.25391V4.375C10.6445 3.86719 10.8203 3.4375 11.1719 3.08594C11.5234 2.69531 11.9727 2.5 12.5195 2.5C13.0664 2.5 13.5156 2.69531 13.8672 3.08594C14.2188 3.4375 14.3945 3.86719 14.3945 4.375V5.25391C16.1523 5.68359 17.5195 6.62109 18.4961 8.06641C19.5117 9.51172 20.0195 11.2109 20.0195 13.1641V14.1871C17.7935 15.3251 16.2695 17.6408 16.2695 20.3125ZM12.5195 26.875C11.8164 26.875 11.2109 26.6406 10.7031 26.1719C10.2344 25.7031 10 25.1172 10 24.4141H15.0391C15.0391 25.0781 14.7852 25.6641 14.2773 26.1719C13.7695 26.6406 13.1836 26.875 12.5195 26.875ZM28.7695 20.3125C28.7695 23.4191 26.2511 25.9375 23.1445 25.9375C20.0379 25.9375 17.5195 23.4191 17.5195 20.3125C17.5195 17.2059 20.0379 14.6875 23.1445 14.6875C26.2511 14.6875 28.7695 17.2059 28.7695 20.3125ZM26.2695 19.6875V20.9375H20.0195V19.6875H26.2695Z", fill: "currentColor" }) }));
+});

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

@@ -339,6 +339,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -353,6 +354,8 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribersIcon } from './UnsubscribersIcon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

package/es/components/icons/index.js

@@ -339,6 +339,7 @@ export { SystemRunningIcon } from './SystemRunningIcon';
 export { TabGroupIcon } from './TabGroupIcon';
 export { TableIcon } from './TableIcon';
 export { TableVer2Icon } from './TableVer2Icon';
+export { TaskAltIcon } from './TaskAltIcon';
 export { TextIcon } from './TextIcon';
 export { ThirdPartyPluginV130Icon } from './ThirdPartyPluginV130Icon';
 export { ThirdPartyPluginV230Icon } from './ThirdPartyPluginV230Icon';
@@ -353,6 +354,8 @@ export { TipsIdeaLight30Icon } from './TipsIdeaLight30Icon';
 export { UnblockIcon } from './UnblockIcon';
 export { UndoIcon } from './UndoIcon';
 export { Unknown30Icon } from './Unknown30Icon';
+export { UnsubscribersIcon } from './UnsubscribersIcon';
+export { UnsubscribeIcon } from './UnsubscribeIcon';
 export { UploadIcon } from './UploadIcon';
 export { UploadMenuIcon } from './UploadMenuIcon';
 export { UserActivityIcon } from './UserActivityIcon';

package/es/components/molecules/EditingListV2/EditingList.d.ts

@@ -0,0 +1,2 @@
+import { EditingListProps } from './types';
+export declare const EditingListV2: (props: EditingListProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/EditingListV2/EditingList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useMemo } from 'react';
+// Components
+import { Suspense } from '../../atoms';
+import { ListItem, LazyComponent } from './components';
+const { Popover } = LazyComponent;
+export const EditingListV2 = (props) => {
+    const { isLoading = false, addButtonLabel = 'Add', options = [], selected = [], removable = true, popupPlacement = 'leftBottom', className, onChange, } = props;
+    const popoverOptions = useMemo(() => options.filter(opt => !opt.errorMessage), [options]);
+    const selectedOptions = useMemo(() => options.filter(opt => selected.includes(opt.key)), [selected, options]);
+    // const isSelectAll = selectedOptions.length === options.length;
+    const handleRemove = (removedKey) => {
+        const selectedKeys = selectedOptions.filter(opt => opt.key !== removedKey).map(opt => opt.key);
+        onChange?.(selectedKeys);
+    };
+    return (_jsxs("div", { className: className, children: [_jsx(ListItem, { isLoading: isLoading, selectOptions: selectedOptions, removable: removable, onClickRemove: handleRemove }), !isLoading && (_jsx(Suspense, { children: _jsx(Popover, { placement: popupPlacement, options: popoverOptions, selected: selected, addButtonLabel: addButtonLabel, onChange: onChange }) }))] }));
+};

package/es/components/molecules/EditingListV2/components/List/List.d.ts

@@ -0,0 +1,9 @@
+import { Option } from '../../types';
+type ListProps = {
+    isLoading: boolean;
+    selectOptions: Option[];
+    removable?: boolean;
+    onClickRemove?: (key: string) => void;
+};
+export declare const ListItem: (props: ListProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/es/components/molecules/EditingListV2/components/List/List.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useState } from 'react';
+import { isEmpty } from 'lodash';
+// Components
+import { Spin, Typography, Tooltip } from '../../../../atoms';
+import { List } from 'antd';
+import { CloseIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Utils
+import { CLS } from '../../utils';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const ListItem = (props) => {
+    const { isLoading, selectOptions, onClickRemove, removable } = props;
+    const [hover, setHover] = useState('');
+    const renderLabel = (label) => {
+        if (typeof label === 'string') {
+            return _jsx(Typography.Text, { ellipsis: { tooltip: true }, children: label });
+        }
+        return label;
+    };
+    const items = selectOptions.map(opt => ({
+        className: CLS.ListItem.default,
+        key: opt.key,
+        errorMessage: opt.errorMessage,
+        label: renderLabel(opt.label),
+    }));
+    if (isLoading) {
+        return _jsx(Spin, { indicatorSize: 24 });
+    }
+    if (isEmpty(selectOptions)) {
+        return;
+    }
+    return (_jsx(List, { dataSource: items, renderItem: item => (_jsxs(List.Item, { style: {
+                display: 'flex',
+                alignItems: 'center',
+                border: `1px solid ${item.errorMessage ? '#EF3340' : '#B8CFE6'}`,
+                borderRadius: '4px',
+                padding: '10px',
+                marginBottom: '10px',
+                minHeight: '40px',
+            }, onMouseEnter: () => setHover(item.key), onMouseLeave: () => setHover(''), children: [item.label, _jsxs("div", { style: {
+                        flexShrink: 0,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '5px',
+                    }, children: [item.errorMessage && (_jsx(Tooltip, { title: item.errorMessage, children: _jsx(WarningIcon, { size: 18 }) })), hover === item.key && removable && (_jsx(CloseIcon, { size: 18, color: globalToken?.bw8, style: { cursor: 'pointer' }, onClick: onClickRemove ? () => onClickRemove(item.key) : undefined }))] })] })) }));
+};

package/es/components/molecules/EditingListV2/components/List/index.d.ts

@@ -0,0 +1 @@
+export { ListItem } from './List';

package/es/components/molecules/EditingListV2/components/List/index.js

@@ -0,0 +1 @@
+export { ListItem } from './List';

package/es/components/molecules/EditingListV2/components/Loadable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const Popover: import("react").LazyExoticComponent<(props: {
+    placement?: "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | "left" | "right" | "bottom" | "top" | "bottomLeft" | "bottomRight" | "topLeft" | "topRight" | undefined;
+    options: import("../types").Option[];
+    selected: string[];
+    addButtonLabel: import("react").ReactNode;
+    onChange?: ((selected: string[]) => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element>;

package/es/components/molecules/EditingListV2/components/Loadable.js

@@ -0,0 +1,2 @@
+import { lazy } from 'react';
+export const Popover = lazy(() => import('./Popover').then(module => ({ default: module.Popover })));

package/es/components/molecules/EditingListV2/components/Popover/Popover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Option } from '../../types';
+type PopoverProps = {
+    placement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    options: Option[];
+    selected: string[];
+    addButtonLabel: React.ReactNode;
+    onChange?: (selected: string[]) => void;
+};
+export declare const Popover: (props: PopoverProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/molecules/EditingListV2/components/Popover/Popover.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/jsx-boolean-value */
+// Components
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
+import { PopoverAddField } from '../../../SearchPopover';
+// Icons
+import { AddIcon } from '../../../../icons';
+export const Popover = (props) => {
+    const { options, selected, addButtonLabel, onChange, placement } = props;
+    return (_jsx(PopoverAddField, { style: { margin: 0, position: 'absolute', width: '300px' }, fields: options, placement: placement, selected: selected, onApply: onChange, isAllowEmpty: true, children: _jsxs(Button, { type: "text", style: { gap: 2 }, children: [_jsx(AddIcon, { size: 14 }), addButtonLabel] }) }));
+};

package/es/components/molecules/EditingListV2/components/Popover/index.d.ts

@@ -0,0 +1 @@
+export { Popover } from './Popover';

package/es/components/molecules/EditingListV2/components/Popover/index.js

@@ -0,0 +1 @@
+export { Popover } from './Popover';

package/es/components/molecules/EditingListV2/components/index.d.ts

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+export * as LazyComponent from './Loadable';

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

@@ -0,0 +1,3 @@
+export { ListItem } from './List';
+export { Popover } from './Popover';
+export * as LazyComponent from './Loadable';

package/es/components/molecules/EditingListV2/index.d.ts

@@ -0,0 +1,2 @@
+export { EditingListV2 } from './EditingList';
+export type { EditingListProps } from './types';

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

@@ -0,0 +1 @@
+export { EditingListV2 } from './EditingList';

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export type Option = {
+    key: string;
+    label: React.ReactNode;
+    errorMessage?: string;
+    search?: string;
+};
+export type EditingListProps = {
+    popupPlacement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    addButtonLabel?: string;
+    options?: Option[];
+    selected?: string[];
+    showNum?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    emptyDescription?: string;
+    removable?: boolean;
+    isAllowEmpty?: boolean;
+    onChange?: (selected: string[]) => void;
+};

package/es/components/molecules/EditingListV2/types.js

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

package/es/components/molecules/EditingListV2/utils.d.ts

@@ -0,0 +1,27 @@
+export declare const componentCls: (className: string) => string;
+export declare const CLS: {
+    readonly Root: {
+        readonly default: string;
+    };
+    readonly Title: {
+        readonly default: string;
+    };
+    readonly Search: {
+        readonly default: string;
+    };
+    readonly RemoveButton: {
+        readonly default: string;
+    };
+    readonly AddButton: {
+        readonly default: string;
+    };
+    readonly ListWapper: {
+        readonly default: string;
+    };
+    readonly List: {
+        readonly default: string;
+    };
+    readonly ListItem: {
+        readonly default: string;
+    };
+};

package/es/components/molecules/EditingListV2/utils.js

@@ -0,0 +1,28 @@
+import { antsomiClsx } from '@antscorp/antsomi-ui/es/utils';
+export const componentCls = antsomiClsx('editing-list');
+export const CLS = {
+    Root: {
+        default: componentCls('root'),
+    },
+    Title: {
+        default: componentCls('title'),
+    },
+    Search: {
+        default: componentCls('search'),
+    },
+    RemoveButton: {
+        default: componentCls('remove-btn'),
+    },
+    AddButton: {
+        default: componentCls('add-btn'),
+    },
+    ListWapper: {
+        default: componentCls('selected-list-wrapper'),
+    },
+    List: {
+        default: componentCls('selected-list'),
+    },
+    ListItem: {
+        default: componentCls('selected-list-item'),
+    },
+};

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

@@ -6,7 +6,7 @@ import { PopoverSelect } from '../PopoverSelect';
 import { Flex, Typography } from 'antd';
 import { IconField } from '@antscorp/antsomi-ui/es/components/atoms/IconField';
 export const PopoverAddField = (props) => {
-    const { fields, onSearchPredicate, className, children, ...rest } = props;
+    const { fields, onSearchPredicate, className, children, isAllowEmpty, ...rest } = props;
     const originalFieldByKey = useMemo(() => new Map(fields.map(field => [field.key, field])), [fields]);
     const handleOnSearchPredicate = useCallback((option) => {
         const originalField = originalFieldByKey.get(option.key);
@@ -26,5 +26,5 @@ export const PopoverAddField = (props) => {
                         selected: params.selected.includes(field.key),
                     })] })),
     })), [fields]);
-    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
+    return (_jsx(PopoverSelect, { ...rest, options: options, onSearchPredicate: handleOnSearchPredicate, className: clsx(className, 'ants-popover-add-fields'), isAllowEmpty: isAllowEmpty || false, children: children || (_jsxs(Button, { type: "text", children: [_jsx(Icon, { type: "icon-ants-plus-slim", size: 14 }), "Add fields"] })) }));
 };

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

@@ -12,7 +12,7 @@ import { VirtualizedMenu } from '../../../VirtualizedMenu';
 import { ITEM_SIZE, ITEM_SPACING } from '../../../VirtualizedMenu/config';
 const { t } = i18nInstance;
 export const PopoverSelect = (props) => {
-    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, onCancel, onApply, onSearchPredicate, ...rest } = props;
+    const { open: openProp, selected, options: optionsProp = [], inputSearchProps = {}, children, showAllLabel = 'Show all', showSelectedLabel = 'Show selected', selectAllLabel = 'Select all', deselectAllLabel = 'Unselect all', menuProps = {}, isAllowEmpty = false, onCancel, onApply, onSearchPredicate, ...rest } = props;
     const itemSize = menuProps.itemSize || ITEM_SIZE;
     const itemSpacing = menuProps.itemSpacing || ITEM_SPACING;
     const { value: searchValue, ...restInputSearchProps } = inputSearchProps;
@@ -24,7 +24,7 @@ export const PopoverSelect = (props) => {
     const [selectedKeys, setSelectedKeys] = useState(new Set());
     const [search, setSearch] = useState('');
     const [showSelected, setShowSelected] = useState(false);
-    const applyDisabled = selectedKeys.size === 0;
+    const applyDisabled = selectedKeys.size === 0 && !isAllowEmpty;
     const options = useMemo(() => typeof optionsProp === 'function'
         ? optionsProp({ selected: [...selectedKeys] })
         : optionsProp, [optionsProp, selectedKeys]);
@@ -109,11 +109,11 @@ export const PopoverSelect = (props) => {
         key: opt.key,
         label: (_jsx(Checkbox, { onChange: e => handleToggleField(opt, e.target.checked), checked: selectedKeys.has(opt.key), children: renderCheckBoxLabel(opt) })),
     }));
-    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
+    return (_jsx(SearchPopover, { destroyTooltipOnHide: true, placement: "bottomLeft", ...rest, content: _jsxs(_Fragment, { children: [optionsProp.length > 0 && (_jsxs(StyledAction, { children: [_jsx(Button, { type: "link", size: "small", onClick: () => setShowSelected(current => !current), children: showSelected ? showAllLabel : showSelectedLabel }), selectedKeys.size === options.length ? (_jsx(Button, { type: "link", onClick: handleDeselectAll, children: deselectAllLabel })) : (_jsx(Button, { type: "link", onClick: handleSelectAll, children: selectAllLabel }))] })), filteredOptions.length ? (_jsx(StyledListFieldsWrapper, { "$minHeight": calDefaultListHeightInPopover({
                         listLength: filteredOptions.length,
                         itemSize,
                         itemSpacing,
-                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], placement: "bottomLeft", open: open, inputSearchProps: {
+                    }), children: _jsx(VirtualizedMenu, { ...menuProps, itemSize: itemSize, items: items }) })) : (_jsx(EmptyData, { showIcon: false, description: t(translations.noData).toString() })), _jsxs(StyledFooter, { children: [_jsx(Button, { onClick: handleCancel, children: "Cancel" }), _jsx(Button, { onClick: handleApply, disabled: applyDisabled, type: "primary", children: "Apply" })] })] }), trigger: ['click'], open: open, inputSearchProps: {
             ...restInputSearchProps,
             value: search,
             onAfterChange: handleOnSearch,

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

@@ -21,5 +21,6 @@ export const StyledAction = styled.div `
 `;
 export const StyledListFieldsWrapper = styled.div `
   min-height: ${props => props.$minHeight}px;
+  min-width: 300px;
   flex: 1;
 `;

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

@@ -4,6 +4,7 @@ import React, { PropsWithChildren } from 'react';
 import { MenuInlineProps } from '../VirtualizedMenu/types';
 export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps;
+    isAllowEmpty?: boolean;
 } & PopoverProps>;
 export type Option = {
     key: string;

package/es/components/molecules/UploadImage/index.d.ts

@@ -1,33 +1,133 @@
 import React from 'react';
 import { UploadProps as AntdUploadProps } from 'antd/lib/upload';
 export type MediaMode = 'image' | 'video';
-interface UploadImageProps extends AntdUploadProps {
+/**
+ * Props for the UploadImage component.
+ */
+export interface UploadImageProps extends AntdUploadProps {
+    /**
+     * Heading text for the image upload modal.
+     * @default "Image Selection"
+     */
     labelHeadingModal?: string;
+    /**
+     * Label for the button used to select an image.
+     * @default "Select Image from computer"
+     */
     labelButtonSelect?: string;
+    /**
+     * Label for the modal confirming image deletion.
+     * @default "Delete Image"
+     */
     labelModalDelete?: string;
+    /**
+     * Placeholder text for the search input inside the modal.
+     * @default "Search image..."
+     */
     searchPlaceholder?: string;
+    /**
+     * Callback triggered when an image is removed.
+     */
     onRemoveImage?: Function;
+    /**
+     * Callback triggered when an image is selected or changed.
+     */
     onChangeImage?: Function;
+    /**
+     * The currently selected image object.
+     */
     selectedImage?: UploadMediaObject;
+    /**
+     * Controls the visibility of the image upload modal.
+     * @default false
+     */
     isOpen?: boolean;
+    /**
+     * Determines if the component should operate in input mode.
+     * @default true
+     */
     isInputMode?: boolean;
+    /**
+     * Name of the icon to be displayed.
+     * @default "image-3"
+     */
     iconName?: string;
+    /**
+     * Mode in which the media should be handled.
+     * @default "image"
+     */
     mode?: MediaMode;
-    width?: any;
+    /**
+     * Width of the upload component.
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * List of validation errors related to the upload.
+     * @default []
+     */
     errors?: Array<any>;
+    /**
+     * Allowed file extensions for the upload.
+     * @default [".jpg", ".png", ".jfif", ".jpeg", ".gif", ".webp"]
+     */
     extensions?: string[];
+    /**
+     * Maximum file size allowed for upload (in MB).
+     * @default 10
+     */
     maxSize?: number;
+    /**
+     * Title text for the upload section.
+     */
     title?: string;
+    /**
+     * Whether to display the image URL after upload.
+     * @default true
+     */
     showImageURL?: boolean;
+    /**
+     * Placeholder text for the upload input field.
+     * @default "Enter image URL"
+     */
     placeholder?: string;
+    /**
+     * Domain-specific media folder or endpoint.
+     * @default "https://sandbox-media-template.antsomi.com/cdp"
+     */
     domainMedia: string;
+    /**
+     * Unique slug identifier for media categorization.
+     * @default "api/v1"
+     */
     slug: string;
+    /**
+     * Configuration parameters for API requests.
+     */
     paramConfigs?: {
+        /**
+         * Authentication token for media uploads.
+         * @default ""
+         */
         token?: string;
+        /**
+         * User identifier for media ownership.
+         * @default ""
+         */
         userId?: string;
+        /**
+         * Account identifier for media association.
+         * @default ""
+         */
         accountId: string;
     };
+    /**
+     * Whether the image upload is required.
+     */
     required?: boolean;
+    /**
+     * Indicates if the input is currently focused.
+     */
     focused?: boolean;
 }
 interface UploadMediaObject {

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

@@ -3,15 +3,19 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /* eslint-disable @typescript-eslint/no-use-before-define */
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useRef, useMemo } from 'react';
 import Upload from 'antd/lib/upload';
+import { useQueryClient } from '@tanstack/react-query';
+import { cloneDeep, flattenDeep } from 'lodash';
+import { useInView } from 'react-intersection-observer';
 // Hooks
-import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounce';
+import { useStoreSavedMedia } from '@antscorp/antsomi-ui/es/queries';
 // Assets
 import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
 import MediaIcon from './MediaIcon';
 // Service
-import { uploadFile, createSavedMedia, deleteSavedMedia, getListingSavedMedia, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
+import { uploadFile, createSavedMedia, deleteSavedMedia, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/UploadFile';
 // Atoms
 import { Button, Icon, Text, message, Spin, Input, Space, } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
@@ -19,10 +23,10 @@ import { Modal, InputSearch, Select } from '@antscorp/antsomi-ui/es/components/m
 // Styled
 import { Boxed, ErrorMessage, Image, Overlay, Paragraph, TextStyled, UploadImageWrapper, WrapperBtn, WrapperIcon, WrapperInputMode, WrapperListImages, } from './styled';
 // Utils
-import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
+import { safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { getMediaTypeByMode, getReplacementExtension } from './utils';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { QUERY_KEYS, THEME } from '@antscorp/antsomi-ui/es/constants';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -39,75 +43,45 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
-const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
     const { labelHeadingModal, labelButtonSelect, labelModalDelete, searchPlaceholder, onRemoveImage, onChangeImage: onChangeMedia, isOpen, isInputMode, width, placeholder, extensions, maxSize, title, showImageURL: showMediaURL, selectedImage: selectedMediaProp, required, focused, domainMedia, slug, paramConfigs, errors, iconName, mode, } = props;
     const { Dragger } = Upload;
-    const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
     const [isModalOpen, setIsModalOpen] = useState(isOpen);
-    const [listMedia, setListMedia] = useState(storeSavedMedia || []);
+    const [textSearchDebounce, textSearch, setTextSearch] = useDebounce('', 350);
     const [sortOption, setSortOption] = useState(SORT_OPTIONS.BY_UPLOAD_DATE.value);
     const [loading, setLoading] = useState(false);
     const [isOpenConfirmDelete, setOpenConfirmDelete] = useState(false);
-    const [triggerRefresh, setTriggerRefresh] = useState(1);
     const uploadFilesRef = useRef([]);
     const uploadFilesTimeoutRef = useRef();
     const deleteMediaRef = useRef();
     const isError = safeParse(errors, []).length > 0;
-    useDeepCompareEffect(() => {
-        setListMedia(storeSavedMedia || []);
-        setLoading(false);
-    }, [storeSavedMedia]);
+    const queryClient = useQueryClient();
+    const paramsMemo = useMemo(() => ({
+        ...paramConfigs,
+        type: getMediaTypeByMode(mode),
+    }), [paramConfigs, mode]);
+    const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading: isLoadingStore, refetch, } = useStoreSavedMedia(domainMedia, slug, paramsMemo);
+    const flattenedMedia = useMemo(() => {
+        const flattened = cloneDeep(flattenDeep(data?.pages));
+        // Filter media based on search text
+        const filteredMedia = textSearchDebounce
+            ? flattened.filter(media => media.name?.toLowerCase().includes(textSearchDebounce.toLowerCase()))
+            : flattened;
+        // Sort media based on the selected sort option
+        if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
+            return filteredMedia.sort((media1, media2) => media1.size - media2.size);
+        }
+        return filteredMedia.sort((media1, media2) => media1.createdAt && media2.createdAt
+            ? media1.createdAt.isAfter(media2.createdAt)
+                ? -1
+                : 1
+            : 0);
+    }, [data?.pages, sortOption, textSearchDebounce]);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
     }, [selectedMediaProp]);
-    useEffect(() => {
-        if (sortOption === SORT_OPTIONS.BY_SIZE.value) {
-            setListMedia(listMedia ? [...listMedia].sort((media1, media2) => media1.size - media2.size) : []);
-        }
-        else {
-            setListMedia(listMedia
-                ? [...listMedia].sort((media1, media2) => media1.createdAt && media2.createdAt
-                    ? media1.createdAt.isAfter(media2.createdAt)
-                        ? -1
-                        : 1
-                    : 0)
-                : []);
-        }
-    }, [sortOption]);
-    const handleGetStoreSavedMedia = async (domain, slug, paramConfigs) => {
-        try {
-            setLoading(true);
-            const type = getMediaTypeByMode(mode);
-            const params = {
-                ...paramConfigs,
-                type,
-            };
-            const result = await getListingSavedMedia(domain, slug, params);
-            if (result) {
-                setStoreSavedMedia(result || []);
-            }
-        }
-        catch (error) {
-            handleError(error, {
-                path: PATH,
-                name: 'handleGetStoreSavedMedia',
-                args: {
-                    error,
-                },
-            });
-            // eslint-disable-next-line no-console
-            console.log('error :>', error);
-        }
-        finally {
-            setLoading(false);
-        }
-    };
-    useEffect(() => {
-        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
-    }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
         setIsModalOpen(true);
@@ -125,6 +99,14 @@ export const UploadImage = props => {
     const onChangeSort = (option) => {
         setSortOption(option);
     };
+    const { ref } = useInView({
+        triggerOnce: false,
+        onChange: inView => {
+            if (inView && hasNextPage && !isFetchingNextPage) {
+                fetchNextPage();
+            }
+        },
+    });
     const renderListMedia = (listMediaRender) => listMediaRender.map((media, idx) => (_jsxs(WrapperListImages, { className: "ants-group", children: [_jsxs(Boxed, { children: [_jsx(Image, { src: mode === 'video' ? media.thumbnail : media.url, alt: "img", loading: "lazy" }), _jsxs(WrapperBtn, { className: "group-hover", children: [_jsx(Button, { onClick: () => handleSelectMedia(media), style: { backgroundColor: 'rgb(255,255,255)' }, children: "USE" }), _jsx(Button, { onClick: () => handleRemoveUploadedMedia(media), style: { backgroundColor: 'rgb(255,255,255)' }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] }), _jsx(Overlay, { className: "group-hover" })] }), _jsx(Paragraph, { style: {
                     overflow: 'hidden',
                     textOverflow: 'ellipsis',
@@ -134,16 +116,7 @@ export const UploadImage = props => {
                 }, title: media.name, children: media.name }), _jsxs(Paragraph, { children: ["Uploaded: ", media.createdAt.format('DD/MM/YYYY'), " at ", media.createdAt.format('hh:mm:ss A')] }), _jsxs(Paragraph, { children: ["Size: ", media.sizeString] })] }, idx)));
     const onChangeSearchImage = (e) => {
         const { value } = e.target;
-        if (value && value.trim()) {
-            setListMedia(storeSavedMedia
-                ? storeSavedMedia
-                    .filter(item => item.name.toLocaleLowerCase().includes(value.trim().toLocaleLowerCase()))
-                    .slice(0, 15)
-                : []);
-        }
-        else {
-            setListMedia(storeSavedMedia);
-        }
+        setTextSearch(value.trim());
     };
     const handleRemoveMedia = () => {
         if (onRemoveImage) {
@@ -161,7 +134,9 @@ export const UploadImage = props => {
             if (res && res.data && res.data.code === 200 && res.data.data) {
                 const { success_media = [] } = res.data.data;
                 if (Array.isArray(success_media) && success_media.length) {
-                    setTriggerRefresh(triggerRefresh + 1);
+                    queryClient.invalidateQueries([QUERY_KEYS.GET_LIST_SAVED_MEDIA, domainMedia, slug, paramsMemo], {
+                        exact: false,
+                    });
                 }
             }
             setOpenConfirmDelete(false);
@@ -235,7 +210,7 @@ export const UploadImage = props => {
                     })));
                     await Promise.all(arrPromise);
                     setLoading(false);
-                    setTriggerRefresh(triggerRefresh + 1);
+                    refetch({ refetchPage: (_page, index) => index === 0 });
                 }
                 else {
                     setLoading(false);
@@ -279,7 +254,7 @@ export const UploadImage = props => {
                             justifyContent: 'space-between',
                             alignItems: 'center',
                             marginBottom: 20,
-                        }, children: [_jsx(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }), _jsx(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })] }), _jsx(Spin, { spinning: loading, children: _jsx(Dragger, { ...props, accept: extensions?.join(','), 
+                        }, children: [_jsx(InputSearch, { value: textSearch, style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }), _jsx(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })] }), _jsx(Spin, { spinning: loading || isFetchingNextPage || isLoadingStore, children: _jsx(Dragger, { ...props, accept: extensions?.join(','), 
                             // action={`${APP_CONFIG.API_URL}/file-upload/file?&_token=${userInfo?.token}&_user_id=${userInfo?.user_id}&_account_id=${userInfo?.account_id}`}
                             // beforeUpload={handleBeforeUploadFile}
                             // onChange={onChangeFileUpload}
@@ -289,13 +264,13 @@ export const UploadImage = props => {
                                 }, children: [_jsx(Icon, { type: `icon-ants-${iconName}`, size: 36, style: { color: THEME.token?.colorIcon } }), _jsxs("div", { style: { ...flexStyleCenter, justifyContent: 'flex-start' }, children: [_jsx(TextStyled, { className: "ant-upload-text", children: "Drag & Drop file here" }), _jsx("span", { children: "or" }), _jsx(Button, { style: { backgroundColor: '#ffffff' }, children: labelButtonSelect }), _jsx(Button, { onClick: handleRemoveMedia, style: {
                                                     display: 'none !important',
                                                     backgroundColor: '#ffffff',
-                                                }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] })] }) }) }), _jsx("div", { style: {
+                                                }, children: _jsx(Icon, { type: "icon-ants-remove-trash", size: 15, style: { color: THEME.token?.colorPrimary } }) })] })] }) }) }), _jsxs("div", { style: {
                             display: 'flex',
                             flexWrap: 'wrap',
                             gap: '35px',
                             paddingTop: 20,
                             width: '100%',
-                        }, children: renderListMedia(listMedia) })] })] }));
+                        }, children: [renderListMedia(flattenedMedia), _jsx("div", { ref: ref })] })] })] }));
 };
 UploadImage.defaultProps = {
     isOpen: false,

package/es/components/molecules/UploadImage/styled.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from 'react';
 export declare const WrapperListImages: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Boxed: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -6,7 +7,7 @@ export declare const WrapperBtn: import("styled-components").StyledComponent<"di
 export declare const Paragraph: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperInputMode: import("styled-components").StyledComponent<"div", any, {
-    width?: string | undefined;
+    width?: CSSProperties['width'];
 }, never>;
 export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -8,6 +8,7 @@ export type ItemType = {
     scrollingLabel?: string;
     label?: ReactNode;
     children?: ItemType[];
+    errorMessage?: string | undefined;
     disabled?: boolean;
 };
 export type SerializedItemType = ItemType & {

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

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/components/molecules/index.js

@@ -6,6 +6,7 @@ export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
+export { EditingListV2 } from './EditingListV2';
 export { PopupDraggable } from './PopupDraggable';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';

package/es/constants/queries.d.ts

@@ -18,6 +18,7 @@ export declare const QUERY_KEYS: {
     GET_OBJECT_TEMPLATE_DETAIL: string;
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: string;
     GET_LIST_FALLBACK_BO: string;
+    GET_LIST_SAVED_MEDIA: string;
     GET_DASHBOARD: string;
     GET_LIST_MENU: string;
     GET_LIST_MENU_PERMISSION: string;

package/es/constants/queries.js

@@ -27,6 +27,7 @@ export const QUERY_KEYS = {
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: 'GET_SAVE_AS_GALLERY_PERMISSION_EMAILS',
     // THIRD PARTY
     GET_LIST_FALLBACK_BO: 'GET_LIST_FALLBACK_BO',
+    GET_LIST_SAVED_MEDIA: 'GET_LIST_SAVED_MEDIA',
     // Left menu
     GET_DASHBOARD: 'GET_DASHBOARD',
     GET_LIST_MENU: 'GET_LIST_MENU',

package/es/constants/theme.js

@@ -103,6 +103,9 @@ THEME.components = {
         colorTextDisabled: THEME.token?.bw0,
         textHoverBg: '#F2F9FF',
         marginXS: 0,
+        primaryShadow: 'none',
+        dangerShadow: 'none',
+        defaultShadow: 'none',
         /* Text type */
         colorBgTextHover: THEME.token?.blue,
         colorBgTextActive: THEME.token?.blue1_1,

package/es/locales/en/translation.json

@@ -661,7 +661,8 @@
             "_explore": "Explore",
             "_builtIn": "Built in",
             "_standard": "Standard",
-            "_ipRestriction": "IP Restriction"
+            "_ipRestriction": "IP Restriction",
+            "_unsubscribers": "Unsubscribers"
         }
     },
     "layout": {

package/es/locales/i18n.d.ts

@@ -3408,6 +3408,7 @@ export declare const translationsJson: {
                     _builtIn: string;
                     _standard: string;
                     _ipRestriction: string;
+                    _unsubscribers: string;
                 };
             };
             layout: {
@@ -6390,6 +6391,7 @@ export declare const translationsJson: {
                     _builtIn: string;
                     _standard: string;
                     _ipRestriction: string;
+                    _unsubscribers: string;
                 };
             };
             layout: {

package/es/locales/vi/translation.json

@@ -211,7 +211,8 @@
             "_explore": "",
             "_builtIn": "Mẫu",
             "_standard": "Tiêu chuẩn",
-            "_ipRestriction": "Hạn chế IP"
+            "_ipRestriction": "Hạn chế IP",
+            "_unsubscribers": "Người hủy đăng ký"
         }
     },
     "layout": {

package/es/queries/ThirdParty/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useGetEventTrackingAttributes';
 export * from './useGetListFallbackBO';
+export * from './useStoreSavedMedia';

package/es/queries/ThirdParty/index.js

@@ -1,2 +1,3 @@
 export * from './useGetEventTrackingAttributes';
 export * from './useGetListFallbackBO';
+export * from './useStoreSavedMedia';

package/es/queries/ThirdParty/useStoreSavedMedia.d.ts

@@ -0,0 +1 @@
+export declare const useStoreSavedMedia: (domain: string, slug: string, infos: any) => import("@tanstack/react-query").UseInfiniteQueryResult<import("../../models/SavedMedia").SavedMedia[], unknown>;

package/es/queries/ThirdParty/useStoreSavedMedia.js

@@ -0,0 +1,12 @@
+// Libraries
+import { useInfiniteQuery } from '@tanstack/react-query';
+// Services
+import { getListingSavedMedia } from '../../services/MediaTemplateDesign/UploadFile';
+// Constants
+import { QUERY_KEYS } from '../../constants';
+// Hook to fetch data with infinite scrolling
+export const useStoreSavedMedia = (domain, slug, infos) => useInfiniteQuery({
+    queryKey: [QUERY_KEYS.GET_LIST_SAVED_MEDIA, domain, slug, infos],
+    queryFn: ({ pageParam }) => getListingSavedMedia(domain, slug, infos, pageParam),
+    getNextPageParam: (lastPage, pages) => (lastPage.length >= 10 ? pages.length + 1 : undefined),
+});

package/es/services/MediaTemplateDesign/UploadFile/index.d.ts

@@ -1,6 +1,6 @@
 import { SavedMedia } from '@antscorp/antsomi-ui/es/models/SavedMedia';
 import { Upload } from '@antscorp/antsomi-ui/es/models/Upload';
-export declare const getListingSavedMedia: (domainUrl: string, slug: string, infos: any) => Promise<SavedMedia[]>;
+export declare const getListingSavedMedia: (domainUrl: string, slug: string, infos: any, page?: number) => Promise<SavedMedia[]>;
 export declare const createSavedMedia: (domainUrl: string, slug: string, infos: any, data: any) => Promise<any>;
 export declare const deleteSavedMedia: (domainUrl: string, slug: string, infos: any, id: string | number) => Promise<any>;
 export declare const uploadFile: (domainUrl: string, slug: string, infos: any, files: any) => Promise<Upload[]>;

package/es/services/MediaTemplateDesign/UploadFile/index.js

@@ -3,11 +3,11 @@
 import { SavedMedia } from '@antscorp/antsomi-ui/es/models/SavedMedia';
 import { Upload } from '@antscorp/antsomi-ui/es/models/Upload';
 import { services } from '@antscorp/antsomi-ui/es/services';
-export const getListingSavedMedia = async (domainUrl, slug, infos) => {
+export const getListingSavedMedia = async (domainUrl, slug, infos, page = 1) => {
     try {
         const { type = '', ...restInfos } = infos || {};
         const { data } = await services.mediaTemplateDesign.getList({
-            API_HOST: `${domainUrl}/${slug}/saved-media/index?type=${type}`,
+            API_HOST: `${domainUrl}/${slug}/saved-media/index?type=${type}&page=${page}&limit=10`,
         }, restInfos);
         let savedImages = data?.data || [];
         savedImages = savedImages.map((savedImage) => new SavedMedia(savedImage));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "2.0.57",
+  "version": "2.0.59",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",