@antscorp/antsomi-ui 1.3.5-beta.4 → 1.3.5-beta.6

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -1,8 +1,8 @@
 import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-provider';
 import React, { ReactNode } from 'react';
-import 'animate.css';
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
+import 'animate.css';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -19,7 +19,6 @@ import localeData from 'dayjs/plugin/localeData';
 /** dayjs plugins for timezone */
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
-import 'animate.css';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Style
@@ -28,6 +27,7 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+import 'animate.css';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);

package/es/components/molecules/DatePicker/components/AdvancedPicker/AdvancedPicker.js

@@ -10,7 +10,7 @@ import { useDeepCompareEffect } from '../../../../../hooks';
 import Icon from '@antscorp/icons';
 import { EventIcon } from '../../../../icons';
 // Components
-import { Input, InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { InputNumber, Divider, Space, Button, Typography, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Select, Dropdown } from '@antscorp/antsomi-ui/es/components';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
@@ -18,7 +18,7 @@ import { DropdownLabel } from '../DropdownLabel/DropdownLabel';
 import { handleError, reorder } from '@antscorp/antsomi-ui/es/utils';
 import { calculationDateAdvanced, getCellRender, getFormatDisplay, getPickerRender, getTimePickerRender, } from './utils';
 // Styled
-import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, } from './styled';
+import { DatePickerCustomInput, DatePickerHeader, DropdownContent, DropdownHeader, DatePickerFooter, DropdownFooter, CalendarIconWrapper, InputStyled, } from './styled';
 // Constants
 import { CALCULATION_DATES, CALCULATION_TYPES, DATE_TYPES, DEFAULT_DATE_FORMAT, VALUE_TYPES, ADVANCED_PICKER_TYPE, WEEK_ARR, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, DAY_LABEL_SHORT, MONTH_LABEL_FULL, DAY_OF_MONTH, ANCHOR_LEAP_YEAR, GRANULARITY_MAPPING, } from './constants';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
