@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.200

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

@@ -0,0 +1,109 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Drawer
+import { Drawer } from '../Drawer';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+const { token } = THEME || {};
+export const StyledDrawer = styled(Drawer) `
+  &.antsomi-drawer-content {
+    overflow: visible !important;
+
+    .drawer-detail-body {
+      display: flex;
+      width: 100%;
+      padding: 0px;
+      overflow: visible;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 24.5px;
+      right: 25px;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+      transition: all 0.3s;
+      z-index: 100;
+      cursor: pointer;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const Content = styled.div `
+  position: relative;
+  overflow: auto;
+  flex: 1 1 0%;
+`;
+export const LeftMenu = styled.div `
+  width: 46px;
+  height: 100%;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
+  padding: 8px 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 5px;
+`;
+export const CloseBtn = styled.div `
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const MenuItem = styled.div `
+  height: 36px;
+  width: 36px;
+  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusXL}px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  * {
+    color: ${token === null || token === void 0 ? void 0 : token.bw8};
+  }
+
+  i {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover {
+    background-color: ${token === null || token === void 0 ? void 0 : token.bw0};
+
+    * {
+      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+    }
+  }
+
+  &.active {
+    background-color: #d3e3fd;
+
+    * {
+      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+    }
+  }
+`;
+export const MenuFooter = styled.div ``;

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import type { DrawerProps, MenuProps as AntdProps } from 'antd';
+import { ItemType } from 'antd/es/menu/hooks/useItems';
+export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
+    fullScreen?: boolean;
+    menuProps?: DrawerDetailMenuProps;
+    closeIconProps?: DrawerDetailCloseIconProps;
+}
+export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
+    show?: boolean;
+    showExpandButton?: boolean;
+    showClose?: boolean;
+    footer?: ReactNode;
+    onClick?: (item: ItemType) => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
 import 'ace-builds/webpack-resolver';

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AccountSelectionProps } from '../AccountSelection';
+import { AccountSharingProps } from '../../organism';
+import { IHelpProps } from '../../organism/Help/types';
+import { envType } from '@antscorp/antsomi-ui/es/types/config';
+export interface HeaderV2Props {
+    className?: string;
+    style?: React.CSSProperties;
+    pageTitle?: string | React.ReactNode;
+    accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
+        onSelectAccount?: (account: number | 'ALL_ACCOUNT') => void;
+    };
+    helpConfig: Omit<IHelpProps, 'configs'> & {
+        configs: Omit<IHelpProps['configs'], 'portalId' | 'userId' | 'token' | 'domain' | 'domainTicket' | 'domainPlatform'>;
+    } & {
+        show?: boolean;
+    };
+    notificationConfig?: {
+        show?: boolean;
+    };
+    accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
+        show?: boolean;
+    };
+    useURLParam?: boolean;
+    config?: {
+        env?: envType;
+        language?: string;
+        userId?: number;
+        portalId?: number;
+        token?: string;
+    };
+}
+export declare const HeaderV2: React.FC<HeaderV2Props>;

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

