@antscorp/antsomi-ui 1.3.15 → 1.3.16

package/es/assets/svg/mobile-frame.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
+  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
+</svg>

package/es/components/atoms/InputDynamic/EditCaretPositioning.js

@@ -59,6 +59,21 @@ if (window.getSelection && document.createRange) {
             }
         }
         let sel = window.getSelection();
+        // NOTE: add new text node after span contain shortlink content
+        if (range.endContainer) {
+            const { parentNode } = range.endContainer;
+            if (parentNode && parentNode.classList && parentNode.classList.contains('detect-url')) {
+                const textNode = document.createTextNode('\u00A0'); // Create a text node with a non-breaking space
+                if (parentNode.nextSibling) {
+                    parentNode.parentNode.insertBefore(textNode, parentNode.nextSibling);
+                }
+                else {
+                    parentNode.parentNode.appendChild(textNode);
+                }
+                range.setStart(textNode, textNode.length);
+                range.collapse(true);
+            }
+        }
         sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
         sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     };

package/es/components/atoms/InputDynamic/InputDynamic.js

@@ -144,15 +144,17 @@ export const InputDynamic = (props) => {
                 if (innerHTML) {
                     // remove span url và focus vào vị trí remove để add tag shortlink vào vị trí này.
                     const index = Array.from((_a = personalizationInputRef.current) === null || _a === void 0 ? void 0 : _a.childNodes).findIndex((element) => element.id === data.id);
-                    const range = document.createRange(); // Tạo một đối tượng Range
-                    const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
-                    range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
-                    range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
-                    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
-                    sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
-                    caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
-                    const newDataUpdate = innerHTML.replace(data.outerHTML, '');
-                    personalizationInputRef.current.innerHTML = newDataUpdate;
+                    if (index !== -1) {
+                        const range = document.createRange(); // Tạo một đối tượng Range
+                        const sel = window.getSelection(); // Lấy đối tượng Selection hiện tại
+                        range.setStart((_b = personalizationInputRef.current) === null || _b === void 0 ? void 0 : _b.childNodes[index], 0); // Đặt điểm bắt đầu của Range
+                        range.collapse(true); // Thu gọn Range để tập trung vào điểm bắt đầu
+                        sel === null || sel === void 0 ? void 0 : sel.removeAllRanges(); // Xóa tất cả các Range hiện có
+                        sel === null || sel === void 0 ? void 0 : sel.addRange(range); // Thêm Range mới vào Selection
+                        caretPositionRef.current = CaretPositioning.saveSelection(personalizationInputRef.current);
+                        const newDataUpdate = innerHTML.replace(data.outerHTML, '');
+                        personalizationInputRef.current.innerHTML = newDataUpdate;
+                    }
                 }
                 break;
             }

package/es/components/atoms/MobileFrame/MobileFrame.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
 }
 export declare const MobileFrame: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrame/MobileFrame.js

@@ -16,7 +16,7 @@ import { MobileWrapper, MobileInner, MobileBottomLine } from './styled';
 export const MobileFrame = (_a) => {
     var { children } = _a, restOfProps = __rest(_a, ["children"]);
     return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
-        React.createElement(MobileInner, null,
+        React.createElement(MobileInner, { backgroundColor: restOfProps.backgroundColor, size: restOfProps.size },
             children,
             React.createElement(MobileBottomLine, null))));
 };

package/es/components/atoms/MobileFrame/styled.d.ts

@@ -1,3 +1,4 @@
+import type { MobileFrameProps } from './MobileFrame';
 export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MobileInner: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, MobileFrameProps, never>;
 export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrame/styled.js

@@ -1,5 +1,5 @@
 // Libraries
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 // Assets
 import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
 export const MobileWrapper = styled.div `
@@ -12,12 +12,17 @@ export const MobileWrapper = styled.div `
 export const MobileInner = styled.div `
   position: relative;
   width: 100%;
-  max-width: 336px;
-  height: 695px;
-  margin: 61px 23px 20px 24px;
-  border-bottom-left-radius: 50px;
-  border-bottom-right-radius: 50px;
+  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
+  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
+  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
+  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
   overflow: hidden;
+
+  ${props => props.backgroundColor &&
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
 export const MobileBottomLine = styled.div `
   width: 145px;

