@antscorp/antsomi-ui 1.3.5-beta.566 → 1.3.5-beta.568

package/es/components/icons/document/IconGallery.js

@@ -40,7 +40,7 @@ export const IconGallery = () => {
                 React.createElement("h4", null, "These components below are invalid (check name and file name is correct?)"),
                 invalidIcons.map(item => (React.createElement("strong", { key: item.name, style: { color: 'red' } },
                     React.createElement("pre", null, item.name)))))) : null,
-            React.createElement(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '20px' } }),
+            React.createElement(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }),
             React.createElement(Flex, { className: "grid-container", gap: 16 }, validIcons
                 .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
                 .map(item => {

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

@@ -7,7 +7,6 @@ export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
-export { ArrowIcon } from './ArrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { AssignmentIndIcon } from './AssignmentIndIcon';
 export { AttachmentIcon } from './AttachmentIcon';
@@ -33,17 +32,16 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
-export { CloseRemoveIcon } from './CloseRemoveIcon';
 export { CodeIcon } from './CodeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
@@ -62,7 +60,6 @@ export { CurvedConnectorIcon } from './CurvedConnectorIcon';
 export { DashboardIcon } from './DashboardIcon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
-export { DataVer2Icon } from './DataVer2Icon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';
@@ -103,9 +100,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -132,7 +129,6 @@ export { LineIcon } from './LineIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
-export { LockRestrictIcon } from './LockRestrictIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MediaGalleryIcon } from './MediaGalleryIcon';
@@ -145,13 +141,12 @@ export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
-export { MoveTo1Icon } from './MoveTo1Icon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -236,8 +231,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebIcon } from './WebIcon';
-export { WebPagesBrowserIcon } from './WebPagesBrowserIcon';
 export { WebhookIcon } from './WebhookIcon';
+export { WebIcon } from './WebIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -7,7 +7,6 @@ export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
-export { ArrowIcon } from './ArrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { AssignmentIndIcon } from './AssignmentIndIcon';
 export { AttachmentIcon } from './AttachmentIcon';
@@ -33,17 +32,16 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
-export { CloseRemoveIcon } from './CloseRemoveIcon';
 export { CodeIcon } from './CodeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
@@ -62,7 +60,6 @@ export { CurvedConnectorIcon } from './CurvedConnectorIcon';
 export { DashboardIcon } from './DashboardIcon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
-export { DataVer2Icon } from './DataVer2Icon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';
@@ -103,9 +100,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -132,7 +129,6 @@ export { LineIcon } from './LineIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
-export { LockRestrictIcon } from './LockRestrictIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MediaGalleryIcon } from './MediaGalleryIcon';
@@ -145,13 +141,12 @@ export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
-export { MoveTo1Icon } from './MoveTo1Icon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -236,8 +231,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebIcon } from './WebIcon';
-export { WebPagesBrowserIcon } from './WebPagesBrowserIcon';
 export { WebhookIcon } from './WebhookIcon';
+export { WebIcon } from './WebIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

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

@@ -15,9 +15,10 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;
 }
-export interface DrawerHeaderProps extends FlexProps {
+export interface DrawerHeaderProps extends Omit<FlexProps, 'children'> {
     height?: React.CSSProperties['height'];
     showBorderBottom?: boolean;
+    children?: ReactNode;
 }
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -93,7 +93,7 @@ export const SearchUser = (props) => {
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),
                     React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, user.user_name),
+                        React.createElement("div", { className: "name" }, user.full_name),
                         React.createElement("div", { className: "email" }, user.email)))),
             })) },
             React.createElement(Input, { style: { padding: '5px' }, placeholder: placeholder, suffix: isFetching ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : (

package/es/components/organism/TicketEditor/Content.js

@@ -9,8 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useEffect, useRef, useState } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
+import { Helmet } from 'react-helmet';
 import dayjs from 'dayjs';
 import DropdownComponent from './components/DropdownComponent';
 import MessageComponent from './components/MessageComponent';
@@ -20,6 +21,7 @@ import { MESSAGE_TYPE, TICKET_CUSTOM_MESSAGE_KEY } from './constant';
 import { WrapperContent, WrapperContentInput, WrapperEditor, WrapperIconEditor, WrapperInputFile, WrapperLable, WrapperLeftContent, WrapperLinkItemFiles, WrapperMessageContent, WrapperRightContent, WrapperTextEdit, WrapperTextInput, DrawerHeader, } from './styled';
 import { formatAccountId, formatDatarender, formatParams, handleValidateContent, postCustomEvent, } from './util';
 const initValueInput = {
+    originTitle: 'Create new ticket',
     title: '',
     feature: {},
     ticketType: {},
@@ -121,8 +123,8 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             // handleSendData(valueInput)
         }
     };
-    const handleOnchangeTitle = e => {
-        const { value: title } = e.target;
+    const handleOnchangeTitle = title => {
+        // const { value: title } = e.target;
         updateValueInput({
             title,
         });
@@ -132,11 +134,26 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             setValueInput(initValueInput);
         }
     }, [openDrawer]);
