@antscorp/antsomi-ui 1.3.5-beta.72 → 1.3.5-beta.721

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

@@ -0,0 +1,53 @@
+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 Icon from '@antscorp/icons';
+import React, { useCallback, useEffect, useState } from 'react';
+// Styled
+import { PopoverFieldStyled } from './styled';
+// Components
+import { Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Tooltip } from 'antd';
+import { AccountListing } from './AccountListing';
+// Constants
+import { useAccountSelection } from './hooks';
+export const AccountSelection = props => {
+    const { show = true, inputStyle = 'input', inputClassName, onChange, getPopupContainer, zIndex, refreshOnSelect } = props, accountListingProps = __rest(props, ["show", "inputStyle", "inputClassName", "onChange", "getPopupContainer", "zIndex", "refreshOnSelect"]);
+    const { apiConfig, currentAccount = '' } = props;
+    // States
+    const [inputLabel, setInputLabel] = useState('');
+    const [open, setOpen] = useState(false);
+    const { accountData, refetchRecentAccount } = useAccountSelection(apiConfig);
+    // Side Effects
+    useEffect(() => {
+        var _a;
+        const newLabel = currentAccount === 'all'
+            ? 'All accounts'
+            : ((_a = accountData === null || accountData === void 0 ? void 0 : accountData.find(account => account.userId === +currentAccount)) === null || _a === void 0 ? void 0 : _a.userName) || '';
+        setInputLabel(newLabel);
+    }, [currentAccount, accountData]);
+    // Handlers
+    const handleSelectAccount = useCallback((userId) => {
+        setOpen(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(String(userId));
+    }, [onChange]);
+    useEffect(() => {
+        if (open && refreshOnSelect) {
+            refetchRecentAccount();
+        }
+    }, [open, refreshOnSelect, refetchRecentAccount]);
+    return (show && (React.createElement(Popover, { content: React.createElement(AccountListing, Object.assign({}, accountListingProps, { onChange: handleSelectAccount })), trigger: "click", overlayInnerStyle: { padding: 0 }, getPopupContainer: getPopupContainer, placement: "bottomLeft", arrow: false, open: open, onOpenChange: setOpen, zIndex: zIndex || 1300 },
+        React.createElement(PopoverFieldStyled, { className: `${inputStyle || ''} ${inputClassName || ''}` },
+            React.createElement(Tooltip, { title: inputLabel },
+                React.createElement("span", { className: !inputLabel ? 'is-placeholder' : '' }, inputLabel || 'Select an account')),
+            React.createElement(Icon, { type: "icon-ants-angle-right", style: { width: '20px', textAlign: 'center', transform: 'rotate(90deg)' } })))));
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { AccountRecent } from '@antscorp/antsomi-ui/es/models/AccountListing';
+interface AccountData {
+    email: any;
+    userId: any;
+    userName: any;
+    status: number;
+}
+export declare const useAccountSelection: (apiConfig: {
+    domain: string;
+    permissionDomain?: string;
+    token: string;
+    userId: number;
+    portalId?: number;
+    languageCode?: string;
+    appCode?: string;
+    menuCode?: string;
+}) => {
+    recentData?: AccountRecent;
+    accountData: Array<AccountData>;
+    updateRecentAccount: (values: [number, number]) => void;
+    refetchRecentAccount: () => void;
+};
+export {};

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

@@ -0,0 +1,60 @@
+// Libraries
+import { useMemo } from 'react';
+// Queries
+import { useGetAccountList, useGetPermissionAccountList, useGetRecentAccount, useUpdateRecentAccount, } from '@antscorp/antsomi-ui/es/queries';
+// Constant
+import { APP_CODES } from '@antscorp/antsomi-ui/es/constants';
+const { APP_ANTALYSER, DATAFLOWS } = APP_CODES;
+// NOTES: Just define for account selection
+const isUsePermissionAccount = (appCode) => {
+    if ([APP_ANTALYSER, DATAFLOWS].includes(appCode)) {
+        return true;
+    }
+    return false;
+};
+export const useAccountSelection = (apiConfig) => {
+    const { permissionDomain, token, userId, appCode, menuCode } = apiConfig;
+    const { data } = useGetAccountList({
+        apiConfig,
+        options: {
+            enabled: !isUsePermissionAccount(appCode || '') && !!token && !!apiConfig.portalId,
+        },
+    });
+    const { data: permissionAccountList } = useGetPermissionAccountList({
+        args: {
+            _account_id: userId,
+            _user_id: userId,
+            _app_code: appCode || '',
+            _token: token,
+            domain: permissionDomain || '',
+            appCode: appCode || '',
+            fullParent: true,
+            menuCode: menuCode || appCode || '',
+        },
+        options: {
+            enabled: isUsePermissionAccount(appCode || '') && !!token && !!userId && !!permissionDomain,
+        },
+    });
+    const { data: recentData, refetch: refetchRecentAccount } = useGetRecentAccount({
+        apiConfig,
+        options: {
+            enabled: !isUsePermissionAccount(appCode || ''),
+        },
+    });
+    const { mutateAsync: updateRecentAccount } = useUpdateRecentAccount({
+        apiConfig,
+    });
+    // Memos
+    const accountData = useMemo(() => {
+        if (isUsePermissionAccount(appCode || '')) {
+            return ((permissionAccountList === null || permissionAccountList === void 0 ? void 0 : permissionAccountList.map(account => ({
+                email: account.email,
+                userId: account.user_id,
+                userName: account.full_name,
+                status: 1,
+            }))) || []);
+        }
+        return (data === null || data === void 0 ? void 0 : data.entries) || [];
+    }, [appCode, data === null || data === void 0 ? void 0 : data.entries, permissionAccountList]);
+    return { recentData, accountData, updateRecentAccount, refetchRecentAccount };
+};

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

@@ -0,0 +1,3 @@
+export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
+export { AccountListing, type AccountListingHandle } from './AccountListing';
+export { useAccountSelection } from './hooks';

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

@@ -0,0 +1,3 @@
+export { AccountSelection } from './AccountSelection';
+export { AccountListing } from './AccountListing';
+export { useAccountSelection } from './hooks';

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

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

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

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

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

@@ -99,3 +99,20 @@ export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
         };
     };
 };
