@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,7 +1,7 @@
 // Libraries
 import styled from 'styled-components';
 // Components
-import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ContentWrapper = styled.div `
@@ -11,7 +11,7 @@ export const ContentWrapper = styled.div `
     }
 
     &__title {
-      font-size: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontSizeXL}px;
+      font-size: ${globalToken?.fontSizeXL}px;
       font-weight: 500;
     }
 
@@ -19,19 +19,19 @@ export const ContentWrapper = styled.div `
       display: flex;
       padding: 15px;
       gap: 10px;
-      border-top: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3};
+      border-top: 1px solid ${globalToken?.bw3};
     }
   }
 `;
 export const CloseButton = styled(Flex) `
   width: 24px;
   height: 24px;
-  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  color: ${globalToken?.bw8};
   transition: all 0.3s;
   cursor: pointer;
 
   &:hover {
-    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+    color: ${globalToken?.bw10};
   }
 
   i {

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import React, { useLayoutEffect, useReducer, useRef } from 'react';
+import { useLayoutEffect, useReducer, useRef } from 'react';
 import { Divider, ConfigProvider as AntdConfigProvider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
@@ -26,15 +27,9 @@ export const CalendarSelection = props => {
         }
     }, [state.open]);
     useTriggerOut({ state, dispatch, onChange });
-    const popoverContent = (React.createElement(StyledPopoverContainer, null,
-        React.createElement(StyledPopoverBody, null,
-            React.createElement(RangeSelectOptions, null),
-            React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
-            React.createElement(CustomPicker, Object.assign({}, rangePickerProps))),
-        React.createElement(Divider, { style: { margin: 0 } }),
-        React.createElement(Footer, null)));
+    const popoverContent = (_jsxs(StyledPopoverContainer, { children: [_jsxs(StyledPopoverBody, { children: [_jsx(RangeSelectOptions, {}), _jsx(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }), _jsx(CustomPicker, { ...rangePickerProps })] }), _jsx(Divider, { style: { margin: 0 } }), _jsx(Footer, {})] }));
     // console.log(state.value.current.rangeValue);
-    return (React.createElement(AntdConfigProvider, { theme: {
+    return (_jsx(AntdConfigProvider, { theme: {
             components: {
                 Popover: {
                     borderRadiusLG: 0,
@@ -42,13 +37,12 @@ export const CalendarSelection = props => {
                     borderRadiusOuter: 0,
                 },
             },
-        } },
-        React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
-                timezone }) },
-            React.createElement(ActionContext.Provider, { value: { dispatch } },
-                React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
+        }, children: _jsx(StateContext.Provider, { value: {
+                ...state,
+                rangeLimit,
+                timezone,
+            }, children: _jsx(ActionContext.Provider, { value: { dispatch }, children: _jsx(StyledPopover, { ...popoverProps, open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
                         if (!isOpen)
                             dispatch({ type: 'toggle_popover' });
-                    } }),
-                    React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps)))))));
+                    }, children: _jsx(TimeRangeDisplay, { ...timeDisplayProps }) }) }) }) }));
 };

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/AutoUpdateTo.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from '@antscorp/antsomi-ui/es/components/molecules/Select';
 import { updateRangeInfo } from '../../actions';
 import { AUTO_UPDATE_TO_KEY, AUTO_UPDATE_TO_OPTIONS, SELECTION_KEY } from '../../constants';
@@ -18,7 +18,5 @@ export const AutoUpdateTo = props => {
             autoUpdateTo: value,
         }));
     };
-    return (React.createElement(StyledAutoUpdateToRoot, { className: className },
-        React.createElement("div", { className: "label" }, "Auto update to"),
-        React.createElement(Select, { id: id, options: Object.values(AUTO_UPDATE_TO_OPTIONS).map(i => (Object.assign(Object.assign({}, i), { value: i.key }))), value: value, onChange: handleChangeUpdateTo })));
+    return (_jsxs(StyledAutoUpdateToRoot, { className: className, children: [_jsx("div", { className: "label", children: "Auto update to" }), _jsx(Select, { id: id, options: Object.values(AUTO_UPDATE_TO_OPTIONS).map(i => ({ ...i, value: i.key })), value: value, onChange: handleChangeUpdateTo })] }));
 };

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -1,16 +1,6 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-array-index-key */
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
 import { RangePicker } from '../RangePicker';
 import { useCalendarSelectionContext } from '../../hooks';
@@ -31,7 +21,7 @@ const generateRangeInputLabel = (idx, label) => {
     return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
 };
 export const CustomPicker = props => {
-    const rest = __rest(props, []);
+    const { ...rest } = props;
     const popupContainer = useRef(null);
     const { state, action } = useCalendarSelectionContext();
     const { rangeValue } = state.value.current;
@@ -46,8 +36,11 @@ export const CustomPicker = props => {
             return;
         const replacedRange = rangeValue[activeRangeIdx];
         const updatedRangeValue = [...rangeValue];
-        updatedRangeValue.splice(activeRangeIdx, 1, Object.assign(Object.assign({}, replacedRange), { start,
-            end }));
+        updatedRangeValue.splice(activeRangeIdx, 1, {
+            ...replacedRange,
+            start,
+            end,
+        });
         action.dispatch(updateRangeValue(updatedRangeValue, { isManual: true }));
     };
     const renderCellDate = useCallback((date, originNode) => {
@@ -62,48 +55,43 @@ export const CustomPicker = props => {
         const cellBgColor = new TinyColor(colors.length > 1
             ? colors.reduce((acc, color) => interpolateHsl(acc, color)(0.5), colors[0])
             : colors[0]);
-        return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
+        return _jsx(StyledCellDate, { rangeColor: cellBgColor, children: originNode });
     }, [rangeValue]);
-    return (React.createElement(StyledCustomPickerRoot, null,
-        React.createElement("div", { className: "section-input" },
-            React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
-                    components: {
-                        DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
-                            hoverBorderColor: range.color,
-                            colorBorder: range.color,
-                            colorPrimary: range.color,
-                            colorPrimaryActive: range.color,
-                            cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
-                        })),
-                    },
-                } },
-                React.createElement("div", { className: "range-input" },
-                    React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                    React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
-                            if (activeRangeIdx !== rangeIdx)
-                                return null;
-                            return originalPanel;
-                        }, cellRender: (current, info) => {
-                            if (typeof current === 'number' || info.type !== 'date') {
-                                return info.originNode;
-                            }
-                            return renderCellDate(current, info.originNode);
-                        }, onCalendarChange: value => {
-                            var _a, _b;
-                            let start = '';
-                            let end = '';
-                            const valueFirst = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
-                            const valueSecond = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
-                            if (valueFirst.isBefore(valueSecond)) {
-                                start = valueFirst.toISOString();
-                                end = valueSecond.toISOString();
-                            }
-                            else {
-                                start = valueSecond.toISOString();
-                                end = valueFirst.toISOString();
-                            }
-                            handleCalendarChange(start, end);
-                        } }))))))),
-            React.createElement(AutoUpdateTo, null)),
-        React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
+    return (_jsxs(StyledCustomPickerRoot, { children: [_jsxs("div", { className: "section-input", children: [_jsx("div", { className: "range-inputs", children: rangeValue.map((range, rangeIdx) => (_jsx(ConfigProvider, { theme: {
+                                components: {
+                                    DatePicker: {
+                                        cellHeight: 20,
+                                        ...(range.color && {
+                                            hoverBorderColor: range.color,
+                                            colorBorder: range.color,
+                                            colorPrimary: range.color,
+                                            colorPrimaryActive: range.color,
+                                            cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
+                                        }),
+                                    },
+                                },
+                            }, children: _jsxs("div", { className: "range-input", children: [_jsx("div", { className: "range-input-label", children: generateRangeInputLabel(rangeIdx, range.label) }), _jsx(RangePicker, { ...rest, open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                                            if (activeRangeIdx !== rangeIdx)
+                                                return null;
+                                            return originalPanel;
+                                        }, cellRender: (current, info) => {
+                                            if (typeof current === 'number' || info.type !== 'date') {
+                                                return info.originNode;
+                                            }
+                                            return renderCellDate(current, info.originNode);
+                                        }, onCalendarChange: value => {
+                                            let start = '';
+                                            let end = '';
+                                            const valueFirst = dayjs(value?.at(0)?.toDate());
+                                            const valueSecond = dayjs(value?.at(1)?.toDate());
+                                            if (valueFirst.isBefore(valueSecond)) {
+                                                start = valueFirst.toISOString();
+                                                end = valueSecond.toISOString();
+                                            }
+                                            else {
+                                                start = valueSecond.toISOString();
+                                                end = valueFirst.toISOString();
+                                            }
+                                            handleCalendarChange(start, end);
+                                        } })] }) }, rangeIdx))) }), _jsx(AutoUpdateTo, {})] }), _jsx(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })] }));
 };

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const Footer: () => React.JSX.Element;
+export declare const Footer: () => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/CalendarSelection/components/Footer/Footer.js

@@ -1,11 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
 import { useCalendarSelectionContext } from '../../hooks';
 import { apply, togglePopover } from '../../actions';
 import { StyledFooterRoot } from './styled';
 export const Footer = () => {
     const { action } = useCalendarSelectionContext();
-    return (React.createElement(StyledFooterRoot, null,
-        React.createElement(Button, { onClick: () => action.dispatch(apply()), type: "primary" }, "Apply"),
-        React.createElement(Button, { onClick: () => action.dispatch(togglePopover()) }, "Cancel")));
+    return (_jsxs(StyledFooterRoot, { children: [_jsx(Button, { onClick: () => action.dispatch(apply()), type: "primary", children: "Apply" }), _jsx(Button, { onClick: () => action.dispatch(togglePopover()), children: "Cancel" })] }));
 };

package/es/components/molecules/CalendarSelection/components/RangePicker/RangePicker.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledRangePicker } from './styled';
 const DATE_FORMAT = 'DD/MM/YYYY';
-export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, bordered: false, size: "middle", suffixIcon: false, format: DATE_FORMAT })));
+export const RangePicker = props => (_jsx(StyledRangePicker, { ...props, allowEmpty: [true, true], allowClear: false, autoFocus: false, bordered: false, size: "middle", suffixIcon: false, format: DATE_FORMAT }));

package/es/components/molecules/CalendarSelection/components/RangePicker/styled.js

@@ -1,4 +1,5 @@
-import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import { DatePicker } from 'antd';
+// import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 const { RangePicker } = DatePicker;
@@ -15,7 +16,7 @@ export const StyledRangePicker = styled(RangePicker) `
       padding: 4px 10px;
 
       &.antsomi-picker-input-active {
-        border-bottom: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+        border-bottom: 2px solid ${globalToken?.colorPrimary};
       }
 
       input {

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/RangeSelectOptions.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { RANGE_SELECTION_OPTIONS, RANGE_TIME, SELECTION_KEY } from '../../constants';
 import { Divider } from '@antscorp/antsomi-ui/es/components/atoms';
 import { List } from 'antd';
@@ -6,18 +6,12 @@ import { NumOfDaysRanges, Option } from './components';
 import { RangeSelectOptionsRoot } from './styled';
 const customOption = RANGE_SELECTION_OPTIONS[SELECTION_KEY.custom];
 const baseOptions = RANGE_TIME.map(key => {
-    var _a;
     const option = RANGE_SELECTION_OPTIONS[key];
     return {
         key,
         type: key,
         label: option.label.trim(),
-        options: ((_a = option.options) === null || _a === void 0 ? void 0 : _a.map(i => (Object.assign(Object.assign({}, i), { type: i.key })))) || [],
+        options: option.options?.map(i => ({ ...i, type: i.key })) || [],
     };
 });
-export const RangeSelectOptions = () => (React.createElement(RangeSelectOptionsRoot, null,
-    React.createElement(List, { dataSource: [customOption], renderItem: item => React.createElement(Option, { type: item.key, label: item.label }) }),
-    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
-    React.createElement(List, { dataSource: baseOptions, renderItem: item => React.createElement(Option, { type: item.key, label: item.label, options: item.options }) }),
-    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
-    React.createElement(NumOfDaysRanges, null)));
+export const RangeSelectOptions = () => (_jsxs(RangeSelectOptionsRoot, { children: [_jsx(List, { dataSource: [customOption], renderItem: item => _jsx(Option, { type: item.key, label: item.label }) }), _jsx(Divider, { style: { marginTop: 4, marginBottom: 4 } }), _jsx(List, { dataSource: baseOptions, renderItem: item => _jsx(Option, { type: item.key, label: item.label, options: item.options }) }), _jsx(Divider, { style: { marginTop: 4, marginBottom: 4 } }), _jsx(NumOfDaysRanges, {})] }));

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/NumOfDaysRanges.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare const NumOfDaysRanges: () => React.JSX.Element;
+export declare const NumOfDaysRanges: () => import("react/jsx-runtime").JSX.Element;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/NumOfDaysRanges.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DEFAULT_NUM_UP_TO, RANGE_SELECTION_OPTIONS, SELECTION_KEY } from '../../../../constants';
 import { Option } from '../Option';
 import { useCalendarSelectionContext } from '../../../../hooks';
