@antscorp/antsomi-ui 1.3.5-beta.7 → 1.3.5-beta.71

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -13,6 +13,7 @@ export interface AdvancedRangePickerProps {
     showTime?: boolean;
     timezone?: string;
     separator?: ReactNode;
+    inputStyle?: React.CSSProperties;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, onChange, } = props;
+    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -55,9 +55,9 @@ export const AdvancedRangePicker = props => {
         }
     };
     return (React.createElement(Space, { size: 20, align: "end" },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user') }),
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle }),
         separator || null,
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user') })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/es/components/molecules/DatePicker/components/DropdownLabel/DropdownLabel.js

@@ -30,7 +30,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
         case 'YEAR_WEEK': {
             const dayObj = dayjs(date || new Date(), format).locale('en');
             // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-            formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
+            formatLabel = `${WEEK_PLACEHOLDER}w, YYYY`;
             subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
                 .day(6)
                 .format('MMMM DD, YYYY')}`;
@@ -51,7 +51,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             formatLabel = 'MMMM';
             break;
         case 'WEEK':
-            formatLabel = `${WEEK_PLACEHOLDER}W`;
+            formatLabel = `${WEEK_PLACEHOLDER}w`;
             break;
         case 'MONTH_DAY':
             formatLabel = 'MMMM DD';

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

@@ -34,7 +34,7 @@ const defaultProps = {
     selectColor: '#2f79bf80',
 };
 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, } = props;
     const [grid, setGrid] = useState(buildGrid(initGrid || GRID_TEMPLATE.GRID_2_3));
     const startRef = useRef(null);
     const startCellRef = useRef(null);
@@ -106,7 +106,7 @@ export const ResizeGrid = props => {
     useEffect(() => {
         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)
@@ -560,11 +560,15 @@ export const ResizeGrid = props => {
     };
     const downSelect = (idx, cell) => {
         // console.log('dow select', idx, cell);
+        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;
@@ -604,6 +608,8 @@ export const ResizeGrid = props => {
         });
     }
     const upSelect = (idx, cell) => {
+        if (isPreview)
+            return;
         // console.log('up select', idx, cell);
         if (selectRef.current &&
             selectEndRef.current &&
@@ -634,6 +640,8 @@ export const ResizeGrid = props => {
         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;

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

@@ -136,6 +136,7 @@ export interface IResizeGridProps {
     containerStyle?: React.CSSProperties;
     isCompact?: 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,7 +45,7 @@ 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 }, Object.assign({}, (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/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;

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

@@ -3,8 +3,15 @@ import { RichMenu } from '@antscorp/antsomi-ui/es/types';
 interface RichMenuMobileViewProps extends React.HTMLAttributes<HTMLDivElement> {
     richMenu: RichMenu;
     isPreview?: boolean;
+    messagePreview?: {
+        show?: boolean;
+        text?: string;
+    };
     onChangeRichMenu?: (richMenu: RichMenu, source?: 'user' | 'system') => void;
     onClickCell?: (cellIndex: number) => void;
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
+    reCalculateFlag?: boolean | number;
 }
 export declare const RichMenuMobileView: React.FC<RichMenuMobileViewProps>;
 export {};

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

@@ -13,14 +13,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { useState } from 'react';
 // Assets
 import IphoneTopBar from '@antscorp/antsomi-ui/es/assets/images/iphone-top-bar.png';
+import TailMessage from '@antscorp/antsomi-ui/es/assets/images/tail.png';
+import ProfileMessage from '@antscorp/antsomi-ui/es/assets/images/profile.png';
 // Components
 import { MobileFrame } from '@antscorp/antsomi-ui/es/components/atoms';
 import { RichMenuChatBar } from '../RichMenuChatBar';
 import { RichMenuBlock } from '../RichMenuBlock';
 // Styles
-import { MobileContent, RichMenuWrapper, TopBar } from './styled';
+import { Image, Message, MessageBox, MessageWrapper, Profile, MobileContent, RichMenuWrapper, TopBar, } from './styled';
 export const RichMenuMobileView = props => {
-    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell"]);
+    const { richMenu, className, isPreview, onChangeRichMenu, onClickCell, reCalculateFlag, messagePreview, backgroundColor, size } = props, restOfProps = __rest(props, ["richMenu", "className", "isPreview", "onChangeRichMenu", "onClickCell", "reCalculateFlag", "messagePreview", "backgroundColor", "size"]);
     // State
     const [state, setState] = useState({
         showRichMenu: true,
@@ -29,9 +31,26 @@ export const RichMenuMobileView = props => {
     });
     // Variables
     const { showRichMenu, showTypingChat } = state;
-    return (React.createElement(MobileFrame, Object.assign({ className: `ants-mx-auto ${className}` }, restOfProps),
-        isPreview && React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+    return (React.createElement(MobileFrame, Object.assign({ size: size, backgroundColor: backgroundColor, className: `ants-mx-auto ${className}` }, restOfProps),
+        isPreview && (React.createElement(React.Fragment, null,
+            React.createElement(TopBar, { src: IphoneTopBar, width: "100%", height: "auto" }),
+            (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.show) && (React.createElement(MessageBox, null,
+                React.createElement(Profile, null,
+                    React.createElement(Image, { src: ProfileMessage, alt: "profile user" })),
+                React.createElement(MessageWrapper, null,
+                    React.createElement("div", { style: {
+                            position: 'absolute',
+                            top: '-5px',
+                            left: '-10px',
+                            width: 20,
+                            height: 20,
+                        } },
+                        React.createElement(Image, { src: TailMessage, alt: "tail decorator", style: { objectFit: 'contain' } })),
+                    React.createElement(Message, null, (messagePreview === null || messagePreview === void 0 ? void 0 : messagePreview.text) ||
+                        `Antsomi CDP 365 helps businesses decode their customer data, understand the
+nuances of their customer lifecycles, and act on them – 24 hours a day, 365 days a
+year.`)))))),
         React.createElement(MobileContent, null,
-            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell }))),
-            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
+            React.createElement(RichMenuWrapper, { "$showRichMenu": showRichMenu && !showTypingChat, "$isPreview": !!isPreview }, richMenu && (React.createElement(RichMenuBlock, { richMenu: richMenu, isPreview: isPreview, onChange: onChangeRichMenu, onClickCell: onClickCell, reCalculateFlag: reCalculateFlag }))),
+            React.createElement(RichMenuChatBar, { disabled: !isPreview, label: richMenu === null || richMenu === void 0 ? void 0 : richMenu.chatBar.label, size: size, showRichMenu: showRichMenu, showTypingChat: showTypingChat, onToggleRichMenu: showRichMenu => setState(prevState => (Object.assign(Object.assign({}, prevState), { showRichMenu: !!showRichMenu }))), onToggleTypingChat: showTypingChat => setState(prevState => (Object.assign(Object.assign({}, prevState), { showTypingChat: !!showTypingChat }))) }))));
 };

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

@@ -4,3 +4,8 @@ export declare const RichMenuWrapper: import("styled-components").StyledComponen
     $isPreview: boolean;
 }, never>;
 export declare const TopBar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const MessageBox: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Profile: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const Message: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,8 @@
+var _a;
 // Libraries
 import styled, { css } from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const MobileContent = styled.div `
   position: absolute;
   bottom: 0;
