@antscorp/antsomi-ui 1.3.7-beta.4 → 1.3.7-beta.41

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/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/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/TagifyInput/TagifyInput.js

@@ -17,7 +17,7 @@ import '@yaireo/tagify/dist/tagify.css';
 // Styled
 import { TagTextArea, TagifyWrapper, WrapperPlaceHolder } from './styled';
 // Utils
-import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, } from './utils';
+import { parseTagStringToTagify, convertInputStringToOriginal, emojiManufacturer, getEmojiTag, isPersonalizeTagType, generateTagContent, unescapeString, hasLineBreak, selectRange, isTagClickable, findURLInTextNodes, getAttributesString, isAnchorNodeChildOfElement, isShortLinkTagType, isCustomTagType, sanitizeTagAttributes, getTagAttributes, applyTagAttributes, getTagContentAttributes, isCaretAtEndOfTextNodeWithNextTag, getCurrentSelectionAndCloneRange, handleEnterWithNextTag, handleTextNodeBackspace, extractTagValues, preventUndoRedo, } from './utils';
 import { acceptablePatternChecking, detectURLRegex, getCachedRegex, getCustomTagId, getPersonalizeTagInfo, getShortLinkTagInfo, patternHandlers, } from './patternHandlers';
 // Constants
 import { DETECT_LINK, EMOJI, PERSONALIZE_PTN, SHORT_LINK, SHORT_LINK_PTN, SHORT_LINK_V2, TAG_TYPE, UNSUBSCRIBE_WHATSAPP, defaultCssVariables, tagifyDefaultProps, TAG_CUSTOM_ATTRIBUTES, } from './constants';
@@ -25,7 +25,7 @@ const { CUSTOM_TAG } = TAG_TYPE;
 const { PREPARING_ST, INVALID_TAG, MESSAGE_TAG, FORCE_SHOW_TOOLTIP } = TAG_CUSTOM_ATTRIBUTES;
 const TagifyInput = forwardRef((props, ref) => {
     // Props
-    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, onTagClick, onTagRemove, onChange, onRestoreTagProperty, } = props;
+    const { initialValue, escapeHTML, status, readonly, readonlyTag, readonlyText, realtime, disabled, maxLength, maxHeight, minWidth, placeholder, minWidthPlaceholder, isSingleLineText, acceptableTagPattern, tagProperties, mapAttributes = {}, mapErrorAttributes = {}, maxPersonalizeTags, name, children, cssTagifyVariables, disableEditableIfContainsTags, onTagClick, onAddTag, onTagRemove, onChange, onRestoreTagProperty, onBlur, } = props;
     // States
     const [isLineBreak, setIsLineBreak] = useState(hasLineBreak(initialValue));
     const [tooltipRefresher, setTooltipRefresher] = useState(1);
@@ -456,6 +456,7 @@ const TagifyInput = forwardRef((props, ref) => {
             }
             setLabelTagRefreshness(prev => prev + 1);
         },
+        getInputValues: () => extractTagValues(tagifyRef.current),
     }), [acceptableTagPattern, escapeHTML, onInjectTagAtCaret, placeCaretAfterNode]);
     const onTagItemClick = useCallback((event) => {
         event.stopPropagation();
@@ -471,7 +472,7 @@ const TagifyInput = forwardRef((props, ref) => {
     }, [onTagClick]);
     const onTagifyRemoveTag = useCallback((event) => {
         if (event.detail && onTagRemove) {
-            onTagRemove(event.detail);
+            onTagRemove(event.detail, extractTagValues(event.detail.tagify));
         }
     }, [onTagRemove]);
     // Used to trigger replace URL detection and line break
@@ -767,18 +768,6 @@ const TagifyInput = forwardRef((props, ref) => {
             });
         }
     }, [maxLength, customizeTag]);
