@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.131

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

@@ -1,23 +1,25 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
-import React, { useEffect, useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
 import { updateObjAccessInfo } from './actions';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
+import { formattedAccessInfo } from './utils';
 export const ShareAccess = (props) => {
-    const { accessInfo, userId, onChange, userPermission } = props;
+    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
     const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
         modalTransferOwnership: {
             open: false,
             userToOwnerShipId: -1,
         },
     });
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         if (!accessInfo)
             return;
-        dispatch(updateObjAccessInfo(accessInfo));
+        dispatch(updateObjAccessInfo(formattedAccessInfo(accessInfo)));
     }, [accessInfo]);
-    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { accessUserId: userId, accessUserPermission: userPermission }) },
+    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { excludeUserAccess, accessUserId: userId, accessUserPermission: userPermission }) },
         React.createElement(ShareAccessDispatchContext.Provider, { value: dispatch },
             React.createElement(LayoutContent, Object.assign({}, props)))));
 };

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

@@ -1,2 +1,5 @@
-import React from 'react';
-export declare const GeneralAccess: () => React.JSX.Element | null;
+import { FC } from 'react';
+import { ShareAccessProps } from '../../types';
+type GeneralAccessProps = Pick<ShareAccessProps, 'generalAccessSettings'>;
+export declare const GeneralAccess: FC<GeneralAccessProps>;
+export {};

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

@@ -6,12 +6,13 @@ import { updateObjAccessInfo } from '../../actions';
 import { GENERAL_ACCESS, PUBLIC_ROLE, ROLE_ACCESS_LABEL } from '../../constants';
 import { useShareAccess } from '../../hooks';
 import { StyledGeneralAccessRoot } from './styled';
-export const GeneralAccess = () => {
+export const GeneralAccess = ({ generalAccessSettings }) => {
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     if (!accessInfo)
         return null;
     const { isPublic, publicRole } = accessInfo;
+    const isShowOnlyText = !!(generalAccessSettings === null || generalAccessSettings === void 0 ? void 0 : generalAccessSettings.publicOnlyWith);
     const handleChangeGeneralAccess = (value) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
@@ -32,12 +33,12 @@ export const GeneralAccess = () => {
         dispatch(updateObjAccessInfo(updated));
     };
     const renderDescription = () => {
-        let description = 'Only people with access can open this item.';
+        let description = 'Only people with access can open this item';
         if (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER) {
-            description = 'Anyone on the portal can view this item.';
+            description = 'Anyone on the portal can view this item';
         }
         if (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR) {
-            description = 'Anyone on the portal can edit this item.';
+            description = 'Anyone on the portal can edit this item';
         }
         return description;
     };
@@ -46,7 +47,7 @@ export const GeneralAccess = () => {
         React.createElement("div", { className: "setting" },
             React.createElement(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }),
             React.createElement("div", { className: "general-info" },
-                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], overlayStyle: { zIndex: 3002 }, destroyPopupOnHide: true, disabled: !allowEdit, menu: {
                         items: [
                             isPublic
                                 ? { key: GENERAL_ACCESS.RESTRICTED, label: React.createElement("div", null, "Restricted ") }
@@ -58,7 +59,7 @@ export const GeneralAccess = () => {
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
                         allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
                 React.createElement("div", { className: "description" }, renderDescription())),
-            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
                         publicRole === PUBLIC_ROLE.ONLY_VIEWER
                             ? {
@@ -74,5 +75,5 @@ export const GeneralAccess = () => {
                 } },
                 React.createElement("div", { className: "public-role-dropdown-wrapper" },
                     React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
-                    allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" })))))));
+                    allowEdit && !isShowOnlyText && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))))))));
 };

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

