@antscorp/antsomi-ui 1.3.7-beta.6 → 1.3.7-beta.61

package/es/components/atoms/Input/Input.js

@@ -6,7 +6,9 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // Types
 import { Input as AntdInput } from 'antd';
 // Components
-import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Icon } from '../Icon';
+import { RequiredLabel } from '../RequiredLabel';
+import { Text } from '../Text';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils/handleError';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';

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

@@ -30,9 +30,9 @@ const defaultProps = {
     apiConfig: {
         domain: 'https://sandbox-media-template.antsomi.com/cdp',
         slug: '/api/v1',
-        token: '5474r2x214z2a4b403e4y446p4b4t2b4t474j4t2i5',
-        accountId: '1600085679',
-        userId: '1600085679',
+        token: '5474r2x214z284d4w2b4y4o5l4u5n4x5s2x2h4g45416',
+        userId: '1600083836',
+        accountId: '1600083836',
     },
     disabled: false,
     showIndex: true,

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

@@ -408,4 +408,6 @@ export declare const LazyIcon: {
     WebPersonalizationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WidgetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WritingAIAssitantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRCodeManagementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRSetDashboardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
 };

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -411,4 +411,6 @@ export const LazyIcon = {
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
+    QRCodeManagementIcon: lazy(() => import('../QRCodeManagementIcon').then(m => ({ default: m.QRCodeManagementIcon }))),
+    QRSetDashboardIcon: lazy(() => import('../QRSetDashboardIcon').then(m => ({ default: m.QRSetDashboardIcon }))),
 };

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

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

package/es/components/icons/QRCodeManagementIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const QRCodeManagementIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("g", { children: _jsx("path", { d: "M2.604 7.3118V2.60425H7.31156V4.16675H4.1665V7.3118H2.604ZM2.604 22.3959V17.6884H4.1665V20.8334H7.31156V22.3959H2.604ZM17.6881 22.3959V20.8334H20.8332V17.6884H22.3957V22.3959H17.6881ZM20.8332 7.3118V4.16675H17.6881V2.60425H22.3957V7.3118H20.8332ZM17.9386 17.9389H19.3509V19.3511H17.9386V17.9389ZM17.9386 15.1141H19.3509V16.5264H17.9386V15.1141ZM16.5261 16.5264H17.9386V17.9389H16.5261V16.5264ZM15.1139 17.9389H16.5261V19.3511H15.1139V17.9389ZM13.7017 16.5264H15.1139V17.9389H13.7017V16.5264ZM16.5261 13.7019H17.9386V15.1141H16.5261V13.7019ZM15.1139 15.1141H16.5261V16.5264H15.1139V15.1141ZM13.7017 13.7019H15.1139V15.1141H13.7017V13.7019ZM19.3509 5.64904V11.2983H13.7017V5.64904H19.3509ZM11.298 13.7019V19.3511H5.6488V13.7019H11.298ZM11.298 5.64904V11.2983H5.6488V5.64904H11.298ZM10.0558 18.1089V14.9441H6.89098V18.1089H10.0558ZM10.0558 10.0561V6.89123H6.89098V10.0561H10.0558ZM18.1087 10.0561V6.89123H14.9438V10.0561H18.1087Z", fill: "currentColor" }) }) }));
+});

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

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

package/es/components/icons/QRSetDashboardIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const QRSetDashboardIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", viewBox: "0 0 18 18", width: width, height: height, ref: ref, ...props, children: _jsx("path", { fill: "currentColor", d: "M10 18v-2h2v2zm-2-2v-5h2v5zm8-3V9h2v4zm-2-4V7h2v2zM2 11V9h2v2zM0 9V7h2v2zm9-7V0h2v2zM1.5 4.5h3v-3h-3zM0 6V0h6v6zm1.5 10.5h3v-3h-3zM0 18v-6h6v6zM13.5 4.5h3v-3h-3zM12 6V0h6v6zm2 12v-3h-2v-2h4v3h2v2zm-4-7V9h4v2zm-4 0V9H4V7h6v2H8v2zm1-5V2h2v2h2v2zM2.25 3.75v-1.5h1.5v1.5zm0 12v-1.5h1.5v1.5zm12-12v-1.5h1.5v1.5z" }) }));
+});

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

