@antscorp/antsomi-ui 2.0.2 → 2.0.4

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

@@ -311,7 +311,7 @@ export const UploadImage = props => {
                 React.createElement(Input, { label: mode === 'video' ? 'Video URL' : 'Image URL', required: required, placeholder: placeholder, value: selectedMedia.url ? selectedMedia.url : '', focused: focused, onAfterChange: value => handleSelectMedia({
                         url: value,
                     }) }))))),
-        React.createElement(Modal, { title: labelModalDelete, visible: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
+        React.createElement(Modal, { title: labelModalDelete, open: isOpenConfirmDelete, onOk: () => handleRemoveUploadedMedia(deleteMediaRef.current, false), onCancel: () => setOpenConfirmDelete(prev => !prev), okText: "OK", cancelText: "Cancel", destroyOnClose: true },
             React.createElement("p", null,
                 "Are you sure you want to delete ", (_d = deleteMediaRef.current) === null || _d === void 0 ? void 0 :
                 _d.name,

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

@@ -7,7 +7,6 @@ export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -60,6 +59,7 @@ export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
 export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/molecules/index.js

@@ -7,7 +7,6 @@ export { SelectV2 } from './SelectV2';
 export { DatePicker } from './DatePicker';
 export { ChatBox, ChatBoxInsight } from './ChatBox';
 export { PopupDraggable } from './PopupDraggable';
-export { Tabs } from './Tabs';
 export { CaptureScreen } from './CaptureScreen';
 export { SettingWrapper } from './SettingWrapper';
 export { ColorPicker } from './ColorPicker';
@@ -60,6 +59,7 @@ export * from './Tree';
 export * from './MatchAnySelect';
 export * from './ApplyPopupContent';
 export * from './AccessDenied';
+export * from './Tabs';
 export { EditorScript } from './EditorScript';
 export { EditorTab } from './EditorTab';
 export { SelectAccount } from './SelectAccount';

package/es/components/organism/AlgorithmsSetting/styled.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { ContentSourceModeView } from '../ContentSources/types';
 export declare const AlgorithmsSettingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+export declare const StyledTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;

package/es/components/organism/DataTable/hooks/useAddFilterButton.d.ts

@@ -13,7 +13,7 @@ type OnApplyFilterMetricConditionValue = {
 export declare const useAddFilterCondition: () => {
     filters: import("../types").FilterItem[] | undefined;
     matchesAny: {
-        list?: import("../../..").MatchesAnyItem[] | undefined;
+        list?: any[] | undefined;
         isLoading?: boolean | undefined;
     } | undefined;
     setState: import("react").Dispatch<import("react").SetStateAction<TState>>;

package/es/components/organism/Help/Help.js

@@ -34,11 +34,11 @@ import { LoadingOutlined } from '@ant-design/icons';
 import Icon from '@antscorp/icons';
 import { Editor } from '@tinymce/tinymce-react';
 import { Button, Spin } from 'antd';
-import { ButtonFeedback, ControlGroup, ControlLabel, DropDown, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IconButtonStyled, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
+import { ButtonFeedback, ControlGroup, ControlLabel, EditorWrapper, ErrorMessage, FlexCenter, Header, HiddenBlock, IconButtonStyled, IframeHelp, Image, Label, LabelTitle, Link, Overlay, PreviewBox, SendFeedback, Span, Text, TitleSearch, TreeContent, Video, Wrapper, WrapperBody, WrapperContentHelp, WrapperFooter, WrapperFooterSpace, WrapperHeader, WrapperIconEditor, WrapperImage, WrapperInputFile, WrapperLinkFiles, WrapperLinkItemFiles, WrapperLoading, WrapperSearch, } from './styled';
 // Atoms
 import { Input } from '@antscorp/antsomi-ui/es/components/atoms';
 // Molecules
-import { CaptureScreen, ChatBox, PopupDraggable, Select, } from '@antscorp/antsomi-ui/es/components/molecules';
+import { CaptureScreen, ChatBox, PopupDraggable, Select, Dropdown, } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
 import { THEME, TINYMCE_API_KEY } from '@antscorp/antsomi-ui/es/constants';
 import { ATTACH_CAPTURE_TYPES, ATTACH_KEYS, DEFAULT_POSITIONS, MENU_KEYS, MESSAGE_TYPE, PORTALS_ANTSOMI_PACKAGE_UI_KEY, PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP, REPORT_TYPES, TICKET_CUSTOM_MESSAGE_KEY, } from './constants';
@@ -110,21 +110,15 @@ const Help = props => {
         var _a;
         return [
             {
-                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer" },
+                label: (React.createElement("a", { href: "https://docs.antsomi.com/cdp-365-user-guide-en/release-note/2023", target: "_blank", rel: "noreferrer", style: { textDecoration: 'none' } },
                     React.createElement(Label, { style: {
-                            position: 'relative',
                             display: 'flex',
                             alignItems: 'center',
                             gap: 33,
                             width: '100%',
-                            marginTop: 8,
                         } },
                         "New features & announcements",
-                        React.createElement(OpenUrlIcon, { style: {
-                                fill: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon,
-                                maxWidth: 24,
-                                maxHeight: 24,
-                            } })))),
+                        React.createElement(OpenUrlIcon, { size: 20, color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon })))),
                 key: MENU_KEYS.FEATURE_ANNOUNCEMENT,
             },
             {
@@ -132,11 +126,11 @@ const Help = props => {
                 key: MENU_KEYS.FEEDBACK,
             },
             {
-                label: React.createElement(Label, null, "Get Help"),
+                label: React.createElement(Label, null, "Get help"),
                 key: MENU_KEYS.HELP,
             },
             {
-                label: React.createElement(Label, null, "Get ideas with ChatGPT"),
+                label: React.createElement(Label, null, "Get ideas with Antsomi Intelligence"),
                 key: MENU_KEYS.CHAT,
             },
             {
@@ -156,6 +150,25 @@ const Help = props => {
         }
         return domain;
     }, [domain]);
+    const fetchDataListHelp = () => {
+        setIsLoadingHelp(true);
+        TicketService.help.callApi
+            .getList({ appCode, role: '1' }, domainPlatform, token, config, userId)
+            .then(res => {
+            if (res && res.data.code === 200 && res.data) {
+                const { data } = res.data;
+                setDataListHelp(data);
+                setIsLoadingHelp(false);
+                setExpandedKeys(expendDefault(data));
+            }
+            else {
+                setIsLoadingHelp(true);
+            }
+        })
+            .catch(err => {
+            // console.log('err ===>', err)
+        });
+    };
     // const handleCancel = () => {
     //   setOpen(false);
     // };
@@ -308,25 +321,6 @@ const Help = props => {
             }
         }
     }, []);
-    const fetchDataListHelp = () => {
-        setIsLoadingHelp(true);
-        TicketService.help.callApi
-            .getList({ appCode, role: '1' }, domainPlatform, token, config, userId)
-            .then(res => {
-            if (res && res.data.code === 200 && res.data) {
-                const { data } = res.data;
-                setDataListHelp(data);
-                setIsLoadingHelp(false);
-                setExpandedKeys(expendDefault(data));
-            }
-            else {
-                setIsLoadingHelp(true);
-            }
-        })
-            .catch(err => {
-            // console.log('err ===>', err)
-        });
-    };
     const handleCreateRecorder = () => __awaiter(void 0, void 0, void 0, function* () {
         try {
             let controller;
@@ -729,7 +723,7 @@ const Help = props => {
     const renderIcon = (name, style) => ({
         'icon-ants-capture': React.createElement(ScreenshotMonitorIcon, { style: style }),
         'icon-ants-camera': React.createElement(CameraIcon, { style: style }),
-    }[name]);
+    })[name];
     const treeData = useMemo(() => {
         const loop = (data) => data.map(item => {
             const strTitle = item.title;
@@ -978,7 +972,7 @@ const Help = props => {
                         } }))))));
     };
     return (React.createElement(React.Fragment, null,
-        React.createElement(DropDown, { menu: {
+        React.createElement(Dropdown, { menu: {
                 style: { minWidth: 250, padding: 0 },
                 items: items,
                 onClick: info => handleClick(info),

package/es/components/organism/Help/styled.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-export declare const DropDown: 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>;
 export declare const ButtonFeedback: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {

package/es/components/organism/Help/styled.js

@@ -1,6 +1,6 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
 // Libraries
-import { Dropdown, /* Button, */ Space, Typography, Tree, Input } from 'antd';
+import { Space, Typography, Tree, Input } from 'antd';
 import styled, { css } from 'styled-components';
 import { Button } from '../../atoms';
 // Constants
@@ -8,13 +8,6 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Components
 const { Text: AntText } = Typography;
 const { Search } = Input;
-export const DropDown = styled(Dropdown) `
-  .verify-support span {
-    font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
-    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
-    font-weight: medium;
-  }
-`;
 export const ButtonFeedback = styled(Button) `
   width: 200px;
   height: ${props => (props.height ? props.height : 36)}px !important;
@@ -24,7 +17,7 @@ export const PreviewBox = styled.div `
   position: relative;
   width: 200px;
   height: 125px;
-  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw0};
+  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
   cursor: pointer;
   overflow: hidden;
 
@@ -45,16 +38,12 @@ export const Overlay = styled.div `
 `;
 export const Text = styled.span `
   font-weight: normal !important;
-  color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorText} !important;
-  font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px !important;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText} !important;
+  font-size: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.fontSize}px !important;
 `;
 export const Label = styled.span `
   &.verify-support {
-    display: inline-block;
-    padding: 5px 0;
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
-    font-size: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.fontSize}px;
-    font-weight: 500;
+    color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
   }
 `;
 export const SendFeedback = styled.div `
@@ -64,8 +53,8 @@ export const ControlGroup = styled(Space) `
   width: 100%;
 `;
 export const ControlLabel = styled(AntText) `
-  font-size: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.fontSize}px !important;
-  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw8} !important;
+  font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px !important;
+  color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw8} !important;
 `;
 export const FlexCenter = styled.div `
   display: flex;
@@ -83,7 +72,7 @@ export const HiddenBlock = styled.div `
   right: 0;
   width: 17px;
   height: 50px;
-  background-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw0};
+  background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
 `;
 export const WrapperImage = styled.div `
   position: relative;
@@ -107,7 +96,7 @@ export const Video = styled.video `
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw3};
+  border-bottom: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -118,7 +107,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.colorText} !important;
+  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `
@@ -134,8 +123,8 @@ export const WrapperFooter = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw3};
-  background-color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw0};
+  border-top: 1px solid ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3};
+  background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -146,8 +135,8 @@ export const WrapperFooterSpace = styled.div `
   left: 0;
   width: 100%;
   max-height: 58px;
-  border-top: 1px solid ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw3};
-  background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw0};
+  border-top: 1px solid ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw3};
+  background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
   padding: 15px;
   box-sizing: border-box;
   z-index: 10;
@@ -157,28 +146,28 @@ export const WrapperFooterSpace = styled.div `
 `;
 export const EditorWrapper = styled.div `
   .tox-tinymce {
-    border: 1px solid ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw3_5};
+    border: 1px solid ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.bw3_5};
     border-top-left-radius: 2px;
     border-top-right-radius: 2px;
   }
 `;
 export const WrapperLinkFiles = styled.div `
-  border-right: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
-  border-left: 1px solid ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.bw3_5};
+  border-right: 1px solid ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw3_5};
+  border-left: 1px solid ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw3_5};
   display: flex;
   flex-direction: column;
   padding: 8px;
   gap: 4px;
 `;
 export const WrapperLinkItemFiles = styled.div `
-  color: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.bw10};
+  color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.bw10};
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 export const WrapperIconEditor = styled.div `
   height: 44px;
-  border: 1px solid ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.bw3_5};
+  border: 1px solid ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.bw3_5};
   border-top: ${props => { var _a; return (props.borderTop ? `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3_5}` : 'none'); }};
   display: flex;
   align-items: center;
