@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.js

@@ -161,7 +161,7 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             formatDisplay = 'MMMM, YYYY';
             break;
         case 'YEAR_WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}W, YYYY`;
+            formatDisplay = `${WEEK_PLACEHOLDER}w, YYYY`;
             break;
         case 'YEAR_MONTH_DAY':
             formatDisplay = 'MMMM DD, YYYY';
@@ -185,7 +185,7 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
             formatDisplay = 'MMMM';
             break;
         case 'WEEK':
-            formatDisplay = `${WEEK_PLACEHOLDER}W`;
+            formatDisplay = `${WEEK_PLACEHOLDER}w`;
             break;
         case 'MONTH_DAY':
             formatDisplay = 'MMMM DD';

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
+    className?: string;
     valueType?: ValueTypes;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
@@ -14,6 +15,7 @@ export interface AdvancedRangePickerProps {
     timezone?: string;
     separator?: ReactNode;
     inputStyle?: React.CSSProperties;
+    isViewMode?: boolean;
     onChange?: ({ timeRange, mode }: TOnChangePayload) => void;
 }
 export declare const AdvancedRangePicker: React.FC<AdvancedRangePickerProps>;

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -19,7 +19,7 @@ const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components
 export const AdvancedRangePicker = props => {
     const { t } = i18nInstance;
     // Props
-    const { valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, onChange, } = props;
+    const { className, valueType, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -54,10 +54,10 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    return (React.createElement(Space, { size: 20, align: "end" },
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle }),
+    return (React.createElement(Space, { size: 20, align: "end", className: className || '' },
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: ADVANCED_RANGE_PICKER_FORMAT.startDate, errorMessage: errorMessage, disableAfterDate: timeRange.endDate.date, showTime: showTime, calculationTypeKeysShow: startDateConfig === null || startDateConfig === void 0 ? void 0 : startDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('startDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('startDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode }),
         separator || null,
-        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle })));
+        React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.endDate) || '' : '', date: timeRange.endDate.date, option: omit(timeRange.endDate, 'date'), operatorKey: "between", type: "endDate", format: ADVANCED_RANGE_PICKER_FORMAT.endDate, errorMessage: errorMessage, showTime: showTime, calculationTypeKeysShow: endDateConfig === null || endDateConfig === void 0 ? void 0 : endDateConfig.calculationTypeKeysShow, showCalculationTypeCondition: showCalculationTypeCondition, timezone: timezone, onUpdatedNewDate: ({ date }) => onUpdateTimeRange('endDate', { date }, 'system'), onApply: ({ date, option }) => onUpdateTimeRange('endDate', Object.assign({ date }, option), 'user'), inputStyle: inputStyle, isViewMode: isViewMode })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {

package/es/components/molecules/DatePicker/components/DropdownLabel/DropdownLabel.js

@@ -30,7 +30,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
         case 'YEAR_WEEK': {
             const dayObj = dayjs(date || new Date(), format).locale('en');
             // const dayObj = dayjs(date || new Date(), format).locale(locale || 'en');
-            formatLabel = `${WEEK_PLACEHOLDER}W, YYYY`;
+            formatLabel = `${WEEK_PLACEHOLDER}w, YYYY`;
             subLabel = `${dayjs(dayObj).day(0).format('MMMM DD, YYYY')} - ${dayjs(dayObj)
                 .day(6)
                 .format('MMMM DD, YYYY')}`;
@@ -51,7 +51,7 @@ export const DropdownLabel = React.memo(({ valueType, date, format, type, showTi
             formatLabel = 'MMMM';
             break;
         case 'WEEK':
-            formatLabel = `${WEEK_PLACEHOLDER}W`;
+            formatLabel = `${WEEK_PLACEHOLDER}w`;
             break;
         case 'MONTH_DAY':
             formatLabel = 'MMMM DD';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerProps as AntDatePickerProps } from 'antd';
+type DatePickerProps = {
+    onChange: (key: any, value: any) => void;
+    required?: boolean;
+    focused?: boolean;
+} & AntDatePickerProps;
+export declare const DatePickerV2: React.FC<DatePickerProps>;
+export {};

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

@@ -0,0 +1,51 @@
+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;
+};
+/* eslint-disable react/destructuring-assignment */
+// Libraries
+import React, { useEffect, useMemo, useState } from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Atoms
+import { Space, Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { DatePicker as AntDatePicker } from 'antd';
+// Styled
+import { DatePickerWrapper } from './styled';
+export const DatePickerV2 = props => {
+    const { required, focused, onChange } = props, restOf = __rest(props, ["required", "focused", "onChange"]);
+    // I18n
+    const { t } = i18nInstance;
+    const [isFocused, setFocused] = useState(false);
+    const requiredMsg = useMemo(() => {
+        let msg = '';
+        const isEmptyValue = props.value == null;
+        if (required && isEmptyValue && isFocused) {
+            msg = t(translations.messageError.fieldIsRequired.message);
+        }
+        return msg;
+    }, [props.value, required, isFocused, t]);
+    useEffect(() => {
+        if (focused) {
+            setFocused(focused);
+        }
+    }, [focused]);
+    return (React.createElement(DatePickerWrapper, null,
+        React.createElement(Space, { direction: "vertical", size: 5 },
+            React.createElement(AntDatePicker, Object.assign({}, restOf, { onBlur: e => {
+                    if (!isFocused) {
+                        setFocused(true);
+                    }
+                    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+                    props.onBlur && props.onBlur(e);
+                }, onChange: date => onChange('date-picker', date) })),
+            requiredMsg ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8 } }, requiredMsg)) : null)));
+};

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

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

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

