@antscorp/antsomi-ui 1.3.7-beta.68 → 1.3.7-beta.69

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

@@ -1,4 +1,3 @@
-import { TagifyInputProps } from './types';
 export declare const DIMENSIONS: {
     readonly MIN_H_WRAPPER: 34;
     readonly TAG_H: 24;
@@ -60,7 +59,17 @@ export declare const PATTERN_CACHE_TYPE: {
 };
 export declare const SHORT_LINK_PTN: "shortlink_pattern", SHORT_LINK_INDIVIDUAL_PTN: "shortlink_individual_pattern", SHORT_LINK_GENERAL_PTN: "shortlink_general_pattern", SHORT_LINK_V2_INDIVIDUAL_PTN: "shortlink_v2_individual_pattern", SHORT_LINK_V2_GENERAL_PTN: "shortlink_v2_general_pattern", LINE_EMOJI_PTN: "line_emoji_pattern", PERSONALIZE_PTN: "personalize_pattern", VIBER_EMOJI_PTN: "viber_emoji_pattern", UNSUBSCRIBE_WHATSAPP_PTN: "unsubscribe_whatsapp_pattern", UNSUBSCRIBE_PTN: "unsubscribe_pattern";
 export declare const DEFAULT_ACCEPT_TAGS: ("shortlink_pattern" | "line_emoji_pattern" | "personalize_pattern" | "viber_emoji_pattern" | "unsubscribe_pattern")[];
-export declare const tagifyDefaultProps: TagifyInputProps;
+export declare const tagifyDefaultProps: {
+    readonly initialValue: "";
+    readonly name: "tagifyInput";
+    readonly realtime: true;
+    readonly maxHeight: 266;
+    readonly placeholder: undefined;
+    readonly minWidthPlaceholder: 130;
+    readonly acceptableTagPattern: ("shortlink_pattern" | "line_emoji_pattern" | "personalize_pattern" | "viber_emoji_pattern" | "unsubscribe_pattern")[];
+    readonly mapErrorAttributes: {};
+    readonly onChange: () => void;
+};
 export declare const TAG_TYPE: {
     readonly CUSTOMER: "customer";
     readonly VISITOR: "visitor";

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

@@ -1,5 +1,6 @@
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Types
 export const DIMENSIONS = {
     MIN_H_WRAPPER: 34,
     TAG_H: 24,

package/es/components/molecules/TagifyInput/errorWrapper.d.ts

@@ -1,2 +1,2 @@
 import { PatternHandler } from './types';
-export declare const errorWrapper: (handler: PatternHandler) => typeof handler;
+export declare const errorWrapper: (handler: PatternHandler) => PatternHandler;

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

@@ -1,6 +1,6 @@
 import type { TagifyWrapperProps } from './types';
 export declare const WrapperPlaceHolder: import("styled-components").StyledComponent<"div", any, {
-    $isShow?: boolean;
+    $isShow?: boolean | undefined;
 }, never>;
 export declare const TagifyWrapper: import("styled-components").StyledComponent<"div", any, TagifyWrapperProps, never>;
 export declare const TagInput: import("styled-components").StyledComponent<"input", any, {}, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="yaireo__tagify" />
 import Tagify, { ClassNameSettings, TagData, TagifySettings } from '@yaireo/tagify';
 import { EMOJI_COLLECTIONS, PATTERN_CACHE_TYPE, SHORT_LINK_TYPE, TAG_COLOR, TAG_STATUS, TAG_TYPE } from './constants';
 import { type CSSProperties } from 'react';
@@ -14,6 +15,10 @@ export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
+export interface TagValues {
+    listTags: TagDataCustomize[];
+    value: string;
+}
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -133,11 +138,16 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is added.
+     * Receives the tag detail as parameter, allowing custom actions on tag addition.
+     */
+    onAddTag?: (event: CustomEvent<Tagify.AddEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when a tag is removed.
      * Receives the tag detail as parameter, allowing custom actions on tag removal.
      */
-    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>, values: TagValues) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -145,15 +155,31 @@ export interface TagifyInputProps {
      * @default () => {}
      */
     onChange: (inputValue: string) => void;
+    /**
+     * Event handler triggered when the input value is blurred.
+     * Receives the updated input value as a string, allowing for controlled component updates.
+     */
+    onBlur?: (event: CustomEvent<Tagify.BlurEventData<TagDataCustomize>>) => void;
+    /**
+     * Event handler triggered when found mismatch tag properties.
+     * Receives an array of tag properties that were restored (e.g., via undo operation).
+     */
+    onRestoreTagProperty?: (tagProperties: TagProperty[]) => void;
     /**
      * Defines whether the input text is read but not the whole tags.
      */
     readonlyText?: boolean;
+    /**
+     * Tags that, when present in input, make the entire input non-editable
+     */
+    disableEditableIfContainsTags?: TagType[];
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
     onReload: (newValue: string) => void;
+    onLabelTagRefreshness: () => void;
+    getInputValues: () => TagValues;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];

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

@@ -1,5 +1,6 @@
+/// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType, TagValues } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -201,6 +202,8 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare const removeInvisibleChars: (str: string) => string;
+export declare const extractTagValues: (tagify: Tagify<TagDataCustomize>) => TagValues;
 export declare function preventUndoRedo(e: CustomEvent<Tagify.KeydownEventData<TagDataCustomize>>['detail']['event'], { disableRedo }?: {
     disableRedo?: boolean | undefined;
 }): void;

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

@@ -796,6 +796,15 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export const removeInvisibleChars = (str) => str.replace(/[\r\n\u200B-\u200D\uFEFF]/g, '');
+export const extractTagValues = (tagify) => {
+    if (!tagify)
+        return { listTags: [], value: '' };
+    return {
+        listTags: tagify.getCleanValue(),
+        value: tagify.getInputValue(),
+    };
+};
 export function preventUndoRedo(e, { disableRedo = false } = {}) {
     const key = e.key.toLowerCase();
     const isUndo = (e.ctrlKey || e.metaKey) && key === 'z';

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

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 interface ImageSliderStyledProps {
     $skeleton?: boolean;
     $smallImageWidth: number;
     $imageWidth?: number;
     $imageHeight?: number;
 }
-export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ImageSliderStyledProps, never>;
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ImageSliderStyledProps, never>;
 export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TGetTemplateCategoryList, TGetObjectTEmplateList } from '@antscorp/antsomi-ui/es/queries/TemplateListing';
 import { TTemplateListingConfig } from '@antscorp/antsomi-ui/es/types/templateListing';
@@ -39,7 +40,7 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
         [key: string]: any;
         id: string | number;
         label: string;
-        thumbnail?: string;
+        thumbnail?: string | undefined;
     }[];
     value: Partial<TemplateValueOptions>;
     setValue: import("react").Dispatch<import("react").SetStateAction<Partial<TemplateValueOptions>>>;
@@ -64,8 +65,8 @@ export declare const useTemplateSave: (options: TemplateListingOptions) => {
     };
     form: import("antd").FormInstance<FormValue>;
     errors: any[] | undefined;
-    refetchCategoryList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<TemplateCategory[], any>>;
-    refetchTemplateList: <TPageData>(options?: (import("@tanstack/query-core").RefetchOptions & import("@tanstack/query-core").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").InfiniteData<any>, any>>;
+    refetchCategoryList: <TPageData>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<TemplateCategory[], any>>;
+    refetchTemplateList: <TPageData_1>(options?: (import("@tanstack/react-query").RefetchOptions & import("@tanstack/react-query").RefetchQueryFilters<TPageData_1>) | undefined) => Promise<import("@tanstack/react-query").QueryObserverResult<import("@tanstack/react-query").InfiniteData<any>, any>>;
     onLoadMore: () => void;
     onChange: (newValue: Partial<TemplateValueOptions>) => void;
 };

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

@@ -1,3 +1,4 @@
-export declare const TemplateSaveAsStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
-    $skeleton?: boolean;
+/// <reference types="react" />
+export declare const TemplateSaveAsStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $skeleton?: boolean | undefined;
 }, never>;

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

@@ -130,8 +130,8 @@ export const TemplateSaveAsStyled = styled(Flex) `
     width: 250px;
     height: 36px;
     border: 1px solid #b8cfe6;
-    padding: 0 5px;
     border-radius: ${globalToken?.borderRadiusXL}px;
+    padding: 0 10px;
 
     & > .remove-btn {
       cursor: pointer;

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

@@ -2,7 +2,16 @@ import React from 'react';
 import { Tree as AntdTree } from 'antd';
 import type { TreeProps, TreeDataNode } from 'antd';
 declare const StandardTree: React.FC<TreeProps>;
-export declare const Tree: typeof AntdTree & {
+export declare const Tree: (<T extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: TreeProps<T> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    TreeNode: React.FC<import("rc-tree").TreeNodeProps<TreeDataNode>>;
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | TreeDataNode = TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<import("rc-tree").default<TreeDataNode>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
+    };
+} & {
     DirectoryTree: typeof AntdTree.DirectoryTree;
     Standard: typeof StandardTree;
 };

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

@@ -1,9 +1,16 @@
-export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: React.PropsWithChildren<import("antd").TreeProps<T>> & React.RefAttributes<import("rc-tree").default>) => React.ReactElement) & {
+/// <reference types="react" />
+export declare const StyledTree: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd").TreeProps<T> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     TreeNode: import("react").FC<import("rc-tree").TreeNodeProps<import("antd").TreeDataNode>>;
-    DirectoryTree: (<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: React.PropsWithChildren<import("antd/es/tree").DirectoryTreeProps<T>> & React.RefAttributes<import("rc-tree").default>) => React.ReactElement) & {
-        displayName?: string;
+    DirectoryTree: (<T_1 extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T_1> & {
+        children?: import("react").ReactNode;
+    } & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+        displayName?: string | undefined;
     };
 }, any, any, never>;
-export declare const StyledTreeDirectory: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: React.PropsWithChildren<import("antd/es/tree").DirectoryTreeProps<T>> & React.RefAttributes<import("rc-tree").default>) => React.ReactElement) & {
-    displayName?: string;
+export declare const StyledTreeDirectory: import("styled-components").StyledComponent<(<T extends import("rc-tree").BasicDataNode | import("antd").TreeDataNode = import("antd").TreeDataNode>(props: import("antd/es/tree").DirectoryTreeProps<T> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-tree").default<import("antd").TreeDataNode>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
 }, any, any, never>;

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

@@ -1,10 +1,11 @@
-export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
-    displayName?: string;
+/// <reference types="react" />
+export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
     TreeNode: import("react").FC<import("rc-tree-select/lib/TreeNode").TreeNodeProps>;
-    SHOW_ALL: typeof import("rc-tree-select").SHOW_ALL;
-    SHOW_PARENT: typeof import("rc-tree-select").SHOW_PARENT;
-    SHOW_CHILD: typeof import("rc-tree-select").SHOW_CHILD;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    SHOW_ALL: "SHOW_ALL";
+    SHOW_PARENT: "SHOW_PARENT";
+    SHOW_CHILD: "SHOW_CHILD";
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 };

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

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const TextStyled: import("styled-components").StyledComponent<import("react").FC<import("../../atoms/Text").TextProps>, any, {}, never>;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { List } from 'antd';
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LogoContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MediaMode } from '.';
+export interface MediaThumbProps {
+    mode: MediaMode;
+    media: any;
+}
+declare const _default: React.NamedExoticComponent<MediaThumbProps>;
+export default _default;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Libraries
+import { lazy, Suspense, memo } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+// Styled
+import { Image } from './styled';
+const LazyVideoThumbnail = lazy(() => import('./VideoThumbnail'));
+const MediaThumb = props => {
+    const { mode, media } = props;
+    if (mode === 'image')
+        return _jsx(Image, { src: media.url, alt: "img" });
+    return (_jsx(Suspense, { fallback: _jsx(Image, { src: PlaceholderImage, alt: "img" }), children: _jsx(LazyVideoThumbnail, { mode: mode, media: media }) }));
+};
+export default memo(MediaThumb);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MediaThumbProps } from './MediaThumb';
+declare const VideoThumbnail: React.FC<MediaThumbProps>;
+export default VideoThumbnail;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable jsx-a11y/media-has-caption */
+// Libraries
+import { useState, useEffect, useRef } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+// Styled
+import { Image } from './styled';
+const VideoThumbnail = props => {
+    const { mode, media } = props;
+    const [isShow, setIsShow] = useState(false);
+    // Refs
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const video = videoRef.current;
+        const dimension = 400;
+        let listener = () => { };
+        if (media && media.url && mode === 'video') {
+            const context = canvas?.getContext('2d');
+            if (canvas && video && context) {
+                listener = () => {
+                    context.drawImage(video, 0, 0, dimension, dimension);
+                    setIsShow(true);
+                };
+                video.addEventListener('loadeddata', listener);
+                // Set the preload time range
+                video.currentTime = 2;
+                // Start loading the video from the specified time
+                video.load();
+            }
+        }
+        return () => {
+            video?.removeEventListener('loadeddata', listener);
+        };
+    }, [media, mode]);
+    return (_jsxs("div", { style: { width: '100%', height: '100%' }, children: [_jsx("video", { loop: false, muted: true, controls: false, width: 400, height: 400, ref: videoRef, style: { display: 'none' }, preload: "metadata", children: _jsx("source", { src: media?.url, type: "video/mp4" }) }), _jsx("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: isShow ? 'block' : 'none' } }), _jsx(Image, { src: PlaceholderImage, alt: "placeholder", style: { display: isShow ? 'none' : 'block' } })] }));
+};
+export default VideoThumbnail;

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

@@ -7,7 +7,7 @@ export declare const WrapperBtn: import("styled-components").StyledComponent<"di
 export declare const Paragraph: import("styled-components").StyledComponent<"p", any, {}, never>;
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperInputMode: import("styled-components").StyledComponent<"div", any, {
-    width?: CSSProperties["width"];
+    width?: CSSProperties['width'];
 }, never>;
 export declare const WrapperIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -42,9 +42,8 @@ export const WrapperBtn = styled.div `
   z-index: 3;
   gap: 15px;
   opacity: 0;
-  transition-property:
-    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-    transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;
@@ -63,9 +62,8 @@ export const Overlay = styled.div `
   z-index: 2;
   background-color: ${THEME.token?.bgLightTransparent};
   opacity: 0;
-  transition-property:
-    color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow,
-    transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter;
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 `;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { MODE } from './config';
 export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     items: import("./types").ItemType[];
     inlineIndent: number;
@@ -13,12 +12,12 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;
-        domEvent?: React.MouseEvent;
+        domEvent?: React.MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
     action: React.ReactNode | ((item: import("./types").ItemType, others: {
         expandEl: React.ReactNode;
     }) => React.ReactNode);
 }> & {
-    mode?: typeof MODE.Inline;
+    mode?: "inline" | undefined;
 } & React.RefAttributes<import("./types").VirtualizedMenuBaseHandle>>;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/MenuInline.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const MenuInline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Partial<{
     items: import("../../types").ItemType[];
     inlineIndent: number;
@@ -11,12 +12,12 @@ export declare const MenuInline: import("react").MemoExoticComponent<import("rea
     expanded: string[];
     onClick: (args: {
         item: import("../../types").ItemType;
-        domEvent?: React.MouseEvent;
+        domEvent?: import("react").MouseEvent<Element, MouseEvent> | undefined;
         elKey: "item" | "item-expand-el";
     }) => void;
-    action: React.ReactNode | ((item: import("../../types").ItemType, others: {
-        expandEl: React.ReactNode;
-    }) => React.ReactNode);
+    action: import("react").ReactNode | ((item: import("../../types").ItemType, others: {
+        expandEl: import("react").ReactNode;
+    }) => import("react").ReactNode);
 }> & {
-    mode?: "inline";
+    mode?: "inline" | undefined;
 } & import("react").RefAttributes<import("../../types").VirtualizedMenuBaseHandle>>>;

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useFocusManagement.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VariableSizeList } from 'react-window';
 import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
 import { ItemType } from '../../../types';

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useItemInteraction.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
 import { ItemType, MenuInlineProps } from '../../../types';
 export interface UseItemInteractionReturn {

package/es/components/molecules/VirtualizedMenu/components/MenuInline/hooks/useKeyboardNavigation.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { NormalizedNode } from '@antscorp/antsomi-ui/es/utils/tree';
 import { ItemType, MenuInlineProps } from '../../../types';
 export interface UseKeyboardNavigationReturn {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { MemoryData } from './types';

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

@@ -1,3 +1,4 @@
+/// <reference types="lodash" />
 import { ItemType } from './types';
 import { NormalizedTreeState } from '@antscorp/antsomi-ui/es/utils/tree';
 export declare const itemToTreeNode: (item: ItemType) => any;

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

@@ -56,8 +56,8 @@ export { UnsubscribePreferences } from './UnsubscribePreferences';
 export { UnsubscribePreview } from './UnsubscribePreview';
 export * from './EmptyData';
 export * from './PreviewModal';
-export * from './DrawerDetail';
 export * from './Drawer';
+export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export * from './Tree';
@@ -76,8 +76,8 @@ export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';
-export { ImagePreview } from './ImagePreview';
 export { QuillEditor } from './QuillEditor';
+export { ImagePreview } from './ImagePreview';
 export type { AdvancedPickerProps, TAdvancedPickerOption, TAdvancedRangePickerTimeRange, } from './DatePicker';
 export type { ColorPickerProps } from './ColorPicker';
 export type { AlignEditProps, AlignSettingProps } from './AlignSetting';

package/es/components/molecules/index.js

@@ -55,8 +55,8 @@ export { UnsubscribePreferences } from './UnsubscribePreferences';
 export { UnsubscribePreview } from './UnsubscribePreview';
 export * from './EmptyData';
 export * from './PreviewModal';
-export * from './DrawerDetail';
 export * from './Drawer';
+export * from './DrawerDetail';
 export * from './ThumbnailCard';
 export * from './ProcessLoading';
 export * from './Tree';
@@ -75,5 +75,5 @@ export * from './ItemNotFound';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';
-export { ImagePreview } from './ImagePreview';
 export { QuillEditor } from './QuillEditor';
+export { ImagePreview } from './ImagePreview';

package/es/components/organism/AccountProfile/components/AccountSetting/AccountSetting.js

@@ -87,10 +87,11 @@ export const AccountSetting = memo(forwardRef((props, ref) => {
         const accountInfo = await getAccountDetail().finally(() => {
             setLoading(false);
         });
+        const isValidDate = dayjs(accountInfo.birthday).isValid();
         if (accountInfo) {
             setForm({
                 ...accountInfo,
-                birthday: dayjs(accountInfo.birthday),
+                birthday: isValidDate ? dayjs(accountInfo.birthday) : null,
                 initDone: true,
             });
             setOriginEmail(accountInfo.email);

package/es/components/organism/AccountProfile/components/AccountSetting/components/EditableInput/constant.js

@@ -2,7 +2,7 @@ export const appConfig = {
     FILE_UPLOAD_ERROR: {
         INVALID_FILE_TYPE: 'INVALID_FILE_TYPE',
         INVALID_FILE_SIZE: 'INVALID_FILE_SIZE',
-        INVALID_FILE_DIMENSION: 'INVALID_FILE_DIMENSION',
+        INVALID_FILE_DIMENSION: 'INVALID_FILE_DIMENSION'
     },
     DEFAULT_KEY: {
         ID: 'ID',
@@ -59,6 +59,6 @@ export const appConfig = {
         'g2fa code invalid': 'g2fa code invalid',
         'Password is wrong': 'Password is wrong',
         'Invalid password': 'Invalid password',
-        NO_FILE_CHOSEN: 'No file chosen',
-    },
+        NO_FILE_CHOSEN: 'No file chosen'
+    }
 };

package/es/components/organism/AccountProfile/components/AccountSetting/components/EditableInput/index.js

@@ -23,7 +23,7 @@ const defaultProps = {
 };
 const EditableInput = props => {
     const [isEditing, setIsEditting] = useState(props.isEditing);
-    const { iamDomain, fieldName, type = 'text', value, maxLength = 1000, minLength = 0, placeholder, isUpdate, onChange, onBlur, handleUpdateField, handleUpdatePassword, isDisabled, isDisabledEdit, autoComplete, accountId, token, apiEndpoint, g2fa, style, isPreview: isPreviewInput, lastChangePass, errorMsg, setLoading: setLoadingPage, } = props;
+    const { iamDomain, fieldName, type = 'text', value, maxLength = 1000, minLength = 0, placeholder, isUpdate, onChange, onBlur, handleUpdateField, handleUpdatePassword, isDisabled, isDisabledEdit, autoComplete, accountId, token, apiEndpoint, g2fa, style, isPreview: isPreviewInput, lastChangePass, errorMsg, setLoading: setLoadingPage } = props;
     const isPreview = isPreviewInput || isDisabledEdit;
     const [loading, setLoading] = useState(false);
     const [openChangePass, setOpenChangePass] = useState(false);

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.d.ts

@@ -1,10 +1,11 @@
-export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").BaseOptionType | import("rc-select/lib/Select").DefaultOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
-    children?: React.ReactNode;
-} & React.RefAttributes<import("rc-select").BaseSelectRef>) => React.ReactElement) & {
+/// <reference types="react" />
+export declare const StyledSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").SelectProps<ValueType, OptionType> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("rc-select").BaseSelectRef>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
     SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
     Option: import("rc-select/lib/Option").OptionFC;
     OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 } & import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Select").SelectProps>, any, {}, never>;
-export declare const StyledSelectOption: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledSelectOption: import("styled-components").StyledComponent<any, any, object, string | number | symbol>;

package/es/components/organism/AccountProfile/components/AccountSetting/components/LanguageSelector/styles.js

@@ -14,7 +14,7 @@ export const StyledSelect = styled(Select) `
     background: url('~Assets/images/langs/vietnam.png') no-repeat;
   }
 `;
-export const StyledSelectOption = styled(Typography.Text) `
+export const StyledSelectOption = styled(Typography) `
   display: flex !important;
   justify-content: flex-start;
   align-items: center;

package/es/components/organism/AccountProfile/components/AccountSetting/styled.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AccountDetail: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DrawerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledRadioGroup: import("styled-components").StyledComponent<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("antd").RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>>, any, {}, never>;

package/es/components/organism/AccountProfile/components/AccountSetting/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface AccountSettingProps {
     iamDomain: string;
     token: string;

package/es/components/organism/AccountProfile/components/AccountSetting/types.js

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