@@ -37,6 +37,7 @@ export const StyledGeneralAccessRoot = styled.div `
       margin-left: 15px;
 
       .general-dropdown-wrapper {
+        cursor: pointer;
         display: flex;
         align-items: center;
         gap: 4px;

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import { ShareAccessProps } from '../../types';
-export declare const LayoutContent: (props: ShareAccessProps) => React.JSX.Element | null;
+export declare const LayoutContent: (props: ShareAccessProps) => React.JSX.Element;

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

@@ -1,19 +1,17 @@
 import React from 'react';
-import { useShareAccess } from '../../hooks';
 import { GeneralAccess } from '../GeneralAccess';
 import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
 import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, allowChangeOnwership = true, allowAddUser = true } = props;
-    const { state } = useShareAccess();
-    const { allowEdit, allowView } = state;
-    if (!allowEdit && !allowView)
-        return null;
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, } = props;
+    // const { state } = useShareAccess();
+    // const { allowEdit, allowView } = state;
+    // if (!allowEdit && !allowView) return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
-        React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
-        React.createElement(GeneralAccess, null),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }),
+        React.createElement(PeopleAccess, { excludeUserAccess: excludeUserAccess }),
+        React.createElement(GeneralAccess, { generalAccessSettings: generalAccessSettings }),
         React.createElement(ModalTransferOwnership, null)));
 };

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

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

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 } = 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;
@@ -54,9 +64,10 @@ export const PeopleAccess = (props) => {
     };
     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,22 +82,22 @@ 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,
                 });
-                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: "email" }, access.email)),
-                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, menu: {
+                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
                             items: renderActionItems(actions),
                             onClick: e => handleClickAction(e.key, access.userId),
                         } },

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,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Avatar, Select } from 'antd';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { StyledSearchUserRoot, StyledSelectItem } from './styled';
@@ -17,13 +17,21 @@ import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
 export const SearchUser = (props) => {
-    const { getUserInfo } = props;
+    const { getUserInfo, placeholder } = 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 +57,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 => {
@@ -58,11 +66,12 @@ export const SearchUser = (props) => {
             draft.listAccess.push(newUser);
         });
         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(Select, { showSearch: true, placeholder: placeholder || 'Add people and groups', value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, 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/hooks/useShareAccess.d.ts

@@ -3,16 +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("@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/ShareAccess/types.d.ts

@@ -1,4 +1,5 @@
 import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
+import { PEOPLE_ACTION_KEYS } from './constants';
 export type UserInfo = {
     avatar: string;
     full_name: string;
@@ -8,6 +9,7 @@ export type UserInfo = {
     user_type: number;
     ctime: Date;
     utime: Date;
+    [key: string]: any;
 };
 export type UserAccessInfo = {
     userId: number;
@@ -26,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?: {
@@ -34,8 +40,10 @@ 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;
 };
 export type ShareAccessState = {
@@ -45,6 +53,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,4 @@
-import { ObjectAccessInfo } from './types';
+import { ObjectAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -36,3 +36,19 @@ export declare const getActionsByUser: (args: {
     readonly label: "Remove Access";
     readonly key: "remove_acess";
 })[];
+export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;
+export declare const formattedAccessInfo: (accessInfo: ObjectAccessInfo) => {
+    ownerId: number;
+    listAccess: {
+        userId: number;
+        fullName: string;
+        email: string;
+        avatar: string;
+        role: number;
+        allowView: number;
+        allowEdit: number;
+        allowComment: number;
+    }[];
+    isPublic: number;
+    publicRole: number | null;
+};

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

@@ -1,5 +1,6 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
+import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
         [`${MENU_PERMISSION.NONE}_false`]: false,
@@ -55,3 +56,15 @@ 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),
+    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 formattedAccessInfo = (accessInfo) => {
+    var _a;
+    return (Object.assign(Object.assign({}, accessInfo), { ownerId: +((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.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 }))) }));
+};

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,7 @@
-export { Tabs } from 'antd';
+import { Tabs as AntdTabs } from 'antd';
+import styled from 'styled-components';
+export const Tabs = styled(AntdTabs) `
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+`;

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
+import { ShareAccessProps } from '../ShareAccess/types';
+export type categoriesProps = {
+    [key: string]: (string | number)[];
+};
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id: undefined;
+        label: string;
+    } | {
+        id: string | number;
+        label: string;
+    };
+    description?: string;
+    defaultThumbnail?: number;
+    categories?: {
+        [key: string]: (string | number)[];
+    };
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+export interface TemplateSaveAsProps {
+    className?: string;
+    shareAccess: Omit<{
+        show: boolean;
+    } & ShareAccessProps, 'accessInfo' | 'onChange'>;
+    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;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }>;
+    /**
+     * Hide categories with following key
+     */
+    omitCategories?: string[];
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+    }>;
+    templateNamesOptions?: {
+        label?: string;
+        isLoading?: boolean;
+        defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
+        placeholder?: string;
+        onSearch?: (searchValue: string) => void;
+        onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
+    };
+    descriptionOptions?: {
+        label?: string;
+        placeholder?: string;
+    };
+    form?: FormInstance<any>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onEvent?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;