@@ -8,7 +8,7 @@ import { List } from 'antd';
 const numbericOptions = [
     RANGE_SELECTION_OPTIONS[SELECTION_KEY.days_up_to_today],
     RANGE_SELECTION_OPTIONS[SELECTION_KEY.days_up_to_yesterday],
-].map(i => (Object.assign(Object.assign({}, i), { type: i.key })));
+].map(i => ({ ...i, type: i.key }));
 export const NumOfDaysRanges = () => {
     const { state, action } = useCalendarSelectionContext();
     const { rangeInfo } = state.value.current;
@@ -26,16 +26,14 @@ export const NumOfDaysRanges = () => {
     };
     const renderInput = (rangeType) => {
         let value = DEFAULT_NUM_UP_TO;
-        if (rangeType === (upToDaysRangeInfo === null || upToDaysRangeInfo === void 0 ? void 0 : upToDaysRangeInfo.type)) {
+        if (rangeType === upToDaysRangeInfo?.type) {
             value = upToDaysRangeInfo.numOfDays;
         }
-        return (React.createElement(InputNumber, { onChange: value => {
+        return (_jsx(InputNumber, { onChange: value => {
                 if (typeof value === 'number') {
                     handleChangeNumOfDays(value, rangeType);
                 }
-            }, readOnly: rangeType !== (upToDaysRangeInfo === null || upToDaysRangeInfo === void 0 ? void 0 : upToDaysRangeInfo.type), size: "small", type: "number", style: { width: 60 }, min: 1, step: 1, precision: 0, value: value }));
+            }, readOnly: rangeType !== upToDaysRangeInfo?.type, size: "small", type: "number", style: { width: 60 }, min: 1, step: 1, precision: 0, value: value }));
     };
-    return (React.createElement(List, { className: "ants-text-normal", dataSource: numbericOptions, renderItem: item => (React.createElement(Option, { type: item.key, label: React.createElement("div", { className: "ants-flex ants-gap-2 ants-items-center" },
-                renderInput(item.type),
-                item.label) })) }));
+    return (_jsx(List, { className: "ants-text-normal", dataSource: numbericOptions, renderItem: item => (_jsx(Option, { type: item.key, label: _jsxs("div", { className: "ants-flex ants-gap-2 ants-items-center", children: [renderInput(item.type), item.label] }) })) }));
 };

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/Option/Option.js

@@ -1,4 +1,5 @@
-import React, { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { List, Menu } from 'antd';
 import Icon from '@antscorp/icons';
 import styled from 'styled-components';
@@ -49,19 +50,21 @@ export const Option = props => {
             action.dispatch(changeRangeType(rangeType));
         }
     };
-    const content = (React.createElement(List.Item, { ref: itemRef, className: classNames({ active: isActive }), onClick: () => {
+    const content = (_jsxs(List.Item, { ref: itemRef, className: classNames({ active: isActive }), onClick: () => {
             if (!withDropdown) {
                 handleClickOption(type);
             }
-        } },
-        React.createElement("div", { className: classNames({
-                'ants-font-bold': isActive,
-            }) }, label),
-        withDropdown && (React.createElement(Icon, { style: {
-                fontSize: 8,
-            }, type: "icon-ants-angle-right" }))));
+        }, children: [_jsx("div", { className: classNames({
+                    'ants-font-bold': isActive,
+                }), children: label }), withDropdown && (_jsx(Icon, { style: {
+                    fontSize: 8,
+                }, type: "icon-ants-angle-right" }))] }));
     if (withDropdown) {
-        return (React.createElement(Popover, { placement: "rightTop", overlayClassName: "arrow-hidden", overlayInnerStyle: { padding: 0 }, arrow: false, content: React.createElement(StyledMenu, { selectedKeys: [selectedRangeType], items: options.map(o => (Object.assign(Object.assign({}, o), { key: o.type, onClick: () => handleClickOption(o.type) }))) }), destroyTooltipOnHide: true }, content));
+        return (_jsx(Popover, { placement: "rightTop", overlayClassName: "arrow-hidden", overlayInnerStyle: { padding: 0 }, arrow: false, content: _jsx(StyledMenu, { selectedKeys: [selectedRangeType], items: options.map(o => ({
+                    ...o,
+                    key: o.type,
+                    onClick: () => handleClickOption(o.type),
+                })) }), destroyTooltipOnHide: true, children: content }));
     }
     return content;
 };

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/TimeRangeDisplay.js

