@antscorp/antsomi-ui 1.3.5-beta.329 → 1.3.5-beta.330

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

@@ -3,6 +3,8 @@ import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
+    showIndicatorBackground?: boolean;
+    indicatorBackground?: string;
 }
 export declare const Spin: {
     (props: TSpinProps): React.JSX.Element;

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

@@ -11,18 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React from 'react';
-// Antd Icons
-import { LoadingOutlined } from '@ant-design/icons';
+// Icons
+import { LoadingIcon } from '../../icons';
 // Styled
 import { StyledSpin } from './styled';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } 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({ indicator: (React.createElement(LoadingOutlined, { style: {
-                fontSize: indicatorSize || 30,
+    const { indicatorSize, indicatorBackground, showIndicatorBackground, children } = props, restOf = __rest(props, ["indicatorSize", "indicatorBackground", "showIndicatorBackground", "children"]);
+    return (React.createElement(StyledSpin, Object.assign({ indicator: (React.createElement(LoadingIcon, { style: {
+                fontSize: indicatorSize || 40,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf), children));
+                animation: `loadingCircle 1s infinite linear`,
+            }, backgroundColor: showIndicatorBackground ? indicatorBackground || (globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1) : 'transparent' })) }, restOf), children));
 };
 Spin.defaultProps = {};

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

@@ -4,4 +4,13 @@ import styled from 'styled-components';
 import { Spin } from 'antd';
 export const StyledSpin = styled(Spin) `
   max-height: unset !important;
+
+  @keyframes loadingCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const LoadingIcon: React.ForwardRefExoticComponent<IconProps & {
+    backgroundColor?: string | undefined;
+} & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LoadingIcon.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from 'react';
+export const LoadingIcon = forwardRef((_a, ref) => {
+    var { backgroundColor } = _a, restOfProps = __rest(_a, ["backgroundColor"]);
+    return (React.createElement("svg", Object.assign({ width: "41", height: "41", viewBox: "0 0 41 41", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restOfProps, { ref: ref }),
+        React.createElement("path", { d: "M40.5 20.5C40.5 31.5457 31.5457 40.5 20.5 40.5C9.4543 40.5 0.5 31.5457 0.5 20.5C0.5 9.4543 9.4543 0.5 20.5 0.5C31.5457 0.5 40.5 9.4543 40.5 20.5ZM2.5 20.5C2.5 30.4411 10.5589 38.5 20.5 38.5C30.4411 38.5 38.5 30.4411 38.5 20.5C38.5 10.5589 30.4411 2.5 20.5 2.5C10.5589 2.5 2.5 10.5589 2.5 20.5Z", fill: backgroundColor || 'transparent' }),
+        React.createElement("path", { d: "M37.9236 28.0774C38.4301 28.2977 39.0217 28.0665 39.2164 27.5496C40.3036 24.6631 40.7101 21.5595 40.3979 18.4817C40.052 15.0718 38.8357 11.808 36.8655 9.00346C34.8953 6.1989 32.2375 3.94771 29.147 2.46587C26.0565 0.984039 22.637 0.321291 19.2167 0.541216C15.7963 0.761142 12.4899 1.85636 9.61461 3.72179C6.73932 5.58722 4.39168 8.16027 2.79691 11.194C1.20215 14.2278 0.413791 17.6205 0.507472 21.0467C0.592029 24.1391 1.3926 27.165 2.84058 29.8886C3.09984 30.3762 3.71622 30.5298 4.1903 30.2465C4.66438 29.9632 4.81636 29.3503 4.55981 28.8613C3.28613 26.4331 2.58191 23.7417 2.50673 20.992C2.42241 17.9085 3.13194 14.855 4.56722 12.1246C6.00251 9.39424 8.11539 7.0785 10.7031 5.39961C13.2909 3.72073 16.2667 2.73503 19.345 2.53709C22.4233 2.33916 25.5008 2.93564 28.2823 4.26929C31.0637 5.60294 33.4558 7.62901 35.2289 10.1531C37.0021 12.6772 38.0968 15.6146 38.4081 18.6836C38.6857 21.4203 38.332 24.1797 37.3797 26.751C37.1879 27.2689 37.4172 27.8572 37.9236 28.0774Z", fill: "currentColor" })));
+});

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

@@ -53,3 +53,4 @@ export { Preview } from './Preview';
 export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LoadingIcon } from './LoadingIcon';

package/es/components/icons/index.js

@@ -53,3 +53,4 @@ export { Preview } from './Preview';
 export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
+export { LoadingIcon } from './LoadingIcon';

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

@@ -1 +1,4 @@
+import React from 'react';
+import { InputDropdownProps } from './types';
 export { Dropdown } from 'antd';
+export declare const InputDropdown: (props: InputDropdownProps) => React.JSX.Element;

package/es/components/molecules/Dropdown/Dropdown.js

@@ -1 +1,42 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useState } from 'react';
+import { Space, Typography } from 'antd';
+import Icon from '@antscorp/icons';
+import { StyledInputDropdownRoot } from './styled';
+import clsx from 'clsx';
 export { Dropdown } from 'antd';
+export const InputDropdown = (props) => {
+    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', onOpenChange = () => { } } = props, rest = __rest(props, ["children", "disabled", "className", "trigger", "menu", "width", "onOpenChange"]);
+    const [enableTooltip, setEnableTooltip] = useState(true);
+    const renderChildren = useCallback(() => {
+        if (typeof children === 'string') {
+            return (React.createElement(Typography.Text, { ellipsis: enableTooltip
+                    ? {
+                        tooltip: {
+                            arrow: false,
+                        },
+                    }
+                    : true }, children));
+        }
+        return children;
+    }, [children, enableTooltip]);
+    const handleOpen = (...args) => {
+        const [open] = args;
+        setEnableTooltip(!open);
+        onOpenChange(...args);
+    };
+    return (React.createElement(StyledInputDropdownRoot, Object.assign({ menu: menu, trigger: trigger, disabled: disabled }, rest, { className: clsx({ disabled }, className), onOpenChange: handleOpen }),
+        React.createElement(Space, { style: { width } },
+            renderChildren(),
+            React.createElement(Icon, { type: "icon-ants-expand-more" }))));
+};

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

@@ -1 +1,2 @@
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
+export type { InputDropdownProps } from './types';

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

@@ -1 +1 @@
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const StyledInputDropdownRoot: import("styled-components").StyledComponent<import("react").FC<import("antd").DropDownProps> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd").DropDownProps>;
+} & {
+    Button: import("react").FC<import("antd/es/dropdown").DropdownButtonProps>;
+}, any, {}, never>;

package/es/components/molecules/Dropdown/styled.js

@@ -0,0 +1,33 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import styled from 'styled-components';
+import { Dropdown } from 'antd';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const StyledInputDropdownRoot = styled(Dropdown) `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
+  min-height: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.controlHeight}px;
+  border-bottom: 1px solid ${(_d = (_c = THEME.components) === null || _c === void 0 ? void 0 : _c.Input) === null || _d === void 0 ? void 0 : _d.colorBorder};
+  cursor: pointer;
+  padding: 0 5px;
+
+  .antsomi-space-item:nth-child(1) {
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .antsomi-space-item:nth-child(2) {
+    display: flex;
+    align-items: center;
+
+    > i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+      font-size: 20px;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    border-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};
+    background-color: ${(_f = (_e = THEME.components) === null || _e === void 0 ? void 0 : _e.Input) === null || _f === void 0 ? void 0 : _f.colorBgContainerDisabled};
+    color: ${(_h = (_g = THEME.components) === null || _g === void 0 ? void 0 : _g.Input) === null || _h === void 0 ? void 0 : _h.colorTextDisabled};
+  }
+`;

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

@@ -0,0 +1,4 @@
+import { DropdownProps } from 'antd';
+export type InputDropdownProps = DropdownProps & {
+    width?: number;
+};

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

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

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+import { ModalProps } from '@antscorp/antsomi-ui/es/components/molecules';
+interface TimeOut {
+    show?: boolean;
+    message?: ReactNode;
+    second?: number;
+}
+export interface ProcessLoadingProps extends ModalProps {
+    message?: ReactNode;
+    timeout?: TimeOut;
+}
+export declare const ProcessLoading: React.FC<ProcessLoadingProps>;
+export {};

package/es/components/molecules/ProcessLoading/ProcessLoading.js

@@ -0,0 +1,75 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useEffect, useRef, useState } from 'react';
+// Atoms
+import { Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { ModalV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+import { ProcessLoadingContent } from './styled';
+export const ProcessLoading = (_a) => {
+    var restProps = __rest(_a, []);
+    // Props
+    const { open, message = 'Loading ...', timeout } = restProps;
+    // State
+    const [isShowTimeoutMessage, setShowAlert] = useState(false);
+    // Ref
+    const timeoutShowAlert = useRef(null);
+    // Variables
+    const { second = 7, message: timeOutMessage = (React.createElement("div", null,
+        "This might take a little longer than usual. ",
+        React.createElement("br", null),
+        "Thank you for waiting!")), show: showTimeOutMessage = true, } = timeout || {};
+    // Effects
+    /* Base timeout second to show timeout message */
+    useEffect(() => {
+        if (open) {
+            timeoutShowAlert.current = setTimeout(() => {
+                setShowAlert(true);
+            }, 1000 * second);
+        }
+        return () => {
+            clearTimeout(timeoutShowAlert.current);
+            setShowAlert(false);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+    // Handlers
+    const renderMessage = () => {
+        let draftMessage = null;
+        if (isShowTimeoutMessage && showTimeOutMessage) {
+            draftMessage = timeOutMessage;
+        }
+        else if (message) {
+            draftMessage = message;
+        }
+        if (draftMessage) {
+            return (React.createElement(Typography.Text
+            /* Key to force update for refresh animation when timeout */
+            , { 
+                /* Key to force update for refresh animation when timeout */
+                key: !showTimeOutMessage ? '1' : `${isShowTimeoutMessage}`, className: "animate__animated animate__fadeIn", style: { lineHeight: '14.06px' } }, draftMessage));
+        }
+        return null;
+    };
+    return (React.createElement(ModalV2, Object.assign({ closable: false, destroyOnClose: true }, restProps, { footer: null, centered: true, width: "300px", styles: {
+            body: {
+                padding: 20,
+            },
+            mask: {
+                background: `rgba(255, 255, 255, 0.5)`,
+            },
+        } }),
+        React.createElement(ProcessLoadingContent, { vertical: true, align: "center", justify: "center", gap: 16 },
+            React.createElement(Spin, { spinning: true, showIndicatorBackground: true }),
+            renderMessage())));
+};

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

@@ -0,0 +1,2 @@
+export { ProcessLoading } from './ProcessLoading';
+export type { ProcessLoadingProps } from './ProcessLoading';

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

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ProcessLoadingContent: 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>;

package/es/components/molecules/ProcessLoading/styled.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ProcessLoadingContent = styled(Flex) `
+  text-align: center;
+`;

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -20,13 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React from 'react';
-import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Modal } from 'antd';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Styled
 import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex, Typography, Spin, Tooltip } from '../../atoms';
+import { Button, Flex, Typography, Spin, Tooltip, Icon } from '../../atoms';
 // Constants
 import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
@@ -255,11 +254,18 @@ export const ThumbnailCard = (props) => {
             const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
             const actionSettings = actionButtons[key];
             if (actionSettings) {
-                const { buttonProps, key, customRender } = actionSettings;
+                const { buttonProps, key, customRender, onClick } = actionSettings;
                 const icon = actionSettings.icon || (option === null || option === void 0 ? void 0 : option.icon) || '';
                 const label = actionSettings.label || (option === null || option === void 0 ? void 0 : option.label) || '';
-                const ButtonComponent = (React.createElement(Tooltip, { title: label },
-                    React.createElement(Button, Object.assign({ key: key || (option === null || option === void 0 ? void 0 : option.key), type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps))));
+                const ButtonComponent = (React.createElement(Tooltip, { key: key || (option === null || option === void 0 ? void 0 : option.key), title: label },
+                    React.createElement(Button, Object.assign({ type: "primary", icon: React.createElement(Icon, { type: icon, style: { fontSize: 24, color: '#FFFFFF' } }) }, buttonProps, { onClick: e => {
+                            if (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick) {
+                                buttonProps.onClick(e);
+                            }
+                            if (onClick) {
+                                onClick(id);
+                            }
+                        } }))));
                 /**
                  * Handle custom render for action button
                  * If customRender is a function, return the function callback the ButtonComponent

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

@@ -9,6 +9,14 @@ export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
     text?: string;
     onClick?: (id: TThumbnailCardId) => void;
 };
+export type TThumbnailActionButtons<TActionKey extends string[] = []> = Partial<Record<TActionButtonKey<TActionKey>, {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: string;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+    onClick?: (id: TThumbnailCardId) => void;
+}>>;
 export interface ThumbnailCardProps<TActionKey extends string[] = []> extends Omit<HTMLAttributes<HTMLDivElement>, 'id'> {
     id: TThumbnailCardId;
     name?: string;
@@ -23,13 +31,7 @@ export interface ThumbnailCardProps<TActionKey extends string[] = []> extends Om
     actionAvailable?: boolean;
     removeModalProps?: TRemoveModalProps;
     thumbnailFit?: React.CSSProperties['objectFit'];
-    actionButtons?: Partial<Record<TActionButtonKey<TActionKey>, {
-        buttonProps?: ButtonProps;
-        key?: string;
-        label?: string;
-        icon?: string;
-        customRender?: (node: ReactNode) => ReactNode;
-    }>>;
+    actionButtons?: TThumbnailActionButtons<TActionKey>;
     thumbnailCacheValue?: string | number;
     onClickWrapper?: (id: TThumbnailCardId) => void;
 }

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

@@ -1,6 +1,6 @@
 export { AccountSelection, AccountListing, useAccountSelection } from './AccountSelection';
 export { Cascader } from './Cascader';
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
@@ -35,7 +35,6 @@ export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
-export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
@@ -53,6 +52,8 @@ export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';
+export * from './ThumbnailCard';
+export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';
@@ -62,7 +63,6 @@ export type { AlignEditProps, AlignSettingProps } from './AlignSetting';
 export type { TFontSettingProps, TFontSettingEditProps } from './FontSetting';
 export type { IResizeGridProps, TCell, TGrid } from './ResizeGrid';
 export type { ModalProps } from './ModalV2';
-export type { ThumbnailCardProps } from './ThumbnailCard';
 export type { TemplateValueOptions } from './TemplateSaveAs';
 export type { SelectProps as SelectV2Props } from './SelectV2';
 export type { InputNumberProps as InputNumberWithLabelProps } from './InputNumber';
@@ -72,3 +72,4 @@ export type { EditableNameHandle } from './EditableName';
 export type { AccountListingHandle, AccountSelectionProps } from './AccountSelection';
 export type { VirtualizedMenuProps } from './VirtualizedMenu';
 export type { SearchPopoverProps, PopoverAddFieldProps } from './SearchPopover';
+export type { InputDropdownProps } from './Dropdown';

package/es/components/molecules/index.js

@@ -1,6 +1,6 @@
 export { AccountSelection, AccountListing, useAccountSelection } from './AccountSelection';
 export { Cascader } from './Cascader';
-export { Dropdown } from './Dropdown';
+export { Dropdown, InputDropdown } from './Dropdown';
 export { Modal } from './Modal';
 export { Select } from './Select';
 export { SelectV2 } from './SelectV2';
@@ -35,7 +35,6 @@ export { FontFamilySelect } from './FontFamilySelect';
 export { TextDecorationSelect } from './TextDecorationSelect';
 export { TextTransformSelect } from './TextTransformSelect';
 export { FontSetting, FontSettingEdit } from './FontSetting';
-export { ThumbnailCard } from './ThumbnailCard';
 export { Form } from './Form';
 export { ResizeGrid } from './ResizeGrid';
 export * from './RichMenu';
@@ -53,6 +52,8 @@ export * from './EmptyData';
 export * from './PreviewModal';
 export * from './Drawer';
 export * from './DrawerDetail';
+export * from './ThumbnailCard';
+export * from './ProcessLoading';
 export { EditorScript } from './EditorScript';
 export { CalendarSelection, CalendarSelectionConstants } from './CalendarSelection';
 export { EditorTab } from './EditorTab';

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

@@ -62,7 +62,7 @@ export declare const useTemplateListing: <T = undefined>(options: TemplateListin
     similarTemplates: (TTemplateItem | undefined)[];
     templateDetail: import("@antscorp/antsomi-ui/es/models/ObjectTemplate").ObjectTemplate | undefined;
     checkedCategories: TCheckedCategories;
-    selectTemplateAction: TSelectTemplateAction | T | undefined;
+    selectTemplateAction: string | T | undefined;
     previewTemplateCategories: TCategoryItem[];
     isLoadingCategoryList: boolean;
     isLoadingTemplateList: boolean;

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

@@ -29,4 +29,4 @@ export interface TTemplateItem {
     thumbnail?: ThumbnailCardProps['thumbnail'];
     [key: string]: any;
 }
-export type TSelectTemplateAction = 'edit' | 'preview' | 'use';
+export type TSelectTemplateAction = 'edit' | 'preview' | 'use' | string;

package/es/constants/theme.js

@@ -207,6 +207,7 @@ THEME.components = {
     },
     Tooltip: {
         colorBgSpotlight: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw8,
+        fontSize: 11,
     },
     Menu: {
         itemHoverBg: '#F2F9FF',

package/package.json

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