-    useEffect(() => {
-        setDrawerHeader(React.createElement(DrawerHeader, null,
-            !!valueInput.title && (React.createElement(EditableName, { defaultValue: valueInput.title, onBlur: handleOnchangeTitle, readonly: isUpdate })),
-            React.createElement("div", { id: "header-journey-right", className: "right-content" }, !isUpdate && (React.createElement(Button, { type: "primary", onClick: handleSubmit }, "Save")))));
-    }, [valueInput && valueInput.title, isUpdate]);
+    // useEffect(() => {
+    //   setDrawerHeader(
+    //     <DrawerHeader>
+    //       {!!valueInput.title && (
+    //         <EditableName
+    //           defaultValue={valueInput.title}
+    //           onBlur={handleOnchangeTitle}
+    //           readonly={isUpdate}
+    //         />
+    //       )}
+    //       <div id="header-journey-right" className="right-content">
+    //         {!isUpdate && (
+    //           <Button type="primary" onClick={handleSubmit}>
+    //             Save
+    //           </Button>
+    //         )}
+    //       </div>
+    //     </DrawerHeader>,
+    //   );
+    // }, [valueInput && valueInput.title, isUpdate]);
     useEffect(() => {
         if (!isUpdate) {
             const newFollowers = [];
@@ -158,6 +175,12 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
             updateValueInput({ ownerId: newOwnerIds, followers: newFollowers });
         }
     }, [isUpdate, accountManage, listUsers, accountEdit]);
+    const browserTitle = useMemo(() => {
+        if (valueInput.title && valueInput.title.trim()) {
+            return valueInput.title;
+        }
+        return valueInput.originTitle;
+    }, [valueInput.title, valueInput.originTitle]);
     const getCustomFields = () => {
         if (dataSelects && dataSelects.length)
             return;
@@ -223,6 +246,7 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
                     ticketType,
                     title,
                     referenceUrl,
+                    originTitle: title,
                 });
             }
         }
