@antscorp/antsomi-ui 1.3.3-beta.32 → 1.3.3-beta.33

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DisableShortLinkTypeProps } from './PopupShortLink';
 export type KeyTagType = 'shortlink' | 'shortlink_static';
 export type SelectedPropertiesProps = {
@@ -17,7 +16,7 @@ export type InputDynamicProps = {
     addMessageToQueue?: Function;
 };
 export declare const InputDynamic: {
-    (props: InputDynamicProps): React.JSX.Element;
+    (props: InputDynamicProps): JSX.Element;
     defaultProps: {
         value: string;
         isViewMode: boolean;

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

@@ -4,7 +4,7 @@ export declare const SpanIcon: import("styled-components").StyledComponent<"span
     isDisabled?: boolean | undefined;
 }, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
+export declare const InputShortLink: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../Input/Input").InputProps, any>;
 export declare const TooltipHover: import("styled-components").StyledComponent<"div", any, {
     top: number;
     left: number;

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

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

package/es/components/atoms/MobileFrame/MobileFrame.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, 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,
+            children,
+            React.createElement(MobileBottomLine, null))));
+};

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

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

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

@@ -0,0 +1,4 @@
+export const MOBILE_SETTING = {
+    width: 391,
+    height: 660,
+};

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

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

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

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