@@ -0,0 +1,12 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const DatePickerWrapper = styled.div `
+  input {
+    &::placeholder {
+      font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    }
+  }
+`;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DrawerDetailProps } from './types';
+export declare const DrawerDetail: React.FC<DrawerDetailProps>;

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

@@ -0,0 +1,79 @@
+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 React, { useEffect, useMemo } from 'react';
+// Components
+import { Flex, Icon, Tooltip } from '../../atoms';
+// Styled
+import { CloseBtn, Content, LeftMenu, MenuFooter, MenuItem, StyledDrawer } from './styled';
+// Constants
+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 => {
+    // 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"]);
+    // 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 => {
+                onCloseIconClick(e);
+                onClose(e);
+            } }),
+            React.createElement(Icon, { type: "icon-ants-remove-slim", size: 14 }))),
+        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 }))),
+                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 },
+                    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, children)));
+};
+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/index.d.ts

@@ -0,0 +1,2 @@
+export { DrawerDetail } from './DrawerDetail';
+export type * from './types';

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

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

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

@@ -0,0 +1,7 @@
+/// <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 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>;
+export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,109 @@
+var _a, _b;
+// Libraries
+import styled from 'styled-components';
+// Drawer
+import { Drawer } from '../Drawer';
+// Constants
+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 {
+      position: absolute;
+      top: 24.5px;
+      right: 25px;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+      transition: all 0.3s;
+      z-index: 100;
+      cursor: pointer;
+
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const Content = styled.div `
+  position: relative;
+  overflow: auto;
+  flex: 1 1 0%;
+`;
+export const LeftMenu = styled.div `
+  width: 46px;
+  height: 100%;
+  background-color: ${token === null || token === void 0 ? void 0 : token.blue1_2};
+  padding: 8px 5px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  gap: 5px;
+`;
+export const CloseBtn = styled.div `
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw8};
+  transition: all 0.3s;
+  cursor: pointer;
+
+  &:hover {
+    color: #000;
+  }
+`;
+export const MenuItem = styled.div `
+  height: 36px;
+  width: 36px;
+  border-radius: ${token === null || token === void 0 ? void 0 : token.borderRadiusXL}px;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+
+  * {
+    color: ${token === null || token === void 0 ? void 0 : token.bw8};
+  }
+
+  i {
+    font-size: 24px;
+    height: 24px;
+    width: 24px;
+  }
+
+  &:hover {
+    background-color: ${token === null || token === void 0 ? void 0 : token.bw0};
+
+    * {
+      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+    }
+  }
+
+  &.active {
+    background-color: #d3e3fd;
+
+    * {
+      color: ${token === null || token === void 0 ? void 0 : token.colorPrimary};
+    }
+  }
+`;
+export const MenuFooter = styled.div ``;

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

@@ -0,0 +1,18 @@
+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'> {
+    fullScreen?: boolean;
+    menuProps?: DrawerDetailMenuProps;
+    closeIconProps?: DrawerDetailCloseIconProps;
+}
+export interface DrawerDetailCloseIconProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    show?: boolean;
+}
+export interface DrawerDetailMenuProps extends Omit<AntdProps, 'onClick'> {
+    show?: boolean;
+    showExpandButton?: boolean;
+    showClose?: boolean;
+    footer?: ReactNode;
+    onClick?: (item: ItemType) => void;
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,3 +1,4 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
 import 'ace-builds/webpack-resolver';

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { AccountSelectionProps } from '../AccountSelection';
+import { AccountSharingProps } from '../../organism';
+import { IHelpProps } from '../../organism/Help/types';
+import { envType } from '@antscorp/antsomi-ui/es/types/config';
+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;
+    };
+    useURLParam?: boolean;
+    config?: {
+        env?: envType;
+        language?: string;
+        userId?: number;
+        portalId?: number;
+        token?: string;
+    };
+}
+export declare const HeaderV2: React.FC<HeaderV2Props>;

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