@@ -18,3 +21,31 @@ export const RichMenuWrapper = styled.div `
   `}
 `;
 export const TopBar = styled.img ``;
+export const MessageBox = styled.div `
+  display: flex;
+  gap: 10px;
+  margin: 15px 9px 0px 8px;
+`;
+export const Profile = styled.div `
+  width: 24px;
+  height: 24px;
+`;
+export const Image = styled.img `
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+export const Message = styled.div `
+  color: rgba(37, 37, 37, 1);
+  font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+  line-height: 16px;
+`;
+export const MessageWrapper = styled.div `
+  position: relative;
+  flex: 1;
+  padding: 10px;
+  background-color: rgba(229, 229, 234, 1);
+  border-radius: 15px;
+  color: rgba(229, 229, 234, 1);
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;

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

@@ -46,7 +46,7 @@ export const GeneralAccess = () => {
         React.createElement("div", { className: "setting" },
             React.createElement(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }),
             React.createElement("div", { className: "general-info" },
-                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], overlayStyle: { zIndex: 3002 }, destroyPopupOnHide: true, disabled: !allowEdit, menu: {
                         items: [
                             isPublic
                                 ? { key: GENERAL_ACCESS.RESTRICTED, label: React.createElement("div", null, "Restricted ") }
@@ -58,7 +58,7 @@ export const GeneralAccess = () => {
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
                         allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
                 React.createElement("div", { className: "description" }, renderDescription())),
-            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
                         publicRole === PUBLIC_ROLE.ONLY_VIEWER
                             ? {

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -37,6 +37,7 @@ export const StyledGeneralAccessRoot = styled.div `
       margin-left: 15px;
 
       .general-dropdown-wrapper {
+        cursor: pointer;
         display: flex;
         align-items: center;
         gap: 4px;

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

@@ -6,13 +6,13 @@ import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, allowChangeOnwership = true } = props;
+    const { getUserInfo, allowChangeOnwership = true, allowAddUser = true } = props;
     const { state } = useShareAccess();
     const { allowEdit, allowView } = state;
     if (!allowEdit && !allowView)
         return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
         React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
         React.createElement(GeneralAccess, null),
         React.createElement(ModalTransferOwnership, null)));

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