@@ -0,0 +1,99 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { memo, useEffect, useState } from 'react';
+// Styled
+import { HeaderV2Styled } from './styled';
+// Components
+import { AccountSelection } from '../AccountSelection';
+import { AccountSharing, Help, Notification, } from '../../organism';
+// Constants
+import { CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { useContextSelector } from 'use-context-selector';
+import { AppConfigContext } from '../../..';
+export const HeaderV2 = memo(props => {
+    var _a, _b, _c;
+    const { auth, env: envContext, languageCode = 'en', } = useContextSelector(AppConfigContext, state => state);
+    /** Prefer to use Header in AppConfigContext */
+    const { className, style, pageTitle = 'Page Title', 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, } = config || {};
+    const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
+    const urlParams = new URLSearchParams(window.location.search);
+    const oidParam = urlParams.get('oid');
+    const [selectedAccount, setSelectedAccount] = useState(useURLParam
+        ? (_b = (_a = Number(oidParam)) !== null && _a !== void 0 ? _a : userId) !== null && _b !== void 0 ? _b : 'ALL_ACCOUNT'
+        : (_c = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _c !== void 0 ? _c : 'ALL_ACCOUNT');
+    useEffect(() => {
+        var _a;
+        if (!useURLParam)
+            return;
+        if (!oidParam) {
+            urlParams.append('oid', `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT'}`);
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        else {
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [oidParam, useURLParam, userId]);
+    if (!env || !language || !userId || !portalId || !token)
+        return null;
+    const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
+    const { show: showNotification = true } = notificationConfig;
+    const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
+    const accountSelectionApiConfig = {
+        domain: CDP_API[env],
+        languageCode: language,
+        userId,
+        portalId,
+        token,
+    };
+    const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
+    const notificationConfigProps = {
+        accountId: userId,
+        networkId: portalId,
+        token,
+        lang: language,
+        permissionDomain: PERMISSION_API,
+        socketDomain: SOCKET_API,
+    };
+    const accountSharingPropsFormatted = {
+        permissionDomain: PERMISSION_API,
+        iamDomain: IAM_API,
+        accountId: userId,
+        networkId: portalId,
+        urlEditProfile: `${PERMISSION_API}/${portalId}#/account/profile/`,
+        // 6006 is storybook port so direct to sandbox page
+        urlLogout: `${window.location.port === '6006' ? 'https://sandbox-cdp.antsomi.com/' : window.location.origin}/gen2/login`,
+        token,
+        lang: language,
+    };
+    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: userId => {
+                    setSelectedAccount(userId);
+                    if (useURLParam) {
+                        urlParams.set('oid', `${userId}`);
+                        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+                        window.history.replaceState(null, '', newUrl);
+                    }
+                    if (onSelectAccount)
+                        onSelectAccount(userId);
+                }, inputStyle: inputStyle })),
+            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,
+            showAccountSharing ? (React.createElement(AccountSharing, Object.assign({ isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess }, accountSharingPropsFormatted, accountSharingProps))) : null)));
+});

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

@@ -0,0 +1 @@
+export declare const HEADER_HEIGHT = 60;

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

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 60;

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

@@ -0,0 +1 @@
+export { HeaderV2, type HeaderV2Props } from './HeaderV2';

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

@@ -0,0 +1 @@
+export { HeaderV2 } from './HeaderV2';

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

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

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

@@ -0,0 +1,28 @@
+var _a;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const HeaderV2Styled = styled.div `
+  height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
+  background-color: #f6f8fc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  box-sizing: border-box;
+
+  .left-side,
+  .right-side {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .left-side {
+    gap: 15px;
+  }
+
+  .page-title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+`;

package/es/components/molecules/Modal/Modal.js

@@ -7,10 +7,12 @@ import { StyledModal, WrapperSpin } from './styled';
 export const OriginalModal = memo(props => {
     // Props
     const { loading } = props;
-    return (React.createElement(StyledModal, Object.assign({}, Object.assign(Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }), footer: (React.createElement(React.Fragment, null,
+    return (React.createElement(StyledModal, Object.assign({ closeIcon: React.createElement(Icon, { disabled: loading, type: "icon-ants-remove-slim", size: 15 }),
+        footer: (React.createElement(React.Fragment, null,
             React.createElement(Button, Object.assign({ type: "primary", onClick: props.onOk }, props.okButtonProps), props.okText ? props.okText : 'OK'),
-            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))), modalRender: node => loading ? (React.createElement(WrapperSpin, null,
-            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props), { maskClosable: loading ? false : props.maskClosable })),
+            React.createElement(Button, Object.assign({ onClick: props.onCancel }, props.cancelButtonProps), props.cancelText ? props.cancelText : 'Cancel'))),
+        modalRender: node => loading ? (React.createElement(WrapperSpin, null,
+            React.createElement(Spin, { spinning: loading }, node))) : (node) }, props, { maskClosable: loading ? false : props.maskClosable }),
         props.header || null,
         props.children || null));
 });

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