package/es/components/atoms/MobileFrame/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 MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,33 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
+`;
+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;
+  overflow: hidden;
+`;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+`;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface PreviewTabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    total?: number;
+    current?: number;
+    onChange?: (current: number) => void;
+}
+export declare const PreviewTabs: React.FC<PreviewTabProps>;

package/es/components/atoms/PreviewTabs/PreviewTabs.js

@@ -0,0 +1,67 @@
+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, { useEffect, useState } from 'react';
+import cn from 'classnames';
+// Components
+import { Flex, Icon } from '..';
+// Styled
+import { NavigationButton, StyledRichMenuTabs } from './styled';
+import { tryCatchWrapper } from '@antscorp/antsomi-ui/es/utils';
+const defaultProps = {
+    total: 20,
+    current: 1,
+};
+const PATH = 'antsomi-ui/src/components/atoms/PreviewTabs/PreviewTabs.tsx';
+export const PreviewTabs = props => {
+    const { total = 20, current = 1, onChange } = props, restProps = __rest(props, ["total", "current", "onChange"]);
+    const tabsRef = React.useRef(null);
+    // State
+    const [state, setState] = useState({
+        disablePrev: true,
+        disableNext: true,
+    });
+    // Variables
+    const { disableNext, disablePrev } = state;
+    // Handlers
+    const checkScroll = () => {
+        if (tabsRef.current) {
+            const { scrollLeft, clientWidth, scrollWidth } = tabsRef.current;
+            setState(prevState => (Object.assign(Object.assign({}, prevState), { disableNext: scrollLeft + clientWidth === scrollWidth })));
+            setState(prevState => (Object.assign(Object.assign({}, prevState), { disablePrev: scrollLeft === 0 })));
+        }
+    };
+    // Check disable next navigation base length of tabs
+    useEffect(() => {
+        checkScroll();
+    }, []);
+    // Handlers
+    const onClickNavigation = tryCatchWrapper((isPrev) => {
+        if (tabsRef.current) {
+            const { scrollLeft } = tabsRef.current;
+            tabsRef.current.scrollTo({ left: scrollLeft + (isPrev ? -40 : 40), behavior: 'smooth' });
+            checkScroll();
+        }
+    }, PATH);
+    return (React.createElement(StyledRichMenuTabs, Object.assign({}, restProps),
+        React.createElement(NavigationButton, { className: cn('navigation--previous', {
+                'navigation--disabled': disablePrev,
+            }), onClick: () => onClickNavigation(true) },
+            React.createElement(Icon, { type: "icon-ants-angle-left" })),
+        React.createElement(Flex, { ref: tabsRef, className: "tabs antsomi-scrollbar-hidden", align: "center", onScroll: () => checkScroll() }, Array.from({ length: total }).map((_, index) => (React.createElement(Flex, { key: `${index + 1}`, align: "center", justify: "center", className: `tabs__item ${current === index + 1 ? 'tabs__item--active' : ''}`, onClick: () => onChange && onChange(index + 1) },
+            React.createElement(Flex, { align: "center", justify: "center", className: "tabs__label" }, index + 1))))),
+        React.createElement(NavigationButton, { className: cn('navigation--next', {
+                'navigation--disabled': disableNext,
+            }), onClick: () => onClickNavigation(false) },
+            React.createElement(Icon, { type: "icon-ants-angle-right" }))));
+};
+PreviewTabs.defaultProps = defaultProps;

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

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

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

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface StyledRichMenuTabsProps {
+    width?: number;
+}
+export declare const StyledRichMenuTabs: import("styled-components").StyledComponent<"div", any, StyledRichMenuTabsProps, never>;
+export declare const NavigationButton: 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/atoms/PreviewTabs/styled.js

@@ -0,0 +1,79 @@
+// Components
+import { Flex } from '../Flex';
+// Styled
+import styled from 'styled-components';
+export const StyledRichMenuTabs = styled.div `
+  display: flex;
+  align-items: center;
+  background: #f0f0f0;
+  box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+  height: 40px;
+  width: ${({ width }) => width || 467}px;
+
+  .tabs {
+    flex: 1;
+    width: 100%;
+    overflow: auto;
+
+    &__item {
+      flex-shrink: 0;
+      height: 40px;
+      width: 40px;
+      border-right: 1px solid #d4d4d4;
+      cursor: pointer;
+      transition: all 200ms;
+
+      &--active {
+        background-color: #fff;
+
+        .tabs__label {
+          background-color: var(--primary-color);
+          color: #fff;
+        }
+      }
+    }
+
+    &__label {
+      height: 24px;
+      width: 24px;
+      font-weight: 700;
+      font-size: 14px;
+      color: var(--primary-color);
+      border-radius: 100%;
+      border: 1px solid #b8cfe6;
+      background-color: #fff;
+      transition: all 200ms;
+    }
+  }
+`;
+export const NavigationButton = styled(Flex) `
+  width: 40px;
+  height: 40px;
+  background-color: #fff;
+  cursor: pointer;
+
+  i {
+    font-size: 12px;
+    color: #595959;
+  }
+
+  &.navigation--previous {
+    border-right: 1px solid #d4d4d4;
+  }
+
+  &.navigation--next {
+    border-left: 1px solid #d4d4d4;
+  }
+
+  &.navigation--disabled {
+    cursor: not-allowed;
+
+    i {
+      color: #59595980;
+    }
+  }
+`;
+NavigationButton.defaultProps = {
+    align: 'center',
+    justify: 'center',
+};

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import { SpinProps as AntdSpinProps } from 'antd';
 export interface TSpinProps extends AntdSpinProps {
     indicatorSize?: number;
     children?: any;
 }
 export declare const Spin: {
-    (props: TSpinProps): React.JSX.Element;
+    (props: TSpinProps): JSX.Element;
     defaultProps: {};
 };

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

@@ -34,6 +34,7 @@ export { SliderV2 } from './SliderV2';
 export * from './Flex';
 export * from './RateV2';
 export { InputDynamic } from './InputDynamic';
+export * from './PreviewTabs';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -34,3 +34,4 @@ export { SliderV2 } from './SliderV2';
 export * from './Flex';
 export * from './RateV2';
 export { InputDynamic } from './InputDynamic';
+export * from './PreviewTabs';

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

@@ -15,6 +15,16 @@ export const GlobalStyle = () => {
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
+      /* Custom */
+      .antsomi-scrollbar-hidden {
+        -ms-overflow-style: none; /* for Internet Explorer, Edge */
+        scrollbar-width: none; /* for Firefox */
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+
       /* width */
       ::-webkit-scrollbar {
         width: ${scrollBarSize};
@@ -553,5 +563,20 @@ export const GlobalStyle = () => {
           }
         }
       }
+
+      /* Form */
+      .antsomi-form {
+        .antsomi-form-item {
+          .antsomi-form-item-label {
+            > label.antsomi-form-item-required:not(.antsomi-form-item-required-mark-optional) {
+              &::before {
+                position: absolute;
+                right: 0px;
+                font-family: Roboto;
+              }
+            }
+          }
+        }
+      }
     ` }));
 };

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const ArrowGrowIcon: (props: any) => React.JSX.Element;
+export declare const ArrowGrowIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const AudioRecordIcon: (props: any) => React.JSX.Element;
+export declare const AudioRecordIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const BugIcon: (props: any) => React.JSX.Element;
+export declare const BugIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const CameraIcon: (props: any) => React.JSX.Element;
+export declare const CameraIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const CaptureIcon: (props: any) => React.JSX.Element;
+export declare const CaptureIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const CheckSlimIcon: (props: any) => React.JSX.Element;
+export declare const CheckSlimIcon: (props: any) => JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare const CloseIcon: ({ ...props }: {
     [x: string]: any;
-}) => React.JSX.Element;
+}) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const CommentIcon: (props: any) => React.JSX.Element;
+export declare const CommentIcon: (props: any) => JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export declare const EventIcon: ({ ...props }: {
     [x: string]: any;
-}) => React.JSX.Element;
+}) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const FreeDrawIcon: (props: any) => React.JSX.Element;
+export declare const FreeDrawIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const GPTIcon: () => React.JSX.Element;
+export declare const GPTIcon: () => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const GPTIconV2: () => React.JSX.Element;
+export declare const GPTIconV2: () => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const GPTIconV3: (props: any) => React.JSX.Element;
+export declare const GPTIconV3: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const HighlightIcon: (props: any) => React.JSX.Element;
+export declare const HighlightIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const IdeaIcon: (props: any) => React.JSX.Element;
+export declare const IdeaIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const InvisibleIcon: (props: any) => React.JSX.Element;
+export declare const InvisibleIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const MuteIcon: (props: any) => React.JSX.Element;
+export declare const MuteIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const OpenUrlIcon: (props: any) => React.JSX.Element;
+export declare const OpenUrlIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const PauseIcon: (props: any) => React.JSX.Element;
+export declare const PauseIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const PlaneIcon: (props: any) => React.JSX.Element;
+export declare const PlaneIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const RequestIcon: (props: any) => React.JSX.Element;
+export declare const RequestIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const StopRecordIcon: (props: any) => React.JSX.Element;
+export declare const StopRecordIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const UserIcon: (props: any) => React.JSX.Element;
+export declare const UserIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const VerticalDotsIcon: (props: any) => React.JSX.Element;
+export declare const VerticalDotsIcon: (props: any) => JSX.Element;

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const WarningIcon: (props: any) => React.JSX.Element;
+export declare const WarningIcon: (props: any) => JSX.Element;

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import { IImageEditorProps } from './types';
 declare const CaptureScreen: {
-    (props: IImageEditorProps): React.JSX.Element;
+    (props: IImageEditorProps): JSX.Element;
     defaultProps: {
         isOpen: boolean;
         src: string;

package/es/components/molecules/CaptureScreen/components/CommentBox/CommentBox.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 import { CommentBoxProps } from './types';
 declare const CommentBox: {
-    (props: CommentBoxProps): React.JSX.Element;
+    (props: CommentBoxProps): JSX.Element;
     defaultProps: {
         info: {
             id: string;

package/es/components/molecules/CaptureScreen/components/Cursor/Cursor.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { CursorProps } from './types';
-declare const Cursor: (props: CursorProps) => React.JSX.Element | null;
+declare const Cursor: (props: CursorProps) => JSX.Element | null;
 export { Cursor };

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

@@ -10,6 +10,6 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
 }, any, CustomModalProps, never>;
 export declare const WrapperSpin: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -3,5 +3,5 @@ export declare const StyledModal: import("styled-components").StyledComponent<im
     useModal: typeof import("antd/es/modal/useModal").default;
     destroyAll: () => void;
     config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => React.JSX.Element;
 }, any, {}, never>;

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

@@ -107,6 +107,7 @@ export const ResizeGrid = props => {
     }, [grid]);
     useDeepCompareEffect(() => {
         if (acceptUpdateRef.current && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.rows) && (initGrid === null || initGrid === void 0 ? void 0 : initGrid.cols)) {
+            firstChangeRef.current = true;
             setGrid(buildGrid(initGrid));
             resetBackgroundCellRef();
         }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RichMenu } from '@antscorp/antsomi-ui/es/types';
+export interface RichMenuBlockProps {
+    richMenu: RichMenu;
+    isPreview?: boolean;
+    onClickCell?: (cellIdx: number) => void;
+    onChange?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
+}
+export declare const RichMenuBlock: React.FC<RichMenuBlockProps>;

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

@@ -0,0 +1,49 @@
+// Libraries
+import React from 'react';
+import { cloneDeep, pick } from 'lodash';
+// Components
+import { ResizeGrid } from '@antscorp/antsomi-ui/es/components';
+import { RichMenuCell } from './RichMenuCell';
+// Utils
+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, isPreview, onClickCell, onChange } = props;
+    const { gridTemplateCols = [], gridTemplateRows = [], cells = [], uploadMode, image, layoutType, rows, cols, } = richMenu || {};
+    const { imageUrl, imageStyles } = image || {};
+    const grid = {
+        rows,
+        cols,
+        gridTemplateColumns: gridTemplateCols.map(col => +String(col).replace('%', '')),
+        gridTemplateRows: gridTemplateRows.map(row => +String(row).replace('%', '')),
+        childs: cells.map(item => item),
+    };
+    const isSingleUploadMode = uploadMode === 'single';
+    // Handlers
+    const handleClickCell = (cellIdx) => {
+        // If is preview is true then not do anything
+        if (isPreview)
+            return;
+        if (onClickCell) {
+            onClickCell(cellIdx);
+        }
+    };
+    const handleGridChange = tryCatchWrapper((gridInfo, ctx, source) => {
+        if (richMenu) {
+            const { rows, cols, gridTemplateRows, gridTemplateColumns, childs } = gridInfo;
+            const gridTemplateColsUnit = (gridTemplateColumns === null || gridTemplateColumns === void 0 ? void 0 : gridTemplateColumns.map(col => `${col}%`)) || [];
+            const gridTemplateRowsUnit = (gridTemplateRows === null || gridTemplateRows === void 0 ? void 0 : gridTemplateRows.map(row => `${row}%`)) || [];
+            const cells = childs === null || childs === void 0 ? void 0 : childs.map((child, idx) => {
+                const item = cloneDeep(child);
+                const cellBounds = pick(ctx[idx], ['x', 'y', 'width', 'height']);
+                return Object.assign(Object.assign({}, item), cellBounds);
+            });
+            const newRichMenu = Object.assign(Object.assign({}, richMenu), { rows: rows || 1, cols: cols || 1, gridTemplateRows: gridTemplateRowsUnit, gridTemplateCols: gridTemplateColsUnit, cells: cells });
+            if (onChange) {
+                onChange(newRichMenu, source);
+            }
+        }
+    }, PATH);
+    const renderCell = (cellInfo, ctx) => (React.createElement(RichMenuCell, { context: ctx, cell: cellInfo, isSingleMode: isSingleUploadMode, onClick: handleClickCell }));
+    return (React.createElement(ResizeGrid, { grid: grid, image: imageUrl, isPreview: isPreview, containerStyle: imageStyles, imagePosition: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectPosition, imageSize: imageStyles === null || imageStyles === void 0 ? void 0 : imageStyles.objectFit, 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 }));
+};

package/es/components/molecules/RichMenuBlock/RichMenuCell/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TChildrenCell } from '../../../../types';
+interface RichMenuCellProps {
+    cell: TChildrenCell;
+    context: number;
+    isSingleMode: boolean;
+    onClick: (index: number) => void;
+}
+export declare const RichMenuCell: FC<RichMenuCellProps>;
+export {};