@antscorp/antsomi-ui 1.3.5-beta.92 → 1.3.5-beta.921

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

@@ -1,12 +1,40 @@
-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';
 import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
 import classNames from 'classnames';
 import { useCalendarSelectionContext } from '../../../../hooks';
 import { changeRangeType } from '../../../../actions';
 import { rangeInfoToStringType } from '../../../../utils';
-import { StyledMenu } from './styled';
-import { List } from 'antd';
+const StyledMenu = styled(Menu) `
+  &.antsomi-menu-root {
+    .antsomi-menu-item {
+      position: relative;
+      color: black;
+      height: 32px;
+      line-height: 32px;
+      border-radius: 0;
+      width: 100%;
+      margin: 0;
+
+      &.antsomi-menu-item-selected {
+        font-weight: bold;
+
+        &:after {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 4px;
+          height: 100%;
+          background-color: #005fb8;
+        }
+      }
+    }
+  }
+`;
 export const Option = props => {
     const itemRef = useRef(null);
     const { label = '', options = [], type } = props;
@@ -22,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/RangeSelectOptions/components/index.d.ts

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

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

@@ -1,2 +1,2 @@
-export * from './Option';
-export * from './NumOfDaysRanges';
+export { Option } from './Option';
+export { NumOfDaysRanges } from './NumOfDaysRanges';

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

@@ -1,8 +1,10 @@
 import React from 'react';
+import { CalendarSelectionValue } from '../../types';
 export type TimeRangeDisplayProps = {
     showType?: boolean;
     formatStart?: string;
     formatEnd?: string;
     operator?: string;
+    render?: (value: CalendarSelectionValue, rangeSelectedTitle: string, rangeValueTitles: string[], handleOpenPopover: () => void) => React.ReactNode;
 };
 export declare const TimeRangeDisplay: React.FC<TimeRangeDisplayProps>;

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

@@ -1,31 +1,15 @@
-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, useEffect, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { ACTION_TYPES } from '../../actions';
 import { useCalendarSelectionContext } from '../../hooks';
 import { getRangeTypeSelectedTitle, getRangeValueSelctedTitle } from '../../utils';
 import { StyledBtnDisplayWrapper } from './styled';
-import Icon from '@antscorp/icons';
 const { Text } = Typography;
 export const TimeRangeDisplay = forwardRef((props, ref) => {
-    const { showType = true, formatStart, formatEnd, operator } = props, rest = __rest(props, ["showType", "formatStart", "formatEnd", "operator"]);
+    const { showType = true, formatStart, formatEnd, operator, render, ...rest } = props;
     const { state, action } = useCalendarSelectionContext();
-    // console.log({ state, action });
-    const [collapse, setCollapse] = useState(false);
-    useEffect(() => {
-        setCollapse(false);
-    }, []);
     const { rangeInfo, rangeValue } = state.value.original;
     const handleOpenPopover = () => {
         action.dispatch({ type: ACTION_TYPES.togglePopover });
@@ -36,14 +20,8 @@ export const TimeRangeDisplay = forwardRef((props, ref) => {
         formatEnd,
         operator,
     });
-    // console.log({ rangeSelectedTitle, rangeValueTitles });
-    return (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', { collapse: state.open }) },
-            rangeValue.length > 0 && (React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: rangeValueTitles[0] } },
-                rangeValueTitles[0],
-                React.createElement(Icon, { className: "collapse-btn", type: "icon-ants-angle-down", style: { fontSize: 9 } }))),
-            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"),
-                React.createElement(Text, { className: "range-date-title", ellipsis: { tooltip: title } }, title)))))))));
+    const renderDateTitle = (title) => (_jsx(Text, { className: "range-date-title", ellipsis: {
+            tooltip: 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

@@ -1,70 +1,29 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledBtnDisplayWrapper = styled.div `
   display: flex;
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: transparent;
   cursor: pointer;
   width: fit-content;
+  flex-direction: column;
+  gap: 4px;
+  line-height: 1.4;
 
   .range-type {
-    /* font-size: 0.75rem;
-    width: fit-content;
-    padding: 2px 8px; */
-
     display: block;
-    font-size: 0.813rem;
-    margin-right: 0.5rem;
-    color: rgb(127, 127, 127);
+    font-size: 11px;
+    padding: 3px 5px;
+    border-radius: 3px;
+    width: fit-content;
+    background-color: ${globalToken?.bw2};
+    line-height: inherit;
   }
 
-  .range-date {
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    border-image: initial;
-    background: transparent;
-    border-bottom: 1px solid rgb(184, 207, 230);
-    text-align: left;
-    display: flex;
-    -webkit-box-pack: justify;
-    justify-content: space-between;
-    -webkit-box-align: center;
-    align-items: center;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    max-width: unset;
-
-    .range-date-title {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .collapse-wrapper {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-      overflow: hidden;
-
-      .compare-title {
-        font-size: 11px;
-        color: #878d93;
-      }
-    }
-
-    .collapse-btn {
-      padding: 4px;
-    }
-
-    &.collapse {
-      .collapse-wrapper {
-        height: 0;
-      }
-
-      .collapse-btn {
-        transform: rotate(180deg);
-      }
-    }
+  .range-date-title {
+    padding: 3px 5px;
+    border-radius: 3px;
+    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/index.d.ts

@@ -21,5 +21,41 @@ export declare const CalendarSelectionConstants: {
         readonly days_up_to_today: "days_up_to_today";
         readonly days_up_to_yesterday: "days_up_to_yesterday";
     };
+    AUTO_UPDATE_TO_KEY: {
+        readonly today: "today";
+        readonly yesterday: "yesterday";
+        readonly fixed: "fixed";
+    };
 };
 export type { TriggerOutInfo, CalendarSelectionValue } from './types';
+export declare const CalendarSelectionUtils: {
+    getDefaultDate: () => {
+        toDay: string;
+        yesterday: string;
+        startWeekSS: string;
+        startWeekMS: string;
+        last7Days: string;
+        startLastWeekSS: string;
+        startLastWeekMS: string;
+        endLastWeekSS: string;
+        endLastWeekMS: string;
+        last14Days: string;
+        startOfThisMonth: string;
+        endOfThisMonth: string;
+        last30Days: string;
+        lastMonthFirstDate: string;
+        lastMonthLastDate: string;
+        thisQuaterFirstDate: string;
+        thisQuaterLastDate: string;
+        lastQuaterFirstDate: string;
+        lastQuaterLastDate: string;
+        maxSub: number;
+        todayUptoCount: (val: number) => string;
+        yesterdayUptoCount: (val: number) => string;
+    };
+    getRangeValue: ({ rangeInfo, currentRangeValue, limitNumOfDays, }: {
+        rangeInfo: import("./types").RangeInfo;
+        currentRangeValue?: import("./types").RangeValue[] | undefined;
+        limitNumOfDays?: number | undefined;
+    }) => import("./types").RangeValue[];
+};

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

@@ -1,6 +1,12 @@
-import { TRIGGER_OUT_MODE, SELECTION_KEY } from './constants';
+import { TRIGGER_OUT_MODE, SELECTION_KEY, AUTO_UPDATE_TO_KEY } from './constants';
+import { getDefaultDate, getRangeValue } from './utils';
 export { CalendarSelection } from './CalendarSelection';
 export const CalendarSelectionConstants = {
     TRIGGER_OUT_MODE,
     SELECTION_KEY,
+    AUTO_UPDATE_TO_KEY,
+};
+export const CalendarSelectionUtils = {
+    getDefaultDate,
+    getRangeValue,
 };

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/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+export declare const StyledPopover: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/popover").PopoverProps & import("react").RefAttributes<unknown>> & {
     _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
 }, any, {}, never>;
 export declare const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,5 +1,7 @@
-import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+// Libraries
 import styled from 'styled-components';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms/Popover';
 export const StyledPopover = styled(Popover) `
   font-size: 12px;
 `;

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

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

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

@@ -7,7 +7,7 @@ import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import { AUTO_UPDATE_TO_KEY, DEFAULT_NUM_UP_TO, MAP_TITLE, RANGE_LIMIT, SELECTION_KEY, } from './constants';
 import { last } from 'lodash';
-import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils/common';
+import { asssertCannotReach } from '@antscorp/antsomi-ui/es/utils';
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
@@ -94,7 +94,7 @@ export const generateRangeInfo = (rangeType) => {
     return rangeInfo;
 };
 export const getDefaultDate = () => {
-    const toDayTz = dayjs(new Date());
+    const toDayTz = dayjs().startOf('d');
     return {
         toDay: toDayTz.toISOString(),
         yesterday: toDayTz.subtract(1, 'd').toISOString(),
@@ -120,7 +120,12 @@ export const getDefaultDate = () => {
         yesterdayUptoCount: (val) => toDayTz.subtract(Math.round(val - 1) + 1, 'd').toISOString(),
     };
 };
-export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = RANGE_LIMIT, }) => {
+export const getRangeValue = ({ rangeInfo, currentRangeValue = [
+    {
+        start: dayjs(getDefaultDate().last7Days).toISOString(),
+        end: dayjs(getDefaultDate().yesterday).toISOString(),
+    },
+], limitNumOfDays = RANGE_LIMIT, }) => {
     const defaultDates = getDefaultDate();
     const result = currentRangeValue.map(rangeValue => {
         const temp = {
@@ -223,25 +228,28 @@ export const getRangeValue = ({ rangeInfo, currentRangeValue, limitNumOfDays = R
             default:
                 asssertCannotReach(rangeInfo);
         }
-        return Object.assign(Object.assign({}, rangeValue), temp);
+        return { ...rangeValue, ...temp };
     });
-    return result;
+    return result.map(range => ({
+        ...range,
+        start: dayjs(range.start).startOf('d').toISOString(),
+        end: dayjs(range.end).endOf('d').toISOString(),
+    }));
 };
 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;
 };
@@ -270,32 +278,6 @@ export const genTriggerOut = (() => {
         return { mode, id: id || catchedId };
     };
 })();
-// export const serializeRangeColors = (rangeValue: RangeValue[]) => {
-//   const listDate = rangeValue
-//     .flatMap(range => [range.start, range.end])
-//     .sort((a, b) => ascending(a.toDate(), b.toDate()));
-//   let rangeDates = listDate.reduce<RangeValue[]>((acc, current, idx) => {
-//     if (listDate[idx + 1]) {
-//       acc.push({ start: current, end: listDate[idx + 1] });
-//     }
-//     return acc;
-//   }, []);
-//   rangeDates = uniqWith(rangeDates, (a, b) => a.start.isSame(b.start) && a.end.isSame(b.end));
-//   rangeDates = rangeDates.map(rangeDate => {
-//     const colors: string[] = [];
-//     rangeValue.forEach(range => {
-//       if (
-//         range.color &&
-//         rangeDate.start.isBetween(range.start, range.end, 'd', '[]') &&
-//         rangeDate.end.isBetween(range.start, range.end, 'd', '[]')
-//       ) {
-//         colors.push(range.color);
-//       }
-//     });
-//     return { ...rangeDate, colors: uniq(colors) };
-//   });
-//   return rangeDates;
-// };
 export const isAutoUpdateToOption = (value) => {
     if (typeof value === 'string' && Object.values(AUTO_UPDATE_TO_KEY).some(v => v === value)) {
         return true;

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;