@@ -0,0 +1,99 @@
+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;
+};
+import React, { memo, useEffect, useState } from 'react';
+// Styled
+import { HeaderV2Styled } from './styled';
+// Components
+import { AccountSelection } from '../AccountSelection';
+import { AccountSharing, Help, Notification, } from '../../organism';
+// Constants
+import { CDP_API, IAM_API, ISSUE_API, PERMISSION_API, PLATFORM_API, SOCKET_API, } from '@antscorp/antsomi-ui/es/constants';
+import { useContextSelector } from 'use-context-selector';
+import { AppConfigContext } from '../../..';
+export const HeaderV2 = memo(props => {
+    var _a, _b, _c;
+    const { auth, env: envContext, languageCode = 'en', } = useContextSelector(AppConfigContext, state => state);
+    /** Prefer to use Header in AppConfigContext */
+    const { className, style, pageTitle = 'Page Title', 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, } = config || {};
+    const { currentAccount, inputStyle = 'select', onSelectAccount } = accountSelection, accountSelectionProps = __rest(accountSelection, ["currentAccount", "inputStyle", "onSelectAccount"]);
+    const urlParams = new URLSearchParams(window.location.search);
+    const oidParam = urlParams.get('oid');
+    const [selectedAccount, setSelectedAccount] = useState(useURLParam
+        ? (_b = (_a = Number(oidParam)) !== null && _a !== void 0 ? _a : userId) !== null && _b !== void 0 ? _b : 'ALL_ACCOUNT'
+        : (_c = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _c !== void 0 ? _c : 'ALL_ACCOUNT');
+    useEffect(() => {
+        var _a;
+        if (!useURLParam)
+            return;
+        if (!oidParam) {
+            urlParams.append('oid', `${(_a = currentAccount !== null && currentAccount !== void 0 ? currentAccount : userId) !== null && _a !== void 0 ? _a : 'ALL_ACCOUNT'}`);
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        else {
+            const newUrl = `${window.location.pathname}?${urlParams.toString()}${window.location.hash}`;
+            window.history.replaceState(null, '', newUrl);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [oidParam, useURLParam, userId]);
+    if (!env || !language || !userId || !portalId || !token)
+        return null;
+    const { show: showHelp = true, configs } = helpConfig, helpProps = __rest(helpConfig, ["show", "configs"]);
+    const { show: showNotification = true } = notificationConfig;
+    const { show: showAccountSharing = true, isShowSharing = true, isShareAccountAccess = true } = accountSharingConfig, accountSharingProps = __rest(accountSharingConfig, ["show", "isShowSharing", "isShareAccountAccess"]);
+    const accountSelectionApiConfig = {
+        domain: CDP_API[env],
+        languageCode: language,
+        userId,
+        portalId,
+        token,
+    };
+    const helpConfigProps = Object.assign(Object.assign({}, configs), { portalId: portalId.toString(), userId: userId.toString(), token, domain: CDP_API[env], domainTicket: ISSUE_API[env], domainPlatform: PLATFORM_API, config: Object.assign(Object.assign({}, configs.config), { user_language: language }) });
+    const notificationConfigProps = {
+        accountId: userId,
+        networkId: portalId,
+        token,
+        lang: language,
+        permissionDomain: PERMISSION_API,
+        socketDomain: SOCKET_API,
+    };
+    const accountSharingPropsFormatted = {
+        permissionDomain: PERMISSION_API,
+        iamDomain: IAM_API,
+        accountId: userId,
+        networkId: portalId,
+        urlEditProfile: `${PERMISSION_API}/${portalId}#/account/profile/`,
+        // 6006 is storybook port so direct to sandbox page
+        urlLogout: `${window.location.port === '6006' ? 'https://sandbox-cdp.antsomi.com/' : window.location.origin}/gen2/login`,
+        token,
+        lang: language,
+    };
+    return (React.createElement(HeaderV2Styled, { className: className || '', style: style },
+        React.createElement("div", { className: "left-side" },
+            React.createElement(AccountSelection, Object.assign({}, accountSelectionProps, { currentAccount: selectedAccount, apiConfig: accountSelectionApiConfig, onChange: userId => {
+                    setSelectedAccount(userId);
+                    if (useURLParam) {
+                        urlParams.set('oid', `${userId}`);
+                        const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
+                        window.history.replaceState(null, '', newUrl);
+                    }
+                    if (onSelectAccount)
+                        onSelectAccount(userId);
+                }, inputStyle: inputStyle })),
+            typeof pageTitle === 'string' ? React.createElement("div", { className: "page-title" }, pageTitle) : pageTitle),
+        React.createElement("div", { className: "right-side" },
+            showHelp ? React.createElement(Help, Object.assign({ configs: helpConfigProps }, helpProps)) : null,
+            showNotification ? React.createElement(Notification, Object.assign({}, notificationConfigProps)) : null,
+            showAccountSharing ? (React.createElement(AccountSharing, Object.assign({ isShowSharing: isShowSharing, isShareAccountAccess: isShareAccountAccess }, accountSharingPropsFormatted, accountSharingProps))) : null)));
+});

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

@@ -0,0 +1 @@
+export declare const HEADER_HEIGHT = 60;

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

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 60;

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

@@ -0,0 +1 @@
+export { HeaderV2, type HeaderV2Props } from './HeaderV2';

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

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

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

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