@antscorp/antsomi-ui 1.7.9 → 1.8.0

package/es/components/atoms/Steps/Steps.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useEffect, useMemo, useState, memo } from 'react';
 import { isNumber } from 'lodash';
+import { ConfigProvider } from 'antd';
 // Styled
 import { ErrorIcon, SelectedIcon, StepsWrapper } from './styled';
 export const Steps = memo(props => {
@@ -62,5 +63,6 @@ export const Steps = memo(props => {
         : items, [saveHighestStep, items, highestStep, props.status, current]);
     /** Check whether the user has reactivated the previous step or not */
     const isReactivate = saveHighestStep && isNumber(current) && current < highestStep;
-    return (React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` })));
+    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } } },
+        React.createElement(StepsWrapper, Object.assign({ items: customItems }, restOfProps, { size: size, isReactivate: isReactivate, highestStep: highestStep, className: `${className || ''}${saveHighestStep ? ' save-highest-step' : ''}` }))));
 });

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

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

package/es/components/icons/AddRadiusIcon.js

@@ -0,0 +1,7 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AddRadiusIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3H8ZM13.2 10.8H16.8C17.1183 10.8 17.4235 10.9264 17.6486 11.1515C17.8736 11.3765 18 11.6817 18 12C18 12.3183 17.8736 12.6235 17.6486 12.8485C17.4235 13.0736 17.1183 13.2 16.8 13.2H13.2V16.8C13.2 17.1183 13.0736 17.4235 12.8486 17.6485C12.6235 17.8736 12.3183 18 12 18C11.6817 18 11.3765 17.8736 11.1514 17.6485C10.9264 17.4235 10.8 17.1183 10.8 16.8V13.2H7.2C6.88174 13.2 6.57646 13.0736 6.35142 12.8485C6.12637 12.6235 6 12.3183 6 12C6 11.6817 6.12637 11.3765 6.35142 11.1515C6.57646 10.9264 6.88174 10.8 7.2 10.8H10.8V7.2C10.8 6.88174 10.9264 6.57653 11.1514 6.35149C11.3765 6.12645 11.6817 6 12 6C12.3183 6 12.6235 6.12645 12.8486 6.35149C13.0736 6.57653 13.2 6.88174 13.2 7.2V10.8Z", fill: "currentColor" })));
+});

package/es/components/icons/{WebPagesBrowserIcon.d.ts → PivotTableChartIcon.d.ts}

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

package/es/components/icons/PivotTableChartIcon.js

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const PivotTableChartIcon = forwardRef((props, ref) => {
+    // search tag: group by, pivot table
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24", viewBox: "0 0 24 24", fill: "currentColor" }, props, { ref: ref, width: width, height: height }),
+        React.createElement("g", null,
+            React.createElement("path", { d: "M0,0h24v24H0V0z", fill: "none" })),
+        React.createElement("g", null,
+            React.createElement("path", { d: "M21,5c0-1.1-0.9-2-2-2h-9v5h11V5z M3,19c0,1.1,0.9,2,2,2h3V10H3V19z M3,5v3h5V3H5C3.9,3,3,3.9,3,5z M18,8.99L14,13 l1.41,1.41l1.59-1.6V15c0,1.1-0.9,2-2,2h-2.17l1.59-1.59L13,14l-4,4l4,4l1.41-1.41L12.83,19H15c2.21,0,4-1.79,4-4v-2.18l1.59,1.6 L22,13L18,8.99z" }))));
+});

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

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

package/es/components/icons/{ArrowIcon.js → SubtractRadiusIcon.js}

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { useIcon } from './hooks/useIcon';
-export const ArrowIcon = forwardRef((props, ref) => {
+export const SubtractRadiusIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
     return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
-        React.createElement("path", { d: "M9 5.01562H18.9844V15H17.0156V8.39062L5.39062 20.0156L3.98438 18.6094L15.6094 6.98438H9V5.01562Z", fill: "currentColor" })));
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 3C5.23858 3 3 5.23858 3 8V16C3 18.7614 5.23858 21 8 21H16C18.7614 21 21 18.7614 21 16V8C21 5.23858 18.7614 3 16 3H8ZM17 11H7V13H17V11Z", fill: "currentColor" })));
 });

package/es/components/icons/document/IconGallery.js

@@ -40,7 +40,7 @@ export const IconGallery = () => {
                 React.createElement("h4", null, "These components below are invalid (check name and file name is correct?)"),
                 invalidIcons.map(item => (React.createElement("strong", { key: item.name, style: { color: 'red' } },
                     React.createElement("pre", null, item.name)))))) : null,
-            React.createElement(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '20px' } }),
+            React.createElement(Input, { placeholder: "Search Icon", value: search, onChange: e => setSearch(e.target.value), style: { fontSize: '16px' } }),
             React.createElement(Flex, { className: "grid-container", gap: 16 }, validIcons
                 .filter(item => searchMatchAny([item.name, ...item.dataSearch], debounceSearchValue))
                 .map(item => {

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

@@ -2,12 +2,12 @@ export { AccountCircleIcon } from './AccountCircleIcon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
+export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
-export { ArrowIcon } from './ArrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { AssignmentIndIcon } from './AssignmentIndIcon';
 export { AttachmentIcon } from './AttachmentIcon';
@@ -43,7 +43,6 @@ export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
-export { CloseRemoveIcon } from './CloseRemoveIcon';
 export { CodeIcon } from './CodeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
@@ -62,7 +61,6 @@ export { CurvedConnectorIcon } from './CurvedConnectorIcon';
 export { DashboardIcon } from './DashboardIcon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
-export { DataVer2Icon } from './DataVer2Icon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';
@@ -132,7 +130,6 @@ export { LineIcon } from './LineIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
-export { LockRestrictIcon } from './LockRestrictIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MediaGalleryIcon } from './MediaGalleryIcon';
@@ -145,7 +142,6 @@ export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
-export { MoveTo1Icon } from './MoveTo1Icon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
@@ -161,6 +157,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -211,6 +208,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
+export { SubtractRadiusIcon } from './SubtractRadiusIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';
 export { SystemRunningIcon } from './SystemRunningIcon';
@@ -237,7 +235,6 @@ export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
 export { WebIcon } from './WebIcon';
-export { WebPagesBrowserIcon } from './WebPagesBrowserIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -2,12 +2,12 @@ export { AccountCircleIcon } from './AccountCircleIcon';
 export { AddChartIcon } from './AddChartIcon';
 export { AddFolderIcon } from './AddFolderIcon';
 export { AddIcon } from './AddIcon';
+export { AddRadiusIcon } from './AddRadiusIcon';
 export { AddShoppingCartIcon } from './AddShoppingCartIcon';
 export { AdjustIcon } from './AdjustIcon';
 export { AllDevicesIcon } from './AllDevicesIcon';
 export { AllJourneyChannelsIcon } from './AllJourneyChannelsIcon';
 export { ArrowGrowIcon } from './ArrowGrowIcon';
-export { ArrowIcon } from './ArrowIcon';
 export { ArrowLineIcon } from './ArrowLineIcon';
 export { AssignmentIndIcon } from './AssignmentIndIcon';
 export { AttachmentIcon } from './AttachmentIcon';
@@ -43,7 +43,6 @@ export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
-export { CloseRemoveIcon } from './CloseRemoveIcon';
 export { CodeIcon } from './CodeIcon';
 export { ColorProfileStyleThemeIcon } from './ColorProfileStyleThemeIcon';
 export { ColumnIcon } from './ColumnIcon';
@@ -62,7 +61,6 @@ export { CurvedConnectorIcon } from './CurvedConnectorIcon';
 export { DashboardIcon } from './DashboardIcon';
 export { DataIcon } from './DataIcon';
 export { DataRefreshIcon } from './DataRefreshIcon';
-export { DataVer2Icon } from './DataVer2Icon';
 export { DeleteRemoveTrashIcon } from './DeleteRemoveTrashIcon';
 export { DeliveryLogIcon } from './DeliveryLogIcon';
 export { DesktopLaptopIcon } from './DesktopLaptopIcon';
@@ -132,7 +130,6 @@ export { LineIcon } from './LineIcon';
 export { ListIcon } from './ListIcon';
 export { LoadingIcon } from './LoadingIcon';
 export { LocalMallIcon } from './LocalMallIcon';
-export { LockRestrictIcon } from './LockRestrictIcon';
 export { MapIcon } from './MapIcon';
 export { MarkAsReadIcon } from './MarkAsReadIcon';
 export { MediaGalleryIcon } from './MediaGalleryIcon';
@@ -145,7 +142,6 @@ export { MobileFriendlyIcon } from './MobileFriendlyIcon';
 export { MobilePhoneIcon } from './MobilePhoneIcon';
 export { MoreIcon } from './MoreIcon';
 export { MoreInfoIcon } from './MoreInfoIcon';
-export { MoveTo1Icon } from './MoveTo1Icon';
 export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
@@ -161,6 +157,7 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
+export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -211,6 +208,7 @@ export { StatisticIcon } from './StatisticIcon';
 export { StickerIcon } from './StickerIcon';
 export { StopRecordIcon } from './StopRecordIcon';
 export { StoreIcon } from './StoreIcon';
+export { SubtractRadiusIcon } from './SubtractRadiusIcon';
 export { SupportAssistantIcon } from './SupportAssistantIcon';
 export { SurveyDirectorProfileIcon } from './SurveyDirectorProfileIcon';
 export { SystemRunningIcon } from './SystemRunningIcon';
@@ -237,7 +235,6 @@ export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
 export { WebIcon } from './WebIcon';
-export { WebPagesBrowserIcon } from './WebPagesBrowserIcon';
 export { WebhookIcon } from './WebhookIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/molecules/DrawerDetail/DrawerDetail.js

@@ -10,7 +10,6 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import { ConfigProvider } from 'antd';
 import { isNil } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 // Components
@@ -116,32 +115,37 @@ export const DrawerDetail = props => {
             localStorage.setItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { [name || '']: !collapseDrawer })));
         }
     };
-    return (React.createElement(ConfigProvider, { theme: {
-            token: {
-                motion: false,
-            },
-        } },
-        React.createElement(StyledDrawer, Object.assign({ push: false, closable: false, width: drawerWidth, classNames: {
-                body: 'drawer-detail-body',
-            }, contentWrapperStyle: {
-                transition: 'none',
-            }, destroyOnClose: destroyOnClose }, restProps),
-            React.createElement(ConfigProvider, { theme: { token: { motion: true } } },
-                showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
-                        onCloseIconClick(e);
-                        onClose(e);
-                    } }),
+    return (React.createElement(StyledDrawer, Object.assign({ push: false, closable: false, width: drawerWidth, motion: {
+            visible: false,
+            motionAppear: false,
+            motionEnter: false,
+            motionLeave: false,
+        }, maskMotion: {
+            visible: false,
+            motionAppear: false,
+            motionEnter: false,
+            motionLeave: false,
+        }, classNames: {
+            body: 'drawer-detail-body',
+        }, contentWrapperStyle: {
+            transition: 'none',
+        }, maskStyle: {
+            transition: 'none',
+        }, destroyOnClose: destroyOnClose }, restProps),
+        showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
+                onCloseIconClick(e);
+                onClose(e);
+            } }),
+            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+        showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
+        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
+            React.createElement("div", null,
+                showClose && (React.createElement(CloseBtn, { onClick: onClose },
                     React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-                showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { style: Object.assign({}, (!showMenu && { background: '#ffffff' })), onClick: () => handleToggleDrawerSize(), collapse: collapseDrawer })),
-                showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
-                    React.createElement("div", null,
-                        showClose && (React.createElement(CloseBtn, { onClick: onClose },
-                            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-                        React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3, placement: "right" },
-                            React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
-                    React.createElement(MenuFooter, null, footer))),
-                React.createElement(Content, null,
-                    (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
-                    children)))));
+                React.createElement(Flex, { vertical: true, gap: 10, align: "center", justify: "center" }, items === null || items === void 0 ? void 0 : items.map((item) => (React.createElement(Tooltip, { key: item === null || item === void 0 ? void 0 : item.key, title: item === null || item === void 0 ? void 0 : item.label, mouseEnterDelay: 0.3, placement: "right" },
+                    React.createElement(MenuItem, { key: item === null || item === void 0 ? void 0 : item.key, className: (selectedKeys === null || selectedKeys === void 0 ? void 0 : selectedKeys.includes(item.key)) ? 'active' : '', onClick: () => onClick && onClick(item) }, item.icon)))))),
+            React.createElement(MenuFooter, null, footer))),
+        React.createElement(Content, null,
+            (headerProps === null || headerProps === void 0 ? void 0 : headerProps.children) && (React.createElement(DrawerHeader, Object.assign({ align: "center" }, restOfHeaderProps), headerChildren)),
+            children)));
 };
-DrawerDetail.defaultProps = {};

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

@@ -15,9 +15,10 @@ export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon' | 'titl
 export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
     show?: boolean;
 }
-export interface DrawerHeaderProps extends FlexProps {
+export interface DrawerHeaderProps extends Omit<FlexProps, 'children'> {
     height?: React.CSSProperties['height'];
     showBorderBottom?: boolean;
+    children?: ReactNode;
 }
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { InputDropdownProps } from './types';
-import './style.scss';
 export { Dropdown } from 'antd';
 export declare const InputDropdown: (props: InputDropdownProps) => React.JSX.Element;

package/es/components/molecules/Dropdown/Dropdown.js

@@ -14,11 +14,11 @@ import { Space, Typography } from 'antd';
 import Icon from '@antscorp/icons';
 import { StyledInputDropdownRoot } from './styled';
 import clsx from 'clsx';
-import './style.scss';
+// import './style.scss';
 export { Dropdown } from 'antd';
 const DefaultExpandIcon = React.createElement(Icon, { type: "icon-ants-expand-more" });
 export const InputDropdown = (props) => {
-    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', expandIcon = DefaultExpandIcon, onOpenChange = () => { } } = props, rest = __rest(props, ["children", "disabled", "className", "trigger", "menu", "width", "expandIcon", "onOpenChange"]);
+    const { children, disabled = false, className, trigger = ['click'], menu = { items: [] }, width = '100%', expandIcon = DefaultExpandIcon, onOpenChange = () => { }, overlayClassName } = props, rest = __rest(props, ["children", "disabled", "className", "trigger", "menu", "width", "expandIcon", "onOpenChange", "overlayClassName"]);
     const [enableTooltip, setEnableTooltip] = useState(true);
     const renderChildren = useCallback(() => {
         if (typeof children === 'string') {
@@ -37,7 +37,7 @@ export const InputDropdown = (props) => {
         setEnableTooltip(!open);
         onOpenChange(...args);
     };
-    return (React.createElement(StyledInputDropdownRoot, Object.assign({ menu: menu, trigger: trigger, disabled: disabled }, rest, { className: clsx({ disabled }, className, 'antsomi-input-dropdown'), onOpenChange: handleOpen }),
+    return (React.createElement(StyledInputDropdownRoot, Object.assign({ menu: menu, trigger: trigger, disabled: disabled }, rest, { className: clsx({ disabled }, className, 'antsomi-input-dropdown'), overlayClassName: clsx(overlayClassName, 'antsomi-input-dropdown-overlay'), onOpenChange: handleOpen }),
         React.createElement(Space, { style: { width } },
             renderChildren(),
             expandIcon)));

package/es/components/molecules/Dropdown/style.scss

@@ -1,7 +1,9 @@
-.antsomi-dropdown-menu {
-  overflow: hidden;
+.antsomi-input-dropdown-overlay {
+  .antsomi-dropdown-menu {
+    overflow: hidden;
 
-  &:hover {
-    overflow: auto;
+    &:hover {
+      overflow: auto;
+    }
   }
 }

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

@@ -9,6 +9,7 @@ interface Breadcrumb {
     useExternalLink?: boolean;
 }
 export interface HeaderV2Props {
+    show?: boolean;
     className?: string;
     style?: React.CSSProperties;
     pageTitle?: string | React.ReactNode;

package/es/components/molecules/HeaderV2/HeaderV2.js

@@ -32,7 +32,7 @@ export const HeaderV2 = memo(props => {
     const { search } = useLocation();
     const { replace } = useCustomRouter();
     // * Prefer to use Header in AppConfigContext
-    const { className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
+    const { show = true, className, style, breadcrumbs, showLogo = false, rightContent, pageTitle = '', accountSelection = {}, helpConfig, notificationConfig = {}, accountSharingConfig, useURLParam, config, } = props;
     /** General config for children component */
     const { env = envContext, language = languageCode, userId = isNaN(Number(auth === null || auth === void 0 ? void 0 : auth.userId)) ? 0 : Number(auth === null || auth === void 0 ? void 0 : auth.userId), portalId = auth === null || auth === void 0 ? void 0 : auth.portalId, token = auth === null || auth === void 0 ? void 0 : auth.token, permissionDomain = PERMISSION_API, iamDomain = IAM_API, appCode = contextAppCode, menuCode = contextMenuCode, } = config || {};
     const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
@@ -108,7 +108,7 @@ export const HeaderV2 = memo(props => {
         onSelectAccount === null || onSelectAccount === void 0 ? void 0 : onSelectAccount(userId);
     };
     const QUOTE_ENTITY = React.createElement(React.Fragment, null, "\u00BB");
-    return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
+    return (React.createElement(HeaderV2Styled, { "$show": show, className: className || '', style: style },
         React.createElement("div", { className: "left-side" },
             showLogo && (React.createElement(LogoWrapper, { className: "logo-wrapper" },
                 React.createElement("img", { src: SubLogoAntsomi, alt: "Antsomi sub logo" }))),

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

@@ -1,2 +1,4 @@
 export declare const LogoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HeaderV2Styled: import("styled-components").StyledComponent<"div", any, {
+    $show: boolean;
+}, never>;

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

@@ -21,6 +21,8 @@ export const HeaderV2Styled = styled.div `
   padding: 10px 20px;
   box-sizing: border-box;
 
+  ${props => !props.$show && 'display: none;'}
+
   .left-side,
   .right-side {
     display: flex;

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -178,7 +178,7 @@ export const MatchesAny = props => {
         var _a;
         const notExtendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => !item.isExtendValue)) || [];
         const extendValueSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(item => item.isExtendValue)) || [];
-        const lazyLoadSelectedItems = (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
+        const lazyLoadSelectedItems = (notExtendValueSelectedItems === null || notExtendValueSelectedItems === void 0 ? void 0 : notExtendValueSelectedItems.filter(selectedItem => !flatTree(items || [], 'children').some(item => item.key === selectedItem.key))) || [];
         const serializeTreeData = (list) => {
             var _a;
             return ((_a = list
@@ -275,7 +275,12 @@ export const MatchesAnySelect = props => {
         onChange(selectedItems);
         setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
     };
-    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), overlayStyle: { width: 700 }, overlayInnerStyle: {
+    return (React.createElement(Popover, { open: isOpenPopover, arrow: false, placement: "bottomLeft", content: React.createElement(MatchesAny, { className: popupClassName, items: items, selectedItems: selectedItems, loading: loading, objectName: objectName, onApply: onApplyMatchesAny, onCancel: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false }))), onLoadMore: onLoadMore }), align: {
+            overflow: {
+                shiftY: 0,
+                shiftX: 0,
+            },
+        }, overlayStyle: { width: 700 }, overlayInnerStyle: {
             padding: 0,
         }, trigger: ['click'], destroyTooltipOnHide: true, onOpenChange: () => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: !isOpenPopover }))) },
         React.createElement(Tooltip, { mouseEnterDelay: 0.5, title: `${selectedItems ? selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => item.title).join(', ') : ''}` },

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

@@ -0,0 +1,15 @@
+import React from 'react';
+interface RequestAccessProps {
+    className?: string;
+    placeholder?: string;
+    deniedTitle?: string;
+    deniedSubTitle?: string;
+    sentTitle?: string;
+    sentSubTitle?: string;
+    requestText?: string;
+    switchAccountText?: string;
+    onRequest?: (message: string) => Promise<any>;
+    onSwitchAccount?: () => void;
+}
+export declare const RequestAccess: React.FC<RequestAccessProps>;
+export {};

package/es/components/molecules/RequestAccess/RequestAccess.js

@@ -0,0 +1,50 @@
+import React, { useRef, useState } from 'react';
+import { Button, Flex, TextArea, Typography } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { RequestAccessStyled } from './styled';
+// Translate
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { BlockIcon } from '../../icons';
+const { t } = i18nInstance;
+export const RequestAccess = props => {
+    const { className, placeholder = t(translations.requestAccess.placeholder), deniedTitle = t(translations.requestAccess.deniedTitle), deniedSubTitle = t(translations.requestAccess.deniedSubTitle), sentTitle = t(translations.requestAccess.sentTitle), sentSubTitle = t(translations.requestAccess.sentSubTitle), requestText = t(translations.requestAccess.requestText), switchAccountText = t(translations.requestAccess.switchAccountText), onRequest, onSwitchAccount, } = props;
+    const [isSentRequest, setIsSentRequest] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const messageRef = useRef(null);
+    const handleClickRequest = () => {
+        var _a, _b;
+        const message = ((_b = (_a = messageRef.current) === null || _a === void 0 ? void 0 : _a.resizableTextArea) === null || _b === void 0 ? void 0 : _b.textArea.value) || '';
+        if (onRequest) {
+            try {
+                setIsLoading(true);
+                onRequest(message)
+                    .then(data => {
+                    if (data) {
+                        setIsSentRequest(true);
+                    }
+                })
+                    .finally(() => setIsLoading(false));
+            }
+            catch (error) {
+                // the onRequest(message) callback is called in try (have not call again)
+                setIsSentRequest(true);
+            }
+        }
+    };
+    const handleSwitchAccount = () => {
+        if (onSwitchAccount)
+            onSwitchAccount();
+    };
+    return (React.createElement(RequestAccessStyled, { className: `antsomi-request-access ${className || ''}` },
+        React.createElement(Flex, { vertical: true, gap: 20 },
+            React.createElement(Flex, { vertical: true, gap: 5 },
+                React.createElement(Typography.Text, { className: "denied-title" }, isSentRequest ? (sentTitle) : (React.createElement(React.Fragment, null,
+                    deniedTitle,
+                    React.createElement(BlockIcon, null)))),
+                React.createElement(Typography.Text, { className: "denied-sub-title" }, isSentRequest ? sentSubTitle : deniedSubTitle)),
+            !isSentRequest ? (React.createElement(TextArea, { style: { resize: 'none' }, placeholder: placeholder, ref: messageRef })) : null,
+            React.createElement(Flex, { className: "action-buttons", gap: 10 },
+                isSentRequest ? null : (React.createElement(Button, { onClick: handleClickRequest, type: "primary", loading: isLoading }, requestText)),
+                React.createElement(Button, { onClick: handleSwitchAccount }, switchAccountText)))));
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const RequestAccessStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,41 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const RequestAccessStyled = styled.div `
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div {
+    width: 350px;
+
+    .denied-title {
+      display: inline-flex;
+      gap: 5px;
+
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 700;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.orange6};
+
+      & > svg {
+        color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+      }
+    }
+
+    .denied-sub-title {
+      line-height: 14px;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+
+    .antsomi-input {
+      height: 150px;
+      border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
+      border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      padding: 10px;
+    }
+  }
+`;

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

@@ -93,7 +93,7 @@ export const SearchUser = (props) => {
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),
                     React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, user.user_name),
+                        React.createElement("div", { className: "name" }, user.full_name),
                         React.createElement("div", { className: "email" }, user.email)))),
             })) },
             React.createElement(Input, { style: { padding: '5px' }, placeholder: placeholder, suffix: isFetching ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px', alignSelf: 'center' } })) : (

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

@@ -49,6 +49,7 @@ export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
 export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
+export { RequestAccess } from './RequestAccess';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './DrawerDetail';

package/es/components/molecules/index.js

@@ -49,6 +49,7 @@ export { EditableName } from './EditableName';
 export { VirtualizedMenu } from './VirtualizedMenu';
 export { SearchPopover, PopoverAddField, PopoverSelect } from './SearchPopover';
 export { CalendarSelection, CalendarSelectionConstants, CalendarSelectionUtils, } from './CalendarSelection';
+export { RequestAccess } from './RequestAccess';
 export * from './EmptyData';
 export * from './PreviewModal';
 export * from './DrawerDetail';

package/es/components/organism/AccountSharing/AccountSharing.js

@@ -10,7 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 /* eslint-disable react/no-this-in-sfc */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import axios from 'axios';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CookiesProvider, useCookies } from 'react-cookie';
 // Icons
 import { Button, Flex, Popover, Spin, Text, Typography } from '../../atoms';
@@ -228,7 +228,7 @@ export const AccountSharing = props => {
         }
     });
     // const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
-    const onClickButtonLogout = () => {
+    const onClickButtonLogout = useCallback(() => {
         removeCookie(`${UOGS_PREFIX}${networkId}`, Object.assign(Object.assign({}, (env !== ENV.DEV && {
             domain: `.${origin.split('.').splice(-2).join('.')}`,
         })), { path: '/', sameSite: 'none', secure: true }));
@@ -240,7 +240,19 @@ export const AccountSharing = props => {
         else {
             window.location.reload();
         }
-    };
+    }, [callbackLogout, env, networkId, removeCookie, urlLogout]);
+    useEffect(() => {
+        const logoutEvent = (event) => {
+            const { data } = event;
+            if ((data === null || data === void 0 ? void 0 : data.type) === 'cdp_request_logout') {
+                onClickButtonLogout();
+            }
+        };
+        window.addEventListener('message', logoutEvent);
+        return () => {
+            window.removeEventListener('message', logoutEvent);
+        };
+    }, [onClickButtonLogout]);
     function urlDomain(data) {
         const a = document.createElement('a');
         a.href = data;