@@ -413,10 +413,10 @@ export const AdvancedPicker = props => {
             // }}
             overlayStyle: { width: 'fit-content', minWidth: 'auto' } },
             React.createElement(Tooltip, { title: selectedDateTitle },
-                React.createElement(Input, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
+                React.createElement(InputStyled, { disabled: disabled, onClick: () => toggleOpenDropdown(), readOnly: true, suffix: React.createElement(CalendarIconWrapper, { style: {
                             pointerEvents: disabled ? 'none' : 'all',
                         }, onClick: () => toggleOpenDropdown() },
-                        React.createElement(EventIcon, { width: 19, height: 19 })), style: inputStyle, value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
+                        React.createElement(EventIcon, { width: 19, height: 19 })), style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), value: selectedDateTitle, status: errorMessage ? 'error' : '' }))))));
 };
 AdvancedPicker.defaultProps = {
     label: '',

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

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 export declare const DropdownContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 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 DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.js

@@ -1,7 +1,8 @@
 var _a, _b, _c, _d, _e;
 // Libraries
-import { THEME } from '../../../../../constants';
 import styled from 'styled-components';
+import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
+import { THEME } from '../../../../../constants';
 export const DropdownContent = styled.div `
   width: 250px;
   padding: 10px 10px 0px 10px;
@@ -80,6 +81,12 @@ export const DatePickerHeader = styled.div `
 export const DatePickerCustomInput = styled.input `
   font-family: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.fontFamily};
   color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw10} !important;
+  text-overflow: ellipsis;
+`;
+export const InputStyled = styled(Input) `
+  input {
+    text-overflow: ellipsis;
+  }
 `;
 export const DatePickerFooter = styled.div `
   position: absolute;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
@@ -12,6 +12,7 @@ export interface AdvancedRangePickerProps {
     showLabel?: boolean;
     showTime?: boolean;
     timezone?: string;
+    separator?: ReactNode;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -54,8 +54,9 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    return (React.createElement(Space, { size: 20 },
+    return (React.createElement(Space, { size: 20, align: "end" },
         React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        separator || null,
         React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
 };
 AdvancedRangePicker.defaultProps = {

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ThumbnailCardProps } from './types';
+export declare const ThumbnailCard: React.FC<ThumbnailCardProps>;

package/es/components/{template/TemplateListing/components/TemplateItem/index.js → molecules/ThumbnailCard/ThumbnailCard.js}

@@ -23,16 +23,17 @@ import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 import { Modal } from 'antd';
 // Styled
-import { TemplateItemWrapper } from './styled';
+import { ThumbnailCardWrapper } from './styled';
 // Components
-import { Button, Flex } from '../../../../atoms';
-import { TEMPLATE_ITEM_HEIGHT, TEMPLATE_ITEM_WIDTH } from '../../constants';
-export const TemplateItem = memo(props => {
+import { Button, Flex, Typography } from '../../atoms';
+// Constants
+import { THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH } from './constants';
+export const ThumbnailCard = memo(props => {
     const [modal, contextHolder] = Modal.useModal();
-    const { id, width = TEMPLATE_ITEM_WIDTH, height = TEMPLATE_ITEM_HEIGHT, thumbnail, removable = true, onClickEdit, onClickPreview, removeTemplateModalProps, } = props;
-    const _a = removeTemplateModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
+    const { id, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, removable = true, editText = 'Edit thumbnail', previewText = 'Preview', onClickEdit, onClickPreview, removeModalProps, } = props;
+    const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
     // Handlers
-    const handleRemoveTemplate = () => {
+    const handleRemoveThumbnail = () => {
         modal.confirm(Object.assign(Object.assign({ title: 'Remove Template', centered: true, icon: React.createElement(Icon, { type: "icon-ants-info", style: { fontSize: 16, lineHeight: '25px' } }), content: (React.createElement("div", null,
                 React.createElement("p", null, "Are you sure you want to remove the template?"),
                 React.createElement("p", null, "This action cant not be undone."))), okText: 'Remove', cancelText: 'Cancel', closable: true }, restOfRemoveTemplateModalProps), { onOk: () => __awaiter(void 0, void 0, void 0, function* () {
@@ -40,14 +41,16 @@ export const TemplateItem = memo(props => {
                     onOk(id);
             }) }));
     };
-    return (React.createElement(TemplateItemWrapper, { style: { width, height } },
+    return (React.createElement(ThumbnailCardWrapper, { style: { width, height } },
         React.createElement("div", { className: "screen" }, thumbnail && React.createElement("img", { src: thumbnail, alt: "" })),
         React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
-            React.createElement(Button, { type: "primary", className: "animate__animated animate__fadeIn", onClick: () => onClickEdit && onClickEdit(id) }, "Edit template"),
-            React.createElement(Button, { className: "animate__animated animate__fadeIn", onClick: () => onClickPreview && onClickPreview(id) }, "Preview")),
+            React.createElement(Button, { type: "primary", className: "animate__animated animate__fadeIn", onClick: () => onClickEdit && onClickEdit(id) },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText)),
+            React.createElement(Button, { className: "animate__animated animate__fadeIn", onClick: () => onClickPreview && onClickPreview(id) },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
         removable && (React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
-            React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveTemplate }))),
+            React.createElement(Button, { type: "primary", icon: React.createElement(Icon, { type: "icon-ants-trash-outline", style: { fontSize: 24, color: '#FFFFFF' } }), onClick: handleRemoveThumbnail }))),
         React.createElement("div", { className: "backdrop" }),
         React.createElement("div", null, contextHolder)));
 });
-TemplateItem.displayName = 'TemplateItem';
+ThumbnailCard.displayName = 'ThumbnailCard';

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

@@ -0,0 +1,3 @@
+export declare const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
+export declare const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";

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

@@ -0,0 +1,3 @@
+export const THUMBNAIL_CARD_DEFAULT_WIDTH = 200;
+export const THUMBNAIL_CARD_DEFAULT_HEIGHT = 200;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';

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

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

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

@@ -0,0 +1,2 @@
+export { ThumbnailCard } from './ThumbnailCard';
+export * from './types';

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

@@ -0,0 +1 @@
+export declare const ThumbnailCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/{template/TemplateListing/components/TemplateItem → molecules/ThumbnailCard}/styled.js

@@ -1,17 +1,23 @@
+// Libraries
 import styled from 'styled-components';
-// Constants
-const SKELETON_BACKGROUND = '/images/background/skeleton-background.png';
-const TEMPLATE_ITEM_RADIUS = 5;
-export const TemplateItemWrapper = styled.div `
+// Images
+import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
+const THUMBNAIL_CARD_RADIUS = 5;
+export const ThumbnailCardWrapper = styled.div `
   background-color: #e5e5e5;
   padding: 10px;
-  border-radius: ${TEMPLATE_ITEM_RADIUS}px;
+  border-radius: ${THUMBNAIL_CARD_RADIUS}px;
   position: relative;
   box-sizing: border-box;
 
   :hover {
     .center-action {
       display: flex;
+      max-width: 90%;
+
+      button {
+        max-width: 100%;
+      }
     }
 
     .top-right-corner-action {
@@ -26,7 +32,7 @@ export const TemplateItemWrapper = styled.div `
   .screen {
     width: 100%;
     height: 100%;
-    background-image: url(${SKELETON_BACKGROUND});
+    background-image: url(${skeletonBackground});
 
     img {
       width: 100%;
@@ -68,7 +74,7 @@ export const TemplateItemWrapper = styled.div `
   }
 
   .backdrop {
-    border-radius: ${TEMPLATE_ITEM_RADIUS}px;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
     position: absolute;
     width: 100%;
     height: 100%;

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

@@ -0,0 +1,17 @@
+import { ModalFuncProps } from 'antd';
+export type TThumbnailCardId = string | number;
+export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
+    onOk?: (id: TThumbnailCardId) => void;
+};
+export interface ThumbnailCardProps {
+    id: TThumbnailCardId;
+    width?: number;
+    height?: number;
+    thumbnail?: string;
+    removable?: boolean;
+    editText?: string;
+    previewText?: string;
+    removeModalProps?: TRemoveModalProps;
+    onClickEdit?: (id: TThumbnailCardId) => void;
+    onClickPreview?: (id: TThumbnailCardId) => void;
+}

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

@@ -30,6 +30,7 @@ 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';
@@ -43,3 +44,4 @@ 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';

package/es/components/molecules/index.js

@@ -30,6 +30,7 @@ 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';

package/es/components/template/TemplateListing/components/BlankTemplate/index.js

@@ -2,16 +2,16 @@
 import React, { memo } from 'react';
 import Icon from '@antscorp/icons';
 // Components
-import { Button, Flex } from '../../../../atoms';
+import { Button, Flex, Typography } from '../../../../atoms';
 // Styled
 import { BlankTemplateWrapper } from './styled';
 export const BlankTemplate = memo(props => {
-    const { width, height, show, description, onButtonClick } = props;
-    return show ? (React.createElement(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center" },
-        React.createElement(Flex, { align: "center", justify: "center", gap: 10, vertical: true },
-            React.createElement(Button, { type: "text", className: "add-blank-btn", icon: React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }), onClick: onButtonClick }),
+    const { width, height, show, description = 'Blank Template', blankTemplateRender, onClick, } = props;
+    const BlankTemplateNode = (React.createElement(BlankTemplateWrapper, { style: { width, height }, align: "center", justify: "center", onClick: onClick },
+        React.createElement(Flex, { align: "center", justify: "center", gap: 10, vertical: true, style: { width: '100%' } },
+            React.createElement(Button, { type: "text", className: "add-blank-btn", icon: React.createElement(Icon, { type: "icon-ants-plus-slim", style: { fontSize: 24 } }) }),
             React.createElement("div", { className: "description" },
-                " ",
-                description || 'Blank Template')))) : null;
+                React.createElement(Typography.Text, { ellipsis: { tooltip: description }, style: { maxWidth: '100%', color: 'inherit' } }, description)))));
+    return show ? (blankTemplateRender ? (React.createElement(React.Fragment, null, blankTemplateRender(BlankTemplateNode))) : (BlankTemplateNode)) : null;
 });
 BlankTemplate.displayName = 'BlankTemplate';

package/es/components/template/TemplateListing/components/BlankTemplate/styled.js

@@ -6,6 +6,7 @@ export const BlankTemplateWrapper = styled(Flex) `
   box-sizing: border-box;
   border: 1px solid #b8cfe6;
   border-radius: 5px;
+  cursor: pointer;
 
   .add-blank-btn {
     width: 50px !important;
@@ -20,5 +21,6 @@ export const BlankTemplateWrapper = styled(Flex) `
 
   .description {
     font-weight: 700;
+    max-width: 90%;
   }
 `;

package/es/components/template/TemplateListing/components/CategoryListing/index.js

@@ -24,7 +24,7 @@ import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { CATEGORY_LISTING_WITH } from '../../constants';
 const PATH = 'src/components/template/TemplateListing/components/CategoryListing/index.tsx';
 export const CategoryListing = memo(props => {
-    const { width = CATEGORY_LISTING_WITH, items, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "checkedCategories", "onMenuChange"]);
+    const { width = CATEGORY_LISTING_WITH, items = [], visible = true, checkedCategories = {}, onMenuChange } = props, restOfProps = __rest(props, ["width", "items", "visible", "checkedCategories", "onMenuChange"]);
     // Handlers
     const handleClickMenu = e => {
         var _a;
@@ -97,7 +97,7 @@ export const CategoryListing = memo(props => {
         });
         return menuItems;
     }, [getItem, items]);
-    return (React.createElement(MenuWrapper, { "$width": width },
-        React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: '#595959' } }), onClick: handleClickMenu }, restOfProps))));
+    return visible ? (React.createElement(MenuWrapper, { "$width": width },
+        React.createElement(Menu, Object.assign({ items: menuItems, inlineIndent: 0, mode: "inline", expandIcon: React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: 20, color: '#595959' } }), onClick: handleClickMenu }, restOfProps)))) : null;
 });
 CategoryListing.displayName = 'CategoryListing';