@@ -9,6 +9,10 @@ export const StyledModal = styled(Modal) `
       right: 10px !important;
       width: 24px !important;
       height: 24px !important;
+
+      .antsomi-modal-close-x {
+        padding: 0px;
+      }
     }
 
     .antsomi-modal-body {

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("../ModalV2").ModalV2Props>, any, {}, never>;
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/ModalV2/ModalV2").ModalV2Props>, any, {}, never>;
 export declare const ModalHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ResizeGrid/ResizeGrid.js

@@ -32,9 +32,10 @@ const defaultProps = {
     isCompact: false,
     delayUpdate: 200,
     selectColor: '#2f79bf80',
+    allowActive: true,
 };
 export const ResizeGrid = props => {
-    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, } = props;
+    const { containerStyle, cellBorder, cellStyle, cellActiveStyle, isPreview, renderCell, grid: initGrid, image, imageSize, imagePosition, isCompact, onChange, delayUpdate, selectColor, reCalculateFlag, allowActive, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -54,6 +55,7 @@ export const ResizeGrid = props => {
     const ctrlKeyRef = useRef(false);
     const initRef = useRef(0);
     const initDoneRef = useRef(false);
+    const cachedMergeCellRef = useRef({});
     // console.log('grid', grid)
     function lineVertical(isShow = true, left = 0) {
         if (verticalLineRef.current && layersRef.current) {
@@ -103,10 +105,10 @@ export const ResizeGrid = props => {
         : (cell.rowEnd !== line || !cell.sizeY) && (cell.rowStart !== line || !cell.sizeY);
     const notFollow = (cell, line, isCol = true) => !isFollow(cell, line, isCol);
     const floorSize = size => Math.floor(size);
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         handleChangeGrid();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [grid]);
+    }, [grid, reCalculateFlag]);
     useDeepCompareEffect(() => {
         // console.log('changed grid', initGrid, acceptUpdateRef.current, initGrid?.rows, initGrid?.cols)
         // console.log(initRef.current < 2,!initDoneRef.current, acceptUpdateRef.current)
@@ -158,9 +160,7 @@ export const ResizeGrid = props => {
                                     }
                                 }
                                 else {
-                                    child.transformY &&
-                                        !child.movedBottom &&
-                                        (child.sizeY = +child.sizeY + yDistant);
+                                    child.transformY && !child.movedBottom && (child.sizeY = +child.sizeY + yDistant);
                                 }
                                 // console.log('check...', startRef.current.line, child.transformY, yDistant, +child.transformY - yDistant)
                                 if (child.sizeY < MIN_SIZE) {
@@ -560,22 +560,27 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
-        !cell.active && activeCell({ idx });
+        // if (isPreview) return;
+        // !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
     const unMerge = (cell, idx) => {
+        if (isPreview)
+            return;
         const { colStart, colEnd, rowStart, rowEnd } = cell;
         if (colStart + 1 === colEnd && rowStart + 1 === rowEnd) {
             return;
         }
         const newChilds = [...grid.childs];
+        const insertArr = [];
         for (let i = rowStart; i < rowEnd; i++) {
             for (let j = colStart; j < colEnd; j++) {
                 const rStart = i;
                 const cStart = j;
                 const rEnd = rStart + 1;
                 const cEnd = cStart + 1;
+                const insertIdx = cachedMergeCellRef.current[`${rStart}-${cStart}`] || idx;
                 // console.log('merge', i, j, rStart, cStart, rEnd, cEnd)
                 const newChild = {
                     colStart: cStart,
@@ -584,26 +589,32 @@ export const ResizeGrid = props => {
                     rowEnd: rEnd,
                 };
                 if (i === rowStart && j === colStart) {
-                    newChilds[idx] = newChild;
+                    newChilds[idx] = Object.assign(Object.assign({}, newChilds[idx]), newChild);
                 }
                 else if (rStart !== rowStart ||
                     rEnd !== rowEnd ||
                     cStart !== colStart ||
                     cEnd !== colEnd) {
-                    newChilds.splice(idx, 0, newChild);
+                    insertArr.push({ idx: insertIdx, cell: newChild });
                 }
             }
         }
+        insertArr.sort((a, b) => a.idx - b.idx);
+        insertArr.forEach(({ idx, cell }) => {
+            newChilds.splice(idx, 0, cell);
+        });
         setGrid(prev => (Object.assign(Object.assign({}, prev), { childs: newChilds })));
     };
     function resetBackgroundCellRef() {
-        Object.values(cellsRef.current).forEach(r => {
-            if (r.current) {
+        Object.entries(cellsRef.current).forEach(([idx, r]) => {
+            if (r.current && grid.childs[idx] && !grid.childs[idx].active) {
                 r.current.style.background = 'unset';
             }
         });
     }
     const upSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         // console.log('up select', idx, cell);
         if (selectRef.current &&
             selectEndRef.current &&
@@ -622,6 +633,8 @@ export const ResizeGrid = props => {
             delete newChilds[idxStart].sizeY;
             hCells.reverse().forEach(i => {
                 if (i !== idxStart) {
+                    const deleteChild = newChilds[i];
+                    cachedMergeCellRef.current[`${deleteChild.rowStart}-${deleteChild.colStart}`] = i;
                     newChilds.splice(i, 1);
                     delete cellsRef.current[i];
                     delete cordinatesRef.current[i];
@@ -630,10 +643,18 @@ export const ResizeGrid = props => {
             });
             setGrid(Object.assign(Object.assign({}, gridRef.current), { childs: newChilds }));
         }
+        else {
+            if (!isPreview) {
+                !cell.active && activeCell({ idx });
+                // cellsRef.current[idx]?.style.background = cellActiveStyle?.background;
+            }
+        }
         selectRef.current = null;
         selectEndRef.current = null;
     };
     const hoverSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         if (selectRef.current && gridRef.current) {
             // console.log('hover select', idx, cell);
             const { cell: cellStart, idx: idxStart } = selectRef.current;
@@ -690,7 +711,7 @@ export const ResizeGrid = props => {
     const renderGrid = (style) => {
         const { gridTemplateColumns, gridTemplateRows, childs } = grid;
         // console.log('grid', { gridTemplateColumns, gridTemplateRows, childs });
-        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef })))));
+        return (React.createElement("div", { className: "grid-container", ref: containerRef, style: Object.assign({ gridTemplateColumns: gridTemplateColumns.map(fr => `${fr}%`).join(' '), gridTemplateRows: gridTemplateRows.map(fr => `${fr}%`).join(' ') }, style) }, childs.map((cell, idx) => (React.createElement(Cell, { key: `${cell.rowStart}-${cell.colStart}-${cell.rowEnd}-${cell.colEnd}`, idx: idx, cell: cell, down: handleDown, downCell: handleDownCell, up: handleUp, setRef: setRef, setCordinate: setCordinate, downSelect: downSelect, upSelect: upSelect, hoverSelect: hoverSelect, unMerge: unMerge, renderCell: renderCell, borderStyle: cellBorder, style: cellStyle, activeStyle: cellActiveStyle, isPreview: isPreview, rowPercentage: grid.gridTemplateRows[cell.rowStart - 1], colPercentage: grid.gridTemplateColumns[cell.colStart - 1], ctrlKeyRef: ctrlKeyRef, allowActive: allowActive })))));
     };
     const handleUpLine = () => {
         lineVertical(false);

package/es/components/molecules/ResizeGrid/components/Cell/Cell.js

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { buildGridArea, buildTranform } from '../../constant';
 import { StyledCell } from './styled';
 import { useDeepCompareEffect } from '../../../../../hooks/useDeepCompareEffect';
-export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, activeCell, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, }) => {
+export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSelect, hoverSelect, unMerge, renderCell, style, isPreview, borderStyle, activeStyle, setCordinate, rowPercentage, colPercentage, ctrlKeyRef, allowActive, }) => {
     const { objectFit, image } = cell;
     const downRef = useRef(false);
     const timeoutRef = useRef();
@@ -72,7 +72,7 @@ export const Cell = ({ cell, idx, down, downCell, up, setRef, downSelect, upSele
     // console.log('TRANSFORM', idx, buildTranform(cell))
     return (React.createElement(StyledCell, { ref: cellRef, className: "cell", 
         // onClick={handleActiveCell}
-        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (cell.active &&
+        onMouseOver: handleHoverSelect, onFocus: e => e, onMouseDown: handleDownCell, onMouseUp: handleUpCell, onDoubleClick: handlUnMerge, borderStyle: borderStyle || 'unset', style: Object.assign(Object.assign({ gridArea: buildGridArea(cell), width: cell.sizeX ? `${cell.sizeX}px` : 'unset', height: cell.sizeY ? `${cell.sizeY}px` : 'unset', transform: buildTranform(cell) }, (allowActive && cell.active &&
             !isPreview &&
             (activeStyle || {
                 outline: '1px solid #005eb8',

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

@@ -84,6 +84,7 @@ export interface CellProps {
     style?: React.CSSProperties;
     activeStyle?: React.CSSProperties;
     isPreview?: boolean;
+    allowActive?: boolean;
     ctrlKeyRef?: React.RefObject<boolean>;
 }
 export type TGrid = {
@@ -135,7 +136,9 @@ export interface IResizeGridProps {
     cellActiveStyle?: React.CSSProperties;
     containerStyle?: React.CSSProperties;
     isCompact?: boolean;
+    allowActive?: boolean;
     delayUpdate?: number;
+    reCalculateFlag?: number | boolean;
 }
 export type TCordinate = {
     x: number;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.d.ts

@@ -9,5 +9,6 @@ export interface RichMenuBlockProps {
     cellActiveIdx?: number;
     onClickCell?: (cellIdx: number) => void;
     onChange?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuBlock: React.FC<RichMenuBlockProps>;

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuBlock.js

@@ -8,7 +8,7 @@ import { RichMenuCell } from './RichMenuCell';
 import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
 const PATH = 'src/app/modules/Dashboard/containers/RichMenu/containers/Design/components/Workspace/components/RichMenuBlock/index.tsx';
 export const RichMenuBlock = props => {
-    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, } = props;
+    const { richMenu, layerActive, cellActiveIdx, isPreview, isActionLink = false, onClickCell, onChange, reCalculateFlag, } = props;
     const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
     const { imageUrl, imageStyles } = image || {};
     const grid = {
@@ -45,9 +45,9 @@ export const RichMenuBlock = props => {
         }
     }, PATH);
     const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, isActionLink: isActionLink, isPreview: isPreview, layerActive: layerActive, cellActiveIdx: cellActiveIdx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
-    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange }, Object.assign({}, (isSingleUploadMode && {
+    return (React.createElement(ResizeGrid, Object.assign({ grid: grid, isPreview: isPreview, containerStyle: imageStyles, isCompact: layoutType === 'compact', renderCell: renderCell, cellActiveStyle: { background: 'rgba(0, 95, 184, 0.5)' }, cellBorder: isSingleUploadMode ? '1px solid rgba(0, 95, 184, 1)' : '1px dotted #000000', onChange: handleGridChange, reCalculateFlag: reCalculateFlag }, (isSingleUploadMode && {
         image: imageUrl,
         imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition,
         imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit,
-    })))));
+    }))));
 };

package/es/components/molecules/RichMenu/RichMenuBlock/RichMenuCell/index.js

@@ -66,7 +66,7 @@ export const RichMenuCell = props => {
         const { objectPosition, objectFit } = imageStyles, restImageStyles = __rest(imageStyles, ["objectPosition", "objectFit"]);
         const isBlank = isEmpty(imageUrl);
         if (isBlank)
-            return (React.createElement(AddContainer, null,
+            return (React.createElement(AddContainer, { className: "cell-add-container" },
                 React.createElement(Icon, { type: "icon-ants-plus-circle", size: 20, style: { color: 'rgba(0, 95, 184, 1)' } }),
                 React.createElement(AddLabel, null, t(translations.cellAction).toString())));
         return (React.createElement(CellImage, { active: active && !isPreview, src: imageUrl, imagePosition: objectPosition, imageSize: objectFit, style: restImageStyles }));

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.d.ts

@@ -4,6 +4,7 @@ export interface RichMenuChatBarProps extends React.HtmlHTMLAttributes<HTMLDivEl
     showRichMenu?: boolean;
     showTypingChat?: boolean;
     disabled?: boolean;
+    size?: 'large' | 'medium';
     onToggleRichMenu?: (toggle: boolean) => void;
     onToggleTypingChat?: (toggle: boolean) => void;
 }

package/es/components/molecules/RichMenu/RichMenuChatBar/RichMenuChatBar.js

@@ -19,14 +19,15 @@ import { TypingChat } from './TypingChat';
 const defaultProps = {
     label: 'Menu',
     showRichMenu: true,
+    size: 'large',
     showTypingChat: false,
 };
 export const RichMenuChatBar = props => {
-    const { disabled, label, showRichMenu, showTypingChat, className, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "onToggleRichMenu", "onToggleTypingChat"]);
-    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
+    const { disabled, label, showRichMenu, showTypingChat, className, size, onToggleRichMenu, onToggleTypingChat = () => { } } = props, restOfProps = __rest(props, ["disabled", "label", "showRichMenu", "showTypingChat", "className", "size", "onToggleRichMenu", "onToggleTypingChat"]);
+    return (React.createElement(ChatBarWrapper, Object.assign({ "$showRichMenu": showRichMenu, "$showTypingChat": showTypingChat, "$disabled": disabled, "$size": size, className: `antsomi-chat-bar ${className}` }, restOfProps), showTypingChat ? (React.createElement(TypingChat, { onClickMenu: () => onToggleTypingChat(!showTypingChat) })) : (React.createElement(React.Fragment, null,
         React.createElement(Icon, { type: "icon-ants-keyboard", className: "icon-keyboard", onClick: () => onToggleTypingChat(!showTypingChat) }),
         React.createElement(ChatBarMenuBox, { onClick: () => onToggleRichMenu && onToggleRichMenu(!showRichMenu) },
             React.createElement(Typography.Text, { className: "ants-text-sm" }, label),
-            React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
+            label && React.createElement(Icon, { className: "icon-caret", type: "icon-ants-caret-down", size: 10 }))))));
 };
 RichMenuChatBar.defaultProps = defaultProps;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.d.ts

@@ -3,6 +3,7 @@ interface ChatBarWrapperProps {
     $showRichMenu?: boolean;
     $showTypingChat?: boolean;
     $disabled?: boolean;
+    $size?: 'large' | 'medium';
 }
 export declare const ChatBarWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, ChatBarWrapperProps, never>;
 export declare const ChatBarMenuBox: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/es/components/molecules/RichMenu/RichMenuChatBar/styled.js

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ChatBarWrapper = styled(Flex) `
   position: relative;
-  height: 84px;
+  height: ${props => (props.$size === 'medium' ? 65 : 84)}px;
   padding: 10px 20px;
   background-color: #fff;
   z-index: 10;