-    useEffect(() => {
-        if (!tagifyRef.current || typeof readonlyText === 'undefined')
-            return;
-        const inputEl = tagifyRef.current.DOM.input;
-        if (typeof readonlyText === 'function') {
-            const isReadonlyText = readonlyText(tagifyRef.current.getCleanValue());
-            inputEl.setAttribute('contenteditable', isReadonlyText ? 'false' : 'true');
-        }
-        else {
-            inputEl.setAttribute('contenteditable', readonlyText ? 'false' : 'true');
-        }
-    }, [readonlyText, tagLength]);
     const onTagifyWrapperClick = useCallback(event => {
         event.preventDefault();
         event.stopPropagation();
@@ -790,6 +779,22 @@ const TagifyInput = forwardRef((props, ref) => {
                 return;
             const { classList } = DOM?.scope;
             const { classNames } = settings;
+            if (disableEditableIfContainsTags) {
+                // Empty input is always editable
+                const isEmpty = classList.contains(classNames.empty);
+                let shouldBeEditable = isEmpty;
+                // If not empty, check if input contains restricted tags
+                if (!isEmpty) {
+                    const { listTags } = extractTagValues(tagifyRef.current);
+                    const hasRestrictedTag = listTags.some(tag => disableEditableIfContainsTags.includes(tag.type));
+                    shouldBeEditable = !hasRestrictedTag;
+                }
+                // Apply contenteditable attribute
+                DOM.input.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
+                // Exit early if input should not be editable
+                if (!shouldBeEditable)
+                    return;
+            }
             if (!classList.contains(classNames.focus) && DOM?.input) {
                 try {
                     const { lastChild } = DOM?.input;
@@ -825,6 +830,12 @@ const TagifyInput = forwardRef((props, ref) => {
                 }
             }
         }
+    }, [disableEditableIfContainsTags]);
+    const onContentEditable = useCallback((editable) => {
+        if (!tagifyRef.current)
+            return;
+        const inputEl = tagifyRef.current.DOM.input;
+        inputEl.setAttribute('contenteditable', editable ? 'true' : 'false');
     }, []);
     // Initialization tagify
     useLayoutEffect(() => {
@@ -836,7 +847,12 @@ const TagifyInput = forwardRef((props, ref) => {
         };
     }, [initializeTagify]);
     useEffect(() => {
-        if (tagifyRef.current && tagLength && _.isFunction(onTagRemove)) {
+        if (typeof readonlyText !== 'boolean')
+            return;
+        onContentEditable(!readonlyText);
+    }, [readonlyText, onContentEditable]);
+    useEffect(() => {
+        if (tagifyRef.current && typeof tagLength === 'number' && _.isFunction(onTagRemove)) {
             // Because the remove tag event is not triggered when the tag is removed with Backspace or drag selection tags
             // we need to listen to the input element to detect when a tag is removed
             let mutationQueue = [];
@@ -865,8 +881,11 @@ const TagifyInput = forwardRef((props, ref) => {
                     try {
                         node.dataset.__removed_by_mutation = 'true';
                         const tagData = tagifyRef.current?.getSetTagData(node);
-                        if (tagData && tagData.type === CUSTOM_TAG && !tagData?.__removed) {
-                            onTagRemove({ data: tagData });
+                        if (tagifyRef.current &&
+                            tagData &&
+                            tagData.type === CUSTOM_TAG &&
+                            !tagData?.__removed) {
+                            onTagRemove({ data: tagData }, extractTagValues(tagifyRef.current));
                         }
                     }
                     catch (error) {
@@ -978,6 +997,13 @@ const TagifyInput = forwardRef((props, ref) => {
             tagifyInstance.on('change', onTagifyChangedDebounce);
             tagifyInstance.on('remove', onTagifyRemoveTag);
             tagifyInstance.on('keydown', onKeyDown);
+            if (onAddTag)
+                tagifyInstance.on('add', onAddTag);
+            if (onBlur)
+                tagifyInstance.on('blur', onBlur);
+            if (tagifyInstance.DOM.input) {
+                tagifyInstance.DOM.input.addEventListener('keydown', preventUndoRedo);
+            }
         }
         // Off listen to Tagify events
         return () => {
@@ -987,9 +1013,18 @@ const TagifyInput = forwardRef((props, ref) => {
                 tagifyInstance.off('change', onTagifyChangedDebounce);
                 tagifyInstance.off('remove', onTagifyRemoveTag);
                 tagifyInstance.off('keydown', onKeyDown);
+                if (onAddTag)
+                    tagifyInstance.off('add', onAddTag);
+                if (onBlur)
+                    tagifyInstance.off('blur', onBlur);
+                if (tagifyInstance.DOM.input) {
+                    tagifyInstance.DOM.input.removeEventListener('keydown', preventUndoRedo);
+                }
             }
         };
     }, [
+        onAddTag,
+        onBlur,
         onTagItemClick,
         onInputTagifyDebounce,
         onTagifyChangedDebounce,

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

@@ -15,6 +15,10 @@ export type TagStatus = (typeof TAG_STATUS)[keyof typeof TAG_STATUS];
 export type MapAttributesProps = Record<string, Record<string, any>>;
 export type StatusType = 'error' | 'success' | 'warning';
 export type BackgroundColorPersonalizeType = Exclude<keyof typeof TAG_COLOR, 'detect_link' | 'emoji' | 'shortlink'>;
+export interface TagValues {
+    listTags: TagDataCustomize[];
+    value: string;
+}
 /**
  * Interface defining the properties for the Tagify input component.
  * Provides configuration options and event handlers to manage Tagify's behavior and appearance.
@@ -134,11 +138,16 @@ export interface TagifyInputProps {
      * Receives the tag detail as parameter, allowing custom actions on tag click.
      */
     onTagClick?: (tagDetail: Tagify.ClickEventData<TagDataCustomize>) => void;
+    /**
+     * Event handler triggered when a tag is added.
+     * Receives the tag detail as parameter, allowing custom actions on tag addition.
+     */
+    onAddTag?: (event: CustomEvent<Tagify.AddEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when a tag is removed.
      * Receives the tag detail as parameter, allowing custom actions on tag removal.
      */
-    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>) => void;
+    onTagRemove?: (tagDetail: Tagify.RemoveEventData<TagDataCustomize>, values: TagValues) => void;
     /**
      * Event handler triggered when the input value changes.
      * Receives the updated input value as a string, allowing for controlled component updates.
@@ -146,6 +155,11 @@ export interface TagifyInputProps {
      * @default () => {}
      */
     onChange: (inputValue: string) => void;
+    /**
+     * Event handler triggered when the input value is blurred.
+     * Receives the updated input value as a string, allowing for controlled component updates.
+     */
+    onBlur?: (event: CustomEvent<Tagify.BlurEventData<TagDataCustomize>>) => void;
     /**
      * Event handler triggered when found mismatch tag properties.
      * Receives an array of tag properties that were restored (e.g., via undo operation).
@@ -154,13 +168,18 @@ export interface TagifyInputProps {
     /**
      * Defines whether the input text is read but not the whole tags.
      */
-    readonlyText?: boolean | ((listTags: TagDataCustomize[]) => boolean);
+    readonlyText?: boolean;
+    /**
+     * Tags that, when present in input, make the entire input non-editable
+     */
+    disableEditableIfContainsTags?: TagType[];
 }
 export interface TagifyInputRef {
     onAddNewTag: (newTag: TagDataCustomize | string) => void;
     onReplaceTag: (currentTagEle: HTMLElement, newTag: TagDataCustomize) => void;
     onReload: (newValue: string) => void;
     onLabelTagRefreshness: () => void;
+    getInputValues: () => TagValues;
 }
 export type EmojiCollection = (typeof EMOJI_COLLECTIONS)[keyof typeof EMOJI_COLLECTIONS];
 export type ShortLinkType = (typeof SHORT_LINK_TYPE)[keyof typeof SHORT_LINK_TYPE];

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

@@ -1,6 +1,6 @@
 /// <reference types="yaireo__tagify" />
 import Tagify from '@yaireo/tagify';
-import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType } from './types';
+import { AcceptablePattern, TagAttribute, EmojiCollection, EmojiTag, TagDataCustomize, TagProperty, TagType, TagValues } from './types';
 /**
  * Parses the input string and replaces matching patterns with processed tags.
  * This function iterates over predefined regex patterns and replaces each match
@@ -202,3 +202,8 @@ export declare const getCurrentSelectionAndCloneRange: () => {
 };
 export declare const handleTextNodeBackspace: (range: Range) => void;
 export declare const handleEnterWithNextTag: (range: Range) => void;
+export declare const removeInvisibleChars: (str: string) => string;
+export declare const extractTagValues: (tagify: Tagify<TagDataCustomize>) => TagValues;
+export declare function preventUndoRedo(e: CustomEvent<Tagify.KeydownEventData<TagDataCustomize>>['detail']['event'], { disableRedo }?: {
+    disableRedo?: boolean | undefined;
+}): void;

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

@@ -796,3 +796,22 @@ export const handleEnterWithNextTag = (range) => {
         return;
     insertZeroWidthSpaceBeforeTag(currentNode);
 };
+export const removeInvisibleChars = (str) => str.replace(/[\r\n\u200B-\u200D\uFEFF]/g, '');
+export const extractTagValues = (tagify) => {
+    if (!tagify)
+        return { listTags: [], value: '' };
+    return {
+        listTags: tagify.getCleanValue(),
+        value: tagify.getInputValue(),
+    };
+};
+export function preventUndoRedo(e, { disableRedo = false } = {}) {
+    const key = e.key.toLowerCase();
+    const isUndo = (e.ctrlKey || e.metaKey) && key === 'z';
+    const isRedo = (disableRedo && (e.ctrlKey || e.metaKey) && key === 'y') ||
+        ((e.ctrlKey || e.metaKey) && e.shiftKey && key === 'z');
+    if (isUndo || isRedo) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}

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

@@ -8,6 +8,7 @@ export declare const VirtualizedMenu: React.ForwardRefExoticComponent<Partial<{
     className: string;
     itemSize: number;
     selected: string | string[];
+    focusedKey: string;
     expanded: string[];
     onClick: (args: {
         item: import("./types").ItemType;

package/es/components/molecules/VirtualizedMenu/components/Item/Item.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useMemo, useRef, useEffect, useCallback } from 'react';
+import { memo, useMemo, useRef, useCallback } from 'react';
 import { Typography } from '../../../../atoms/Typography';
 import { MenuItemRoot } from '../../styled';
 import clsx from 'clsx';
@@ -69,11 +69,7 @@ export const Item = memo((props) => {
     }, [item.id, normalizeTreeItems, selectedKeys]);
     const className = clsx(itemClassName, {
         [CLS.Item.selectedDescendant]: isSelectedDescendant,
+        [CLS.Item.focused]: isFocused,
     });
-    useEffect(() => {
-        if (isFocused) {
-            itemRef.current?.focus({ preventScroll: true });
-        }
-    }, [isFocused]);
-    return (_jsxs(MenuItemRoot, { ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', tabIndex: displayOnly ? -1 : isFocused ? 0 : -1, "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
+    return (_jsxs(MenuItemRoot, { "data-selected": !!selected, "data-focused": isFocused, ref: handleItemRef, role: displayOnly ? 'none' : 'treeitem', "aria-selected": displayOnly ? undefined : selected, "aria-disabled": displayOnly ? undefined : disabled, "aria-expanded": displayOnly ? undefined : expanded, "aria-level": displayOnly ? undefined : item.level, "aria-posinset": displayOnly ? undefined : index + 1, "aria-setsize": displayOnly ? undefined : items.length, className: className, style: itemStyle, onClick: e => handleOnClick(e, 'item'), children: [_jsx("div", { className: CLS.ItemLabel.default, children: labelContent }), actionContent] }));
 }, areEqual);