+export declare const COLLECTION_STATUS: {
+    2: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+};

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

@@ -150,3 +150,20 @@ export const ATTRIBUTE_NUMBERIC_FORMAT_OPTION = {
         },
     },
 };
+export const COLLECTION_STATUS = {
+    2: {
+        value: 2,
+        label: 'Disable',
+        errorMessage: 'This collection is disabled',
+    },
+    4: {
+        value: 4,
+        label: 'Archive',
+        errorMessage: 'This collection is not available',
+    },
+    DELETE: {
+        value: 3,
+        label: 'Delete',
+        errorMessage: 'This collection does not exist',
+    },
+};

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

@@ -6,7 +6,7 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

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

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

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

@@ -1,3 +1,3 @@
 import { TAlign } from './index';
-export declare const mapAlignToJustifyContent: (value: TAlign) => "center" | "auto" | "end" | "start";
+export declare const mapAlignToJustifyContent: (value: TAlign) => "auto" | "center" | "end" | "start";
 export declare const mapJustifyContentToAlign: (value: 'start' | 'end' | 'center') => string | undefined;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ButtonProps, FlexProps } from '@antscorp/antsomi-ui/es/components/atoms';
+export interface ApplyPopupContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The title of the popup content */
+    title?: string;
+    /** Properties for the cancel button. */
+    cancelButtonProps?: ButtonProps;
+    /** Properties for the apply button. */
+    applyButtonProps?: ButtonProps;
+    /** Properties for the footer Flex container, excluding children. */
+    footerProps?: Omit<FlexProps, 'children'>;
+    /** Handler for the cancel button click event. */
+    onCancel?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /** Handler for the apply button click event. */
+    onApply?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+}
+export declare const ApplyPopupContent: React.FC<React.PropsWithChildren<ApplyPopupContentProps>>;

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

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import clsx from 'clsx';
+// Components
+import { Flex, Typography, Icon, Button, } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { CloseButton, ContentWrapper } from './styled';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Constants
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const { Text } = Typography;
+export const ApplyPopupContent = props => {
+    const { title, children, cancelButtonProps, applyButtonProps, footerProps, onApply, onCancel } = props, restProps = __rest(props, ["title", "children", "cancelButtonProps", "applyButtonProps", "footerProps", "onApply", "onCancel"]);
+    const { align = 'center', justify = 'flex-end' } = footerProps || {};
+    const { t } = i18nInstance;
+    return (React.createElement(ContentWrapper, Object.assign({}, restProps),
+        React.createElement(Flex, { className: "content__body", vertical: true, gap: 20 },
+            React.createElement(Flex, { align: "center", justify: "space-between" },
+                React.createElement(Text, { className: "content__title", ellipsis: { tooltip: true } }, title),
+                React.createElement(CloseButton, { align: "center", justify: "center", onClick: onCancel },
+                    React.createElement(Icon, { type: "icon-ants-remove-slim" }))),
+            children),
+        React.createElement(Flex, Object.assign({}, footerProps, { align: align, justify: justify, className: clsx('content__footer', footerProps === null || footerProps === void 0 ? void 0 : footerProps.className) }),
+            React.createElement(Button, Object.assign({ onClick: onCancel }, cancelButtonProps), t(translations.cancel.title).toString()),
+            React.createElement(Button, Object.assign({ type: "primary", onClick: onApply }, applyButtonProps), t(translations.apply.title).toString()))));
+};

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

@@ -0,0 +1,2 @@
+export { ApplyPopupContent } from './ApplyPopupContent';
+export type { ApplyPopupContentProps } from './ApplyPopupContent';

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

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

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

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
 import React, { useLayoutEffect, useReducer, useRef } from 'react';
-import { Divider } from 'antd';
+import { Divider, ConfigProvider as AntdConfigProvider } from 'antd';
 import { ActionContext, StateContext } from './context';
 import { reducer, INITIAL_STATE } from './reducer';
 import { StyledPopover, StyledPopoverBody, StyledPopoverContainer } from './styled';
@@ -13,9 +13,9 @@ export const CalendarSelection = props => {
     const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value)
+        if (!value || initialed.current)
             return;
-        dispatch(initState(value, !initialed.current));
+        dispatch(initState(value, initialed.current));
         initialed.current = true;
     }, [value]);
     useLayoutEffect(() => {
@@ -34,12 +34,21 @@ export const CalendarSelection = props => {
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);
-    return (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 => {
-                    if (!isOpen)
-                        dispatch({ type: 'toggle_popover' });
-                } }),
-                React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps))))));
+    return (React.createElement(AntdConfigProvider, { theme: {
+            components: {
+                Popover: {
+                    borderRadiusLG: 0,
+                    borderRadius: 0,
+                    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 => {
+                        if (!isOpen)
+                            dispatch({ type: 'toggle_popover' });
+                    } }),
+                    React.createElement(TimeRangeDisplay, Object.assign({}, timeDisplayProps)))))));
 };

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

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

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

@@ -65,44 +65,45 @@ export const CustomPicker = props => {
         return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
     }, [rangeValue]);
     return (React.createElement(StyledCustomPickerRoot, null,
-        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("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 })));
 };