@@ -401,3 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';

package/es/components/icons/index.js

@@ -401,3 +401,5 @@ export { WebIcon } from './WebIcon';
 export { WebPersonalizationIcon } from './WebPersonalizationIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';
+export { QRSetDashboardIcon } from './QRSetDashboardIcon';
+export { QRCodeManagementIcon } from './QRCodeManagementIcon';

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

@@ -15,6 +15,7 @@ import { Text } from '@antscorp/antsomi-ui/es/components/atoms/Text';
 import { Form, Select, TreeSelect } from 'antd';
 import { TreeNode } from 'rc-tree-select';
 // Locales
+import { translate, translations as translationLib } from '@antscorp/antsomi-locales';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Query
@@ -33,6 +34,7 @@ import { buildMappingFields, buildOptionAttrArchive, checkStatusAttr, CUSTOM_TYP
 // Style
 import { EditorScript } from '../EditorScript';
 import { InputSuggestion, ModalCustom } from './styled';
+import { Input, Radio } from '../../atoms';
 const getMembers = (member) => {
     if (!member.children || !member.children.length) {
         return member;
@@ -303,6 +305,12 @@ export const AddDynamicContent = props => {
         }
         return false;
     }, [selectedAttr, selectedDynamicContentType, eventTrackingAttributes?.mainObjects]);
+    const eventBOAttributeLabel = useMemo(() => {
+        if (!selectedAttr?.itemTypeId || !listEventAttributes)
+            return '';
+        const boAttr = listEventAttributes.find(row => row.itemTypeId === selectedAttr?.itemTypeId);
+        return boAttr?.label;
+    }, [listEventAttributes, selectedAttr]);
     const itemTypeName = useMemo(() => {
         let draftItemTypeName = '';
         if (itemTypeId) {
@@ -416,6 +424,8 @@ export const AddDynamicContent = props => {
             [DYNAMIC_CONTENT_SETTING_KEY.DISPLAY_FORMAT_TYPE]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.FUNCTION]: undefined,
             [DYNAMIC_CONTENT_SETTING_KEY.DATA_TYPE]: optionDataType[0].value,
+            [DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE]: '',
+            [DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE]: 'event',
         });
     }, [form]);
     useEffect(() => {
@@ -1119,7 +1129,7 @@ export const AddDynamicContent = props => {
                                     __html: `${t(translations.dynamicContent.modal.label.displayFormat)}: <bdo dir='ltr'>${formatedAttr}</bdo>`,
                                 } })) : null, !showDetailEditDF && (_jsx(Button, { disabled: isActionArchive &&
                                     selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, type: "text", style: { display: 'inline-block' }, onClick: () => setShowDetailEditDF(prevShow => !prevShow), children: t(translations.edit.title) }))] }), children: _jsx(Select, { disabled: isActionArchive &&
-                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) })] }));
+                            selectedDynamicContentType !== DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value, style: { height: 28 }, options: attrDFOptions }) }), renderDefaultValue()] }));
     };
     const renderCustomerAttrFields = () => {
         if (hasError[DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]) {
@@ -1205,6 +1215,22 @@ export const AddDynamicContent = props => {
                     gap: '8px',
                 }, children: _jsx(DisplayFormat, { infos: infos, url: url, displayFormatType: selectedDFType, formatSettings: attrDFSettings, onSettingsChange: (values) => setAttrDFSettings(values), dynamicContentType: form.getFieldValue(DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE) }) }));
     };
