@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -1,8 +1,8 @@
 import Icon from '@antscorp/icons';
 import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
-import { remove } from 'lodash';
-import React from 'react';
+import { remove, cloneDeep } from 'lodash';
+import React, { useMemo } from 'react';
 import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { getActionsByUser } from '../../utils';
@@ -14,9 +14,19 @@ const ROLE_BY_ACTIONS = {
     [PEOPLE_ACTION_KEYS.TO_VIEWER]: ROLE_MAPPING.VIEWER,
 };
 export const PeopleAccess = (props) => {
-    const { allowChangeOnwership } = props;
+    const { excludeUserAccess, hideTransferOwnership } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, accessUserId, accessUserPermission } = state;
+    const dataSourceSorted = useMemo(() => {
+        if (!Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        const listAccess = cloneDeep((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) || []);
+        return listAccess.sort((a, b) => {
+            if (+a.role === +b.role)
+                return 0;
+            return +a.role === 1 ? -1 : 1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess]);
     const handleClickAction = (actKey, updatedUserId) => {
         if (!accessInfo || !dispatch)
             return;
@@ -50,13 +60,14 @@ export const PeopleAccess = (props) => {
         });
         if (!needDispatchUpdate)
             return;
-        dispatch(updateObjAccessInfo(updated));
+        dispatch(updateObjAccessInfo({ updated }));
     };
     const renderActionItems = (actions) => {
         let hasDivider = false;
-        return actions.flatMap(act => {
+        return actions.flatMap((act, idx) => {
             const items = [];
-            const needDivider = PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key;
+            const needDivider = (PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key) &&
+                actions[idx - 1];
             if (needDivider && !hasDivider) {
                 items.push({ type: 'divider' });
                 items.push({ key: act.key, label: act.label });
@@ -71,20 +82,21 @@ export const PeopleAccess = (props) => {
         return null;
     return (React.createElement(StyledPeopleAccessRoot, null,
         React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
+        React.createElement(List, { dataSource: dataSourceSorted, renderItem: access => {
                 const actions = getActionsByUser({
                     userId: accessUserId,
                     updatedUserId: access.userId,
                     objectAccessInfo: accessInfo,
                     userPermission: accessUserPermission,
+                    omit: hideTransferOwnership ? ['to_owner'] : [],
                 });
-                if (!allowChangeOnwership) {
-                    remove(actions, act => act.key === PEOPLE_ACTION_KEYS.TO_OWNER);
+                if (excludeUserAccess) {
+                    remove(actions, act => excludeUserAccess.includes(act.key));
                 }
                 return (React.createElement(List.Item, null,
                     React.createElement(Avatar, { src: access.avatar }),
                     React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, access.fullName),
+                        React.createElement("div", { className: "name" }, access.fullName || (access === null || access === void 0 ? void 0 : access.name)),
                         React.createElement("div", { className: "email" }, access.email)),
                     React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
                             items: renderActionItems(actions),

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -1,3 +1,5 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
   display: flex;
@@ -9,6 +11,7 @@ export const StyledPeopleAccessRoot = styled.div `
   }
 
   .antsomi-list {
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ShareAccessProps } from '../../types';
-type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
+type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo' | 'placeholder'>;
 export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element | null;
 export {};

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -7,8 +7,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState } from 'react';
-import { Avatar, Select } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Avatar, AutoComplete } from 'antd';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { StyledSearchUserRoot, StyledSelectItem } from './styled';
 import { isEmail } from '@antscorp/antsomi-ui/es/utils';
@@ -16,14 +16,23 @@ import { useShareAccess } from '../../hooks';
 import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 export const SearchUser = (props) => {
-    const { getUserInfo } = props;
+    const { getUserInfo, placeholder = 'Add people' } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     const [users, setUsers] = useState([]);
     const [isFetching, setIsFetching] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const debounceSearchTerm = useDebounce(searchTerm, 700);
+    const excludedUsers = useMemo(() => {
+        if (!Array.isArray(users) || !Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        return users.filter(user => {
+            const userIdx = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess.findIndex(item => +item.userId === +user.user_id);
+            return userIdx === -1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess, users]);
     useEffect(() => {
         if (!isEmail(debounceSearchTerm) || !getUserInfo)
             return;
@@ -49,7 +58,7 @@ export const SearchUser = (props) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
         setSearchTerm('');
-        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
+        const existed = accessInfo.listAccess.some(access => +access.userId === +user.user_id);
         if (existed)
             return;
         const updated = produce(accessInfo, draft => {
@@ -57,12 +66,19 @@ export const SearchUser = (props) => {
             const newUser = Object.assign({ userId: user.user_id, fullName: user.full_name, email: user.email, avatar: user.avatar }, defaultViewerProps);
             draft.listAccess.push(newUser);
         });
-        dispatch(updateObjAccessInfo(updated));
+        dispatch(updateObjAccessInfo({ updated }));
+        setUsers([]);
     };
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: "Add people and groups", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+        React.createElement(AutoComplete, { placeholder: placeholder, value: searchTerm, onSearch: v => setSearchTerm(v), notFoundContent: isFetching ? (React.createElement(Spin, { style: {
+                    width: '100%',
+                    height: '40px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }, indicatorSize: 28 })) : null, options: (excludedUsers || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),

package/es/components/molecules/ShareAccess/constants.d.ts

@@ -12,12 +12,12 @@ export declare const ROLE_MAPPING: {
     readonly EDITOR: 2;
     readonly VIEWER: 3;
 };
-export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
 export declare const ROLE_ACCESS_LABEL: {
     1: string;
     2: string;
     3: string;
 };
+export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
 export declare const PEOPLE_ACTION_KEYS: {
     readonly TO_VIEWER: "to_viewer";
     readonly TO_EDITOR: "to_editor";

package/es/components/molecules/ShareAccess/constants.js

@@ -11,6 +11,11 @@ export const ROLE_MAPPING = {
     EDITOR: 2,
     VIEWER: 3,
 };
+export const ROLE_ACCESS_LABEL = {
+    [ROLE_MAPPING.OWNER]: 'Owner',
+    [ROLE_MAPPING.EDITOR]: 'Editor',
+    [ROLE_MAPPING.VIEWER]: 'Viewer',
+};
 export const ACCESS_PROPERTIES_BY_ROLE = {
     [ROLE_MAPPING.OWNER]: {
         role: ROLE_MAPPING.OWNER,
@@ -31,11 +36,6 @@ export const ACCESS_PROPERTIES_BY_ROLE = {
         allowComment: 0,
     },
 };
-export const ROLE_ACCESS_LABEL = {
-    [ROLE_MAPPING.OWNER]: 'Owner',
-    [ROLE_MAPPING.EDITOR]: 'Editor',
-    [ROLE_MAPPING.VIEWER]: 'Viewer',
-};
 export const PEOPLE_ACTION_KEYS = {
     TO_VIEWER: 'to_viewer',
     TO_EDITOR: 'to_editor',

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

@@ -9,6 +9,7 @@ export declare const useShareAccess: () => {
             view: number;
             edit: number;
         } | undefined;
+        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;

package/es/components/molecules/ShareAccess/reducer.js

@@ -1,11 +1,13 @@
 import produce from 'immer';
 import { TYPES } from './actions';
+import { mappingOutData } from './utils';
 export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
-            draft.accessInfo = action.payload;
-            if (onChange) {
-                onChange(action.payload);
+            const { updated, triggerOut = true } = action.payload;
+            draft.accessInfo = updated;
+            if (onChange && triggerOut) {
+                onChange(mappingOutData(action.payload.updated));
             }
             break;
         }

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

@@ -1,24 +1,25 @@
 import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
+import { PEOPLE_ACTION_KEYS } from './constants';
 export type UserInfo = {
-    avatar: string;
-    full_name: string;
-    email: string;
     user_id: number;
-    user_name: string;
-    user_type: number;
-    ctime: Date;
-    utime: Date;
+    avatar?: string;
+    full_name?: string;
+    email?: string;
+    user_name?: string;
+    user_type?: number;
+    ctime?: Date;
+    utime?: Date;
     [key: string]: any;
 };
 export type UserAccessInfo = {
     userId: number;
-    fullName: string;
-    email: string;
-    avatar: string;
     role: number;
     allowView: number;
     allowEdit: number;
     allowComment: number;
+    fullName?: string;
+    email?: string;
+    avatar?: string;
     [key: string]: any;
 };
 export type ObjectAccessInfo = {
@@ -27,6 +28,10 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type ExcludeUserAccess = Array<(typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS]>;
+export type GeneralAccessSettings = {
+    publicOnlyWith?: boolean;
+};
 export type ShareAccessProps = {
     userId?: number;
     userPermission?: {
@@ -35,9 +40,12 @@ export type ShareAccessProps = {
     };
     accessInfo?: ObjectAccessInfo;
     allowAddUser?: boolean;
-    allowChangeOnwership?: boolean;
+    placeholder?: string;
+    excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
+    generalAccessSettings?: GeneralAccessSettings;
     onChange?: (accessInfo: ObjectAccessInfo) => void;
+    hideTransferOwnership?: boolean;
 };
 export type ShareAccessState = {
     accessInfo?: ObjectAccessInfo;
@@ -46,6 +54,7 @@ export type ShareAccessState = {
         view: number;
         edit: number;
     };
+    excludeUserAccess?: ExcludeUserAccess;
     modalTransferOwnership: {
         open: boolean;
         userToOwnerShipId: number;

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

@@ -1,4 +1,5 @@
-import { ObjectAccessInfo, UserInfo } from './types';
+import { ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
+import { PEOPLE_ACTION_KEYS } from './constants';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -15,6 +16,7 @@ export declare const composeObjectMenuPermissions: (params: {
     edit: boolean;
     view: boolean;
 };
+export declare const getOwnerIdFromAccessInfo: (accessInfo: ObjectAccessInfo) => number | undefined;
 export declare const getActionsByUser: (args: {
     userId?: number;
     userPermission?: {
@@ -23,6 +25,7 @@ export declare const getActionsByUser: (args: {
     };
     updatedUserId?: number;
     objectAccessInfo?: ObjectAccessInfo;
+    omit?: Array<(typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS]>;
 }) => ({
     readonly label: "Viewer";
     readonly key: "to_viewer";
@@ -37,3 +40,24 @@ export declare const getActionsByUser: (args: {
     readonly key: "remove_acess";
 })[];
 export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;
+export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
+    ownerId: number;
+    listAccess: {
+        userId: number;
+        role: number;
+        allowView: number;
+        allowEdit: number;
+        allowComment: number;
+        fullName?: string | undefined;
+        email?: string | undefined;
+        avatar?: string | undefined;
+    }[];
+    isPublic: number;
+    publicRole: number | null;
+};
+export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
+    isPublic: number;
+    publicRole: number | null;
+    ownerId: number;
+    listAccess: UserAccessInfo[];
+};

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

@@ -1,4 +1,4 @@
-import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
+import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
@@ -23,8 +23,18 @@ export const composeObjectMenuPermissions = (params) => {
         view: view || (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER),
     };
 };
+export const getOwnerIdFromAccessInfo = (accessInfo) => {
+    const { ownerId } = accessInfo;
+    if (!ownerId) {
+        const ownerInfo = accessInfo.listAccess.find(member => +member.role === ROLE_MAPPING.OWNER);
+        if (!ownerInfo)
+            return;
+        return ownerInfo.userId;
+    }
+    return ownerId;
+};
 export const getActionsByUser = (args) => {
-    const { userId, userPermission, updatedUserId, objectAccessInfo } = args;
+    const { userId, userPermission, updatedUserId, objectAccessInfo, omit } = args;
     if (!userId || !updatedUserId || !objectAccessInfo)
         return [];
     const { ownerId, listAccess, publicRole, isPublic } = objectAccessInfo;
@@ -45,7 +55,7 @@ export const getActionsByUser = (args) => {
     if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
         return [];
     const actions = Object.values(PEOPLE_ACTION_KEYS);
-    if (userId !== ownerId) {
+    if (userId !== ownerId || (omit === null || omit === void 0 ? void 0 : omit.includes('to_owner'))) {
         remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
     }
     if (allowEdit && updatedUser.role === ROLE_MAPPING.EDITOR) {
@@ -57,10 +67,29 @@ export const getActionsByUser = (args) => {
     return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
 };
 export const initAccessInfoDefault = (userInfo) => ({
-    ownerId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id,
+    ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
     listAccess: [
         Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
     ],
     publicRole: PUBLIC_ROLE.ONLY_VIEWER,
     isPublic: 0,
 });
+export const safeParseAccessInfo = (accessInfo) => {
+    var _a;
+    const ownerId = getOwnerIdFromAccessInfo(accessInfo);
+    return Object.assign(Object.assign({}, accessInfo), { ownerId: +(ownerId || -1), listAccess: (_a = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) === null || _a === void 0 ? void 0 : _a.map(user => (Object.assign(Object.assign({}, user), { userId: +user.userId }))) });
+};
+export const mappingOutData = (shareAccess) => {
+    const result = Object.assign({}, shareAccess);
+    result.listAccess = result.listAccess.map(accessInfo => {
+        const roleLabel = ROLE_ACCESS_LABEL[accessInfo.role];
+        if (typeof roleLabel === 'string') {
+            accessInfo.accessType = {
+                label: roleLabel,
+                value: roleLabel.toLowerCase(),
+            };
+        }
+        return accessInfo;
+    });
+    return result;
+};

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

@@ -1 +1,6 @@
-export { Tabs } from 'antd';
+/// <reference types="react" />
+export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;

package/es/components/molecules/Tabs/Tabs.js

@@ -1 +1,14 @@
-export { Tabs } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import styled from 'styled-components';
+export const Tabs = styled(AntdTabs) `
+  position: relative;
+  z-index: 1;
+
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+
+  .antsomi-tabs-tab-btn {
+    text-shadow: none !important;
+  }
+`;

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

@@ -1,13 +1,18 @@
 import React from 'react';
 import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
+import { RuleObject } from 'antd/es/form';
 export type categoriesProps = {
     [key: string]: (string | number)[];
 };
 export interface TemplateValueOptions {
     saveOption?: string;
     templateName?: {
-        id?: string | number;
+        id: undefined;
+        label?: string;
+    } | {
+        id: string | number;
         label?: string;
     };
     description?: string;
@@ -17,28 +22,25 @@ export interface TemplateValueOptions {
     };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
-export interface ImagePreviewOptions {
-    thumbnails: (string | undefined)[];
-    isLoading?: boolean;
-    skeleton?: boolean;
-    previewNavigation?: boolean;
-    slidesPerView?: number;
-    hideThumbnailsList?: boolean;
-    hideDefaultButton?: boolean;
-    label?: string;
+export interface FormValue extends Required<Omit<TemplateValueOptions, 'templateName' | 'accessInfo'>> {
+    templateName: string;
+    templateNameSelect: number | string | undefined;
 }
 export interface TemplateSaveAsProps {
     className?: string;
     shareAccess: Omit<{
         show: boolean;
     } & ShareAccessProps, 'accessInfo' | 'onChange'>;
-    imageReview: ImagePreviewOptions;
+    imageReview: {
+        label?: string;
+    } & Omit<ImageSliderProps, 'defaultThumbnail' | 'onSelectDefault'>;
     saveOptions?: {
         saveNewText?: string;
         saveExistText?: string;
         saveNewValue?: string;
         saveExistValue?: string;
     };
+    isLoadingCategories?: boolean;
     categories?: Array<{
         label: string | React.ReactNode;
         key: string | number;
@@ -54,21 +56,30 @@ export interface TemplateSaveAsProps {
     templateNames: Array<{
         label: string;
         id: string | number;
+        description?: string;
     }>;
     templateNamesOptions?: {
         label?: string;
         isLoading?: boolean;
         defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
+        placeholder?: string;
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
+        validateName?: (rule: RuleObject, value: any) => void;
     };
     descriptionOptions?: {
         label?: string;
         placeholder?: string;
     };
-    form?: FormInstance<any>;
+    form?: FormInstance<FormValue>;
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;