@antscorp/antsomi-ui 1.3.5-beta.115 → 1.3.5-beta.117

package/es/components/atoms/Icon/index.d.ts

@@ -6,5 +6,5 @@ interface IconProps {
     color?: string;
     style?: React.CSSProperties;
 }
-export declare const Icon: import("styled-components").StyledComponent<any, any, object & IconProps, string | number | symbol>;
+export declare const Icon: import("styled-components").StyledComponent<any, any, IconProps, string | number | symbol>;
 export {};

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

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;

package/es/components/atoms/MobileFrameV2/constants.d.ts

@@ -1,4 +1,10 @@
 export declare const MOBILE_VIEWPORT: {
-    width: number;
-    height: number;
+    MD: {
+        width: number;
+        height: number;
+    };
+    LG: {
+        width: number;
+        height: number;
+    };
 };

package/es/components/atoms/MobileFrameV2/constants.js

@@ -1,4 +1,10 @@
 export const MOBILE_VIEWPORT = {
-    width: 352.5,
-    height: 764.2,
+    MD: {
+        width: 317,
+        height: 686.41,
+    },
+    LG: {
+        width: 352.5,
+        height: 764.2,
+    },
 };

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

@@ -14,9 +14,6 @@ export const MobileWrapper = styled.div `
 `;
 export const MobileInner = styled.div `
   position: relative;
-  width: ${MOBILE_VIEWPORT.width}px;
-  max-width: ${MOBILE_VIEWPORT.width}px;
-  height: ${MOBILE_VIEWPORT.height}px;
   margin: 18px 21px;
   border-radius: 50px;
   overflow: hidden;
@@ -27,6 +24,18 @@ export const MobileInner = styled.div `
     width: 100%;
     height: 100%;
   }
+
+  @media screen and (max-height: 1000px) {
+    width: ${MOBILE_VIEWPORT.MD.width}px;
+    max-width: ${MOBILE_VIEWPORT.MD.width}px;
+    height: ${MOBILE_VIEWPORT.MD.height}px;
+  }
+
+  @media screen and (min-height: 1001px) {
+    width: ${MOBILE_VIEWPORT.LG.width}px;
+    max-width: ${MOBILE_VIEWPORT.LG.width}px;
+    height: ${MOBILE_VIEWPORT.LG.height}px;
+  }
 `;
 export const MobileCamera = styled.div `
   position: absolute;

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