package/es/components/template/TemplateListing/components/CategoryListing/styled.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export const MenuWrapper = styled.div `
-  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')} !important;
+  width: ${({ $width }) => ($width !== undefined ? `${$width}px` : 'auto')};
   overflow: auto;
 
   .antsomi-menu {
@@ -9,7 +9,7 @@ export const MenuWrapper = styled.div `
     .antsomi-menu-submenu {
       .antsomi-menu-submenu-title,
       .antsomi-menu-item {
-        padding-left: 10px !important;
+        padding-left: 10px;
       }
     }
   }

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { MenuProps } from 'antd';
+import { TCategoryItemId } from '../../types';
 export type TMenuItem = Required<MenuProps>['items'][number];
 export type TItem = {
-    key: string;
+    key: TCategoryItemId;
     label: React.ReactNode | string;
     total?: number;
     children?: TItem[];

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

@@ -1,3 +1,2 @@
-export { TemplateItem } from './TemplateItem';
 export { BlankTemplate } from './BlankTemplate';
 export { CategoryListing } from './CategoryListing';

package/es/components/template/TemplateListing/components/index.js

@@ -1,3 +1,2 @@
-export { TemplateItem } from './TemplateItem';
 export { BlankTemplate } from './BlankTemplate';
 export { CategoryListing } from './CategoryListing';

package/es/components/template/TemplateListing/constants/defaultProps.d.ts

@@ -1,8 +1,10 @@
-import { BlankTemplateProps, CategoryListingProps, TemplateItemProps, TemplateListingProps } from '../types';
+import { ThumbnailCardProps } from '../../../molecules';
+import { BlankTemplateProps, CategoryListingProps, TemplateListingProps } from '../types';
 export declare const TEMPLATE_ITEM_WIDTH = 200;
 export declare const TEMPLATE_ITEM_HEIGHT = 200;
 export declare const CATEGORY_LISTING_WITH = 220;
-export declare const TEMPLATE_ITEM_DEFAULT: Omit<TemplateItemProps, 'id'>;
+export declare const THUMBNAIL_URL = "https://st-media-template.antsomi.com/base64-img/37563.png";
+export declare const TEMPLATE_ITEM_DEFAULT: Omit<ThumbnailCardProps, 'id'>;
 export declare const BLANK_TEMPLATE_DEFAULT: BlankTemplateProps;
 export declare const CATEGORY_LISTING_DEFAULT: Omit<CategoryListingProps, 'items'>;
 export declare const TEMPLATE_LISTING_DEFAULT: TemplateListingProps;

package/es/components/template/TemplateListing/constants/defaultProps.js

@@ -1,6 +1,7 @@
 export const TEMPLATE_ITEM_WIDTH = 200;
 export const TEMPLATE_ITEM_HEIGHT = 200;
 export const CATEGORY_LISTING_WITH = 220;
+export const THUMBNAIL_URL = 'https://st-media-template.antsomi.com/base64-img/37563.png';
 export const TEMPLATE_ITEM_DEFAULT = {
     width: TEMPLATE_ITEM_WIDTH,
     height: TEMPLATE_ITEM_HEIGHT,
@@ -9,6 +10,7 @@ export const TEMPLATE_ITEM_DEFAULT = {
 export const BLANK_TEMPLATE_DEFAULT = { show: false };
 export const CATEGORY_LISTING_DEFAULT = {
     width: CATEGORY_LISTING_WITH,
+    visible: true,
     checkedCategories: {},
     onMenuChange: () => { },
 };

package/es/components/template/TemplateListing/index.js

@@ -1,21 +1,22 @@
 // Libraries
 import React, { memo } from 'react';
 // Components
-import { CategoryListing, TemplateItem, BlankTemplate } from './components';
+import { CategoryListing, BlankTemplate } from './components';
 import { Flex, Typography } from '../../atoms';
+import { ThumbnailCard } from '../../molecules';
 // Constants
 import { BLANK_TEMPLATE_DEFAULT, TEMPLATE_ITEM_DEFAULT, TEMPLATE_LISTING_DEFAULT, TEMPLATE_ITEM_HEIGHT, TEMPLATE_ITEM_WIDTH, CATEGORY_LISTING_DEFAULT, } from './constants';
 // Styled
 import { TemplateListingWrapper } from './styled';
 export const TemplateListing = memo(props => {
-    const { templateItems, categoryItems, templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, } = props;
+    const { templateItems = [], categoryItems = [], templateItemProps = TEMPLATE_ITEM_DEFAULT, blankTemplateProps = BLANK_TEMPLATE_DEFAULT, categoryListingProps = CATEGORY_LISTING_DEFAULT, } = props;
     const { width = TEMPLATE_ITEM_WIDTH, height = TEMPLATE_ITEM_HEIGHT } = templateItemProps;
     return (React.createElement(TemplateListingWrapper, null,
         React.createElement(CategoryListing, Object.assign({ items: categoryItems }, categoryListingProps, { className: `category-listing ${(categoryListingProps === null || categoryListingProps === void 0 ? void 0 : categoryListingProps.className) || ''}` })),
         React.createElement(Flex, { gap: 30, wrap: "wrap", style: { padding: '15px' }, className: "template-listing" },
             React.createElement(BlankTemplate, Object.assign({ width: width, height: height }, blankTemplateProps)), templateItems === null || templateItems === void 0 ? void 0 :
             templateItems.map(({ key, name, thumbnail }) => (React.createElement(Flex, { key: key, vertical: true, gap: 10 },
-                React.createElement(TemplateItem, Object.assign({ id: key, thumbnail: thumbnail }, templateItemProps)),
+                React.createElement(ThumbnailCard, Object.assign({ id: key, thumbnail: thumbnail }, templateItemProps)),
                 React.createElement(Typography.Text, { ellipsis: { tooltip: name }, style: { maxWidth: '100%' } }, name)))))));
 });
 TemplateListing.displayName = 'TemplateListing';

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

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export interface BlankTemplateProps {
     width?: number;
     height?: number;
     show?: boolean;
     description?: string;
-    onButtonClick?: React.MouseEventHandler<HTMLElement>;
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    blankTemplateRender?: (node: ReactNode) => ReactNode;
 }

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

@@ -1,15 +1,17 @@
 /// <reference types="react" />
 import { MenuProps } from 'antd';
 export type TCheckedCategories = Record<string | number, (string | number)[]>;
+export type TCategoryItemId = string | number;
 export interface CategoryListingProps extends MenuProps {
     items: TCategoryItem[];
     width?: number;
+    visible?: boolean;
     checkedCategories?: TCheckedCategories;
     onMenuChange?: (value: TCheckedCategories) => void;
 }
 export type TMenuItem = Required<MenuProps>['items'][number];
 export type TCategoryItem = {
-    key: string;
+    key: TCategoryItemId;
     label: React.ReactNode | string;
     total?: number;
     children?: TCategoryItem[];

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

@@ -1,15 +1,16 @@
+import { ThumbnailCardProps } from '../../../molecules';
+import { TThumbnailCardId } from '../../../molecules/ThumbnailCard';
 import { BlankTemplateProps } from './BlankTemplate';
 import { CategoryListingProps } from './CategoryListing';
-import { TemplateItemProps } from './TemplateItem';
 export interface TemplateListingProps {
-    templateItems: TTemplateItem[];
-    categoryItems: CategoryListingProps['items'];
-    templateItemProps?: Omit<TemplateItemProps, 'id' | 'thumbnail'>;
+    templateItems?: TTemplateItem[];
+    categoryItems?: CategoryListingProps['items'];
+    templateItemProps?: Omit<ThumbnailCardProps, 'id' | 'thumbnail'>;
     categoryListingProps?: Omit<CategoryListingProps, 'items'>;
     blankTemplateProps?: Omit<BlankTemplateProps, 'width' | 'height'>;
 }
 export interface TTemplateItem {
     name: string;
-    key: string;
-    thumbnail?: TemplateItemProps['thumbnail'];
+    key: TThumbnailCardId;
+    thumbnail?: ThumbnailCardProps['thumbnail'];
 }

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

@@ -1,4 +1,3 @@
 export * from './CategoryListing';
-export * from './TemplateItem';
 export * from './BlankTemplate';
 export * from './TemplateListing';

package/es/components/template/TemplateListing/types/index.js

@@ -1,4 +1,3 @@
 export * from './CategoryListing';
-export * from './TemplateItem';
 export * from './BlankTemplate';
 export * from './TemplateListing';

package/es/locales/en/translation.json

@@ -14,8 +14,8 @@
             "firstDayOfMonth": "First day of this month",
             "firstDayOfQuarter": "First day of this quarter",
             "firstDayOfYear": "First day of this year",
-            "lastDayOfWeekMonSun": "First day of this week (Mon - Sun)",
-            "lastDayOfWeekSunSat": "First day of this week (Sun - Sat)",
+            "lastDayOfWeekMonSun": "Last day of this week (Mon - Sun)",
+            "lastDayOfWeekSunSat": "Last day of this week (Sun - Sat)",
             "lastDayOfMonth": "Last day of this month",
             "lastDayOfQuarter": "Last day of this quarter",
             "lastDayOfYear": "Last day of this year",

package/package.json

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

package/es/components/template/TemplateListing/components/TemplateItem/index.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { TemplateItemProps } from '../../types';
-export declare const TemplateItem: React.FC<TemplateItemProps>;

package/es/components/template/TemplateListing/components/TemplateItem/styled.d.ts

@@ -1 +0,0 @@
-export declare const TemplateItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,14 +0,0 @@
-import { ModalFuncProps } from 'antd';
-export type TTemplateItemId = string | number;
-export interface TemplateItemProps {
-    id: TTemplateItemId;
-    width?: number;
-    height?: number;
-    thumbnail?: string;
-    removable?: boolean;
-    onClickEdit?: (id: TTemplateItemId) => void;
-    onClickPreview?: (id: TTemplateItemId) => void;
-    removeTemplateModalProps?: Omit<ModalFuncProps, 'onOk'> & {
-        onOk?: (id: TTemplateItemId) => void;
-    };
-}