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

package/README.md

@@ -76,3 +76,73 @@ const App = () => (
 ### TypeScript
 
 `@antscorp/antsomi-ui` is written in TypeScript with complete definitions.
+
+### Ory OAuth browser login
+
+`Login` retains the released legacy flow. Use the independent `LoginV2` with `useOry`;
+the existing SignIn form, logo and banner remain visible. Its password submit
+uses Kratos JSON browser-flow APIs and CSRF, then starts Hydra authorization:
+
+```jsx
+<LoginV2
+  loginDomain={window.location.origin}
+  useOry
+  oauthAuthorizeUrl="/api/account/oauth-authenticate"
+  oauthTokenUrl="/oauth2/token"
+  oauthClientId="your-public-client-id"
+  oauthRedirectUri="https://app.example.test/oauth/callback"
+  oauthScope="openid profile email offline_access"
+  oauthLoginUrl="/oauth2/login"
+  kratosLoginUrl="/self-service/login/browser"
+  sessionUrl="/api/session"
+  onOAuthSuccess={handleOAuthSuccess}
+/>
+```
+
+The component generates an S256 PKCE verifier and state in session storage,
+starts authorization through the configured IAM entrypoint, verifies the
+callback state, and exchanges the one-time code at the public token endpoint.
+The token response is delivered in memory to `onOAuthSuccess`; it is never
+written to cookies or local storage. Passwords are submitted only to the Kratos
+flow and are not persisted. A login challenge uses the verified session when
+available; otherwise it shows the same SignIn form. A consent challenge renders the package's portal and scope screens and calls
+the IAM consent API with CSRF protection.
+
+`oauthAutoStart` defaults to `false`. Set it to `true` only for a consumer that
+wants to start authorization immediately. Configure Hydra login and consent
+URLs to this component's page and proxy Kratos `/self-service` plus IAM
+`/oauth2` APIs on the frontend origin. Business scopes still require portal
+selection and current IAM permissions; basic login does not grant those rights.
+LoginV2 supports inline Ory MFA and browser recovery with validated provider
+flows, CSRF and session checks. Helpers, types and components live under
+`es/components/organism/LoginV2`; legacy Login is not their implementation.
+
+
+### Exact LoginV2 release and manual publication
+
+```tsx
+import { Login, LoginV2, OryConsent, OryThemeProvider } from '@antscorp/antsomi-ui';
+import type { LoginV2Props } from '@antscorp/antsomi-ui';
+import '@antscorp/antsomi-ui/dist/main.css';
+```
+
+The reviewed release is `1.3.7-beta.71`, published only with the `login-v2` tag.
+After publication and registry integrity verification, install the exact
+version with `npm install --save-exact @antscorp/antsomi-ui@1.3.7-beta.71`.
+React/ReactDOM/router and Antsomi constants/locales remain consumer peers;
+use one React instance. A bundler consuming precompiled `dist/main.css` may
+skip this package's SCSS imports. Required CSS font/image files ship in dist.
+
+Publish the reviewed immutable tarball, never this dirty source directory:
+
+```sh
+npm publish /path/to/reviewed/antscorp-antsomi-ui-1.3.7-beta.71.tgz \
+  --ignore-scripts --tag login-v2 --registry=https://registry.npmjs.org
+```
+
+The source `prepublishOnly` runs yarn/build:es and deletes dist. The release
+stage disables source lifecycle scripts; `--ignore-scripts` is required for
+manual publication. Keep latest/beta/staging and other existing tags unchanged.
+The release stage preserves published beta.70 ES/types/assets and adds only
+V2, named exports, audited CSS/resources and necessary runtime metadata.
+Local tarball install/build validation is not a registry install or deployment.

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/atoms/Tag/Tag.js

@@ -15,7 +15,7 @@ import { SearchPopover } from '../../molecules/SearchPopover/SearchPopover';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';
 // Utils
-import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils/common';
 import { Scrollbars } from '../Scrollbars';
 const { Text } = Typography;
 const CloseBtn = styled.div `

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/components/DisplayFormat/DisplayFormat.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { PayloadInfo } from '@antscorp/antsomi-ui/es/types';
 import { TDisplayFormat } from '../../types';
 export type DisplayFormatProps = {

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/EmptyData/EmptyData.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+import type { FlexProps } from '../../atoms/Flex';
 export interface EmptyDataProps extends Omit<FlexProps, 'children' | 'title'> {
     showIcon?: boolean;
     size?: TUISize;

package/es/components/molecules/EmptyData/EmptyData.js

@@ -4,8 +4,10 @@ import React from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import { isString } from 'lodash';
 // Components
-import { Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
-import { Icon } from '@antscorp/antsomi-ui/es/components';
+import { Flex } from '../../atoms/Flex';
+import { Icon } from '../../atoms/Icon';
+import { Spin } from '../../atoms/Spin';
+import { Typography } from '../../atoms/Typography';
 // Styled
 import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
 // Constants

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/InputSearch/index.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-import { InputProps } from '@antscorp/antsomi-ui/es/components/atoms/Input';
+import type { InputProps } from '../../atoms/Input';
 interface InputSearchProps extends InputProps {
     inputStyle?: CSSProperties;
 }

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

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { memo } from 'react';
 // Components
-import { Icon, Input } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Icon } from '../../atoms/Icon';
+import { Input } from '../../atoms/Input';
 // Styled
 import { Wrapper } from './styled';
 export const InputSearch = memo(props => {

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyledModal } from './styled';
 // Components
-import { Button, Flex } from '../../atoms';
+import { Button } from '../../atoms/Button';
+import { Flex } from '../../atoms/Flex';
 export const ModalV2 = props => {
     const { okButtonProps, cancelButtonProps, okText, cancelText, onCancel, onOk } = props;
     const { ...restOfProps } = props;

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,14 +2,14 @@ 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
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Styled
-import { StyledTag, TagCloseBtn } from './styled';
+import { StyledSelect, StyledTag, TagCloseBtn } from './styled';
 const tagRender = (props) => {
     const { label, closable, onClose } = props;
     const onPreventMouseDown = (event) => {
@@ -22,7 +22,7 @@ const tagRender = (props) => {
 };
 const CustomSelect = props => {
     const { label, labelProps, ...rest } = props;
-    return (_jsxs(Flex, { vertical: true, gap: 4, children: [typeof label === 'string' ? _jsx(Text, { ...labelProps, children: label }) : label, _jsx(AntdSelect, { ...rest })] }));
+    return (_jsxs(Flex, { vertical: true, gap: 4, children: [typeof label === 'string' ? _jsx(Text, { ...labelProps, children: label }) : label, _jsx(StyledSelect, { ...rest })] }));
 };
 const Select = CustomSelect;
 Select.OptGroup = AntdSelect.OptGroup;

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

@@ -1,4 +1,6 @@
-/// <reference types="react" />
+import type { ComponentType } from 'react';
+import { type SelectProps as AntdSelectProps } from 'antd';
+export declare const StyledSelect: import("styled-components").StyledComponent<ComponentType<AntdSelectProps<any, import("rc-select/lib/Select").DefaultOptionType>>, any, {}, never>;
 export declare const StyledTag: import("styled-components").StyledComponent<import("antd/lib").TagType & {
     List: import("react").FC<import("../../atoms/Tag/Tag").TagListProps>;
 }, any, {}, never>;