@@ -334,11 +358,19 @@ const Content = ({ apiKey, domain, portalId, token, action, ticketId, listUsers,
         setIsOpenToast(Object.assign(Object.assign({}, isOpenToast), { isOpen: false }));
     };
     return (React.createElement("div", { style: { height: '100%' } },
+        React.createElement(Helmet, null,
+            React.createElement("meta", { charSet: "utf-8" }),
+            React.createElement("title", null, browserTitle)),
         React.createElement(Spin, { style: { height: '100vh' }, spinning: isLoading ||
                 isLoadingDetails ||
                 isLoadingDataSouce ||
                 isLoadingFollower ||
                 isLoadingSelectedAccount },
+            React.createElement(DrawerHeader, null,
+                React.createElement(EditableName, { value: valueInput.title, onChange: handleOnchangeTitle, readonly: isUpdate, error: isEmptyField && (!valueInput.title || !valueInput.title.trim())
+                        ? "Title can't be empty"
+                        : '' }),
+                React.createElement("div", { id: "header-journey-right", className: "right-content" }, !isUpdate && (React.createElement(Button, { type: "primary", onClick: handleSubmit }, "Save")))),
             React.createElement(WrapperContent, { style: { height: '100%' } },
                 React.createElement(WrapperLeftContent, null,
                     React.createElement(WrapperContentInput, { style: { alignItems: 'flex-start' } },

package/es/components/organism/TicketEditor/index.js

@@ -3,7 +3,7 @@ import Content from './Content';
 import Service from './Service';
 import TicketIcon from './components/icons/TicketIcon';
 import AddTicketIcon from './components/icons/AddTicketIcon';
-import { Button, Modal, Popover, Typography, DrawerDetail, message, } from '@antscorp/antsomi-ui/es/components/';
+import { Button, Modal, Popover, Typography, DrawerDetail, message, Icon, } from '@antscorp/antsomi-ui/es/components/';
 import { WrapperModalHeader, TicketButton, TicketEditorWrapper } from './styled';
 // import Message from './components/Message';
 const defaultProps = {
@@ -236,8 +236,17 @@ export const TicketEditor = props => {
             React.createElement(Popover, { open: isOpenPopover, className: "popoverBody" },
                 React.createElement(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('DRAWER') }, "Create ticket"),
                 React.createElement(Typography, { className: "popoverItem", onClick: () => handleSelectPopover('CHAT') }, "Chat with us")))),
-        React.createElement(DrawerDetail, { open: openDrawer, onClose: () => handleClose(true, false), headerProps: {
-                children: drawerHeader,
+        React.createElement(DrawerDetail, { open: openDrawer, onClose: () => handleClose(true, false), menuProps: {
+                items: [
+                    {
+                        icon: React.createElement(Icon, { type: "icon-ants-pencil" }),
+                        label: 'Settings',
+                        key: 'settings',
+                    },
+                ],
+                selectedKeys: ['settings'],
+            }, headerProps: {
+                // children: drawerHeader,
                 showBorderBottom: true,
             }, name: "ticket-editor-drawer" }, openDrawer && (React.createElement(Content, { apiKey: apiKey, portalId: portalId, token: token, domain: domain, action: action, listUsers: listUsers, domainTicket: domainTicket, config: config, ticketDetails: ticketDetails, listComment: listComment, ticketId: ticketId, userId: userId, fetchgetTicketComments: fetchgetTicketComments, isLoadingComment: isLoadingComment, isLoadingDetails: isLoadingDetails, isLoadingDataSouce: isLoadingDataSouce, handleCloseDrawer: handleCloseDrawer, setIsSuccessCreated: setIsSuccessCreated, accountManage: accountManage, timeZone: timeZone, isLoadingSelectedAccount: isLoadingSelectedAccount, accountEdit: accountEdit, initOwnerId: ownerId, isAllAccount: isAllAccount, setDrawerHeader: setDrawerHeader, openDrawer: openDrawer, dataSelectInput: dataSelectInput, setDataSelectInput: setDataSelectInput }))),
         React.createElement(Modal, { open: isOpenModal, onCancel: () => setIsOpenModal(false), className: "modal" },

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

@@ -781,17 +781,64 @@ export const TicketEditorWrapper = styled.div `
     }
   }
 `;
+// export const DrawerHeader = styled.div`
+//   background: #ffffff;
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   width: 100%;
+//   .left-content {
+//     display: flex;
+//     align-items: center;
+//     gap: 15px;
+//   }
+//   .right-content {
+//     display: flex;
+//     align-items: center;
+//     gap: 15px;
+//     .header-info-drawer {
+//       display: flex;
+//       flex-direction: column;
+//       gap: 5px;
+//       padding: 4.5px 0;
+//       > div {
+//         display: flex;
+//         align-items: center;
+//         gap: 10px;
+//         justify-content: end;
+//       }
+//       p {
+//         margin: 0;
+//       }
+//     }
+//   }
+// `;
 export const DrawerHeader = styled.div `
-  background: #ffffff;
+  position: sticky;
+  top: 0px;
+  height: 50px;
+  padding: 0px 15px;
+  box-sizing: border-box;
+  background-color: #FFFFFF;
+  flex-shrink: 0;
+  z-index: 20;
+  border-bottom: 1px solid #E5E5E5;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 100px;
   width: 100%;
+  max-width: 100%;
 
   .left-content {
     display: flex;
     align-items: center;
     gap: 15px;
+    max-width: calc(100% - 150px);
+
+    #header-journey-name {
+      max-width: 100%;
+    }
   }
 
   .right-content {

package/es/components/template/Layout/Layout.js

@@ -36,7 +36,6 @@ import { ChildrenWrapper, ContentWrapper, LayoutLoading, LayoutWrapper, Notifica
 import { LeftMenu } from '../../organism';
 import { Flex } from '../../atoms';
 import { HeaderV2, AccessDenied } from '../../molecules';
-import { RecommendationWorkspace } from './components';
 // Contexts
 import { AppConfigContext } from '../../..';
 // Constants
@@ -49,6 +48,7 @@ import { useLayoutStore } from './stores';
 import { hasSelectAccountPermission } from './utils';
 import { useCustomRouter, useDeepCompareEffect, useDeepCompareMemo, useMutationObserver, } from '@antscorp/antsomi-ui/es/hooks';
 import { HOME_MENU_ITEMS } from '../../organism/LeftMenu/constants';
+import { RecommendationWorkspace } from './components';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 const { DATAFLOWS, APP_ANTALYSER } = APP_CODES;
 export const Layout = memo(props => {
@@ -67,20 +67,18 @@ export const Layout = memo(props => {
     const params = useParams();
     const location = useLocation();
     const { navigate, replace } = useCustomRouter();
-    const [state, setState] = useState({
-        showAccountSelection: false,
-        noSpaceTopContent: false,
-        activeMenu: null,
-        activePageTitle: '',
-        isAccessDenied: false,
-        isLoadingLayout: true,
-    });
-    const { showAccountSelection, noSpaceTopContent, activeMenu, activePageTitle, isAccessDenied, isLoadingLayout, } = state;
+    const [showAccountSelection, setShowAccountSelection] = useState(false);
+    const [noSpaceTopContent, setNoSpaceTopContent] = useState(false);
+    const [activeMenu, setActiveMenu] = useState(null);
+    const [activePageTitle, setActivePageTitle] = useState('');
+    const [isAccessDenied, setIsAccessDenied] = useState(false);
+    const [isLoadingLayout, setLoadingLayout] = useState(true);
     const notificationWrapperRef = useRef(null);
+    const timeoutLoadingLayout = useRef(null);
     useMutationObserver(() => {
         if (notificationWrapperRef.current) {
             const child = notificationWrapperRef.current.querySelector('div');
-            setState(prev => (Object.assign(Object.assign({}, prev), { noSpaceTopContent: !!child })));
+            setNoSpaceTopContent(!!child);
         }
     }, notificationWrapperRef, {
         attributes: true,
@@ -148,14 +146,13 @@ export const Layout = memo(props => {
     const leftMenuAppConfig = useDeepCompareMemo(() => omit(Object.assign(Object.assign({}, appConfig), { permissionDomain }), ['setAppConfig']), [appConfig]);
     const antsProcessingNotificationConfig = useMemo(() => (Object.assign({ permissionDomain, socketDomain: SOCKET_API, token, accountId: userId, userId, lang: languageCode, networkId: portalId }, processingNotificationProps)), [permissionDomain, token, userId, languageCode, portalId, processingNotificationProps]);
     const onActiveMenuCodeChange = useCallback((activeItemPath, flattenPermissionList, menuListPermission) => {
+        var _a;
         const activeMenuItem = activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath[(activeItemPath === null || activeItemPath === void 0 ? void 0 : activeItemPath.length) - 1];
         const { menu_item_code, page_title, menu_item_name, permission_code } = activeMenuItem || {};
-        setState(prev => {
-            var _a;
-            return (Object.assign(Object.assign({}, prev), { activePageTitle: page_title
-                    ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
-                    : menu_item_name, activeMenu: activeMenuItem }));
-        });
+        setActivePageTitle(page_title
+            ? i18nInstance.t((_a = translations.leftMenu.pageTitle) === null || _a === void 0 ? void 0 : _a[`${page_title}`]).toString()
+            : menu_item_name);
+        setActiveMenu(activeMenuItem);
         onActiveMenuChange === null || onActiveMenuChange === void 0 ? void 0 : onActiveMenuChange(menu_item_code);
         const hasRole = hasSelectAccountPermission({
             activeItemPath: cloneDeep(activeItemPath),
@@ -163,16 +160,25 @@ export const Layout = memo(props => {
             menuListPermission,
             appItem: activeItemPath[0],
         });
-        setState(prev => (Object.assign(Object.assign({}, prev), { showAccountSelection: hasRole })));
+        setShowAccountSelection(hasRole);
         // Check if the user has permission or not (access denied)
         if (!!permission_code &&
             !!activeMenuItem &&
             Array.isArray(flattenPermissionList) &&
-            flattenPermissionList.length) {
+            !!flattenPermissionList.length) {
             const isAccessDenied = !flattenPermissionList.some(item => item.menu_code === activeMenuItem.permission_code);
-            setState(prev => (Object.assign(Object.assign({}, prev), { isAccessDenied, isLoadingLayout: false })));
+            setIsAccessDenied(isAccessDenied);
+        }
+        // Handle set loading layout
+        if (timeoutLoadingLayout) {
+            clearTimeout(timeoutLoadingLayout.current);
         }
-    }, [onActiveMenuChange]);
+        timeoutLoadingLayout.current = setTimeout(() => {
+            if (isLoadingLayout) {
+                setLoadingLayout(false);
+            }
+        }, 500);
+    }, [isLoadingLayout, onActiveMenuChange]);
     // Effects
     /** Handle replace current userId in params if current userId is not match */
     useDeepCompareEffect(() => {

package/package.json

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

package/es/components/icons/ArrowIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const ArrowIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ArrowIcon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const ArrowIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M9 5.01562H18.9844V15H17.0156V8.39062L5.39062 20.0156L3.98438 18.6094L15.6094 6.98438H9V5.01562Z", fill: "currentColor" })));
-});

package/es/components/icons/CloseRemoveIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const CloseRemoveIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/CloseRemoveIcon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const CloseRemoveIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M18.9844 6.42188L13.4062 12L18.9844 17.5781L17.5781 18.9844L12 13.4062L6.42188 18.9844L5.01562 17.5781L10.5938 12L5.01562 6.42188L6.42188 5.01562L12 10.5938L17.5781 5.01562L18.9844 6.42188Z", fill: "currentColor" })));
-});

package/es/components/icons/DataVer2Icon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const DataVer2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/DataVer2Icon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const DataVer2Icon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.002 6.5C19.002 7.88071 15.6499 9 11.515 9C7.38 9 4.02795 7.88071 4.02795 6.5C4.02795 5.11929 7.38 4 11.515 4C15.6499 4 19.002 5.11929 19.002 6.5ZM18.974 12.131C18.974 13.42 15.622 14.465 11.487 14.465C7.352 14.465 4 13.419 4 12.131V8.46204C4 9.75104 7.352 10.795 11.487 10.795C15.622 10.795 18.974 9.74904 18.974 8.46204V12.131ZM18.974 17.8423C18.974 19.1313 15.622 20.1763 11.487 20.1763C7.352 20.1763 4 19.1303 4 17.8423V14.1733C4 15.4623 7.352 16.5063 11.487 16.5063C15.622 16.5063 18.974 15.4603 18.974 14.1733V17.8423Z" })));
-});

package/es/components/icons/LockRestrictIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const LockRestrictIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/LockRestrictIcon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const LockRestrictIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M15.0938 8.01562V6C15.0938 5.15625 14.7812 4.4375 14.1562 3.84375C13.5625 3.21875 12.8438 2.90625 12 2.90625C11.1562 2.90625 10.4219 3.21875 9.79688 3.84375C9.20312 4.4375 8.90625 5.15625 8.90625 6V8.01562H15.0938ZM10.5938 16.4062C11 16.8125 11.4688 17.0156 12 17.0156C12.5312 17.0156 13 16.8125 13.4062 16.4062C13.8125 16 14.0156 15.5312 14.0156 15C14.0156 14.4688 13.8125 14 13.4062 13.5938C13 13.1875 12.5312 12.9844 12 12.9844C11.4688 12.9844 11 13.1875 10.5938 13.5938C10.1875 14 9.98438 14.4688 9.98438 15C9.98438 15.5312 10.1875 16 10.5938 16.4062ZM18 8.01562C18.5312 8.01562 19 8.21875 19.4062 8.625C19.8125 9 20.0156 9.45312 20.0156 9.98438V20.0156C20.0156 20.5469 19.8125 21.0156 19.4062 21.4219C19 21.7969 18.5312 21.9844 18 21.9844H6C5.46875 21.9844 5 21.7969 4.59375 21.4219C4.1875 21.0156 3.98438 20.5469 3.98438 20.0156V9.98438C3.98438 9.45312 4.1875 9 4.59375 8.625C5 8.21875 5.46875 8.01562 6 8.01562H6.98438V6C6.98438 4.625 7.46875 3.45313 8.4375 2.48438C9.4375 1.48438 10.625 0.984375 12 0.984375C13.375 0.984375 14.5469 1.48438 15.5156 2.48438C16.5156 3.45313 17.0156 4.625 17.0156 6V8.01562H18Z" })));
-});

package/es/components/icons/MoveTo1Icon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const MoveTo1Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/MoveTo1Icon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const MoveTo1Icon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M20.0156 6C21.0938 6 21.9844 6.89062 21.9844 8.01562V18C21.9844 19.0781 21.0938 20.0156 20.0156 20.0156H3.98438C2.90625 20.0156 2.01562 19.0781 2.01562 18V6C2.01562 4.92188 2.90625 3.98438 3.98438 3.98438H9.98438L12 6H20.0156ZM20.0156 18V8.01562H11.1562L10.5938 7.40625L9.1875 6H3.98438V18H20.0156ZM12.1406 12L10.5938 10.4062L12 9L15.9844 13.0312L12 17.0156L10.5469 15.6094L12.1406 14.0156H8.01562V12H12.1406Z", fill: "currentColor" })));
-});

package/es/components/icons/WebPagesBrowserIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { IconProps } from './types';
-export declare const WebPagesBrowserIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/WebPagesBrowserIcon.js

@@ -1,7 +0,0 @@
-import React, { forwardRef } from 'react';
-import { useIcon } from './hooks/useIcon';
-export const WebPagesBrowserIcon = forwardRef((props, ref) => {
-    const { width, height } = useIcon(props);
-    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M20.0156 18V9H15.9844V18H20.0156ZM15 12.9844V9H3.98438V12.9844H15ZM15 18V14.0156H3.98438V18H15ZM20.0156 3.98438C20.5469 3.98438 21 4.1875 21.375 4.59375C21.7812 5 21.9844 5.46875 21.9844 6V18C21.9844 18.5312 21.7812 19 21.375 19.4062C21 19.8125 20.5469 20.0156 20.0156 20.0156H3.98438C3.45312 20.0156 2.98438 19.8125 2.57812 19.4062C2.20312 19 2.01562 18.5312 2.01562 18V6C2.01562 5.46875 2.20312 5 2.57812 4.59375C2.98438 4.1875 3.45312 3.98438 3.98438 3.98438H20.0156Z" })));
-});