package/es/components/atoms/MobileFrameV2/MobileFrameV2.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export interface MobileFrameV2Props extends React.HtmlHTMLAttributes<HTMLDivElement> {
+}
+export declare const MobileFrameV2: React.FC<React.PropsWithChildren<MobileFrameV2Props>>;

package/es/components/atoms/MobileFrameV2/MobileFrameV2.js

@@ -0,0 +1,22 @@
+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;
+};
+// Libraries
+import React from 'react';
+// Styled
+import { MobileWrapper, MobileInner, MobileCamera } from './styled';
+export const MobileFrameV2 = (_a) => {
+    var { children } = _a, restOfProps = __rest(_a, ["children"]);
+    return (React.createElement(MobileWrapper, Object.assign({}, restOfProps),
+        React.createElement(MobileInner, null,
+            React.createElement("div", { className: "mobile-inner-content" }, children),
+            React.createElement(MobileCamera, null))));
+};

package/es/components/atoms/MobileFrameV2/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MOBILE_VIEWPORT: {
+    width: number;
+    height: number;
+};

package/es/components/atoms/MobileFrameV2/constants.js

@@ -0,0 +1,4 @@
+export const MOBILE_VIEWPORT = {
+    width: 352.5,
+    height: 764.2,
+};

package/es/components/atoms/MobileFrameV2/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileFrameV2 } from './MobileFrameV2';
+export type { MobileFrameV2Props } from './MobileFrameV2';

package/es/components/atoms/MobileFrameV2/index.js

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

package/es/components/atoms/MobileFrameV2/styled.d.ts

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

package/es/components/atoms/MobileFrameV2/styled.js

@@ -0,0 +1,43 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import MobileFrameV2 from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-mobile-frame.png';
+import cameraImage from '@antscorp/antsomi-ui/es/assets/images/ip14-pro-camera.png';
+// Constants
+import { MOBILE_VIEWPORT } from './constants';
+export const MobileWrapper = styled.div `
+  position: relative;
+  display: flex;
+  justify-content: center;
+  background: url(${MobileFrameV2}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  width: ${MOBILE_VIEWPORT.width}px;
+  max-width: ${MOBILE_VIEWPORT.width}px;
+  height: ${MOBILE_VIEWPORT.height}px;
+  margin: 18px 21px;
+  border-radius: 50px;
+  overflow: hidden;
+
+  .mobile-inner-content {
+    position: absolute;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const MobileCamera = styled.div `
+  position: absolute;
+  pointer-events: none;
+  width: 112.11px;
+  height: 32.29px;
+  margin: auto;
+  top: 10px;
+  left: 50%;
+  z-index: 1;
+  transform: translateX(-50%);
+  background: url(${cameraImage}) no-repeat center center;
+  background-size: contain;
+`;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -264,7 +264,9 @@ export const SlideBar = props => {
                 fontSize: `${BTN_ADD_SIZE}px`,
                 cursor: disabledAdd ? 'not-allowed' : 'pointer',
                 color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, onClick: (e) => {
+            }, 
+            // disabled={disabledAdd}
+            onClick: (e) => {
                 e.stopPropagation();
                 if (!disabledAdd) {
                     handleAddSlide();

package/es/components/atoms/Spin/Spin.js

@@ -19,10 +19,10 @@ import { StyledSpin } from './styled';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Spin = (props) => {
     var _a;
-    const { indicatorSize } = props, restOf = __rest(props, ["indicatorSize"]);
+    const { indicatorSize, children } = props, restOf = __rest(props, ["indicatorSize", "children"]);
     return (React.createElement(StyledSpin, Object.assign({}, Object.assign({ indicator: (React.createElement(LoadingOutlined, { style: {
                 fontSize: indicatorSize || 30,
                 color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary,
-            }, spin: true })) }, restOf)), props.children));
+            }, spin: true })) }, restOf)), children));
 };
 Spin.defaultProps = {};

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

@@ -35,6 +35,7 @@ export { InputDynamic } from './InputDynamic';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';

package/es/components/atoms/index.js

@@ -35,4 +35,5 @@ export { InputDynamic } from './InputDynamic';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
+export * from './MobileFrameV2';
 export * from './SlideBar';

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -2,6 +2,7 @@ import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-p
 import React, { ReactNode } from 'react';
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
+import 'animate.css';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { ConfigProvider as AntdConfigProvider, App } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
@@ -27,6 +27,7 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+import 'animate.css';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -42,8 +43,9 @@ const ConfigProvider = props => {
         }
     }, [locale]);
     return (React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
-        React.createElement(GlobalStyle, null),
-        React.createElement(StyleProvider, { hashPriority: "high" }, children)));
+        React.createElement(App, null,
+            React.createElement(GlobalStyle, null),
+            React.createElement(StyleProvider, { hashPriority: "high" }, children))));
 };
 ConfigProvider.defaultProps = {
     theme: THEME,

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

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -714,6 +714,10 @@ export const GlobalStyle = () => {
         height: unset !important;
         top: 0px !important;
         right: 0 !important;
+
+        .antsomi-modal-close-x {
+          padding: 20px;
+        }
       }
       .antsomi-modal-content {
         .antsomi-modal-header {
@@ -729,6 +733,27 @@ export const GlobalStyle = () => {
           p {
             margin: 0;
           }
+          .antsomi-modal-confirm-body-wrapper {
+            padding: 20px;
+
+            .antsomi-modal-confirm-body {
+              display: flex;
+              gap: 13px;
+              color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.colorPrimary};
+            }
+
+            .antsomi-modal-confirm-btns {
+              display: flex;
+              flex-direction: row-reverse;
+              justify-content: start;
+              gap: 8px;
+              padding-left: 30px;
+
+              .antsomi-btn {
+                margin: 0px;
+              }
+            }
+          }
         }
         .antsomi-modal-footer {
           padding: 15px !important;
@@ -751,7 +776,7 @@ export const GlobalStyle = () => {
 
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.gray5};
+          border-bottom: 1px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.gray5};
         }
 
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -761,12 +786,12 @@ export const GlobalStyle = () => {
 
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.colorPrimary} !important;
+        border: 2px solid ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.colorPrimary} !important;
 
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.bw0} !important;
+              background-color: ${(_36 = THEME.token) === null || _36 === void 0 ? void 0 : _36.bw0} !important;
             }
           }
         }
@@ -804,5 +829,14 @@ export const GlobalStyle = () => {
           }
         }
       }
+
+      /* Menu */
+      .antsomi-menu {
+        .antsomi-menu-submenu.antsomi-menu-submenu-selected {
+          .antsomi-menu-item.antsomi-menu-item-selected {
+            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+          }
+        }
+      }
     ` }));
 };

