@antscorp/antsomi-ui 1.3.5-beta.283 → 1.3.5-beta.284

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

@@ -1,13 +1,14 @@
 import Icon from '@antscorp/icons';
 import React, { useCallback, useMemo, useState } from 'react';
-import { Input } from 'antd';
+import { Divider, Input } from 'antd';
 import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
 import { AccountItem } from './components';
 import { AccountSelectionStyled } from './styled';
-import { PORTALS_IDS } from '@antscorp/antsomi-ui/es/constants';
+import { PORTALS_IDS, THEME } from '@antscorp/antsomi-ui/es/constants';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount } from '../../..';
 export const AccountListing = props => {
+    var _a;
     const { className, apiConfig, showAllAccount = true, currentAccount = '', onChange } = props;
     const { domain, token, userId, appCode, menuCode, portalId } = apiConfig;
     // States
@@ -63,7 +64,8 @@ export const AccountListing = props => {
             React.createElement("ul", { className: "scroll-content" },
                 !!(recentData === null || recentData === void 0 ? void 0 : recentData.value) && (React.createElement(React.Fragment, null,
                     React.createElement(Text, { className: "recent-text" }, "Recent"), 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 }))))), accountData === null || accountData === 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(Divider, { style: { margin: '8px 0', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3 } }), 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 === account.userId }))))),
         showAllAccount ? (React.createElement(Text, { className: `all-account ${isAllAccount ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('all') },

package/es/components/molecules/EditableName/EditableName.js

@@ -8,8 +8,11 @@ export const EditableName = React.forwardRef((props, ref) => {
     var _a;
     const { className, isLoading, defaultValue, required, error, value, onBlur, onChange } = props;
     const [inputWidth, setInputWidth] = useState(1);
-    const [internalValue, setInternalValue] = useState(defaultValue || '');
-    const requiredError = useMemo(() => (required && internalValue.trim().length === 0 ? 'This field is required' : ''), [required, internalValue]);
+    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const requiredError = useMemo(() => {
+        const newValue = value ? value.trim() : internalValue.trim();
+        return required && newValue.length === 0 ? 'This field is required' : '';
+    }, [required, internalValue, value]);
     const spanRef = useRef(null);
     const inputRef = useRef(null);
     useImperativeHandle(ref, () => ({
@@ -32,7 +35,7 @@ export const EditableName = React.forwardRef((props, ref) => {
         }
         // NOTE: the defaultValue props should need use only one time and don't change in component life circle
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [value]);
     return (React.createElement(InputWrapperStyled, { className: className || '' },
         React.createElement(Tooltip, { title: value || internalValue },
             React.createElement(Input, { ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {

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

@@ -32,11 +32,14 @@ export const InputWrapperStyled = styled.div `
     align-self: stretch;
     align-items: center;
     padding: 0 5px;
-    margin-left: 10px;
+    padding-left: 15px;
   }
 
   .suffix-icon {
     display: none;
+    &:hover {
+      display: flex;
+    }
   }
 
   input:hover {

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

@@ -3,10 +3,16 @@ import { AccountSelectionProps } from '../AccountSelection';
 import { AccountSharingProps } from '../../organism';
 import { IHelpProps } from '../../organism/Help/types';
 import { envType } from '@antscorp/antsomi-ui/es/types/config';
+interface Breadcrumb {
+    title: string;
+    link?: string;
+    useExternalLink?: boolean;
+}
 export interface HeaderV2Props {
     className?: string;
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;
+    breadcrumbs?: Breadcrumb[];
     accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
         onSelectAccount?: (userId: string) => void;
     };
@@ -35,3 +41,4 @@ export interface HeaderV2Props {
     };
 }
 export declare const HeaderV2: React.FC<HeaderV2Props>;
+export {};

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

@@ -10,7 +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';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 // Styled
 import { HeaderV2Styled } from './styled';
 // Components
@@ -20,14 +20,16 @@ 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 { isNil } from 'lodash';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
+// const DOUBLE_RIGHT_POINTING = '»'
 export const HeaderV2 = memo(props => {
     var _a, _b;
     const { auth, env: envContext, languageCode = 'en', appCode: contextAppCode, urlLogout: urlLogoutProvider = '', menuCode: contextMenuCode, } = useContextSelector(AppConfigContext, state => state);
     const { search } = useLocation();
     const history = useHistory();
     /** Prefer to use Header in AppConfigContext */
-    const { className, style, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { className, style, breadcrumbs, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     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, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -97,10 +99,18 @@ export const HeaderV2 = memo(props => {
         }
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };
+    const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
     return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
             React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: handleChangeAccount, inputStyle: inputStyle })),
-            typeof pageTitle === 'string' ? React.createElement("div", { className: "page-title" }, pageTitle) : pageTitle),
+            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)),
+                    breadcrumbs.length === index + 1 ? null : React.createElement(React.Fragment, null,
+                        "\u2002",
+                        QUOTE_ENTITY,
+                        "\u2002")))))) : null,
+                typeof pageTitle === 'string' ? (React.createElement("div", { className: "page-title" }, pageTitle)) : (pageTitle))),
         React.createElement("div", { className: "right-side" },
             showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,
             showNotification ? React.createElement(Notification, Object.assign({}, notificationConfigProps)) : null,

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

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b, _c;
 import styled from 'styled-components';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const HeaderV2Styled = styled.div `
@@ -23,8 +23,25 @@ export const HeaderV2Styled = styled.div `
     overflow: hidden;
   }
 
+  .header-breadcrumbs,
+  .header-breadcrumbs__item {
+    font-size: 12px;
+    line-height: 14px;
+    font-weight: bold;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw7};
+    user-select: none;
+  }
+
+  .header-breadcrumbs__item {
+    cursor: pointer;
+    &:hover {
+      color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText};
+    }
+  }
+
   .page-title {
     font-size: 20px;
+    line-height: 23px;
     font-weight: bold;
   }
 `;

package/package.json

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