@@ -38,7 +38,7 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, Object.assign(Object.assign({}, restOf), { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }) }), { onScroll: handleScroll }), children));
+    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, restOf, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }), onScroll: handleScroll }), children));
 };
 const Wrapper = styled.div `
   height: 100%;

package/es/components/atoms/Spin/Spin.js

@@ -20,9 +20,9 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
     const { indicatorSize, children } = props, restOf = __rest(props, ["indicatorSize", "children"]);
-    return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
+    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
                 fontSize: indicatorSize || 30,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), children));
+            }, spin: true })) }, restOf), children));
 };
 Spin.defaultProps = {};

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 export declare const Steps: import("react").FC<import("antd").StepsProps> & {
-    Step: typeof import("rc-steps/lib/Step").default;
+    Step: typeof import("rc-steps").Step;
 };

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

@@ -6,7 +6,7 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("../types").ReducerState;
-    action: import("../types").ActionType;
+    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
+    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
 };

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

@@ -1 +1 @@
-export declare const ChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const ChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/ChromePicker/styled.d.ts

@@ -1 +1 @@
-export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const StyledChromePicker: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/ColorPicker/SketchPicker/styled.d.ts

@@ -1 +1 @@
-export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;
+export declare const SketchPickerWrapper: import("styled-components").StyledComponent<any, any, any, any>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -4,7 +4,7 @@ export declare const DropdownHeader: import("styled-components").StyledComponent
 export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../../../atoms/Input").InputProps, any>;
+export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {

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

@@ -1,3 +1,4 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
 import 'ace-builds/webpack-resolver';

package/es/components/molecules/Modal/Modal.js

@@ -7,10 +7,12 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({}, Object.assign(Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }), footer: (React.createElement(React.Fragment, null,
+    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (React.createElement(React.Fragment, null,
             React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))), modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props), { maskClosable: loading ? false : props.maskClosable })),
+            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
+        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
+            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
         props.header || null,
         props.children || null));
 });

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -45,9 +45,9 @@ export const RichMenuBlock = props => {
         }
     }, PATH);
     const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, Object.assign({}, (isSingleUploadMode && {
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
         imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,
-    })))));
+    }))));
 };

package/es/components/molecules/ShareAccess/hooks/useShareAccess.d.ts

@@ -3,17 +3,17 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ObjectAccessInfo | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
         } | undefined;
-        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
+        excludeUserAccess?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;
         };
     };
-    dispatch: import("react").Dispatch<import("../types").ShareAccessAction> | null;
+    dispatch: import("react").Dispatch<import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ShareAccessAction> | null;
 };

package/es/components/molecules/TemplateSaveAs/hooks/useTemplateSave.d.ts

@@ -64,7 +64,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     form: import("antd").FormInstance<any>;
     errors: any[] | undefined;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

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

@@ -29,6 +29,7 @@ interface UploadImageProps extends AntdUploadProps {
     };
     required?: boolean;
     focused?: boolean;
+    useSync?: boolean;
 }
 interface UploadMediaObject {
     url: string;

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

@@ -31,6 +31,7 @@ import { handleError, safeParse } from '@antscorp/antsomi-ui/es/utils';
 import { getMediaTypeByMode, getReplacementExtension } from './utils';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { useGetListingSavedMedia } from '@antscorp/antsomi-ui/es/queries/Media';
 const flexStyleCenter = {
     display: 'flex',
     gap: '15px',
@@ -47,11 +48,12 @@ const SORT_OPTIONS = {
         label: 'Sort by Size',
     },
 };
+const POST_TRIGGER_CHANGE_SAVED_MEDIA = 'upload-image-refresh-saved-media';
 const LazyThumbnail = lazy(() => import('./MediaThumb'));
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/UploadImage/index.tsx';
 export const UploadImage = props => {
     var _a, _b, _c, _d, _e, _f;
-    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 { 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, useSync, } = props;
     const { Dragger } = Upload;
     const [storeSavedMedia, setStoreSavedMedia] = useState([]);
     const [selectedMedia, setSelectedMedia] = useState(selectedMediaProp || { url: '' });
@@ -69,6 +71,21 @@ export const UploadImage = props => {
         setListMedia(storeSavedMedia || []);
         setLoading(false);
     }, [storeSavedMedia]);
+    useEffect(() => {
+        const handleMessage = e => {
+            if (e && e.data && e.data.type === POST_TRIGGER_CHANGE_SAVED_MEDIA && e.data.triggerRefresh) {
+                setTriggerRefresh(+e.data.triggerRefresh);
+            }
+        };
+        if (useSync) {
+            window.addEventListener('message', handleMessage);
+        }
+        return () => {
+            if (useSync) {
+                window.removeEventListener('message', handleMessage);
+            }
+        };
+    }, []);
     // When selectedMediaProp onChange
     useEffect(() => {
         setSelectedMedia(selectedMediaProp || { url: '' });
@@ -112,8 +129,24 @@ export const UploadImage = props => {
             setLoading(false);
         }
     });
+    const { data: savedMedias, isLoading } = useGetListingSavedMedia({
+        domain: domainMedia,
+        slug,
+        params: Object.assign(Object.assign({}, paramConfigs), { type: getMediaTypeByMode(mode) }),
+        refresh: triggerRefresh,
+    });
     useEffect(() => {
-        handleGetStoreSavedMedia(domainMedia, slug, paramConfigs);
+        if (savedMedias) {
+            setStoreSavedMedia(savedMedias || []);
+        }
+    }, [savedMedias]);
+    useEffect(() => {
+        if (useSync) {
+            window.postMessage({
+                type: POST_TRIGGER_CHANGE_SAVED_MEDIA,
+                triggerRefresh,
+            });
+        }
     }, [triggerRefresh]);
     const showModal = (e) => {
         e.stopPropagation();
@@ -177,7 +210,7 @@ export const UploadImage = props => {
         }
         setSelectedMedia({ url: '' });
     };
-    const handleRemoveUploadedMedia = (media, isConfirm = true) => __awaiter(void 0, void 0, void 0, function* () {
+    const handleRemoveUploadedMedia = (media_1, ...args_1) => __awaiter(void 0, [media_1, ...args_1], void 0, function* (media, isConfirm = true) {
         if (isConfirm) {
             deleteMediaRef.current = media;
             setOpenConfirmDelete(true);
@@ -336,7 +369,7 @@ export const UploadImage = props => {
                 } },
                 React.createElement(InputSearch, { style: { width: 232 }, onChange: onChangeSearchImage, placeholder: searchPlaceholder }),
                 React.createElement(Select, { defaultValue: SORT_OPTIONS.BY_UPLOAD_DATE.value, value: sortOption, options: Object.values(SORT_OPTIONS), style: { width: 232 }, onChange: onChangeSort })),
-            React.createElement(Spin, { spinning: loading },
+            React.createElement(Spin, { spinning: loading || isLoading },
                 React.createElement(Dragger, Object.assign({}, props, { accept: extensions === null || extensions === void 0 ? void 0 : 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}

package/es/components/organism/Help/styled.d.ts

@@ -58,11 +58,11 @@ export declare const TitleSearch: import("styled-components").StyledComponent<"s
 export declare const WrapperSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>, any, {}, never>;
 export declare const TreeContent: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
     children?: import("react").ReactNode;
-} & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
     DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
         children?: import("react").ReactNode;
-    } & import("react").RefAttributes<import("rc-tree/lib/Tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
         displayName?: string | undefined;
     };
 }, any, {}, never>;

package/es/components/organism/Menu/Menu.d.ts

@@ -1,2 +1 @@
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+export { Menu } from 'antd';

package/es/components/organism/Menu/Menu.js

@@ -1,2 +1,2 @@
-import AntdMenu from 'antd/es/menu';
-export default AntdMenu;
+export { Menu } from 'antd';
+// export default AntdMenu;

package/es/components/organism/Menu/index.d.ts

@@ -1 +1 @@
-export { default as Menu } from './Menu';
+export { Menu } from './Menu';

package/es/components/organism/Menu/index.js

@@ -1 +1 @@
-export { default as Menu } from './Menu';
+export { Menu } from './Menu';

package/es/components/organism/PreviewTemplateModal/styled.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../molecules/Modal/styled").CustomModalProps, any>;
+export declare const ModalContainer: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ModalWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImageWrapper: import("styled-components").StyledComponent<"img", any, {}, never>;

package/es/components/template/TemplateListing/Loadable.d.ts

@@ -3,4 +3,4 @@
  * Asynchronously loads the component for TemplateListing
  *
  */
-export declare const TemplateListing: (props: import("./types").TemplateListingProps<{}>) => JSX.Element;
+export declare const TemplateListing: (props: import("@antscorp/antsomi-ui/es/components").TemplateListingProps<{}>) => JSX.Element;

package/es/components/template/TemplateListing/hooks/useTemplateListing.d.ts

@@ -43,7 +43,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     templateItems: TTemplateItem[];
     openCategoryKeys: string[];
     similarTemplates: TTemplateItem[];
-    templateDetail: import("../../../../models/ObjectTemplate").ObjectTemplate | undefined;
+    templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
     selectTemplateAction: TSelectTemplateAction | T | undefined;
     previewTemplateCategories: TCategoryItem[];
@@ -51,7 +51,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     isLoadingTemplateList: boolean;
     isLoadingTemplateDetail: boolean;
     refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("../../../../models/ObjectTemplate").ObjectTemplate>>, any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<import("@antscorp/antsomi-ui/es/types").ResponseListing<import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate>>, any>>;
     onChangeCheckedCategories: (checkedCategories: TCheckedCategories) => void;
     onChangeOpenCategoryKeys: (openKeys: string[]) => void;
     onRemoveObjectTemplate: (id: TThumbnailCardId) => void;

package/es/constants/queries.d.ts

@@ -15,4 +15,5 @@ export declare const QUERY_KEYS: {
     GET_OBJECT_TEMPLATE_LIST: string;
     GET_OBJECT_TEMPLATE_DETAIL: string;
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: string;
+    GET_LISTING_SAVED_MEDIA: string;
 };

package/es/constants/queries.js

@@ -23,4 +23,5 @@ export const QUERY_KEYS = {
     GET_OBJECT_TEMPLATE_LIST: 'GET_OBJECT_TEMPLATE_LIST',
     GET_OBJECT_TEMPLATE_DETAIL: 'GET_OBJECT_TEMPLATE_DETAIL',
     GET_SAVE_AS_GALLERY_PERMISSION_EMAILS: 'GET_SAVE_AS_GALLERY_PERMISSION_EMAILS',
+    GET_LISTING_SAVED_MEDIA: 'GET_LISTING_SAVED_MEDIA',
 };

package/es/queries/BusinessObject/useGetListAttributeBO.d.ts

@@ -6,7 +6,7 @@ type GetListAttributeBOProps<T> = {
     itemTypeIds?: number[];
     options?: Omit<UseQueryOptions<Record<string, any>, any, T, any[]>, OptionHasDefault>;
 };
-export declare const useGetListAttributeBO: <T = Record<string, any>>(apiParams: APIParams, infos: PayloadInfo, props?: GetListAttributeBOProps<T> | undefined) => UseQueryResult<T, unknown>;
+export declare const useGetListAttributeBO: <T = Record<string, any>>(apiParams: APIParams, infos: PayloadInfo, props?: GetListAttributeBOProps<T>) => UseQueryResult<T, unknown>;
 export declare const getListAttributeBOQuery: ({ itemTypeIds, url, infos, }: {
     itemTypeIds: (number | null)[];
 } & {

package/es/queries/BusinessObject/useGetListAttributeBO.js

@@ -24,7 +24,7 @@ export const useGetListAttributeBO = (apiParams, infos, props) => {
             total: [],
         } }, options), { enabled: itemTypeIds.filter(Boolean).length > 0 }));
 };
-export const getListAttributeBOQuery = ({ itemTypeIds, url, infos, }) => __awaiter(void 0, void 0, void 0, function* () {
+export const getListAttributeBOQuery = (_a) => __awaiter(void 0, [_a], void 0, function* ({ itemTypeIds, url, infos, }) {
     try {
         if (itemTypeIds.filter(itemTypeId => !!itemTypeId).length) {
             const { rows } = (yield queryClientAntsomiUI.fetchQuery({

package/es/queries/BusinessObject/useGetListBO.d.ts

@@ -2,5 +2,5 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import type { APIParams } from '../../components/molecules/AddDynamicContent';
 import type { PayloadInfo } from '../../types';
 type TDataFnQuery = Record<string, any>;
-export declare const useGetListBO: <T = TDataFnQuery>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: UseQueryOptions<TDataFnQuery, any, T, import("@tanstack/react-query").QueryKey> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetListBO: <T = TDataFnQuery>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: UseQueryOptions<TDataFnQuery, any, T>) => import("@tanstack/react-query").UseQueryResult<T, any>;
 export {};

package/es/queries/BusinessObject/useGetListEventAttr.d.ts

@@ -1,4 +1,4 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import type { APIParams } from '../../components/molecules/AddDynamicContent';
 import type { PayloadInfo } from '../../types';
-export declare const useGetListEventAttr: <T = any[]>(apiConfig: APIParams, infos: PayloadInfo, eventSource: string, sourceId: string, queryOptions?: Omit<UseQueryOptions<any[], any, T, import("@tanstack/react-query").QueryKey>, "queryKey" | "queryFn"> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetListEventAttr: <T = any[]>(apiConfig: APIParams, infos: PayloadInfo, eventSource: string, sourceId: string, queryOptions?: Omit<UseQueryOptions<any[], any, T>, 'queryKey' | 'queryFn'>) => import("@tanstack/react-query").UseQueryResult<T, any>;

package/es/queries/BusinessObject/useGetListPromotionCodeAttr.d.ts

@@ -2,5 +2,5 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import type { APIParams } from '../../components/molecules/AddDynamicContent';
 import type { PayloadInfo } from '../../types';
 type TQueryFnData = any[];
-export declare const useGetListPromotionCodeAttr: <T = TQueryFnData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TQueryFnData, any, T, import("@tanstack/react-query").QueryKey>, "queryKey" | "queryFn"> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetListPromotionCodeAttr: <T = TQueryFnData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TQueryFnData, any, T>, 'queryKey' | 'queryFn'>) => import("@tanstack/react-query").UseQueryResult<T, any>;
 export {};

package/es/queries/CustomFunction/useCustomFunction.d.ts

@@ -2,7 +2,7 @@ import { UseQueryOptions } from '@tanstack/react-query';
 import { MediaJsonCustomFunction } from '../../models/CustomFunction';
 import type { APIParams } from '../../components/molecules/AddDynamicContent';
 import type { PayloadInfo } from '../../types';
-export declare const useGetCustomFunction: <T = MediaJsonCustomFunction[]>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<MediaJsonCustomFunction[], any, T, import("@tanstack/react-query").QueryKey>, "queryKey" | "queryFn"> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetCustomFunction: <T = MediaJsonCustomFunction[]>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<MediaJsonCustomFunction[], any, T>, 'queryKey' | 'queryFn'>) => import("@tanstack/react-query").UseQueryResult<T, any>;
 export declare const useAddSavedCSFunction: () => import("@tanstack/react-query").UseMutationResult<any, unknown, Partial<any> & {
     url: string;
 } & Record<string, any> & {

package/es/queries/DynamicContentAttribute/useGetDynamicContentAttr.d.ts

@@ -6,5 +6,5 @@ interface TData {
     visitor: DynamicContentAttribute['visitor'];
     customer: DynamicContentAttribute['customer'];
 }
-export declare const useGetDynamicContentAttr: <T = TData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TData, any, T, import("@tanstack/react-query").QueryKey>, "queryKey" | "queryFn"> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetDynamicContentAttr: <T = TData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TData, any, T>, 'queryKey' | 'queryFn'>) => import("@tanstack/react-query").UseQueryResult<T, any>;
 export {};

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

@@ -0,0 +1 @@
+export * from './useGetListingSavedMedia';

package/es/queries/Media/index.js

@@ -0,0 +1 @@
+export * from './useGetListingSavedMedia';

package/es/queries/Media/useGetListingSavedMedia.d.ts

@@ -0,0 +1,12 @@
+import { UseQueryOptions } from '@tanstack/react-query';
+import { SavedMedia } from '../../models/SavedMedia';
+type OptionHasDefault = 'queryKey' | 'queryFn';
+type GetSavedMediaProps<T> = {
+    domain: any;
+    slug: any;
+    params: any;
+    refresh: number;
+    options?: Omit<UseQueryOptions<any, any, T, any[]>, OptionHasDefault>;
+};
+export declare const useGetListingSavedMedia: <T = SavedMedia[]>(props: GetSavedMediaProps<T>) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export {};

package/es/queries/Media/useGetListingSavedMedia.js

@@ -0,0 +1,10 @@
+// Libraries
+import { useQuery } from '@tanstack/react-query';
+// Constants
+import { QUERY_KEYS } from '../../constants/queries';
+// Services
+import { getListingSavedMedia } from '../../services/MediaTemplateDesign/UploadFile';
+export const useGetListingSavedMedia = (props) => {
+    const { options, domain, slug, params, refresh } = props || {};
+    return useQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_LISTING_SAVED_MEDIA, domain, slug, params, refresh], queryFn: () => getListingSavedMedia(domain, slug, params), placeholderData: [] }, options));
+};

package/es/queries/PromotionPool/useGetListPromotionPool.d.ts

@@ -5,5 +5,5 @@ interface TReturnData {
     rows: any[];
     total: number;
 }
-export declare const useGetListPromotionPool: <T = TReturnData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TReturnData, any, T, import("@tanstack/react-query").QueryKey>, "queryKey" | "queryFn"> | undefined) => import("@tanstack/react-query").UseQueryResult<T, any>;
+export declare const useGetListPromotionPool: <T = TReturnData>(apiConfig: APIParams, infos: PayloadInfo, queryOptions?: Omit<UseQueryOptions<TReturnData, any, T>, 'queryKey' | 'queryFn'>) => import("@tanstack/react-query").UseQueryResult<T, any>;
 export {};

package/es/queries/TemplateListing/index.js

@@ -25,7 +25,7 @@ export const useGetSaveAsGalleryPermissionEmails = (params) => {
 };
 export const useGetObjectTemplateList = (params) => {
     const { options, args } = params;
-    return useInfiniteQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST, args.params], queryFn: ({ pageParam = 1 }) => __awaiter(void 0, void 0, void 0, function* () {
+    return useInfiniteQuery(Object.assign({ queryKey: [QUERY_KEYS.GET_OBJECT_TEMPLATE_LIST, args.params], queryFn: (_a) => __awaiter(void 0, [_a], void 0, function* ({ pageParam = 1 }) {
             const res = yield objectTemplate.getList(Object.assign(Object.assign({}, args), { params: Object.assign(Object.assign({}, args.params), { page: pageParam }) }));
             return res;
         }), getNextPageParam: lastPage => {

package/es/queries/index.d.ts

@@ -5,3 +5,4 @@ export * from './PromotionPool';
 export * from './DynamicContentAttribute';
 export * from './ThirdParty';
 export * from './TemplateListing';
+export * from './Media';

package/es/queries/index.js

@@ -5,3 +5,4 @@ export * from './PromotionPool';
 export * from './DynamicContentAttribute';
 export * from './ThirdParty';
 export * from './TemplateListing';
+export * from './Media';

package/es/services/TemplateListing/index.js

@@ -29,7 +29,7 @@ const TEMPLATE_CATEGORY_ROUTE = 'template-category/index';
 const OBJECT_TEMPLATE_ROUTE = 'object-template';
 export const templateListingServices = {
     category: {
-        getList: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+        getList: (_a) => __awaiter(void 0, [_a], void 0, function* ({ params, auth }) {
             try {
                 const { objectTypes = [], categoryCodes, publicLevel, getListType } = params;
                 const response = yield axios({
@@ -45,7 +45,7 @@ export const templateListingServices = {
         }),
     },
     objectTemplate: {
-        getList: ({ params, auth, }) => __awaiter(void 0, void 0, void 0, function* () {
+        getList: (_b) => __awaiter(void 0, [_b], void 0, function* ({ params, auth, }) {
             try {
                 const response = yield axios({
                     method: 'GET',
@@ -62,7 +62,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        getDetail: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+        getDetail: (_c) => __awaiter(void 0, [_c], void 0, function* ({ params, auth }) {
             try {
                 const { template_id } = params, restOfPrams = __rest(params, ["template_id"]);
                 const response = yield axios({
@@ -76,7 +76,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        create: ({ data, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+        create: (_d) => __awaiter(void 0, [_d], void 0, function* ({ data, auth }) {
             try {
                 const response = yield axios({
                     method: 'POST',
@@ -94,7 +94,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        update: ({ data, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+        update: (_e) => __awaiter(void 0, [_e], void 0, function* ({ data, auth }) {
             try {
                 const { template_id } = data, restOfData = __rest(data, ["template_id"]);
                 const response = yield axios({
@@ -113,7 +113,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        bulkUpdate: ({ params, auth }) => __awaiter(void 0, void 0, void 0, function* () {
+        bulkUpdate: (_f) => __awaiter(void 0, [_f], void 0, function* ({ params, auth }) {
             try {
                 const response = yield axios({
                     method: 'POST',
@@ -132,7 +132,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        validateName: ({ params, auth, }) => __awaiter(void 0, void 0, void 0, function* () {
+        validateName: (_g) => __awaiter(void 0, [_g], void 0, function* ({ params, auth, }) {
             try {
                 const response = yield axios({
                     method: 'POST',
@@ -145,7 +145,7 @@ export const templateListingServices = {
                 return Promise.reject(error);
             }
         }),
-        getSaveAsGalleryPermission: ({ auth, }) => __awaiter(void 0, void 0, void 0, function* () {
+        getSaveAsGalleryPermission: (_h) => __awaiter(void 0, [_h], void 0, function* ({ auth, }) {
             try {
                 const response = yield axios({
                     method: 'GET',

package/es/utils/handleError.js

@@ -18,7 +18,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-export const handleError = (error = {}, configInfo = {}, isShowMessageError = false) => __awaiter(void 0, void 0, void 0, function* () {
+export const handleError = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (error = {}, configInfo = {}, isShowMessageError = false) {
     const { response, message } = error;
     const { name: functionName, path, from, priority = 'low' } = configInfo, restOfConfigInfo = __rest(configInfo, ["name", "path", "from", "priority"]);
     console.log(error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.115",
+  "version": "1.3.5-beta.117",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -28,8 +28,8 @@
     "eslint": "eslint --ext js,ts,tsx",
     "lint": "yarn run eslint src",
     "lint:fix": "yarn run eslint src --fix",
-    "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "serve-storybook": "serve storybook-static",
     "version": "auto-changelog -p && git add CHANGELOG.md",
     "test": "jest",
@@ -59,7 +59,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/icons": "0.27.10",
+    "@antscorp/icons": "^0.27.10",
     "@antscorp/image-editor": "1.0.2",
     "@emotion/react": "^11.11.1",
     "@fortawesome/fontawesome-svg-core": "6.1.1",
@@ -67,6 +67,7 @@
     "@fortawesome/free-regular-svg-icons": "6.1.1",
     "@fortawesome/free-solid-svg-icons": "6.1.1",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@storybook/test": "8.0.5",
     "@swiper/core": "^0.0.21",
     "@tanstack/react-query": "4.20.4",
     "@tanstack/react-query-devtools": "4.20.4",
@@ -107,7 +108,6 @@
   "devDependencies": {
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/eslint-config-antsomi": "1.0.4",
-    "@antscorp/icons": "0.27.4",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.21.3",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -124,15 +124,17 @@
     "@babel/preset-typescript": "^7.23.3",
     "@commitlint/cli": "17.5.0",
     "@commitlint/config-conventional": "17.4.4",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/blocks": "8.0.5",
+    "@storybook/manager-api": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "8.0.5",
+    "@storybook/theming": "^8.0.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.0",
@@ -167,7 +169,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.11",
+    "eslint-plugin-storybook": "^0.8.0",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
@@ -183,6 +185,7 @@
     "react-i18next": "11.16.7",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
+    "storybook": "8.0.5",
     "style-loader": "^3.3.2",
     "styled-components": "^5.3.9",
     "terser-webpack-plugin": "^5.3.7",
@@ -191,7 +194,7 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^4.0.1",
     "type-fest": "^4.10.2",
-    "typescript": "^4.9.4",
+    "typescript": "^5.4.3",
     "vite": "^4.2.1",
     "vite-plugin-mkcert": "^1.15.0",
     "webpack": "^5.78.0",