package/es/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './molecules';
 export * from './common';
 export * from './organism';
+export * from './template';

package/es/components/index.js

@@ -2,3 +2,4 @@ export * from './atoms';
 export * from './molecules';
 export * from './common';
 export * from './organism';
+export * from './template';

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -14,6 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -27,7 +28,6 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
-import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
 import { dateExample } from './components/FormatDatetime';
 import DisplayFormat from './components/DisplayFormat';
@@ -126,6 +126,7 @@ export const AddDynamicContent = props => {
     const [attrDFOptions, setAttrDFOptions] = useState([]);
     // Template Custom
     const [templateId, settemplateId] = useState();
+    const queryClient = useQueryClient();
     const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
         url,
         itemTypeIds: itemTypeId ? [itemTypeId] : [],
@@ -911,7 +912,7 @@ export const AddDynamicContent = props => {
                             break;
                         setItemTypeId(Number(selectedItemTypeId));
                         const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
-                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClient.getQueryData(key));
                         if (listAttBOByItemTypeId.length) {
                             form.setFieldsValue({
                                 [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],

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/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, reCalculateFlag, } = 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,7 +105,7 @@ 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, reCalculateFlag]);
@@ -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,9 +560,8 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
-        if (isPreview)
-            return;
-        !cell.active && activeCell({ idx });
+        // if (isPreview) return;
+        // !cell.active && activeCell({ idx });
         selectRef.current = { idx, cell };
         gridRef.current = grid;
     };
@@ -574,12 +573,14 @@ export const ResizeGrid = props => {
             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,
@@ -588,21 +589,25 @@ 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';
             }
         });
@@ -628,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];
@@ -636,6 +643,12 @@ 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;
     };
@@ -698,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);