@antscorp/antsomi-ui 1.3.5-beta.238 → 1.3.5-beta.240

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

@@ -836,6 +836,10 @@ export const GlobalStyle = () => {
             }
           }
         }
+
+        .antsomi-form-item-explain-error {
+          font-size: 11px;
+        }
       }
 
       /* Popover */

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

@@ -10,7 +10,7 @@ export interface AccountListingProps {
         appCode?: string;
     };
     showAllAccount?: boolean;
-    currentAccount?: string | 'ALL_ACCOUNT';
-    onChange?: (userId: number | 'ALL_ACCOUNT') => void;
+    currentAccount?: string;
+    onChange?: (userId: number | string) => void;
 }
 export declare const AccountListing: React.FC<AccountListingProps>;

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

@@ -7,8 +7,11 @@ import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
 export const AccountListing = props => {
-    const { className, apiConfig, showAllAccount = true, currentAccount, onChange } = props;
+    const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
     const { domain, token, userId, appCode, portalId } = apiConfig;
+    // States
+    const [searchValue, setSearchValue] = useState('');
+    // Queries
     const { data } = useGetAccountList({
         apiConfig,
         options: {
@@ -36,6 +39,7 @@ export const AccountListing = props => {
             enabled: portalId !== PORTALS_IDS.SANDBOX_76753,
         },
     });
+    // Memos
     const accountData = useMemo(() => {
         if (portalId === PORTALS_IDS.SANDBOX_76753) {
             return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
@@ -47,8 +51,7 @@ export const AccountListing = props => {
         }
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
-    const [searchValue, setSearchValue] = useState('');
-    const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
+    // Handlers
     const handleSelectAccount = useCallback((userId) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(userId);
     }, [onChange]);
@@ -56,10 +59,10 @@ export const AccountListing = props => {
         React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
         !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
             React.createElement(Text, { className: "recent-text" }, "Recent"),
-            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === String(account.userId) })))))),
+            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId })))))),
         React.createElement("div", { className: "antsomi-scroll-box account-list" },
             React.createElement("ul", { className: "scroll-content" }, accountData === null || accountData === void 0 ? void 0 : accountData.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
-                searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === String(account.userId) }))))),
-        showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
+                searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: +currentAccount === account.userId }))))),
+        showAllAccount ? (React.createElement(Text, { className: `all-account ${!currentAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('') },
             React.createElement("strong", null, "All account"))) : null));
 };

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

@@ -5,8 +5,8 @@ export interface AccountSelectionProps extends Omit<AccountListingProps, 'onChan
     show?: boolean;
     inputStyle?: 'select' | 'input';
     inputClassName?: string;
-    onChange?: (userId: number | 'ALL_ACCOUNT') => void;
-    getPopupContainer?: PopoverProps['getPopupContainer'];
     zIndex?: PopoverProps['zIndex'];
+    onChange?: (userId: string) => void;
+    getPopupContainer?: PopoverProps['getPopupContainer'];
 }
 export declare const AccountSelection: React.FC<AccountSelectionProps>;

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

@@ -9,21 +9,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+// Libraries
 import Icon from '@antscorp/icons';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
 import { PopoverFieldStyled } from './styled';
+// Components
 import { Tooltip } from 'antd';
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountListing } from './AccountListing';
 import { useGetAccountList, useGetPermissionAccountList } from '../../..';
+// Constants
 import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
 export const AccountSelection = props => {
     const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex"]);
-    const [inputLabel, setInputLabel] = useState('All account');
-    const [open, setOpen] = useState(false);
-    // const [searchValue, setSearchValue] = useState<string>('');
     const { apiConfig, currentAccount } = props;
     const { domain, token, userId, appCode, portalId } = apiConfig;
+    // States
+    const [inputLabel, setInputLabel] = useState('');
+    const [open, setOpen] = useState(false);
     // Queries
     const { data } = useGetAccountList({
         apiConfig,
@@ -46,6 +50,7 @@ export const AccountSelection = props => {
             enabled: portalId === PORTALS_IDS.SANDBOX_76753,
         },
     });
+    // Memos
     const accountData = useMemo(() => {
         if (portalId === PORTALS_IDS.SANDBOX_76753) {
             return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
@@ -57,16 +62,18 @@ export const AccountSelection = props => {
         }
         return (data === null || data === void 0 ? void 0 : data.entries) || [];
     }, [data === null || data === void 0 ? void 0 : data.entries, permissionAccountList, portalId]);
-    const currentAccountInfo = useMemo(() => accountData === null || accountData === void 0 ? void 0 : accountData.find(account => String(account.userId) === currentAccount), [accountData, currentAccount]);
-    /** If oid is null, default is 'ALL_ACCOUNT' */
-    const isAllAccount = !currentAccount || currentAccount === 'ALL_ACCOUNT';
+    // Side Effects
     useEffect(() => {
-        const newLabel = isAllAccount ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName;
+        var _a;
+        const newLabel = !currentAccount
+            ? 'All account'
+            : ((_a = accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === +currentAccount)) === null || _a === void 0 ? void 0 : _a.userName) || '';
         setInputLabel(newLabel);
-    }, [currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName, isAllAccount]);
+    }, [currentAccount, accountData]);
+    // Handlers
     const handleSelectAccount = useCallback((userId) => {
         setOpen(false);
-        onChange === null || onChange === void 0 ? void 0 : onChange(userId);
+        onChange === null || onChange === void 0 ? void 0 : onChange(String(userId));
     }, [onChange]);
     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 || ''}` },

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

@@ -8,7 +8,7 @@ export interface HeaderV2Props {
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;
     accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
-        onSelectAccount?: (account: string | 'ALL_ACCOUNT') => void;
+        onSelectAccount?: (userId: string) => void;
     };
     helpConfig: Omit<IHelpProps, 'configs'> & {
         configs: Omit<IHelpProps['configs'], 'portalId' | 'userId' | 'token' | 'domain' | 'domainTicket' | 'domainPlatform'>;

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

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { memo, useMemo, useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -19,9 +20,8 @@ import { AccountSharing, Help, Notification, } from '../../organism';
 import { APP_CODES, APP_PERMISSION_DOMAIN, CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, PORTALS_IDS, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
 import { useContextSelector } from 'use-context-selector';
 import { AppConfigContext } from '../../..';
-import { useHistory, useLocation } from 'react-router-dom';
 export const HeaderV2 = memo(props => {
-    var _a;
+    var _a, _b;
     const { auth, env: envContext, languageCode = 'en', appCode, urlLogout: urlLogoutProvider = '', } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const history = useHistory();
@@ -31,9 +31,9 @@ export const HeaderV2 = memo(props => {
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
     const urlParams = useMemo(() => new URLSearchParams(search), [search]);
-    const oidParam = urlParams.get('oid');
+    const oidParam = (_a = urlParams.get('oid')) !== null && _a !== void 0 ? _a : '';
     // States
-    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam !== null && oidParam !== void 0 ? oidParam : '' : (_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : ''}`);
+    const [selectedAccount, setSelectedAccount] = useState(`${useURLParam ? oidParam : `${(_b = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _b !== void 0 ? _b : ''}`}`);
     // Memo
     const accountSelectionDomain = useMemo(() => {
         var _a;
@@ -82,12 +82,17 @@ export const HeaderV2 = memo(props => {
     };
     // Handlers
     const handleChangeAccount = (userId) => {
-        setSelectedAccount(String(userId));
+        setSelectedAccount(userId);
         if (useURLParam) {
-            urlParams.set('oid', `${userId}`);
+            if (userId) {
+                urlParams.set('oid', userId);
+            }
+            else {
+                urlParams.delete('oid');
+            }
             history.replace({ search: urlParams.toString() });
         }
-        onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(String(userId));
+        onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },

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

@@ -51,6 +51,8 @@ export const TemplateSaveAs = props => {
     };
     const [searchValue, setSearchValue] = useState('');
     const searchValueDebounce = useDebounce(searchValue, 1000);
+    // Watches
+    const defaultThumbnailValue = Form.useWatch('defaultThumbnail', form);
     // Effects
     useEffect(() => {
         if (searchValueDebounce && onSearch)
@@ -208,7 +210,7 @@ export const TemplateSaveAs = props => {
                     React.createElement(Form.Item, { name: "description", label: descriptionLabel || 'Description' },
                         React.createElement(Input, { placeholder: descriptionPlaceholder || 'Describe your media template', maxLength: 400, onBlur: e => handleChangeValue({ description: e.target.value }) })),
                     React.createElement(Form.Item, { name: "defaultThumbnail", shouldUpdate: true, required: true, label: imageReviewLabel || 'Thumbnail template' },
-                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: form.getFieldValue('defaultThumbnail'), onSelectDefault: value => {
+                        React.createElement(ImageSlider, Object.assign({ defaultThumbnail: defaultThumbnailValue, onSelectDefault: value => {
                                 form.setFieldValue('defaultThumbnail', value);
                                 handleChangeValue({ defaultThumbnail: value });
                             } }, restImageReviewProps))),

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

@@ -1,5 +1,5 @@
 // Libraries
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import Icon from '@antscorp/icons';
 // Components
 import { Flex, Spin } from '@antscorp/antsomi-ui/es/components';
@@ -18,6 +18,10 @@ export const ImageSlider = props => {
     const smallImageWidth = useMemo(() => imageWidth / slidesPerView - (10 * (slidesPerView - 1)) / slidesPerView, [imageWidth, slidesPerView]);
     const [selectedThumbnail, setSelectedThumbnail] = useState(0);
     const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    // Effects
+    useEffect(() => {
+        setDefaultThumbnailInternal(defaultThumbnail || 0);
+    }, [defaultThumbnail]);
     const handleScroll = useCallback((scrollIndex) => {
         var _a, _b;
         (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({

package/es/constants/theme.js

@@ -13,7 +13,7 @@ export const THEME = {
         colorTextDark: '#333333',
         colorTextPlaceholder: '#BEBEBE',
         colorTextDisabled: '#999999',
-        colorError: '#CF1825',
+        colorError: '#EF3340',
         colorWarning: '#faad14',
         colorPrimary: '#005fb8',
         colorTextHover: '#3a72b6',
@@ -203,5 +203,6 @@ THEME.components = {
         itemHoverBg: '#F2F9FF',
         activeBarBorderWidth: 0,
     },
+    Form: {},
 };
 export const globalToken = theme.getDesignToken(THEME);

package/package.json

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