@@ -207,15 +196,15 @@ export const WrapperBodyModal = styled.div `
 `;
 export const ErrorMessage = styled.div `
   display: ${props => (props.isShow ? 'block' : 'none')};
-  color: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.red8};
+  color: ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.red8};
   font-size: 11px;
   line-height: 24px;
-  font-family: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.fontFamily};
+  font-family: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.fontFamily};
 `;
 export const Wrapper = styled.div ``;
 export const LabelTitle = styled(AntText) `
   font-size: 13px !important;
-  color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.colorText} !important;
+  color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorText} !important;
   font-weight: bold;
 `;
 export const WrapperContentHelp = styled.div `
@@ -229,7 +218,7 @@ export const Link = styled.a `
   font-size: 12px;
   text-decoration: none;
   color: #005fb8;
-  font-family: ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.fontFamily};
+  font-family: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.fontFamily};
   font-weight: bold;
 `;
 export const IframeHelp = styled.iframe `
@@ -271,8 +260,8 @@ export const IconButtonStyled = styled(Button) `
 
   &.antsomi-dropdown-open,
   &.antsomi-popover-open {
-    color: ${(_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.blue7} !important;
-    background-color: ${(_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue1_1} !important;
-    border: 1px solid ${(_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.blue7} !important;
+    color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.blue7} !important;
+    background-color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue1_1} !important;
+    border: 1px solid ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue7} !important;
   }
 `;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { isEmpty } from 'lodash';
 // Components
 import { ThumbnailCard } from '../../../../molecules';