@@ -1,14 +1,4 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cls from 'clsx';
 import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
@@ -18,7 +8,7 @@ import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../util
 import { StyledBtnDisplayWrapper } from './styled';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
-    const { showType = true, formatStart, formatEnd, operator, render } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator", "render"]);
+    const { showType = true, formatStart, formatEnd, operator, render, ...rest } = props;
     const { state, action } = useCalendarSelectionContext();
     const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
@@ -30,14 +20,8 @@ export const TimeRangeDisplay = forwardRef((props, ref) => {
         formatEnd,
         operator,
     });
-    const renderDateTitle = (title) => (React.createElement(Text, { className: "range-date-title", ellipsis: {
+    const renderDateTitle = (title) => (_jsx(Text, { className: "range-date-title", ellipsis: {
             tooltip: title,
-        } }, title));
-    return render ? (render(state.value.original, rangeSelectedTitle, rangeValueTitles, handleOpenPopover)) : (React.createElement(StyledBtnDisplayWrapper, Object.assign({ ref: ref }, rest, { onClick: handleOpenPopover, role: "button" }),
-        showType && (React.createElement(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle } }, rangeSelectedTitle)),
-        React.createElement("div", { className: cls('range-date') },
-            rangeValue.length > 0 && renderDateTitle(rangeValueTitles[0]),
-            rangeValue.length > 1 && (React.createElement("div", { className: cls('collapse-wrapper') }, rangeValueTitles.slice(1).map(title => (React.createElement(React.Fragment, { key: title },
-                React.createElement("div", { className: "compare-title" }, "Compare"),
-                renderDateTitle(title)))))))));
+        }, children: title }));
+    return render ? (render(state.value.original, rangeSelectedTitle, rangeValueTitles, handleOpenPopover)) : (_jsxs(StyledBtnDisplayWrapper, { ref: ref, ...rest, onClick: handleOpenPopover, role: "button", children: [showType && (_jsx(Text, { className: "range-type", ellipsis: { tooltip: rangeSelectedTitle }, children: rangeSelectedTitle })), _jsxs("div", { className: cls('range-date'), children: [rangeValue.length > 0 && renderDateTitle(rangeValueTitles[0]), rangeValue.length > 1 && (_jsx("div", { className: cls('collapse-wrapper'), children: rangeValueTitles.slice(1).map(title => (_jsxs(React.Fragment, { children: [_jsx("div", { className: "compare-title", children: "Compare" }), renderDateTitle(title)] }, title))) }))] })] }));
 });

