@antscorp/antsomi-ui 1.3.5-beta.160 → 1.3.5-beta.162

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -16,6 +16,7 @@ import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
 import localeData from 'dayjs/plugin/localeData';
+import relativeTime from 'dayjs/plugin/relativeTime';
 /** dayjs plugins for timezone */
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -28,11 +29,18 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
+// Providers
+// import {
+//   QueryClientProviderAntsomiUI,
+//   QueryDevtoolsAntsomiUI,
+//   queryClientAntsomiUI,
+// } from '@antscorp/antsomi-ui/es/queries';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(relativeTime);
 const ConfigProvider = props => {
     // Props
     const { children, locale } = props, restOfProps = __rest(props, ["children", "locale"]);

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -84,6 +84,12 @@ export const GlobalStyle = () => {
           width: 36px !important;
           height: 36px !important;
         }
+
+        &.antsomi-btn-icon-only.antsomi-btn-sm {
+          /* Important to override the above code before */
+          width: 24px !important;
+          height: 24px !important;
+        }
       }
 
       .antsomi-btn-text:disabled,

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

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

package/es/components/icons/ExpandMoreRight.js

@@ -0,0 +1,3 @@
+import React, { forwardRef } from 'react';
+export const ExpandMoreRight = forwardRef((props, ref) => (React.createElement("svg", Object.assign({ width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    React.createElement("path", { d: "M3.67969 5L0.492188 1.8125L1.89844 0.40625L6.49219 5L1.89844 9.59375L0.492188 8.1875L3.67969 5ZM8.69531 5L5.50781 1.8125L6.91406 0.40625L11.5078 5L6.91406 9.59375L5.50781 8.1875L8.69531 5Z", fill: "currentColor" }))));

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

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';

package/es/components/icons/index.js

@@ -23,6 +23,7 @@ export { OpenUrlIcon } from './OpenUrlIcon';
 export { BugIcon } from './BugIcon';
 export { IdeaIcon } from './IdeaIcon';
 export { RequestIcon } from './RequestIcon';
+export { ExpandMoreRight } from './ExpandMoreRight';
 export { HighlightAlt } from './HightlightAlt';
 export { DesktopWindows } from './DesktopWindows';
 export { AddShoppingCart } from './AddShoppingCart';

package/es/components/index.d.ts

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

package/es/components/index.js

@@ -1,5 +1,4 @@
 export * from './atoms';
 export * from './molecules';
-export * from './common';
 export * from './organism';
 export * from './template';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface AccountSelectionProps {
+    className?: string;
+    apiConfig: {
+        domain: string;
+        token: string;
+        userId: number;
+        portalId?: number;
+        languageCode?: string;
+    };
+    showAllAccount?: boolean;
+    currentAccount?: number | 'ALL_ACCOUNT';
+    inputStyle?: 'select' | 'input';
+    onChange?: (userId: number | 'ALL_ACCOUNT') => void;
+}
+export declare const AccountSelection: React.FC<AccountSelectionProps>;

package/es/components/molecules/AccountSelection/AccountSelection.js

@@ -0,0 +1,33 @@
+import Icon from '@antscorp/icons';
+import React, { useCallback, useMemo, useState } from 'react';
+import { Input, Popover, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+import { AccountItem } from './components';
+import { AccountSelectionStyled, PopoverFieldStyled } from './styled';
+import { useGetAccountList, useGetRecentAccount } from '../../..';
+import { Tooltip } from 'antd';
+import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+export const AccountSelection = props => {
+    const { className, apiConfig, showAllAccount = true, currentAccount, inputStyle = 'input', onChange, } = props;
+    const { data } = useGetAccountList({ apiConfig });
+    const { data: recentData } = useGetRecentAccount({ apiConfig });
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+    const currentAccountInfo = useMemo(() => data === null || data === void 0 ? void 0 : data.entries.find(account => account.userId === currentAccount), [data, currentAccount]);
+    const handleSelectAccount = useCallback((userId) => {
+        setOpen(false);
+        if (onChange)
+            onChange(userId);
+    }, [onChange]);
+    return (React.createElement(Popover, { content: React.createElement(AccountSelectionStyled, { className: className },
+            React.createElement(Input, { placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2", style: { fontSize: '24px' } }), value: searchValue, onChange: event => setSearchValue(event.target.value) }),
+            React.createElement(Text, { className: "recent-text" }, "Recent"),
+            React.createElement("ul", null, recentData === null || recentData === void 0 ? void 0 : recentData.value.map(accountId => data === null || data === void 0 ? void 0 : data.entries.find(account => account.userId === accountId)).filter(Boolean).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
+            React.createElement("ul", { className: "account-list" }, data === null || data === void 0 ? void 0 : data.entries.filter(account => !(recentData === null || recentData === void 0 ? void 0 : recentData.value.includes(account.userId)) &&
+                searchStringQuery(account.userName, searchValue)).map(account => (React.createElement(AccountItem, { key: account.userId, userName: account.userName, userId: account.userId, onClick: handleSelectAccount, isSelected: currentAccount === account.userId })))),
+            showAllAccount ? (React.createElement(Text, { className: `all-account ${currentAccount === 'ALL_ACCOUNT' ? 'is-selected' : ''}`, onClick: () => handleSelectAccount('ALL_ACCOUNT') },
+                React.createElement("strong", null, "All account"))) : null), trigger: "click", overlayInnerStyle: { padding: 0 }, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen },
+        React.createElement(PopoverFieldStyled, { className: inputStyle },
+            React.createElement(Tooltip, { title: currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName },
+                React.createElement("span", null, currentAccount === 'ALL_ACCOUNT' ? 'All account' : currentAccountInfo === null || currentAccountInfo === void 0 ? void 0 : currentAccountInfo.userName)),
+            React.createElement(Icon, { type: "icon-ants-angle-down", style: { width: '20px', textAlign: 'center' } }))));
+};

package/es/components/molecules/AccountSelection/components/AccountItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AccountItemProps {
+    className?: string;
+    userName: string;
+    userId: number;
+    isSelected?: boolean;
+    onClick?: (userId: number) => void;
+}
+export declare const AccountItem: React.FC<AccountItemProps>;
+export {};

package/es/components/molecules/AccountSelection/components/AccountItem.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Text, Typography } from '../../../atoms';
+import { formatUserId } from '@antscorp/antsomi-ui/es/utils';
+export const AccountItem = React.memo(props => {
+    const { className, userName, userId, isSelected, onClick } = props;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("li", { onClick: () => onClick && onClick(userId), className: `${className || ''} ${isSelected ? 'is-selected' : ''}` },
+        React.createElement(Typography.Text, { className: "account-name", ellipsis: { tooltip: true } }, userName),
+        React.createElement(Text, { className: "account-id" }, formatUserId(userId))));
+});

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

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

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

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

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

@@ -0,0 +1 @@
+export { AccountSelection, type AccountSelectionProps } from './AccountSelection';

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

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

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

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

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

@@ -0,0 +1,95 @@
+var _a, _b, _c, _d, _e, _f, _g;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const AccountSelectionStyled = styled.div `
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 450px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+
+  .input__wrapper .antsomi-input-affix-wrapper {
+    padding: 8px 10px;
+  }
+
+  .recent-text {
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw7};
+    padding: 6px 10px 0;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.account-list {
+    border-top: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .account-id {
+      flex-shrink: 0;
+    }
+  }
+
+  .all-account {
+    padding: 8px 10px;
+    border-top: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
+    cursor: pointer;
+  }
+
+  li:hover,
+  .all-account:hover {
+    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+  }
+
+  li.is-selected,
+  .all-account.is-selected {
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1};
+  }
+`;
+export const PopoverFieldStyled = styled.div `
+  box-sizing: border-box;
+  width: 190px;
+  height: 36px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  background-color: white;
+
+  font-size: 12px;
+  font-weight: bold;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.select {
+    border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw3};
+    border-radius: 999px;
+  }
+
+  &.input {
+    border-bottom: 1px solid ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+    width: 300px;
+  }
+`;

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

@@ -28,10 +28,10 @@ export declare const CUSTOM_TYPE: {
 };
 export declare const buildOptionAttrArchive: (list: any[], selected: any) => any[];
 export declare const checkStatusAttr: ({ listBO, itemTypeId, listAttribute, field, }: {
-    listBO?: any[] | undefined;
-    itemTypeId?: number | undefined;
-    listAttribute?: any[] | undefined;
-    field?: string | undefined;
+    listBO?: any[];
+    itemTypeId?: number;
+    listAttribute?: any[];
+    field?: string;
 }) => {
     errorMessage: string;
     isDisable: boolean;

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -9,7 +9,7 @@ export declare const ACTION_TYPES: {
     readonly apply: "apply";
     readonly resetValue: "reset_value";
 };
-export declare const changeRangeType: (rangeType: string, callback?: ((rangeInfo: RangeInfo) => void) | undefined) => {
+export declare const changeRangeType: (rangeType: string, callback?: (rangeInfo: RangeInfo) => void) => {
     type: "change_range_type";
     payload: {
         rangeType: string;

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
-    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
+    state: import("../types").ReducerState;
+    action: import("../types").ActionType;
 };

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

@@ -29,7 +29,7 @@ export declare const getDefaultDate: () => {
 export declare const getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
     rangeInfo: RangeInfo;
     currentRangeValue: RangeValue[];
-    limitNumOfDays?: number | undefined;
+    limitNumOfDays?: number;
 }) => RangeValue[];
 export declare const getRangeValueSelctedTitle: (rangeValue: RangeValue[], options?: {
     formatStart?: string;
@@ -44,7 +44,7 @@ export declare const combineCurrentValue: (state: ReducerState) => {
 };
 export declare const genTriggerOut: ({ mode, id, }: {
     mode: ReducerState['triggerOut']['mode'];
-    id?: number | undefined;
+    id?: number;
 }) => {
     mode: "auto" | "manual";
     id: number;

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

@@ -10,19 +10,55 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { useEffect, useMemo } from 'react';
 // Components
 import { Flex, Icon, Tooltip } from '../../atoms';
 // Styled
 import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
 // Constants
-const DRAWER_WIDTH_DEFAULT = 'calc(100vw - 70px)';
+import { BREAK_POINT, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { ToggleDrawerSizeButton } from './components';
+import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
 export const DrawerDetail = props => {
-    const { width = DRAWER_WIDTH_DEFAULT, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
-    const { show: showMenu = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    // Props
+    const { width, fullScreen, children, menuProps, closeIconProps } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps"]);
+    const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
     const { onClose = () => { } } = props;
     const _a = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _a, restOfCloseIcon = __rest(_a, ["show", "onClick"]);
-    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: fullScreen ? '100vw' : width, classNames: {
+    // Hooks
+    const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
+    // State
+    const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
+    // Effects
+    useEffect(() => {
+        toggleCollapseDrawer(!matchesSmallScreen);
+    }, [matchesSmallScreen, toggleCollapseDrawer]);
+    // Memo
+    const drawerWidth = useMemo(() => {
+        if (fullScreen)
+            return '100vw';
+        if (width)
+            return width;
+        /**
+         * Check if drawer is collapsed
+         * Case 1: Large screen (> 1440px)
+         * Case 2: Small screen (<= 1440px)
+         */
+        switch (collapseDrawer) {
+            case false: {
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MAX_WIDTH;
+                return DRAWER_LARGE_MAX_WIDTH;
+            }
+            case true:
+            default: {
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MIN_WIDTH;
+                return DRAWER_LARGE_MIN_WIDTH;
+            }
+        }
+    }, [collapseDrawer, fullScreen, matchesSmallScreen, width]);
+    return (React.createElement(StyledDrawer, Object.assign({}, restProps, { closable: false, width: drawerWidth, classNames: {
             body: 'drawer-detail-body',
         } }),
         showCloseIcon && (React.createElement("div", Object.assign({ className: "close-btn" }, restOfCloseIcon, { onClick: e => {
@@ -30,7 +66,8 @@ export const DrawerDetail = props => {
                 onClose(e);
             } }),
             React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
-        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeInLeft animate__fast" },
+        showMenu && (React.createElement(LeftMenu, { className: "animate__animated animate__fadeIn" },
+            showExpandButton && !fullScreen && (React.createElement(ToggleDrawerSizeButton, { onClick: () => toggleCollapseDrawer(), collapse: collapseDrawer })),
             React.createElement("div", null,
                 showClose && (React.createElement(CloseBtn, { onClick: onClose },
                     React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
@@ -39,6 +76,4 @@ export const DrawerDetail = props => {
             React.createElement(MenuFooter, null, footer))),
         React.createElement(Content, null, children)));
 };
-DrawerDetail.defaultProps = {
-    width: DRAWER_WIDTH_DEFAULT,
-};
+DrawerDetail.defaultProps = {};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface ToggleDrawerSizeButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+    collapse?: boolean;
+}
+export declare const ToggleDrawerSizeButton: React.FC<ToggleDrawerSizeButtonProps>;
+export {};

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

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import React from 'react';
+import styled from 'styled-components';
+// Icons
+import { ExpandMoreRight } from '../../../icons';
+const { token } = THEME || {};
+/* Styled */
+const StyledToggleButton = styled.div `
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
+  color: ${token === null || token === void 0 ? void 0 : token.bw8};
+  top: 50%;
+  transform: translateY(-50%);
+  left: -5px;
+  cursor: pointer;
+
+  svg {
+    transition: all 300ms;
+    ${({ $collapse }) => $collapse && 'transform: rotate(180deg)'}
+  }
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const ToggleDrawerSizeButton = props => {
+    const { collapse } = props, restProps = __rest(props, ["collapse"]);
+    return (React.createElement(StyledToggleButton, Object.assign({ "$collapse": !!collapse }, restProps),
+        React.createElement(ExpandMoreRight, null)));
+};

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

@@ -0,0 +1 @@
+export * from './ToggleDrawerSizeButton';

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

@@ -0,0 +1 @@
+export * from './ToggleDrawerSizeButton';

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

@@ -0,0 +1,7 @@
+declare const DRAWER_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_LARGE_MIN_WIDTH = "1370px";
+declare const DRAWER_LARGE_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_SMALL_MAX_WIDTH = "calc(100vw - 70px)";
+declare const DRAWER_SMALL_MIN_WIDTH = "calc(100vw - 310px)";
+declare const BREAK_POINT = "1440px";
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };

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

@@ -0,0 +1,7 @@
+const DRAWER_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_LARGE_MIN_WIDTH = '1370px';
+const DRAWER_LARGE_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_SMALL_MAX_WIDTH = 'calc(100vw - 70px)';
+const DRAWER_SMALL_MIN_WIDTH = 'calc(100vw - 310px)';
+const BREAK_POINT = '1440px';
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("@antscorp/antsomi-ui/es/components/molecules/Drawer/Drawer").DrawerProps>, any, {}, never>;
+export declare const StyledDrawer: import("styled-components").StyledComponent<import("react").FC<import("../Drawer").DrawerProps>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftMenu: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseBtn: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
-var _a, _b, _c;
+var _a, _b;
 // Libraries
 import styled from 'styled-components';
 // Drawer
@@ -8,10 +8,13 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 const { token } = THEME || {};
 export const StyledDrawer = styled(Drawer) `
   &.antsomi-drawer-content {
+    overflow: visible !important;
+
     .drawer-detail-body {
       display: flex;
       width: 100%;
       padding: 0px;
+      overflow: visible;
     }
 
     .close-btn {
@@ -42,7 +45,7 @@ export const Content = styled.div `
 export const LeftMenu = styled.div `
   width: 46px;
   height: 100%;
-  background-color: #eaf1fb;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
   padding: 8px 5px;
   box-sizing: border-box;
   display: flex;
@@ -69,7 +72,7 @@ export const CloseBtn = styled.div `
 export const MenuItem = styled.div `
   height: 36px;
   width: 36px;
-  border-radius: 10px;
+  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusLG}px;
   background-color: transparent;
   display: flex;
   align-items: center;
@@ -78,7 +81,7 @@ export const MenuItem = styled.div `
   transition: all 0.2s;
 
   * {
-    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw8};
+    color: ${token === null || token === void 0 ? void 0 : token.bw8};
   }
 
   i {

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import type { DrawerProps, MenuProps as AntdProps } from 'antd';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 export interface DrawerDetailProps extends Omit<DrawerProps, 'closeIcon'> {
@@ -11,6 +11,7 @@ export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTM
 }
 export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
     show?: boolean;
+    showExpandButton?: boolean;
     showClose?: boolean;
     footer?: ReactNode;
     onClick?: (item: ItemType) => void;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { AccountSelectionProps } from '../AccountSelection';
+import { AccountSharingProps } from '../../organism';
+import { IHelpProps } from '../../organism/Help/types';
+export interface HeaderV2Props {
+    className?: string;
+    style?: React.CSSProperties;
+    pageTitle?: string | React.ReactNode;
+    accountSelection?: Omit<AccountSelectionProps, 'onChange' | 'apiConfig'> & {
+        onSelectAccount?: (account: number | 'ALL_ACCOUNT') => void;
+    };
+    helpConfig: Omit<IHelpProps, 'configs'> & {
+        configs: Omit<IHelpProps['configs'], 'portalId' | 'userId' | 'token' | 'domain' | 'domainTicket' | 'domainPlatform'>;
+    } & {
+        show?: boolean;
+    };
+    notificationConfig?: {
+        show?: boolean;
+    };
+    accountSharingConfig: Pick<AccountSharingProps, 'isShowSharing' | 'isShareAccountAccess' | 'u_ogs' | 'appCode' | 'callbackLogout' | 'callbackGetInfoAccount'> & {
+        show?: boolean;
+    };
+    config: {
+        env: 'DEVELOPMENT' | 'PRODUCTION';
+        language?: string;
+        userId: number;
+        portalId: number;
+        token: string;
+    };
+}
+export declare const HeaderV2: React.FC<HeaderV2Props>;