@antscorp/antsomi-ui 1.8.2 → 1.8.3

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

@@ -1,6 +1,6 @@
 /// <reference types="hoist-non-react-statics" />
 import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput } from 'antd';
+import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
 export interface InputProps extends AntdInputProps {
     noborder?: 'true' | 'false' | boolean;
     debounce?: number;
@@ -16,20 +16,20 @@ export interface InputProps extends AntdInputProps {
     disableUndo?: boolean;
     withWrapper?: boolean;
 }
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<import("antd").InputRef>> & {
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
     Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<import("antd").InputRef>>;
+    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
     TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<import("antd").InputRef>>;
+    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
 }, {}> & {
     DefaultInput: typeof AntdInput;
     CustomSearch: typeof SearchInput;
 };
-declare const SearchInput: React.FC<InputProps>;
+declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
 export {};

package/es/components/atoms/Input/Input.js

@@ -23,7 +23,7 @@ import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledInput } from './styled';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
-const OriginInput = props => {
+const OriginInput = React.forwardRef((props, ref) => {
     // Props
     const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg } = props, restProps = __rest(props, ["withWrapper", "debounce", "errorArchive", "required", "labelColor", "isReverseMask", "isHideErrMessage", "focused", "label", "onAfterChange", "onChange", "errorMsg"]);
     // State
@@ -79,7 +79,7 @@ const OriginInput = props => {
     }
     const content = (React.createElement(React.Fragment, null,
         label && renderRequiredLabel(label),
-        React.createElement(StyledInput, Object.assign({}, restProps, { value: value, onBlur: e => {
+        React.createElement(StyledInput, Object.assign({}, restProps, { ref: ref, value: value, onBlur: e => {
                 if (!isFocused) {
                     setFocused(true);
                 }
@@ -89,14 +89,14 @@ const OriginInput = props => {
     if (!withWrapper)
         return content;
     return React.createElement("div", { className: "input__wrapper" }, content);
-};
+});
 OriginInput.defaultProps = {
     debounce: 400,
     isHideErrMessage: false,
     withWrapper: true,
 };
 export const Input = OriginInput;
-const SearchInput = props => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { className: `${props.className} antsomi-search-input` })));
+const SearchInput = React.forwardRef((props, ref) => (React.createElement(OriginInput, Object.assign({ bordered: false, autoFocus: true, suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 }) }, props, { ref: ref, className: `${props.className} antsomi-search-input` }))));
 Input.CustomSearch = SearchInput;
 Input.TextArea = StyledInput.TextArea;
 Input.DefaultInput = AntdInput;

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

@@ -1,4 +1,6 @@
+var _a;
 // Components
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { Flex } from '../Flex';
 // Styled
 import styled from 'styled-components';
@@ -54,7 +56,7 @@ export const NavigationButton = styled(Flex) `
 
   i {
     font-size: 12px;
-    color: #595959;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
   }
 
   &.navigation--previous {

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare const Rate: import("react").ForwardRefExoticComponent<import("antd").RateProps & import("react").RefAttributes<import("rc-rate/lib/Rate").RateRef>>;
+export { Rate } from 'antd';

package/es/components/atoms/Rate/Rate.js

@@ -1,2 +1 @@
-import { Rate as AntdRate } from 'antd';
-export const Rate = AntdRate;
+export { Rate } from 'antd';

package/es/components/atoms/RequiredLabel/styled.d.ts

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

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

@@ -3,7 +3,6 @@ var _a;
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const RequiredLabelWrapper = styled.div ``;
 export const StyledRequired = styled.span `
   color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
   margin-right: 4px;

package/es/components/icons/DomainManagementIcon.js

@@ -6,7 +6,7 @@ export const DomainManagementIcon = forwardRef((props, ref) => {
         // width="29"
         // height="29"
         viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M10 20C8.02219 20 6.08879 19.4135 4.4443 18.3147C2.79981 17.2159 1.51809 15.6541 0.761209 13.8268C0.00433286 11.9996 -0.1937 9.98891 0.192152 8.0491C0.578004 6.10929 1.53041 4.32746 2.92894 2.92894C4.32746 1.53041 6.10929 0.578004 8.0491 0.192152C9.98891 -0.1937 11.9996 0.00433286 13.8268 0.761209C15.6541 1.51809 17.2159 2.79981 18.3147 4.4443C19.4135 6.08879 20 8.02219 20 10C19.9974 12.6514 18.9429 15.1934 17.0681 17.0681C15.1934 18.9429 12.6514 19.9974 10 20ZM6.59667 8.39167H6.60667C7.42334 8.42334 8.87667 9.875 9.285 11.07C9.4297 11.5445 9.47273 12.0441 9.41127 12.5364C9.34982 13.0286 9.18526 13.5023 8.92834 13.9267C8.79 14.2283 8.61 14.6683 8.41834 15.135C8.09667 15.9233 7.73167 16.8167 7.41834 17.42C8.69991 17.8646 10.0747 17.9705 11.4092 17.7272C12.7437 17.484 13.9927 16.8999 15.035 16.0317C14.99 15.1317 15 12 15 11.9633C14.6817 11.8633 11.9267 10.9117 12.5 8.74834C12.7925 8.21523 13.2351 7.77975 13.7728 7.49591C14.3106 7.21207 14.9198 7.09237 15.525 7.15167C16.1834 7.14554 16.8371 7.26372 17.4517 7.5C17.1519 6.60523 16.6922 5.77228 16.095 5.04167C16.0615 5.00484 16.0201 4.97598 15.974 4.95724C15.9278 4.93849 15.8781 4.93032 15.8283 4.93334C15.606 4.95883 15.3951 5.04513 15.2187 5.18274C15.0422 5.32035 14.9072 5.50394 14.8283 5.71334C14.7967 5.80667 14.7733 5.895 14.7483 5.98167C14.6417 6.365 14.565 6.64834 14.0817 6.64834C13.9698 6.64709 13.8582 6.63593 13.7483 6.615C13.6293 6.60047 13.5146 6.56124 13.4115 6.49983C13.3085 6.43841 13.2194 6.35616 13.15 6.25834C13.0268 6.04163 12.986 5.78774 13.035 5.54334H13.7483V5H13.7383C13.5433 4.91667 13.0833 4.70334 13.0283 4.53834C13.023 4.52714 13.0202 4.5149 13.0202 4.5025C13.0202 4.49011 13.023 4.47786 13.0283 4.46667C13.4144 4.07223 13.849 3.72837 14.3217 3.44334C14.0489 3.26422 13.7656 3.10171 13.4733 2.95667C13.3667 3.14667 13.1217 3.22834 12.66 3.22834C12.5617 3.22834 12.4483 3.22834 12.315 3.21667C12.2256 3.22398 12.1359 3.20711 12.0552 3.16781C11.9746 3.12852 11.906 3.06825 11.8567 2.99334C11.8247 2.89165 11.8196 2.78343 11.8418 2.67918C11.864 2.57493 11.9127 2.47819 11.9833 2.39834C10.7781 2.08637 9.51627 2.06239 8.3 2.32834C8.26785 3.51083 7.93887 4.66625 7.34334 5.68834C7.275 5.815 7.205 5.94167 7.13834 6.07334C6.67167 6.98 4.48167 7.85 4.46 7.85834C4.85392 8.4311 5.21183 9.02781 5.53167 9.645C5.53874 9.3457 5.64838 9.0579 5.84224 8.82975C6.0361 8.60161 6.30243 8.44696 6.59667 8.39167ZM2.375 8.09334C1.99053 9.64021 2.08472 11.2674 2.6451 12.7595C3.20549 14.2517 4.20567 15.5386 5.51334 16.45C5.59575 15.6714 5.60356 14.8867 5.53667 14.1067L3.75 12.5L4.28667 10C4.27834 10 3.13167 8.73167 2.375 8.09334Z" }),
-        React.createElement("path", { d: "M13.3674 12.0699L11.2275 11.2247L12.0693 13.3659L16.2184 23.9195L17.0515 26.0386L18.0482 23.9913L19.1392 21.7502L22.1044 24.708L22.8088 25.4106L23.515 24.7099L24.7044 23.5297L25.4298 22.8099L24.6944 22.1003L21.7366 19.2459L24.1054 18.1204L26.1842 17.1326L24.0436 16.2871L13.3674 12.0699Z", stroke: "white", strokeWidth: "2" }),
-        React.createElement("path", { d: "M19.016 18.8012C19.0016 18.8894 18.9992 18.978 19.0081 19.0648C18.9031 19.0483 18.7949 19.0485 18.6873 19.0666C18.3687 19.1202 18.0957 19.3245 17.9543 19.615L17.2466 21.0686L14.7725 14.7753L21.1682 17.3017L19.5737 18.0593C19.2773 18.2001 19.0689 18.4774 19.016 18.8012Z", fill: "white", stroke: "#595959", strokeWidth: "2", strokeMiterlimit: "7.6613", strokeLinejoin: "round" })));
+        React.createElement("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }),
+        React.createElement("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }),
+        React.createElement("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })));
 });

package/es/components/molecules/AccountSelection/AccountListing.js

@@ -12,7 +12,7 @@ export const AccountListing = React.forwardRef((props, ref) => {
     const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
     // States
     const [searchValue, setSearchValue] = useState('');
-    const { accountData, recentData } = useAccountSelection(apiConfig);
+    const { accountData, recentData, updateRecentAccount } = useAccountSelection(apiConfig);
     const isAllAccount = currentAccount === 'all';
     useImperativeHandle(ref, () => ({
         getUsers() {
@@ -21,8 +21,17 @@ export const AccountListing = React.forwardRef((props, ref) => {
     }), [recentData, accountData]);
     // Handlers
     const handleSelectAccount = useCallback((userId) => {
+        const currentRecent = (recentData === null || recentData === void 0 ? void 0 : recentData.value) || [];
+        const body = userId !== currentRecent[0]
+            ? [userId, currentRecent[0]]
+            : currentRecent[1]
+                ? [userId, currentRecent[1]]
+                : [userId, currentRecent[0]];
+        updateRecentAccount(body.map(id => Number(id)));
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
-    }, [onChange]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onChange, recentData]);
     return (React.createElement(AccountSelectionStyled, { className: className },
         React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
         React.createElement("div", { className: "account-list" },

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

@@ -8,5 +8,7 @@ export interface AccountSelectionProps extends Omit<AccountListingProps, 'onChan
     zIndex?: PopoverProps['zIndex'];
     onChange?: (userId: string) => void;
     getPopupContainer?: PopoverProps['getPopupContainer'];
+    /** refresh recent account when select account */
+    refreshOnSelect?: boolean;
 }
 export declare const AccountSelection: React.FC<AccountSelectionProps>;

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -21,12 +21,12 @@ import { AccountListing } from './AccountListing';
 // Constants
 import { useAccountSelection } from './hooks';
 export const AccountSelection = props => {
-    const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex"]);
+    const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex, refreshOnSelect } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex", "refreshOnSelect"]);
     const { apiConfig, currentAccount = '' } = props;
     // States
     const [inputLabel, setInputLabel] = useState('');
     const [open, setOpen] = useState(false);
-    const { accountData } = useAccountSelection(apiConfig);
+    const { accountData, refetchRecentAccount } = useAccountSelection(apiConfig);
     // Side Effects
     useEffect(() => {
         var _a;
@@ -40,6 +40,11 @@ export const AccountSelection = props => {
         setOpen(false);
         onChange === null || onChange === void 0 ? void 0 : onChange(String(userId));
     }, [onChange]);
+    useEffect(() => {
+        if (open && refreshOnSelect) {
+            refetchRecentAccount();
+        }
+    }, [open, refreshOnSelect, refetchRecentAccount]);
     return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount })), trigger: "click", overlayInnerStyle: { padding: 0 }, getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
         React.createElement(PopoverFieldStyled, { className: `${inputStyle || ''} ${inputClassName || ''}` },
             React.createElement(Tooltip, { title: inputLabel },

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.d.ts

@@ -17,5 +17,7 @@ export declare const useAccountSelection: (apiConfig: {
 }) => {
     recentData?: AccountRecent;
     accountData: Array<AccountData>;
+    updateRecentAccount: (values: [number, number]) => void;
+    refetchRecentAccount: () => void;
 };
 export {};

package/es/components/molecules/AccountSelection/hooks/useAccountSelection.js

@@ -1,7 +1,7 @@
 // Libraries
 import { useMemo } from 'react';
 // Queries
-import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount, } from '@antscorp/antsomi-ui/es/queries';
+import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount, useUpdateRecentAccount, } from '@antscorp/antsomi-ui/es/queries';
 // Constant
 import { APP_CODES } from '@antscorp/antsomi-ui/es/constants';
 const { APP_ANTALYSER, DATAFLOWS } = APP_CODES;
@@ -35,12 +35,15 @@ export const useAccountSelection = (apiConfig) => {
             enabled: isUsePermissionAccount(appCode || '') && !!token && !!userId && !!permissionDomain,
         },
     });
-    const { data: recentData } = useGetRecentAccount({
+    const { data: recentData, refetch: refetchRecentAccount } = useGetRecentAccount({
         apiConfig,
         options: {
             enabled: !isUsePermissionAccount(appCode || ''),
         },
     });
+    const { mutateAsync: updateRecentAccount } = useUpdateRecentAccount({
+        apiConfig,
+    });
     // Memos
     const accountData = useMemo(() => {
         if (isUsePermissionAccount(appCode || '')) {
@@ -53,5 +56,5 @@ export const useAccountSelection = (apiConfig) => {
         }
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [appCode, data === null || data === void 0 ? void 0 : data.entries, permissionAccountList]);
-    return { recentData, accountData };
+    return { recentData, accountData, updateRecentAccount, refetchRecentAccount };
 };

package/es/components/molecules/CaptureScreen/CaptureScreen.js

@@ -696,7 +696,7 @@ const CaptureScreen = (props) => {
         'icon-ants-mute': React.createElement(MuteIcon, { style: style }),
         'icon-ants-pause': React.createElement(PauseIcon, { style: style }),
         'icon-ants-stop-record': React.createElement(StopRecordIcon, { style: style }),
-    }[name]);
+    })[name];
     const renderDrawActionList = () => DRAW_ACTION_LIST.map(drawItem => {
         var _a, _b, _c, _d;
         if ((drawItem === null || drawItem === void 0 ? void 0 : drawItem.type) === 'divider') {

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -112,7 +112,7 @@ export const HeaderV2 = memo(props => {
         React.createElement("div", { className: "left-side" },
             showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),
-            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
+            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle, refreshOnSelect: true })),
             React.createElement("div", { className: "title-container" },
                 breadcrumbs ? (React.createElement("div", { className: "header-breadcrumbs" }, breadcrumbs.map((item, index) => (React.createElement(React.Fragment, { key: `${item.title}_${item.link}` },
                     isNil(item.useExternalLink) && !item.useExternalLink ? (React.createElement(Link, { to: item.link || '', className: "header-breadcrumbs__item" }, item.title)) : (React.createElement("a", { href: item.link, className: "header-breadcrumbs__item" }, item.title)),

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

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
@@ -36,7 +36,7 @@ export const StyledPeopleAccessRoot = styled.div `
           }
 
           .email {
-            color: #595959;
+            color: ${(_b = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
           }
         }
 

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

@@ -30,193 +30,6 @@ import { Button, Flex, Typography, Spin, Tooltip, Icon } from '../../atoms';
 import { THUMBNAIL_CARD_ACTION_OPTIONS, THUMBNAIL_CARD_DEFAULT_HEIGHT, THUMBNAIL_CARD_DEFAULT_WIDTH, } from './constants';
 import { getUrlNoCache, checkShowSkeletonBaseUrl } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-// export const ThumbnailCard: React.FC<ThumbnailCardProps> = memo(props => {
-//   const [modal, contextHolder] = Modal.useModal();
-//   const {
-//     id,
-//     name,
-//     width = THUMBNAIL_CARD_DEFAULT_WIDTH,
-//     height = THUMBNAIL_CARD_DEFAULT_HEIGHT,
-//     thumbnail,
-//     thumbnailFit,
-//     removable = true,
-//     actionAvailable = true,
-//     showSkeleton,
-//     loading = false,
-//     removeModalProps,
-//     editBtnProps,
-//     previewBtnProps,
-//     thumbnailCacheValue,
-//     actionButtons,
-//     onClickWrapper,
-//     ...restOfProps
-//   } = props;
-//   const { onOk, ...restOfRemoveTemplateModalProps } = removeModalProps || {};
-//   const {
-//     text: editText = 'Use template',
-//     onClick: onClickEdit,
-//     ...restOfEditBtnProps
-//   } = editBtnProps || {};
-//   const {
-//     text: previewText = 'Preview',
-//     onClick: onClickPreview,
-//     ...restOfPreviewBtnProps
-//   } = previewBtnProps || {};
-//   // Memo
-//   const showSkeletonMemo =
-//     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
-//     typeof showSkeleton === 'undefined'
-//       ? checkShowSkeletonBaseUrl(thumbnail)
-//       : typeof showSkeleton === 'function'
-//       ? showSkeleton(props)
-//       : showSkeleton;
-//   // Handlers
-//   const handleRemoveThumbnail: React.MouseEventHandler<HTMLElement> = e => {
-//     e.stopPropagation();
-//     modal.confirm({
-//       title: 'Remove template',
-//       centered: true,
-//       icon: <Icon type="icon-ants-info" style={{ fontSize: 16, lineHeight: '25px' }} />,
-//       content: (
-//         <div>
-//           <p>Are you sure you want to remove the template?</p>
-//           <p>This action can not be undone.</p>
-//         </div>
-//       ),
-//       okText: 'Remove',
-//       cancelText: 'Cancel',
-//       closable: true,
-//       ...restOfRemoveTemplateModalProps,
-//       onOk: async () => {
-//         if (onOk) onOk(id);
-//       },
-//     });
-//   };
-//   const handleWrapperClick: React.MouseEventHandler<HTMLElement> = e => {
-//     e.stopPropagation();
-//     onClickWrapper?.(id);
-//   };
-//   // Handlers
-//   const renderActionButtons = () => {
-//     if (!actionButtons) return null;
-//     return Object.keys(actionButtons)
-//       .map(key => {
-//         const option = THUMBNAIL_CARD_ACTION_OPTIONS[key];
-//         const actionSettings = actionButtons[key as TActionButtonKey];
-//         if (actionSettings) {
-//           const { buttonProps, key, customRender } = actionSettings;
-//           const icon = actionSettings.icon || option.icon || '';
-//           const label = actionSettings.label || option.label || '';
-//           const ButtonComponent = (
-//             <Tooltip title={label}>
-//               <Button
-//                 key={key || option.key}
-//                 type="primary"
-//                 icon={
-//                   <Icon type={icon || option.icon} style={{ fontSize: 24, color: '#FFFFFF' }} />
-//                 }
-//                 {...buttonProps}
-//               />
-//             </Tooltip>
-//           );
-//           /**
-//            * Handle custom render for action button
-//            * If customRender is a function, return the function callback the ButtonComponent
-//            * If not, return ButtonComponent
-//            */
-//           return typeof customRender === 'function'
-//             ? customRender(ButtonComponent)
-//             : ButtonComponent;
-//         }
-//         return null;
-//       })
-//       .filter(Boolean);
-//   };
-//   return (
-//     <Flex gap={10} vertical {...restOfProps} style={{ width, ...restOfProps.style }}>
-//       <ThumbnailCardWrapper
-//         $showSkeleton={showSkeletonMemo}
-//         style={{ height, cursor: actionAvailable ? 'default' : 'pointer' }}
-//         onClick={handleWrapperClick}
-//       >
-//         <div className="screen">
-//           {thumbnail && (
-//             <img
-//               src={getUrlNoCache(thumbnail, thumbnailCacheValue)}
-//               alt=""
-//               style={{ objectFit: thumbnailFit }}
-//               onError={e => {
-//                 e.currentTarget.style.display = 'none';
-//               }}
-//             />
-//           )}
-//         </div>
-//         {actionAvailable && !loading && (
-//           <>
-//             <Flex className="center-action" align="center" gap={10} vertical>
-//               <Button
-//                 type="primary"
-//                 className="animate__animated animate__fadeIn"
-//                 {...restOfEditBtnProps}
-//                 onClick={e => {
-//                   e.stopPropagation();
-//                   onClickEdit?.(id);
-//                 }}
-//               >
-//                 <Typography.Text
-//                   ellipsis={{ tooltip: editText }}
-//                   style={{ maxWidth: '100%', color: 'inherit' }}
-//                 >
-//                   {editText}
-//                 </Typography.Text>
-//               </Button>
-//               <Button
-//                 className="animate__animated animate__fadeIn"
-//                 onClick={e => {
-//                   e.stopPropagation();
-//                   onClickPreview?.(id);
-//                 }}
-//                 {...restOfPreviewBtnProps}
-//               >
-//                 <Typography.Text
-//                   ellipsis={{ tooltip: previewText }}
-//                   style={{ maxWidth: '100%', color: 'inherit' }}
-//                 >
-//                   {previewText}
-//                 </Typography.Text>
-//               </Button>
-//             </Flex>
-//             <div className="top-right-corner-action animate__animated animate__fadeIn">
-//               {renderActionButtons()}
-//               {removable && (
-//                 <Tooltip title={i18nInstance.t(translations.remove).toString()}>
-//                   <Button
-//                     type="primary"
-//                     icon={
-//                       <Icon
-//                         type="icon-ants-trash-outline"
-//                         style={{ fontSize: 24, color: '#FFFFFF' }}
-//                       />
-//                     }
-//                     onClick={handleRemoveThumbnail}
-//                   />
-//                 </Tooltip>
-//               )}
-//             </div>
-//             <div className="backdrop" />
-//             <div>{contextHolder}</div>
-//           </>
-//         )}
-//         {loading && <Spin className="thumbnail__loading" spinning />}
-//       </ThumbnailCardWrapper>
-//       {!!name && (
-//         <Typography.Text ellipsis={{ tooltip: name }} style={{ maxWidth: '100%' }}>
-//           {name}
-//         </Typography.Text>
-//       )}
-//     </Flex>
-//   );
-// });
 export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
     const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);

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

@@ -1,4 +1,4 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const InputSearchStyled = styled.div `
@@ -45,7 +45,7 @@ export const InputSearchStyled = styled.div `
 
   svg {
     position: absolute;
-    fill: #595959;
+    fill: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
     right: 5px;
     width: 20px;
     height: 20px;
@@ -70,7 +70,7 @@ export const TriggerPopoverStyled = styled.div `
   justify-content: space-between;
   gap: 15px;
   padding: 3px 3px 3px 10px;
-  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  border: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
   background-color: white;
   border-radius: 999px;
 
@@ -105,7 +105,7 @@ export const PackageSharingStyled = styled.div `
   font-size: 13px;
   color: #666;
 
-  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1_2};
+  background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1_2};
 
   min-width: 400px;
   max-width: 400px;
@@ -203,14 +203,14 @@ export const PackageSharingStyled = styled.div `
       li {
         cursor: pointer;
         padding: 8px 5px;
-        border-radius: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.borderRadius}px;
+        border-radius: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.borderRadius}px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 10px;
 
         &:hover {
-          background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+          background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue};
         }
 
         .account-name {
@@ -257,7 +257,7 @@ export const PackageSharingStyled = styled.div `
         height: 42px;
         padding: 10px;
         border-radius: 10px;
-        border: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw4};
+        border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw4};
 
         & img {
           width: 100%;
@@ -281,15 +281,15 @@ export const PackageSharingStyled = styled.div `
         cursor: pointer;
         &:hover {
           .image-wrapper {
-            background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue};
-            border-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue3};
+            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue};
+            border-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue3};
           }
         }
         &.disabled {
           cursor: default;
           .image-wrapper {
-            background: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1_1};
-            border-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
+            background: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue1_1};
+            border-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.blue7};
             img {
               cursor: default;
             }
@@ -298,7 +298,7 @@ export const PackageSharingStyled = styled.div `
         .image-wrapper {
           border: 1px solid #ddd;
           padding: 10px;
-          border-radius: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.borderRadius}px;
+          border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
           transition: all 0.2s ease-in-out;
           /* width: 108px;
           height: 45px; */
@@ -307,7 +307,7 @@ export const PackageSharingStyled = styled.div `
           }
         }
         .network-name {
-          color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw8};
+          color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.bw8};
           font-size: 11px;
           margin-top: 5px;
           margin-bottom: 0;
@@ -337,7 +337,7 @@ export const PackageSharingStyled = styled.div `
 export const InnerCardStyled = styled.div `
   width: 370px;
   background-color: white;
-  border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
+  border-radius: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.borderRadius}px;
   padding: 10px;
   margin-bottom: 15px;
 `;

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 // Libraries
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useRef, useState } from 'react';
 import { isEmpty } from 'lodash';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Components
@@ -44,6 +44,8 @@ export const SavedFilterAndMetrics = memo(props => {
     const [state, setState] = useState(initialState);
     // Variables
     const { searchValue } = state;
+    // Refs
+    const searchInputRef = useRef();
     // Memos
     const savedFilterList = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.filter(({ name }) => searchStringQuery(name, searchValue))) || [], [list, searchValue]);
     const { matchedParents, results: filterMetricList } = useDeepCompareMemo(() => recursiveSearchItems({
@@ -55,6 +57,11 @@ export const SavedFilterAndMetrics = memo(props => {
     // Effects
     useEffect(() => {
         setState(initialState);
+        // Handle auto focus input search when component is mount
+        setTimeout(() => {
+            var _a;
+            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 200);
     }, []);
     // Handlers
     const renderSavedFilter = () => {
@@ -109,7 +116,7 @@ export const SavedFilterAndMetrics = memo(props => {
     }), [filterMetricList, onSelectFilterMetric]);
     const renderFilterMetrics = () => (React.createElement(Menu, { key: matchedParents.map(item => `${item.id}`).join(','), mode: "inline", inlineIndent: 10, defaultOpenKeys: matchedParents.map(item => `${item.id}`), items: filterMetricItems }));
     return (React.createElement(FilterSelectFieldsContent, null,
-        React.createElement(Input, { bordered: false, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))), suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
+        React.createElement(Input.CustomSearch, { ref: searchInputRef, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))) }),
         React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
         isEmpty(savedFilterList) && isEmpty(filterMetricList) ? (React.createElement(EmptyData, { showIcon: false, title: "No data" })) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
             renderSavedFilter(),