package/es/components/molecules/CalendarSelection/components/TimeRangeDisplay/styled.js

@@ -16,14 +16,14 @@ export const StyledBtnDisplayWrapper = styled.div `
     padding: 3px 5px;
     border-radius: 3px;
     width: fit-content;
-    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw2};
+    background-color: ${globalToken?.bw2};
     line-height: inherit;
   }
 
   .range-date-title {
     padding: 3px 5px;
     border-radius: 3px;
-    background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1_1};
+    background-color: ${globalToken?.blue1_1};
     line-height: inherit;
   }
 `;

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

@@ -83,7 +83,11 @@ export const MAP_TITLE = {
     monToToDay: 'Mon-Today',
     monToSun: 'Mon-Sun',
 };
-export const MAP_TITLE_DISPLAY = Object.assign(Object.assign({}, MAP_TITLE), { [SELECTION_KEY.days_up_to_yesterday]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up to yesterday')`, [SELECTION_KEY.days_up_to_today]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up today` });
+export const MAP_TITLE_DISPLAY = {
+    ...MAP_TITLE,
+    [SELECTION_KEY.days_up_to_yesterday]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up to yesterday')`,
+    [SELECTION_KEY.days_up_to_today]: (rangeInfo) => `${rangeInfo.numOfDays} day(s) up today`,
+};
 export const RANGE_SELECTION_OPTIONS = {
     [SELECTION_KEY.today]: {
         key: SELECTION_KEY.today,

package/es/components/molecules/CalendarSelection/reducer.js

@@ -1,14 +1,3 @@
-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 { produce } from 'immer';
 import { AUTO_UPDATE_TO_KEY, LOCAL_TIMEZONE, RANGE_LIMIT, SELECTION_KEY, TRIGGER_OUT_MODE, } from './constants';
 import { generateRangeInfo, getRangeValue, genTriggerOut } from './utils';
@@ -46,10 +35,13 @@ export const reducer = (state, action) => produce(state, draft => {
                 rangeInfo,
                 currentRangeValue: initData.rangeValue,
             });
-            const initState = Object.assign(Object.assign({}, INITIAL_STATE), { value: {
+            const initState = {
+                ...INITIAL_STATE,
+                value: {
                     original: { rangeInfo, rangeValue: defaultValue },
                     current: { rangeInfo, rangeValue: defaultValue },
-                } });
+                },
+            };
             if (needTriggerOut) {
                 initState.triggerOut = genTriggerOut({ mode: TRIGGER_OUT_MODE.auto });
             }
@@ -70,16 +62,19 @@ export const reducer = (state, action) => produce(state, draft => {
             break;
         }
         case ACTION_TYPES.updateRangeInfo: {
-            const _a = action.payload.updateValue, { type } = _a, rest = __rest(_a, ["type"]);
+            const { type, ...rest } = action.payload.updateValue;
             let updated;
             if (type && type !== state.value.current.rangeInfo.type) {
                 const rangeInfoByType = generateRangeInfo(type);
                 if (!rangeInfoByType)
                     break;
-                updated = Object.assign(Object.assign({}, rangeInfoByType), rest);
+                updated = { ...rangeInfoByType, ...rest };
             }
             else {
-                updated = Object.assign(Object.assign({}, state.value.current.rangeInfo), action.payload.updateValue);
+                updated = {
+                    ...state.value.current.rangeInfo,
+                    ...action.payload.updateValue,
+                };
             }
             const rangeValue = getRangeValue({
                 rangeInfo: updated,
@@ -92,7 +87,7 @@ export const reducer = (state, action) => produce(state, draft => {
         case ACTION_TYPES.updateRangeValue: {
             const { rangeValue, options } = action.payload;
             const rangeType = state.value.current.rangeInfo.type;
-            if ((options === null || options === void 0 ? void 0 : options.isManual) && rangeType !== SELECTION_KEY.custom) {
+            if (options?.isManual && rangeType !== SELECTION_KEY.custom) {
                 draft.value.current.rangeInfo = {
                     type: SELECTION_KEY.custom,
                     autoUpdateTo: AUTO_UPDATE_TO_KEY.fixed,

package/es/components/molecules/CalendarSelection/utils.js

@@ -223,7 +223,7 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
             default:
                 asssertCannotReach(rangeInfo);
         }
-        return Object.assign(Object.assign({}, rangeValue), temp);
+        return { ...rangeValue, ...temp };
     });
     return result;
 };
@@ -231,17 +231,16 @@ export const getRangeValueSelctedTitle = (rangeValue, options) => {
     const { formatStart, formatEnd, operator = '-' } = options || {};
     const result = [];
     rangeValue.forEach(range => {
-        var _a, _b, _c, _d, _e;
         const { start, end } = range;
         let startFormat = formatStart || 'MMM D';
         const endFormat = formatEnd || 'MMM D YYYY';
-        if ((_a = dayjs(start)) === null || _a === void 0 ? void 0 : _a.isSame(dayjs(end), 'D')) {
-            return result.push((_b = dayjs(start)) === null || _b === void 0 ? void 0 : _b.format('MMM D YYYY'));
+        if (dayjs(start)?.isSame(dayjs(end), 'D')) {
+            return result.push(dayjs(start)?.format('MMM D YYYY'));
         }
-        if (!((_c = dayjs(start)) === null || _c === void 0 ? void 0 : _c.isSame(dayjs(end), 'y')) && !formatStart) {
+        if (!dayjs(start)?.isSame(dayjs(end), 'y') && !formatStart) {
             startFormat = `${startFormat} YYYY`;
         }
-        result.push(`${(_d = dayjs(start)) === null || _d === void 0 ? void 0 : _d.format(startFormat)} ${operator} ${(_e = dayjs(end)) === null || _e === void 0 ? void 0 : _e.format(endFormat)}`);
+        result.push(`${dayjs(start)?.format(startFormat)} ${operator} ${dayjs(end)?.format(endFormat)}`);
     });
     return result;
 };

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

@@ -1,7 +1,6 @@
-import React from 'react';
 import { IImageEditorProps } from './types';
 declare const CaptureScreen: {
-    (props: IImageEditorProps): React.JSX.Element;
+    (props: IImageEditorProps): import("react/jsx-runtime").JSX.Element;
     defaultProps: {
         isOpen: boolean;
         src: string;