+    const renderGetFromData = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Get data from'), name: DYNAMIC_CONTENT_SETTING_KEY.DATA_SOURCE, required: true, children: _jsx(Radio.Group, { defaultValue: "event", options: [
+                {
+                    value: 'event',
+                    label: 'Event data',
+                },
+                {
+                    value: 'object',
+                    label: (_jsxs(Text, { children: [translate(translationLib._TITL_PERSONALIZATION_LOOKUP_YES, 'Data object'), ' ', _jsx("b", { children: eventBOAttributeLabel })] })),
+                    disabled: !selectedAttr?.itemTypeId,
+                },
+            ], style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 8,
+            } }) }));
+    const renderDefaultValue = () => (_jsx(Form.Item, { className: "ants-items-center", label: translate(translations._TITL_DEFAULT_VALUE, 'Default value'), name: DYNAMIC_CONTENT_SETTING_KEY.DEFAULT_VALUE, children: _jsx(Input, { placeholder: "Enter fallback text when data is unavailable" }) }));
     return (_jsx(ModalCustom, { closable: false, destroyOnClose: true, forceRender: true, mask: true, okButtonProps: { disabled: formSubmitDisabled }, title: modalTitle || t(translations.dynamicContent.modal.title.addDynamicContent), visible: visible, onCancel: handleOnCancelModal, onOk: handleOnOkModal, children: _jsxs(Spin, { spinning: isFetchingSourceBO ||
                 isFetchingListBoAttr ||
                 isFetchingEventAttr ||
@@ -1212,7 +1238,7 @@ export const AddDynamicContent = props => {
                 isFetchingPromotionCodeAttr ||
                 isFetchingDynamicContentAttr, children: [_jsxs(Form, { style: { width: '100%' }, form: form, labelAlign: "left", labelCol: { span: 9 }, wrapperCol: { span: 15 }, onValuesChange: handleFormValuesChanges, initialValues: {
                         [DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE]: listDynamicContentTypes[0].value,
-                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderVisitorAttrFields() })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsx(_Fragment, { children: renderCustomerAttrFields() })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), isShowEventIndexField
+                    }, children: [_jsx(Form.Item, { style: { alignItems: 'center' }, label: t(translations.dynamicContent.modal.label.contentSource), name: DYNAMIC_CONTENT_SETTING_KEY.DYNAMIC_CONTENT_TYPE, required: true, children: _jsx(Select, { style: { height: 28 }, options: listDynamicContentTypes }) }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.VISITOR_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderVisitorAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.CUSTOMER_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderCustomerAttrFields(), renderDefaultValue()] })), selectedDynamicContentType === CUSTOM_TYPE.value && _jsx(_Fragment, { children: renderCustomFunctionFields() }), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.EVENT_ATTRIBUTE.value && (_jsxs(_Fragment, { children: [renderEventFields(), renderSourceFields(), renderEventAttrFields(), renderGetFromData(), renderDefaultValue(), isShowEventIndexField
                                     ? renderIndexFields({ disabled: false, loading: false })
                                     : null] })), selectedDynamicContentType === DYNAMIC_CONTENT_TYPE.PROMOTION_CODE.value && (_jsxs(_Fragment, { children: [renderPromotionPoolFields(), renderPromotionCodeAttr()] })), selectedDynamicContentType && regexCSType.test(selectedDynamicContentType) && (_jsxs(_Fragment, { children: [renderBoAttrFields(), renderIndexFields({ disabled: isActionArchive, loading: isFetchingListBoAttr })] })), showDisplayFormat && renderDisplayFormat()] }), showDisplayFormat && renderDisplayFormat() !== null && renderDetailDFSettings(), isShowCustomFunction && selectedDynamicContentType === CUSTOM_TYPE.value && (_jsx("div", { style: {
                         display: 'flex',

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

@@ -12,6 +12,8 @@ export declare const DYNAMIC_CONTENT_SETTING_KEY: {
     PERNAME: string;
     SAVE_AS_TEMPLATE: string;
     DATA_TYPE: string;
+    DATA_SOURCE: string;
+    DEFAULT_VALUE: string;
 };
 export declare const DYNAMIC_CONTENT_TYPE_KEY: {
     readonly BO_SETTINGS: "bo-settings";

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

@@ -12,6 +12,8 @@ export const DYNAMIC_CONTENT_SETTING_KEY = {
     PERNAME: 'templateName',
     SAVE_AS_TEMPLATE: 'saveAsTemplate',
     DATA_TYPE: 'dataType',
+    DATA_SOURCE: 'dataSource',
+    DEFAULT_VALUE: 'defaultValue',
 };
 export const DYNAMIC_CONTENT_TYPE_KEY = {
     BO_SETTINGS: 'bo-settings',

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

@@ -7,8 +7,10 @@ export interface ColorPickerProps {
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;
+    onAfterClosePicker?: (color: string) => void;
     showInput?: boolean;
     positionInput?: 'right' | 'left';
     style?: React.CSSProperties;
+    inputProps?: any;
 }
 export declare const ColorPicker: React.FC<ColorPickerProps>;

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

@@ -22,8 +22,8 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
-    const { onChange = () => { } } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, inputProps = {}, } = props;
+    const { onChange = () => { }, onAfterClosePicker = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
     const [popoverVisible, setPopoverVisible] = useState(false);
@@ -71,7 +71,12 @@ export const ColorPicker = props => {
     const onPopoverVisibleChange = visible => {
         setPopoverVisible(visible);
     };
-    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
+    const handleAfterOpenChange = (visible) => {
+        if (!visible && typeof onAfterClosePicker === 'function') {
+            onAfterClosePicker(color);
+        }
+    };
+    return (_jsxs(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style, children: [showInput && positionInput === 'left' && (_jsx(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput, ...inputProps })), _jsx(Popover, { arrow: true, content: _jsx(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange, afterOpenChange: handleAfterOpenChange, children: _jsx("div", { className: "antsomi-popover-button", style: styleBtnColor, children: iconNode || (_jsx("span", { style: {
                             backgroundColor: color,
                             display: 'block',
                             width: 20,

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

@@ -9,6 +9,7 @@ interface EmojiPopoverProps {
     collections?: CollectionItemProps[];
     isForceHide?: boolean;
     children?: React.ReactNode;
+    destroyTooltipOnHide?: boolean;
     onEmojiClick?: (emoji: string | TagDataCustomize) => void;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
 }

package/es/components/molecules/EmojiPopover/EmojiPopover.js

@@ -11,7 +11,7 @@ import { EMOJI_COLLECTIONS, } from '@antscorp/antsomi-ui/es/components/molecules
 import { EmojiTabs, EmojiPopoverStyled } from './styled';
 // Utils
 import { handleGetTextToReplace } from './utils';
-const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiClick, getPopupContainer, }) => {
+const EmojiPopover = ({ disabled, collections, isForceHide, children, destroyTooltipOnHide, onEmojiClick, getPopupContainer, }) => {
     const [state, setState] = useImmer({
         isOpen: false,
         collectionActive: collections ? collections[0]?.key : EMOJI_COLLECTIONS.COMMON,
@@ -70,7 +70,7 @@ const EmojiPopover = ({ disabled, collections, isForceHide, children, onEmojiCli
     if (emojiCollections.length <= 1) {
         content = emojiCollections.at(0)?.children;
     }
-    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
+    return (_jsx(EmojiPopoverStyled, { content: content, placement: "topLeft", destroyTooltipOnHide: destroyTooltipOnHide, trigger: "click", fresh: false, style: { padding: 15 }, arrow: false, rootClassName: "antsomi-emoji-popover", open: state.isOpen, onOpenChange: handleOpenChange, getPopupContainer: getPopupContainer, children: children || (_jsx(Button, { type: "link", icon: _jsx(EmojiSmileIcon, {}), disabled: disabled, onClick: () => handleOpenChange(true) })) }));
 };
 EmojiPopover.defaultProps = {
     disabled: false,

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

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+export declare const EmojiTabs: import("styled-components").StyledComponent<import("react").FC<import("antd/es/tabs").TabsProps> & {
     TabPane: import("react").FC<import("antd").TabPaneProps>;
 }, any, {
     shadow?: boolean | undefined;
 }, never>;
-export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const EmojiPopoverStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;

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

@@ -1,8 +1,8 @@
 // Libraries
-import { Popover } from 'antd';
 import styled from 'styled-components';
 // Components
 import { Tabs as TabsUI } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Popover } from '../../atoms/Popover';
 export const EmojiTabs = styled(TabsUI) `
   .antsomi-tabs-tab {
     padding: 5.5px 20px !important;

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

@@ -26,7 +26,7 @@ export interface HeaderV2Props {
     notificationConfig?: {
         show?: boolean;
     };
-    accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
+    accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount' | 'portalRedirectUrl'> & {
         show?: boolean;
     };
     useURLParam?: boolean;

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

@@ -16,7 +16,10 @@ export const OriginalModal = memo(props => {
 });
 OriginalModal.displayName = 'OriginalModal';
 export const Modal = Object.assign(OriginalModal, {
-    confirm: (props) => StyledModal.confirm({ cancelText: 'Cancel', ...props }),
+    confirm: (props) => StyledModal.confirm({
+        cancelText: 'Cancel',
+        ...props,
+    }),
     useModal: StyledModal.useModal,
     success: StyledModal.success,
     info: StyledModal.info,
@@ -24,3 +27,6 @@ export const Modal = Object.assign(OriginalModal, {
     warning: StyledModal.warning,
     destroyAll: StyledModal.destroyAll,
 });
+Modal.defaultProps = {
+    loading: false,
+};

package/es/components/molecules/SearchPopover/SearchPopover.js

@@ -5,7 +5,7 @@ import { StyledInput } from './styled';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 import { SearchIcon } from '../../icons';
 export const SearchPopover = props => {
-    const { inputSearchProps = {}, ...popoverProps } = props;
+    const { inputSearchProps = {}, inputSearchRef, ...popoverProps } = props;
     const { overlayClassName, arrow = false, children, content, trigger = ['click'], ...restPopoverProps } = popoverProps;
-    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
+    return (_jsx(Popover, { trigger: trigger, arrow: arrow, destroyTooltipOnHide: true, ...restPopoverProps, overlayClassName: clsx('no-padding-content', overlayClassName), overlay: true, content: _jsxs(_Fragment, { children: [_jsx(StyledInput, { ref: inputSearchRef, placeholder: inputSearchProps?.placeholder || `${translate(translations.global.search)}`, bordered: false, ...inputSearchProps, addonAfter: _jsx(SearchIcon, {}), withWrapper: false }), content] }), children: children }));
 };

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

@@ -1 +1,12 @@
-export declare const StyledInput: import("styled-components").StyledComponent<(props: any) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+    readonly DefaultInput: import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("rc-input").InputRef>> & {
+        Group: import("react").FC<import("antd/es/input").GroupProps>;
+        Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+        TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: import("react").ForwardRefExoticComponent<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    };
+    readonly CustomSearch: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+    readonly TextArea: import("react").ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & import("react").RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: import("react").ForwardRefExoticComponent<import("../../atoms/Input").InputProps & import("react").RefAttributes<import("rc-input").InputRef>>;
+}, any, {}, never>;

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

@@ -1,8 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Input } from '../../atoms/Input';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const StyledInput = styled(props => _jsx(Input, { ...props })) `
+export const StyledInput = styled(Input) `
   &.antsomi-input-group-wrapper {
     padding: 8px 10px;
     border-bottom: 1px solid var(--divider-1);

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

@@ -1,7 +1,7 @@
-import { PopoverProps } from 'antd';
-import { InputProps } from '../../atoms/Input';
+import type { InputRef, PopoverProps } from 'antd';
+import type { InputProps } from '../../atoms/Input';
 import React, { PropsWithChildren } from 'react';
-import { MenuInlineProps } from '../VirtualizedMenu/types';
+import type { MenuInlineProps } from '../VirtualizedMenu/types';
 export type SearchConfig = {
     searchWithKey?: boolean;
 };
@@ -9,6 +9,7 @@ export type SearchPopoverProps = PropsWithChildren<{
     inputSearchProps?: InputProps & {
         searchConfig?: SearchConfig;
     };
+    inputSearchRef?: React.RefObject<InputRef>;
     isAllowEmpty?: boolean;
     noItemContent?: React.ReactNode;
 } & PopoverProps>;

package/es/components/molecules/Select/Select.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { Select as AntdSelect } from 'antd';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Text } from '../../atoms/Text';
+import { Flex } from '../../atoms/Flex';
 // Icons
 import Icon from '@antscorp/icons';
 // Constants

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

@@ -1,2 +1,3 @@
+import React from 'react';
 import { ShareAccessProps } from './types';
-export declare const ShareAccess: (props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ShareAccess: React.MemoExoticComponent<(props: ShareAccessProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,32 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import { useReducer } from 'react';
+import { memo, useReducer } from 'react';
+import isEqual from 'react-fast-compare';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
 import { updateObjAccessInfo } from './actions';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
-import { safeParseAccessInfo } from './utils';
-export const ShareAccess = (props) => {
-    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
-    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+import { fromRaw, safeParseAccessInfo } from './utils';
+export const ShareAccess = memo((props) => {
+    const { accessInfo, rawAccessInfo, excludeUserAccess, userId, onChange, onRawChange, userPermission, isLoading, } = props;
+    const [state, dispatch] = useReducer(shareAccessReducer(onChange, onRawChange), {
         modalTransferOwnership: {
             open: false,
             userToOwnerShipId: -1,
         },
     });
     useDeepCompareEffect(() => {
-        if (!accessInfo)
+        const resolved = rawAccessInfo ? fromRaw(rawAccessInfo) : accessInfo;
+        if (!resolved)
             return;
         dispatch(updateObjAccessInfo({
-            updated: safeParseAccessInfo(accessInfo),
+            updated: safeParseAccessInfo(resolved),
             triggerOut: false,
         }));
-    }, [accessInfo]);
+    }, [accessInfo, rawAccessInfo]);
     return (_jsx(ShareAccessStateContext.Provider, { value: {
             ...state,
             excludeUserAccess,
             accessUserId: userId,
             accessUserPermission: userPermission,
+            isLoading,
         }, children: _jsx(ShareAccessDispatchContext.Provider, { value: dispatch, children: _jsx(LayoutContent, { ...props }) }) }));
-};
+}, isEqual);

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useShareAccess } from '../../hooks';
 import { GeneralAccess } from '../GeneralAccess';
 import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
 import { PeopleAccess } from '../PeopleAccess';
 import { SearchUser } from '../SearchUser';
 import { StyledLayoutContentRoot } from './styled';
 export const LayoutContent = (props) => {
-    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, } = props;
-    // const { state } = useShareAccess();
-    // const { allowEdit, allowView } = state;
-    // if (!allowEdit && !allowView) return null;
-    return (_jsxs(StyledLayoutContentRoot, { children: [allowAddUser && _jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, className, } = props;
+    const { state } = useShareAccess();
+    const { isLoading } = state;
+    return (_jsxs(StyledLayoutContentRoot, { className: className, children: [!isLoading && allowAddUser && (_jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder })), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
 };

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

@@ -19,7 +19,7 @@ const ROLE_BY_ACTIONS = {
 export const PeopleAccess = (props) => {
     const { excludeUserAccess, hideTransferOwnership } = props;
     const { state, dispatch } = useShareAccess();
-    const { accessInfo, accessUserId, accessUserPermission } = state;
+    const { accessInfo, accessUserId, accessUserPermission, isLoading } = state;
     const dataSourceSorted = useMemo(() => {
         if (!Array.isArray(accessInfo?.listAccess))
             return [];
@@ -86,7 +86,7 @@ export const PeopleAccess = (props) => {
     };
     if (!accessInfo)
         return null;
-    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: _jsx(Spin, {}) }, renderItem: access => {
+    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: !!isLoading, indicator: _jsx(Spin, {}) }, renderItem: access => {
                     const actions = getActionsByUser({
                         userId: accessUserId,
                         updatedUserId: access.userId,

package/es/components/molecules/ShareAccess/hooks/useShareAccess.d.ts

@@ -3,7 +3,8 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("..").ObjectAccessInfo | undefined;
+        isLoading?: boolean | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;

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

@@ -1,3 +1,4 @@
 export { ShareAccess } from './ShareAccess';
 export * as Constants from './constants';
 export * as Utils from './utils';
+export type { ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserAccessInfoRaw, ShareAccessProps, } from './types';

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

@@ -1,2 +1,2 @@
 import { ShareAccessAction, ShareAccessProps, ShareAccessState } from './types';
-export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;
+export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange'], onRawChange: ShareAccessProps['onRawChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;

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

@@ -1,13 +1,16 @@
 import produce from 'immer';
-import { mappingOutData } from './utils';
 import { TYPES } from './constants';
-export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
+import { mappingOutData, toRaw } from './utils';
+export const shareAccessReducer = (onChange, onRawChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             const { updated, triggerOut = true } = action.payload;
+            // console.log({ action });
             draft.accessInfo = updated;
-            if (onChange && triggerOut) {
-                onChange(mappingOutData(action.payload.updated));
+            if (triggerOut) {
+                const mapped = mappingOutData(action.payload.updated);
+                onChange?.(mapped);
+                onRawChange?.(toRaw(mapped));
             }
             break;
         }

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

@@ -27,28 +27,50 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type UserAccessInfoRaw = {
+    user_id: number;
+    role: number;
+    allow_view: number;
+    allow_edit: number;
+    allow_comment: number;
+    full_name?: string;
+    email?: string;
+    avatar?: string;
+    [key: string]: any;
+};
+export type ObjectAccessInfoRaw = {
+    is_public: number;
+    public_role: number | null;
+    owner_id?: number;
+    list_access: UserAccessInfoRaw[];
+};
 export type ActionKey = (typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS];
 export type ExcludeUserAccess = Array<ActionKey>;
 export type GeneralAccessSettings = {
     publicOnlyWith?: boolean;
 };
 export type ShareAccessProps = {
+    className?: string;
     userId?: number;
     userPermission?: {
         edit: number;
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     allowAddUser?: boolean;
     placeholder?: string;
     excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     generalAccessSettings?: GeneralAccessSettings;
     onChange?: (accessInfo: ObjectAccessInfo) => void;
+    rawAccessInfo?: ObjectAccessInfoRaw;
+    onRawChange?: (raw: ObjectAccessInfoRaw) => void;
     hideTransferOwnership?: boolean;
 };
 export type ShareAccessState = {
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     accessUserId?: number;
     accessUserPermission?: {
         view: number;

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

@@ -1,4 +1,4 @@
-import { ActionKey, ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
+import { ActionKey, ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -54,6 +54,8 @@ export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;
 };
+export declare const fromRaw: (raw: ObjectAccessInfoRaw) => ObjectAccessInfo;
+export declare const toRaw: (info: ObjectAccessInfo) => ObjectAccessInfoRaw;
 export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;