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

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/DrawerDetail/DrawerDetail.js

@@ -10,23 +10,27 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
+import { ConfigProvider } from 'antd';
+import { isNil } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
-import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
+import { CloseBtn, Content, DrawerHeader, LeftMenu, MenuFooter, MenuItem, StyledDrawer, } from './styled';
 // Constants
-import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { BREAK_POINT, DRAWER_DETAIL_LOCAL_STORAGE_KEY, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
 import { ToggleDrawerSizeButton } from './components';
 // Hooks
 import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
-import { ConfigProvider } from 'antd';
+// Utils
+import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 export const DrawerDetail = props => {
     // Props
-    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max' } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize"]);
+    const { width, fullScreen, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name"]);
     const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
     const { onClose = () => { } } = props;
-    const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
+    const _b = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _b, restOfCloseIcon = __rest(_b, ["show", "onClick"]);
     // Hooks
     const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
     // State
@@ -46,6 +50,14 @@ export const DrawerDetail = props => {
                 break;
         }
     }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    // Get cache collapse from local storage
+    useEffect(() => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        const cachedCollapse = localStorageValues[name || ''];
+        if (!isNil(cachedCollapse)) {
+            toggleCollapseDrawer(cachedCollapse);
+        }
+    }, [name, toggleCollapseDrawer]);
     // Memo
     const drawerWidth = useMemo(() => {
         if (fullScreen)
@@ -75,6 +87,17 @@ export const DrawerDetail = props => {
             }
         }
     }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
+    // Handlers
+    const handleToggleDrawerSize = () => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        toggleCollapseDrawer(!collapseDrawer);
+        /**
+         * Set local storage last collapsed
+         */
+        if (name) {
+            localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
+        }
+    };
     return (React.createElement(ConfigProvider, { theme: { components: { Drawer: { motionDurationSlow: '0ms' } } } },
         React.createElement(StyledDrawer, Object.assign({}, restProps, { push: false, closable: false, width: drawerWidth, classNames: {
                 body: 'drawer-detail-body',
@@ -84,7 +107,7 @@ export const DrawerDetail = props => {
                     onClose(e);
                 } }),
                 React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
             showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
                 React.createElement("div", null,
                     showClose && (React.createElement(CloseBtn, { onClick: onClose },
@@ -92,6 +115,8 @@ export const DrawerDetail = props => {
                     React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3 },
                         React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
                 React.createElement(MenuFooter, null, footer))),
-            React.createElement(Content, null, children))));
+            React.createElement(Content, null,
+                (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
+                children))));
 };
 DrawerDetail.defaultProps = {};

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

@@ -4,10 +4,11 @@ declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
 declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
 declare const BREAK_POINT = "1440px";
+declare const DRAWER_DETAIL_LOCAL_STORAGE_KEY = "drawer-detail-collapses";
 declare const DRAWER_DETAIL_DIMENSION: {
     LAYER_2: {
         minWidth: string;
         maxWidth: string;
     };
 };
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

@@ -4,6 +4,7 @@ const DRAWER_LARGE_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MAX_WIDTH = 'calc(100vw - 70px)';
 const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
 const BREAK_POINT = '1440px';
+const DRAWER_DETAIL_LOCAL_STORAGE_KEY = 'drawer-detail-collapses';
 const LAYER_2_MIN_WIDTH = '740px';
 const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
 const DRAWER_DETAIL_DIMENSION = {
@@ -12,4 +13,4 @@ const DRAWER_DETAIL_DIMENSION = {
         maxWidth: LAYER_2_MAX_WIDTH,
     },
 };
-export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, };
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
+import { DrawerHeaderProps } from './types';
 export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
 export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,7 @@
 // Libraries
 import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Drawer
 import { Drawer } from '../Drawer';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -16,8 +18,8 @@ export const StyledDrawer = styled(Drawer) `
 
     .close-btn {
       position: absolute;
-      top: 24.5px;
-      right: 25px;
+      top: 20px;
+      right: 20px;
       width: 24px;
       height: 24px;
       display: flex;
@@ -103,4 +105,17 @@ export const MenuItem = styled.div `
     }
   }
 `;
+export const DrawerHeader = styled(Flex) `
+  position: sticky;
+  top: 0px;
+  height: 64px;
+  padding: 0px 20px;
+  box-sizing: border-box;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0};
+  z-index: 20;
+
+  ${props => props.height &&
+    `height: ${typeof props.height === 'string' ? props.height : `${props.height}px`};`}
+  ${props => props.showBorderBottom && `border-bottom: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw4};`}
+`;
 export const MenuFooter = styled.div ``;

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

@@ -1,18 +1,24 @@
 import React, { ReactNode } from 'react';
-import type { DrawerProps, MenuProps as AntdProps } from 'antd';
+import type { DrawerProps, MenuProps as AntdProps, FlexProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export type TDefaultSize = 'max' | 'min';
-export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
+export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'title'> {
+    name?: string;
     fullScreen?: boolean;
     maxWidth?: string | number;
     minWidth?: string | number;
     defaultSize?: TDefaultSize;
+    headerProps?: DrawerHeaderProps;
     menuProps?: DrawerDetailMenuProps;
     closeIconProps?: DrawerDetailCloseIconProps;
 }
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;
 }
+export interface DrawerHeaderProps extends FlexProps {
+    height?: React.CSSProperties['height'];
+    showBorderBottom?: boolean;
+}
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;
     showExpandButton?: boolean;

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/es/constants/theme.js

@@ -210,6 +210,7 @@ THEME.components = {
         itemMarginInline: 0,
         itemMarginBlock: 0,
         itemBorderRadius: 5,
+        itemHeight: 30,
     },
     Form: {},
 };

package/es/utils/common.d.ts

@@ -85,3 +85,4 @@ export declare const simplifyString: (str: string) => string;
 export declare const searchStringQuery: (str: string, queryStr: string) => boolean;
 export declare const isExistedImage: (imageUrl: string) => boolean;
 export declare const getUrlNoCache: (url?: string, cacheValue?: number | string) => string;
+export declare const safeParseJson: (json?: string | null, defaultValue?: any) => any;

package/es/utils/common.js

@@ -492,3 +492,13 @@ export const getUrlNoCache = (url = '', cacheValue = 0) => {
     }
     return urlNoCache;
 };
+export const safeParseJson = (json, defaultValue) => {
+    if (!json)
+        return defaultValue;
+    try {
+        return JSON.parse(json);
+    }
+    catch (error) {
+        return defaultValue;
+    }
+};

package/package.json

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