@@ -24,11 +24,11 @@ export const SimilarTemplate = memo(props => {
     const { show = true, similarTemplates = [], similarCardProps } = props;
     const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
     // Memo
-    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
+    // const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
         React.createElement("div", { className: "title" }, "Similar templates"),
         React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
             const { id, name, thumbnail } = item || {};
-            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card", thumbnailCacheValue: thumbnailCacheValue }, restOfSimilarCardProps)));
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
         })))) : null;
 });

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -44,7 +44,7 @@ export const ThumbnailSlider = memo(props => {
         const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
         return calculate > WRAPPER_WIDTH;
     }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
-    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
+    // const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Renders
     const renderThumbnail = (args) => {
         const { thumbnail, index } = args;
@@ -52,7 +52,9 @@ export const ThumbnailSlider = memo(props => {
         return (React.createElement(Flex, { gap: GAP_X },
             !!index && (React.createElement(Flex, { align: "center" },
                 React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
-            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, thumbnailCacheValue: thumbnailCacheValue, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, 
+                // thumbnailCacheValue={thumbnailCacheValue}
+                style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
     };
     return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
         React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 /* eslint-disable react/function-component-definition */
 // Libraries
-import React, { memo, useMemo, useState } from 'react';
+import React, { memo, useState } from 'react';
 // Components
 import { CategoryListing, BlankTemplate } from './components';
 import { Scrollbars, Spin } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -35,7 +35,7 @@ export const TemplateListing = memo(props => {
     const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
     // Memo
-    const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
+    // const thumbnailCacheValue = useMemo(() => new Date().getTime(), []);
     // Hooks
     const { ref: containerRef, itemPerRow, ratio, gap: listingGap, } = useListingItemResize({
         gap,
@@ -76,7 +76,9 @@ export const TemplateListing = memo(props => {
                         const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
                         return (React.createElement("div", { key: id },
                             index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                            React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
+                            React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, 
+                                // thumbnailCacheValue={thumbnailCacheValue}
+                                previewBtnProps: Object.assign(Object.assign({}, previewBtnProps), { onClick: handleClickThumbnailPreview }) }, restOfTemplateItemProps))));
                     }))),
             !loading && !blankTemplateProps.show && !isHasData && (React.createElement(EmptyData, { icon: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.icon, title: emptyProps === null || emptyProps === void 0 ? void 0 : emptyProps.description })))));
     return (React.createElement(TemplateListingWrapper, null,

package/es/constants/theme.js

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
 // Types
 import { theme } from 'antd';
 // Variables
@@ -177,9 +177,13 @@ THEME.components = {
         borderRadiusSM: 5,
     },
     Tree: {
+        // Directory token
+        directoryNodeSelectedBg: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.blue1_1,
+        directoryNodeSelectedColor: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.colorText,
         controlInteractiveSize: 18,
-        colorBorder: (_w = THEME.token) === null || _w === void 0 ? void 0 : _w.colorPrimary,
-        nodeHoverBg: 'transparent',
+        colorBorder: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
+        nodeHoverBg: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.blue,
+        nodeSelectedBg: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.blue1_1,
         lineWidth: 2,
         borderRadiusSM: 5,
         // titleHeight: 12,
@@ -196,7 +200,7 @@ THEME.components = {
         paddingMD: 0,
     },
     Tabs: {
-        itemColor: (_x = THEME.token) === null || _x === void 0 ? void 0 : _x.bw8,
+        itemColor: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.bw8,
         horizontalItemPadding: '17px 30px',
         horizontalItemGutter: 0,
         lineWidthBold: 3,
@@ -208,7 +212,7 @@ THEME.components = {
         lineHeight: 1.143,
         lineHeightLG: 1.143,
         lineHeightSM: 1.143,
-        itemHoverColor: (_y = THEME.token) === null || _y === void 0 ? void 0 : _y.colorPrimary,
+        itemHoverColor: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorPrimary,
     },
     Collapse: {
         headerBg: '#FFF',
@@ -216,13 +220,13 @@ THEME.components = {
         headerPadding: '15px 10px',
     },
     Switch: {
-        colorTextQuaternary: (_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw0,
-        colorTextTertiary: (_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw0,
+        colorTextQuaternary: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.bw0,
+        colorTextTertiary: (_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.bw0,
         handleSize: 8,
         handleSizeSM: 7,
         trackMinWidth: 27,
         trackHeight: 16,
-        handleBg: (_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.colorPrimary,
+        handleBg: (_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.colorPrimary,
     },
     Popover: {
         borderRadiusLG: 10,
@@ -234,11 +238,11 @@ THEME.components = {
         paddingXXS: 8,
         controlItemBgHover: '#F2F9FF',
         controlItemBgActive: '#DEEFFE',
-        colorPrimary: (_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.colorText,
+        colorPrimary: (_6 = THEME.token) === null || _6 === void 0 ? void 0 : _6.colorText,
         controlItemBgActiveHover: '#DEEFFE',
     },
     Tooltip: {
-        colorBgSpotlight: (_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.bw8,
+        colorBgSpotlight: (_7 = THEME.token) === null || _7 === void 0 ? void 0 : _7.bw8,
         fontSize: 11,
     },
     Menu: {
@@ -248,8 +252,8 @@ THEME.components = {
         itemMarginBlock: 5,
         itemBorderRadius: 5,
         subMenuItemBg: 'transparent',
-        itemDisabledColor: (_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.colorTextDisabled,
-        itemActiveBg: (_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.blue1_1,
+        itemDisabledColor: (_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorTextDisabled,
+        itemActiveBg: (_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.blue1_1,
     },
     Form: {
         itemMarginBottom: 15,

package/es/index.d.ts

@@ -2,6 +2,8 @@ export * from './components';
 export * from './types';
 export * from './queries';
 export * from './providers';
-export { QUERY_KEYS, POST_MESSAGE_TYPES } from './constants';
+export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API } from './constants';
 export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
 export * from './hooks';
+export { ConfigProvider as AntdConfigProvider } from 'antd';
+export type { ThemeConfig as AntdThemeConfig } from 'antd';

package/es/index.js

@@ -2,7 +2,8 @@ export * from './components';
 export * from './types';
 export * from './queries';
 export * from './providers';
-export { QUERY_KEYS, POST_MESSAGE_TYPES } from './constants';
+export { QUERY_KEYS, POST_MESSAGE_TYPES, CDP_API } from './constants';
 export { snakeCaseToCamelCase, camelCaseToSnakeCase, getCategoriesFromObjectTemplate, } from './utils';
 // Hooks
 export * from './hooks';
+export { ConfigProvider as AntdConfigProvider } from 'antd';

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -50,18 +50,26 @@ export const GlobalStyle = () => {
 
       /* width */
       ::-webkit-scrollbar {
+        background: transparent !important;
         width: ${scrollBarSize} !important;
         height: ${scrollBarSize} !important;
       }
 
       /* Track */
       ::-webkit-scrollbar-track {
-        background: #fff !important;
+        background: transparent !important;
       }
 
       /* Handle */
       ::-webkit-scrollbar-thumb {
-        background: ${gray5};
+        background-color: transparent;
+        border-radius: 4px;
+      }
+
+      *:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: ${gray5} !important;
+        }
       }
 
       .rc-virtual-list {
@@ -1044,6 +1052,14 @@ export const GlobalStyle = () => {
             margin: 3px 0px;
           }
         }
+
+        > .antsomi-tree-list-scrollbar-vertical {
+          width: ${scrollBarSize} !important;
+
+          > .antsomi-tree-list-scrollbar-thumb {
+            background: ${accent7} !important;
+          }
+        }
       }
 
       /* Checkbox */

package/es/test.js

@@ -6,7 +6,7 @@ import { Button, RequiredLabel, Login, } from './components';
 // Queries configs
 import { queryClientAntsomiUI, QueryClientProviderAntsomiUI } from './queries';
 import { ConfigProvider } from './providers';
-import { BrowserRouter } from 'react-router-dom';
+import { MatchesAnySelectTest } from './tests';
 export const BACKGROUND_COLOR_STYLE = {
     SOLID: {
         value: 'color',
@@ -154,7 +154,7 @@ export const App = () => {
     /* Login */
     return React.createElement(Login, Object.assign({}, d));
     /* MatchesAnySelect */
-    // return <MatchesAnySelectTest />;
+    return React.createElement(MatchesAnySelectTest, null);
     /* Data Table */
     return (React.createElement("div", null,
         React.createElement(RequiredLabel, null, "this is Required"),
@@ -436,7 +436,6 @@ export const App = () => {
 };
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(React.createElement(ConfigProvider, { locale: "en", appConfig: appConfig },
-    React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
-        React.createElement(BrowserRouter, null,
-            React.createElement(App, null)))));
+root.render(React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
+    React.createElement(ConfigProvider, { locale: "en" },
+        React.createElement(App, null))));