@@ -86,7 +86,7 @@ export const PeopleAccess = (props) => {
                     React.createElement("div", { className: "info" },
                         React.createElement("div", { className: "name" }, access.fullName),
                         React.createElement("div", { className: "email" }, access.email)),
-                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, menu: {
+                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, overlayStyle: { zIndex: 3002 }, menu: {
                             items: renderActionItems(actions),
                             onClick: e => handleClickAction(e.key, access.userId),
                         } },

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

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

@@ -1,4 +1,3 @@
-import * as Constants from './constants';
-import * as Utils from './utils';
 export { ShareAccess } from './ShareAccess';
-export { Constants, Utils };
+export * as Constants from './constants';
+export * as Utils from './utils';

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

@@ -8,6 +8,7 @@ export type UserInfo = {
     user_type: number;
     ctime: Date;
     utime: Date;
+    [key: string]: any;
 };
 export type UserAccessInfo = {
     userId: number;
@@ -33,6 +34,7 @@ export type ShareAccessProps = {
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    allowAddUser?: boolean;
     allowChangeOnwership?: boolean;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     onChange?: (accessInfo: ObjectAccessInfo) => void;

package/es/components/molecules/ShareAccess/utils.d.ts

@@ -1,4 +1,4 @@
-import { ObjectAccessInfo } from './types';
+import { ObjectAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -36,3 +36,4 @@ export declare const getActionsByUser: (args: {
     readonly label: "Remove Access";
     readonly key: "remove_acess";
 })[];
+export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;

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

@@ -1,5 +1,6 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
 import { remove } from 'lodash';
+import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
         [`${MENU_PERMISSION.NONE}_false`]: false,
@@ -55,3 +56,11 @@ export const getActionsByUser = (args) => {
     }
     return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
 };
+export const initAccessInfoDefault = (userInfo) => ({
+    ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
+    listAccess: [
+        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
+    ],
+    publicRole: PUBLIC_ROLE.ONLY_VIEWER,
+    isPublic: 0,
+});

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { FormInstance, SelectProps } from 'antd';
+import { ShareAccessProps } from '../ShareAccess/types';
+export type categoriesProps = {
+    [key: string]: (string | number)[];
+};
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id: undefined;
+        label: string;
+    } | {
+        id: string | number;
+        label: string;
+    };
+    description?: string;
+    defaultThumbnail?: number;
+    categories?: {
+        [key: string]: (string | number)[];
+    };
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+export interface ImagePreviewOptions {
+    thumbnails: (string | undefined)[];
+    isLoading?: boolean;
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+    hideThumbnailsList?: boolean;
+    hideDefaultButton?: boolean;
+    label?: string;
+    imageWidth?: number;
+    imageHeight?: number;
+}
+export interface TemplateSaveAsProps {
+    className?: string;
+    shareAccess: Omit<{
+        show: boolean;
+    } & ShareAccessProps, 'accessInfo' | 'onChange'>;
+    imageReview: ImagePreviewOptions;
+    saveOptions?: {
+        saveNewText?: string;
+        saveExistText?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
+    };
+    categories?: Array<{
+        label: string | React.ReactNode;
+        key: string | number;
+        children: Array<{
+            key: string | number;
+            label: string | React.ReactNode;
+        }>;
+    }>;
+    /**
+     * Hide categories with following key
+     */
+    omitCategories?: string[];
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+    }>;
+    templateNamesOptions?: {
+        label?: string;
+        isLoading?: boolean;
+        defaultNewTemplateName?: string;
+        onSearch?: (searchValue: string) => void;
+        onNamePopupScroll?: SelectProps['onPopupScroll'];
+    };
+    descriptionOptions?: {
+        label?: string;
+        placeholder?: string;
+    };
+    form?: FormInstance<any>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onEvent?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;