@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -1,3 +1,4 @@
+var _a, _b;
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
 import React, { useEffect, useMemo, useCallback, useState } from 'react';
@@ -29,7 +30,7 @@ const { Text } = Typography;
 export const AdvancedPicker = props => {
     var _a, _b;
     // Props
-    const { label, inputStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, onUpdatedNewDate, onApply, } = props;
+    const { label, inputStyle, popupStyle, dateTypeKeysShow, calculationTypeKeysShow, showCalculationTypeCondition, defaultDateTypeKey, valueType, option: propsOption, operatorKey, type, date: propsDate, format, formatInputDisplay, errorMessage, disableAfterDate, disableBeforeDate, showTime, disabled, timezone, isViewMode, onUpdatedNewDate, onApply, } = props;
     // Memo
     const newDateTypes = useMemo(() => {
         if (dateTypeKeysShow && dateTypeKeysShow.length) {
@@ -378,11 +379,15 @@ export const AdvancedPicker = props => {
                 onChangeDatePicker(current);
             } }, getCellRender(current, valueType, info)));
     }, [valueType, format, date]);
+    if (isViewMode)
+        return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
+            !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
+            React.createElement("span", { className: "date-picker__title--view-mode" }, selectedDateTitle)));
     return (React.createElement(Space, { direction: "vertical", size: 5, className: "antsomi-advanced-picker-container", ref: ref },
         !!label && typeof label === 'string' ? (React.createElement(Text, { style: { color: '#666666' } }, label)) : (label),
         option.dateType.value === 'fixed' &&
             !['WEEK', 'DAY_OF_WEEK', 'MONTH_DAY', 'DAY'].includes(valueType) ? (React.createElement(Tooltip, { title: selectedDateTitle },
-            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
+            React.createElement(DatePicker, { disabled: disabled, open: !disabled && isOpen, popupStyle: popupStyle, allowClear: false, inputReadOnly: true, style: Object.assign({ textOverflow: 'ellipsis' }, inputStyle), status: errorMessage ? 'error' : '', inputRender: () => (React.createElement(DatePickerCustomInput, { readOnly: true, placeholder: "Select Date", value: selectedDateTitle, onClick: () => toggleOpenDropdown() })), value: currDate, 
                 // style={{
                 //   width: 120,
                 // }}
@@ -403,7 +408,7 @@ export const AdvancedPicker = props => {
                                 React.createElement(ErrorMessage, { errorMessage: errorMessage })),
                             renderDropdownFooter()),
                         React.createElement(Divider, null),
-                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30 },
+                        timeFormat && valueType !== 'HOUR' && valueType !== 'MINUTE' ? (React.createElement(TimeLabel, { "$width": timeFormat.length * 30, "$isRangePicker": operatorKey === 'between' },
                             ['HH', 'HHmm', 'HHmmss'].includes(timeFormat) ? React.createElement("span", null, "Hours") : null,
                             ['HHmm', 'HHmmss', 'mm'].includes(timeFormat) ? React.createElement("span", null, "Minutes") : null,
                             timeFormat === 'HHmmss' ? React.createElement("span", null, "Seconds") : null)) : null));
@@ -429,6 +434,7 @@ export const AdvancedPicker = props => {
 AdvancedPicker.defaultProps = {
     label: '',
     type: ADVANCED_PICKER_TYPE.START_DATE.value,
+    popupStyle: { borderRadius: (_b = (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG) !== null && _b !== void 0 ? _b : 10 },
     operatorKey: 'after',
     dateTypeKeysShow: [],
     date: dayjs().format(DEFAULT_DATE_FORMAT),

package/es/components/molecules/DatePicker/components/AdvancedPicker/styled.d.ts

@@ -4,9 +4,10 @@ export declare const DropdownHeader: import("styled-components").StyledComponent
 export declare const DropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DatePickerCustomInput: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../../../../atoms/Input").InputProps, any>;
+export declare const InputStyled: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const DatePickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CalendarIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import("styled-components").StyledComponent<"div", any, {
     $width: number;
+    $isRangePicker: boolean;
 }, never>;

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

@@ -101,7 +101,8 @@ export const CalendarIconWrapper = styled.div `
 export const TimeLabel = styled.div `
   position: absolute;
   right: 0;
-  top: 120px;
+  /* top: 120px; */
+  top: ${props => (props.$isRangePicker ? '140px' : '120px')};
   height: 39.1px;
   width: ${props => `${props.$width}px`};
   /* width: 180px; */

package/es/components/molecules/DatePicker/components/AdvancedPicker/utils.d.ts

@@ -37,3 +37,15 @@ export declare const getFormatDisplay: (operatorKey?: TOperatorKey, type?: TAdva
     formatDisplay: string;
     timeFormatDisplay: string;
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export declare const getFormatDisplayFromValueType: (type?: TAdvancedType, valueType?: ValueTypes) => string;

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

@@ -8,6 +8,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 // Constants
 import { DATE_TYPE_MAPPING, DEFAULT_DATE_FORMAT, MONTH_LABEL_SHORT, QUARTER_PLACEHOLDER, WEEK_PLACEHOLDER, } from './constants';
+import { ADVANCED_RANGE_PICKER_FORMAT } from '../AdvancedRangePicker/constants';
 dayjs.extend(isoWeek);
 dayjs.extend(quarterOfYear);
 dayjs.extend(utc);
@@ -161,7 +162,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 +186,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';
@@ -209,3 +210,29 @@ export const getFormatDisplay = (operatorKey, type, valueType, formatInputDispla
     }
     return { formatDisplay: formatInputDisplay || formatDisplay, timeFormatDisplay };
 };
+/**
+ * Returns the formatted display string based on the given type and value type.
+ *
+ * @param {TAdvancedType} [type] - The type indicating whether it's a start or end date.
+ * @param {ValueTypes} [valueType] - The value type specifying the date/time format.
+ * @returns {string} The formatted display string.
+ *
+ * @example
+ * // returns ADVANCED_RANGE_PICKER_FORMAT.general
+ * getFormatDisplayFromValueType('anyType', 'YEAR_MONTH_DAY_SECOND');
+ */
+export const getFormatDisplayFromValueType = (type, valueType) => {
+    switch (valueType) {
+        case 'YEAR_MONTH_DAY_HOUR':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:00:00' : 'YYYY-MM-DD HH:59:59';
+        case 'YEAR_MONTH_DAY_MINUTE':
+            return type === 'startDate' ? 'YYYY-MM-DD HH:mm:00' : 'YYYY-MM-DD HH:mm:59';
+        case 'YEAR_MONTH_DAY_SECOND':
+            return ADVANCED_RANGE_PICKER_FORMAT.general;
+        case 'YEAR_MONTH_DAY':
+        default:
+            return type === 'startDate'
+                ? ADVANCED_RANGE_PICKER_FORMAT.startDate
+                : ADVANCED_RANGE_PICKER_FORMAT.endDate;
+    }
+};

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

@@ -2,7 +2,12 @@ import React, { ReactNode } from 'react';
 import { TShowCalculationTypeCondition, ValueTypes } from '../AdvancedPicker/types';
 import { TDateConfig, TOnChangePayload, TTimeRange } from './types';
 export interface AdvancedRangePickerProps {
+    className?: string;
     valueType?: ValueTypes;
+    /**
+     * If true => auto generate time format from valueType props; else use hard config
+     */
+    useFormatMapping?: boolean;
     disabled?: boolean;
     showCalculationTypeCondition?: TShowCalculationTypeCondition;
     startDateConfig?: TDateConfig;
@@ -14,6 +19,8 @@ export interface AdvancedRangePickerProps {
     timezone?: string;
     separator?: ReactNode;
     inputStyle?: React.CSSProperties;
+    popupStyle?: 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

@@ -1,3 +1,4 @@
+var _a, _b;
 // Libraries
 import dayjs from 'dayjs';
 import React, { useState } from 'react';
@@ -10,16 +11,18 @@ import { Space } from '../../../../atoms';
 import { AdvancedPicker } from '../AdvancedPicker';
 // Constants
 import { ADVANCED_RANGE_PICKER_FORMAT } from './constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Utils
 import { handleError } from '@antscorp/antsomi-ui/es/utils';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Instance
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { getFormatDisplayFromValueType } from '../AdvancedPicker/utils';
 const PATH = '@antscorp/antsomi-ui/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.tsx';
 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, useFormatMapping, timeRange, errorMessage, showLabel, startDateConfig, endDateConfig, showTime, showCalculationTypeCondition, disabled, timezone, separator, inputStyle, popupStyle, isViewMode, onChange, } = props;
     const [timeRangeState, setTimeRange] = useState(timeRange);
     useDeepCompareEffect(() => {
         if (typeof onChange === 'function') {
@@ -54,10 +57,18 @@ 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: 15, 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: useFormatMapping
+                ? getFormatDisplayFromValueType('startDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.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, popupStyle: popupStyle, 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: useFormatMapping
+                ? getFormatDisplayFromValueType('endDate', valueType)
+                : ADVANCED_RANGE_PICKER_FORMAT.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, popupStyle: popupStyle, isViewMode: isViewMode })));
 };
 AdvancedRangePicker.defaultProps = {
     timeRange: {
@@ -76,6 +87,7 @@ AdvancedRangePicker.defaultProps = {
             dateType: 'today',
         },
     },
+    popupStyle: { borderRadius: (_b = (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadiusLG) !== null && _b !== void 0 ? _b : 10 },
     errorMessage: '',
     disabled: false,
     showLabel: true,

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,147 @@
+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 { ConfigProvider } from 'antd';
+import { isNil } from 'lodash';
+import React, { useCallback, useEffect, useMemo } from 'react';
+// Components
+import { Flex, Icon, Tooltip } from '../../atoms';
+// Styled
+import { CloseBtn, Content, DrawerHeader, LeftMenu, MenuFooter, MenuItem, StyledDrawer, } from './styled';
+// Constants
+import { BREAK_POINT, DRAWER_DETAIL_LOCAL_STORAGE_KEY, DRAWER_LARGE_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, } from './constants';
+import { ToggleDrawerSizeButton } from './components';
+// Hooks
+import { useMediaQuery, useToggle } from '@antscorp/antsomi-ui/es/hooks';
+// Utils
+import { safeParseJson } from '@antscorp/antsomi-ui/es/utils';
+import { POST_MESSAGE_TYPES } from '@antscorp/antsomi-ui/es/constants';
+export const DrawerDetail = props => {
+    // Props
+    const { width, fullScreen: fullScreenProp = false, children, menuProps, closeIconProps, maxWidth, minWidth, defaultSize = 'max', headerProps, name, destroyOnClose = true } = props, restProps = __rest(props, ["width", "fullScreen", "children", "menuProps", "closeIconProps", "maxWidth", "minWidth", "defaultSize", "headerProps", "name", "destroyOnClose"]);
+    const { show: showMenu = true, showExpandButton = true, showClose = true, items, selectedKeys, footer, onClick = () => { }, } = menuProps || {};
+    const _a = headerProps || {}, { children: headerChildren } = _a, restOfHeaderProps = __rest(_a, ["children"]);
+    const { onClose = () => { } } = props;
+    const _b = closeIconProps || {}, { show: showCloseIcon, onClick: onCloseIconClick = () => { } } = _b, restOfCloseIcon = __rest(_b, ["show", "onClick"]);
+    // Hooks
+    const matchesSmallScreen = useMediaQuery(`(max-width: ${BREAK_POINT})`);
+    // State
+    const [collapseDrawer, toggleCollapseDrawer] = useToggle(false);
+    const [fullScreen, toggleFullScreen] = useToggle(fullScreenProp);
+    // Handlers
+    const handleToggleDrawerDetailFullscreen = useCallback((event) => {
+        const { type, data } = event.data || {};
+        const { name: payloadName, value } = data || {};
+        if (type === POST_MESSAGE_TYPES.TOGGLE_DRAWER_DETAIL_FULLSCREEN && payloadName === name) {
+            toggleFullScreen(isNil(value) ? undefined : value);
+        }
+    }, [name, toggleFullScreen]);
+    // Effects
+    useEffect(() => {
+        window.addEventListener('message', handleToggleDrawerDetailFullscreen);
+        return () => {
+            window.removeEventListener('message', handleToggleDrawerDetailFullscreen);
+        };
+    }, [handleToggleDrawerDetailFullscreen]);
+    useEffect(() => {
+        toggleFullScreen(fullScreenProp);
+    }, [fullScreenProp, toggleFullScreen]);
+    useEffect(() => {
+        if (matchesSmallScreen) {
+            toggleCollapseDrawer(false);
+        }
+        switch (defaultSize) {
+            case 'max':
+                toggleCollapseDrawer(false);
+                break;
+            case 'min':
+            default:
+                toggleCollapseDrawer(true);
+                break;
+        }
+    }, [matchesSmallScreen, defaultSize, toggleCollapseDrawer]);
+    // Get cache collapse from local storage
+    useEffect(() => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        const cachedCollapse = localStorageValues[name || ''];
+        if (!isNil(cachedCollapse)) {
+            toggleCollapseDrawer(cachedCollapse);
+        }
+    }, [name, 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 (maxWidth)
+                    return maxWidth;
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MAX_WIDTH;
+                return DRAWER_LARGE_MAX_WIDTH;
+            }
+            case true:
+            default: {
+                if (minWidth)
+                    return minWidth;
+                if (matchesSmallScreen)
+                    return DRAWER_SMALL_MIN_WIDTH;
+                return DRAWER_LARGE_MIN_WIDTH;
+            }
+        }
+    }, [collapseDrawer, fullScreen, matchesSmallScreen, maxWidth, minWidth, width]);
+    const handleToggleDrawerSize = () => {
+        const localStorageValues = safeParseJson(localStorage.getItem(DRAWER_DETAIL_LOCAL_STORAGE_KEY), {});
+        toggleCollapseDrawer(!collapseDrawer);
+        /**
+         * Set local storage last collapsed
+         */
+        if (name) {
+            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);
+                    } }),
+                    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)))));
+};
+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 { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import React from 'react';
+import styled from 'styled-components';
+// Icons
+import { ExpandMoreRight } from '../../../icons';
+/* Styled */
+const StyledToggleButton = styled.div `
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_2};
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  top: 50%;
+  transform: translateY(-50%);
+  left: -5px;
+  z-index: 10;
+  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,14 @@
+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";
+declare const DRAWER_DETAIL_LOCAL_STORAGE_KEY = "drawer-detail-collapses";
+declare const DRAWER_DETAIL_DIMENSION: {
+    LAYER_2: {
+        minWidth: string;
+        maxWidth: string;
+    };
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

@@ -0,0 +1,16 @@
+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';
+const DRAWER_DETAIL_LOCAL_STORAGE_KEY = 'drawer-detail-collapses';
+const LAYER_2_MIN_WIDTH = '740px';
+const LAYER_2_MAX_WIDTH = 'calc(100vw - 46px)';
+const DRAWER_DETAIL_DIMENSION = {
+    LAYER_2: {
+        minWidth: LAYER_2_MIN_WIDTH,
+        maxWidth: LAYER_2_MAX_WIDTH,
+    },
+};
+export { DRAWER_MAX_WIDTH, DRAWER_LARGE_MIN_WIDTH, DRAWER_LARGE_MAX_WIDTH, DRAWER_SMALL_MAX_WIDTH, DRAWER_SMALL_MIN_WIDTH, BREAK_POINT, DRAWER_DETAIL_DIMENSION, DRAWER_DETAIL_LOCAL_STORAGE_KEY, };

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

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

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

@@ -0,0 +1,3 @@
+export { DrawerDetail } from './DrawerDetail';
+// Constants
+export { DRAWER_DETAIL_DIMENSION } from './constants';

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { DrawerHeaderProps } from './types';
+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>;
+export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawerHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, DrawerHeaderProps, never>;
+export declare const MenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;