@ozen-ui/kit 0.60.0 → 0.62.0

package/__inner__/esm/components/DataList/DataList.css

@@ -28,7 +28,7 @@
   }
   .DataList {
   overflow: hidden auto;
-  max-block-size: 40vb;
+  max-block-size: 40vh;
 }
 .DataList-animation-enter {
     opacity: 0;

package/__inner__/esm/components/DatePicker/DatePicker.css

@@ -1,4 +1,15 @@
-.DatePicker-RenderRight {
+.DatePicker_mode_date-range {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+    .DatePicker_mode_date-range .DatePicker-Fields > * {
+        flex: 1 1 auto;
+      }
+  .DatePicker_fullWidth {
+    inline-size: 100%;
+  }
+  .DatePicker-RenderRight {
     display: flex;
     gap: var(--spacing-2xs);
   }

package/__inner__/esm/components/DatePicker/DatePicker.d.ts

@@ -1,39 +1,4 @@
 import './DatePicker.css';
-import React from 'react';
-import type { DatePickerOnChange } from './types';
+import type { DatePickerComponent } from './types';
 export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
-export declare const DatePicker: React.ForwardRefExoticComponent<(Omit<{
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onChange?: DatePickerOnChange;
-    onInputChange?: import("./types").DatePickerOnInputChange;
-    onClose?: () => void;
-    onOpen?: () => void;
-    calendarProps?: import("../Calendar").CalendarProps;
-    popoverProps?: import("../Popover").PopoverBaseProps;
-    clearText?: string;
-    disableClearButton?: boolean;
-    onError?: import("./types").DatePickerPropOnError;
-} & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
-    open?: boolean;
-    defaultOpen?: never;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref"> | Omit<{
-    value?: Date | null;
-    defaultValue?: Date | null;
-    onChange?: DatePickerOnChange;
-    onInputChange?: import("./types").DatePickerOnInputChange;
-    onClose?: () => void;
-    onOpen?: () => void;
-    calendarProps?: import("../Calendar").CalendarProps;
-    popoverProps?: import("../Popover").PopoverBaseProps;
-    clearText?: string;
-    disableClearButton?: boolean;
-    onError?: import("./types").DatePickerPropOnError;
-} & Pick<import("../Calendar").CalendarProps, "exclude" | "offsetDate" | "minDate" | "maxDate"> & Pick<import("../Input").InputProps, "error" | "label" | "onKeyDown" | "disabled" | "placeholder" | "required" | "size" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps"> & {
-    open?: never;
-    defaultOpen?: boolean;
-} & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "value" | "defaultValue" | "error" | "label" | "onChange" | "onError" | "onKeyDown" | "disabled" | "open" | "onClose" | "placeholder" | "required" | "size" | "exclude" | "fullWidth" | "disableStroke" | "hint" | "renderLeft" | "renderRight" | "inputProps" | "hintProps" | "clearText" | "disableClearButton" | "onInputChange" | "onOpen" | "defaultOpen" | "popoverProps" | "offsetDate" | "minDate" | "maxDate" | "calendarProps">, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: DatePickerComponent;

package/__inner__/esm/components/DatePicker/DatePicker.js

@@ -1,157 +1,23 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import './DatePicker.css';
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { useControlled } from '../../hooks/useControlled';
+import React, { forwardRef } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { getPaperSizeToFormElement } from '../../utils/getPaperSizeToFormElement';
-import { isKeys } from '../../utils/isKeys';
-import { Calendar } from '../Calendar';
-import { Paper } from '../Paper';
-import { Popover } from '../Popover';
-import { DateInput, DatePickerRenderRight } from './components';
-import { isCompleted } from './components/DateInput/utils';
-import { DATE_PICKER_DEFAULT_SIZE } from './constants';
-import { formatDateToString, formatStringToDate, isInExclude, isOutOfRange, getCalendarSizeToFormElement, } from './utils';
+import { getByMap } from '../../utils/getByMap';
+import { DatePickerModeDate, DatePickerModeDateRange } from './components';
+import { DATE_PICKER_DEFAULT_SIZE, DATE_PICKER_DEFAULT_MODE, } from './constants';
+var typeMap = {
+    date: DatePickerModeDate,
+    'date-range': DatePickerModeDateRange,
+};
 export var cnDatePicker = cn('DatePicker');
+// eslint-disable-next-line react/display-name
 export var DatePicker = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'DatePicker',
     });
-    var _a = props.size, size = _a === void 0 ? DATE_PICKER_DEFAULT_SIZE : _a, label = props.label, error = props.error, required = props.required, fullWidth = props.fullWidth, placeholder = props.placeholder, hint = props.hint, valueProp = props.value, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, offsetDate = props.offsetDate, inputProps = props.inputProps, calendarProps = props.calendarProps, popoverProps = props.popoverProps, renderRight = props.renderRight, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, className = props.className, autoFocus = props.autoFocus, onError = props.onError, other = __rest(props, ["size", "label", "error", "required", "fullWidth", "placeholder", "hint", "value", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "offsetDate", "inputProps", "calendarProps", "popoverProps", "renderRight", "disableClearButton", "onChange", "onKeyDown", "className", "autoFocus", "onError"]);
-    var anchorRef = useRef(null);
-    var lastValidDate = useRef('');
-    var _b = __read(useControlled({
-        value: undefined,
-        defaultValue: '',
-        name: 'DatePicker',
-        state: 'inputValue',
-    }), 2), inputValue = _b[0], setInputValue = _b[1];
-    var _c = __read(useControlled({
-        value: openProp,
-        defaultValue: defaultOpen,
-        name: 'DatePicker',
-        state: 'open',
-    }), 2), open = _c[0], setOpen = _c[1];
-    var _d = __read(useControlled({
-        value: valueProp,
-        defaultValue: defaultValue,
-        name: 'DatePicker',
-        state: 'value',
-    }), 2), value = _d[0], setValue = _d[1];
-    /** Соотношение размера календаря к размеру элемента контроля */
-    var calendarSize = getCalendarSizeToFormElement(size);
-    /** Вычисление border-radius по размеру компонента */
-    var radius = getPaperSizeToFormElement(size);
-    var callOnChange = function (value) {
-        var formattedDate = formatStringToDate(value);
-        setValue(formattedDate);
-        onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
-        lastValidDate.current = value;
-    };
-    var changeInputValue = function (e, value) {
-        setInputValue(value);
-        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
-        if (isCompleted(value) || value === '')
-            callOnChange(value);
-    };
-    /** Эффект — автофокусировка в текстовом поле */
-    useEffect(function () {
-        var _a;
-        if (autoFocus)
-            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [autoFocus]);
-    /** Эффект — синхронизируем значение текстового поля со значением в списке */
-    useEffect(function () {
-        var formattedDate = formatDateToString(value);
-        if (formattedDate !== inputValue) {
-            setInputValue(formattedDate);
-            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
-            lastValidDate.current = formattedDate;
-        }
-    }, [value]);
-    /** Эффект для обработки ошибок */
-    useEffect(function () {
-        if (isInExclude({ exclude: exclude, value: value })) {
-            onError === null || onError === void 0 ? void 0 : onError({
-                type: 'inExclude',
-                inputValue: inputValue,
-                value: value,
-            });
-        }
-        if (isOutOfRange({ minDate: minDate, maxDate: maxDate, value: value })) {
-            onError === null || onError === void 0 ? void 0 : onError({
-                type: 'outOfRange',
-                inputValue: inputValue,
-                value: value,
-            });
-        }
-    }, [value, inputValue, onError, minDate, maxDate, exclude]);
-    /** Закрытие */
-    var handleClose = function () {
-        setOpen(false);
-        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
-    };
-    /** Открытие */
-    var handleOpen = function () {
-        setOpen(true);
-        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
-    };
-    /** Переключатель открытия и закрытия */
-    var handleToggle = function () {
-        if (disabled)
-            return;
-        if (open)
-            handleClose();
-        else
-            handleOpen();
-    };
-    /** Открытие списка по клику на текстовом поле */
-    var handleClickOnInput = function (e) {
-        var _a;
-        handleToggle();
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-    };
-    /** Управление элементом контроля через клавиатуру */
-    var handleKeyDown = function (event) {
-        if (isKeys(event, ['ArrowDown', 'ArrowUp']) && !open) {
-            event.preventDefault();
-            handleToggle();
-        }
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    };
-    /** Актуализация значения текстового поля после его покидания */
-    var handleBlur = function (e) {
-        var _a;
-        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
-        if (!inputValue)
-            return;
-        if (!isCompleted(inputValue))
-            changeInputValue(null, lastValidDate.current);
-    };
-    /** Очистка поля */
-    var handleClear = function () {
-        changeInputValue(null, '');
-    };
-    /** Событие ввода значения в текстовом поле */
-    var handleChangeInput = function (e) {
-        var value = e.target.value;
-        changeInputValue(e, value);
-    };
-    /** Событие выбора значения из календаря */
-    var handleChangeCalendar = function (date) {
-        var formattedDate = formatDateToString(date);
-        changeInputValue(null, formattedDate);
-        handleClose();
-    };
-    /** Предотвращаем переход фокуса с текстового поля на интерактивные элементы календаря */
-    var handleMouseDownCalendar = function (e) {
-        e.preventDefault();
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(DateInput, __assign({ size: size, hint: hint, error: error, label: label, required: required, disabled: disabled, fullWidth: fullWidth, placeholder: placeholder }, other, { renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onInput: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, className: cnDatePicker({ size: size }, [className]), onKeyDown: handleKeyDown, ref: ref })),
-        React.createElement(Popover, __assign({ as: Paper, open: open, offset: [0, 4], radius: radius, anchorRef: anchorRef, onClose: handleClose, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true }, popoverProps),
-            React.createElement(Calendar, __assign({ minDate: minDate, maxDate: maxDate, exclude: exclude, size: calendarSize, offsetDate: offsetDate, onMouseDown: handleMouseDownCalendar }, calendarProps, { value: value || null, onChange: handleChangeCalendar })))));
+    var _a = props.size, size = _a === void 0 ? DATE_PICKER_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? DATE_PICKER_DEFAULT_MODE : _b, other = __rest(props, ["size", "mode"]);
+    var Component = getByMap(typeMap, mode);
+    return React.createElement(Component, __assign({ size: size }, other, { ref: ref }));
 });
-DatePicker.displayName = 'DatePicker';

package/__inner__/esm/components/DatePicker/components/DateInput/DateInput.js

@@ -1,11 +1,10 @@
 import { __assign, __rest } from "tslib";
 import React, { forwardRef } from 'react';
-import { CalendarIcon } from '@ozen-ui/icons';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { Input } from '../../../Input';
 import { dateInputMask } from './utils';
 export var DateInput = forwardRef(function (_a, ref) {
     var valueProp = _a.value, defaultValue = _a.defaultValue, other = __rest(_a, ["value", "defaultValue"]);
-    return (React.createElement(Input, __assign({ renderRight: CalendarIcon, value: dateInputMask(valueProp), defaultValue: dateInputMask(defaultValue) }, other, { ref: useMultiRef([ref]) })));
+    return (React.createElement(Input, __assign({ value: dateInputMask(valueProp), defaultValue: dateInputMask(defaultValue) }, other, { ref: useMultiRef([ref]) })));
 });
 DateInput.displayName = 'DateInput';

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.d.ts

@@ -1,2 +1 @@
-export declare const isCompleted: (value: string) => boolean;
 export declare const dateInputMask: (value: string | undefined) => string | undefined;

package/__inner__/esm/components/DatePicker/components/DateInput/utils/dateInputMask/dateInputMask.js

@@ -1,4 +1,3 @@
-export var isCompleted = function (value) { return value.length === 10; };
 export var dateInputMask = function (value) {
     if (!value) {
         return value;

package/__inner__/esm/components/DatePicker/components/DatePickerModeDate/DatePickerModeDate.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerModeComponent } from '../../types';
+export declare const DatePickerModeDate: DatePickerModeComponent<'date'>;

package/__inner__/esm/components/DatePicker/components/DatePickerModeDate/DatePickerModeDate.js

@@ -0,0 +1,156 @@
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState, forwardRef, useRef } from 'react';
+import { useControlled } from '../../../../hooks/useControlled';
+import { useMultiRef } from '../../../../hooks/useMultiRef';
+import { isKeys } from '../../../../utils/isKeys';
+import { Calendar } from '../../../Calendar';
+import { Popover } from '../../../Popover';
+import { cnDatePicker } from '../../index';
+import { formatDateToString, formatStringToDate, getCommonCalendarProps, getCommonPopoverProps, isInExclude, isValidDateString, isOutOfRange, useCalendarKeyboard, } from '../../utils';
+import { DateInput, DatePickerRenderRight } from '../index';
+// eslint-disable-next-line react/display-name
+export var DatePickerModeDate = forwardRef(function (props, ref) {
+    var size = props.size, valueProp = props.value, label = props.label, defaultValue = props.defaultValue, openProp = props.open, onCloseProp = props.onClose, onOpenProp = props.onOpen, onInputChange = props.onInputChange, clearText = props.clearText, defaultOpen = props.defaultOpen, disabled = props.disabled, minDate = props.minDate, maxDate = props.maxDate, exclude = props.exclude, inputProps = props.inputProps, renderRight = props.renderRight, className = props.className, _a = props.calendars, calendars = _a === void 0 ? 1 : _a, disableClearButton = props.disableClearButton, onChange = props.onChange, onKeyDown = props.onKeyDown, autoFocus = props.autoFocus, disableCloseOnSelect = props.disableCloseOnSelect, popoverPropsProp = props.popoverProps, calendarPropsProp = props.calendarProps, onError = props.onError, other = __rest(props, ["size", "value", "label", "defaultValue", "open", "onClose", "onOpen", "onInputChange", "clearText", "defaultOpen", "disabled", "minDate", "maxDate", "exclude", "inputProps", "renderRight", "className", "calendars", "disableClearButton", "onChange", "onKeyDown", "autoFocus", "disableCloseOnSelect", "popoverProps", "calendarProps", "onError"]);
+    var anchorRef = useRef(null);
+    var calendarInnerRef = useRef(null);
+    var calendarRef = useMultiRef([calendarInnerRef, calendarPropsProp === null || calendarPropsProp === void 0 ? void 0 : calendarPropsProp.ref]);
+    var lastValidDate = useRef('');
+    var _b = __read(useState(null), 2), offsetDate = _b[0], setOffsetDate = _b[1];
+    var _c = __read(useControlled({
+        value: undefined,
+        defaultValue: '',
+        name: 'DatePicker',
+        state: 'inputValue',
+    }), 2), inputValue = _c[0], setInputValue = _c[1];
+    var _d = __read(useControlled({
+        value: openProp,
+        defaultValue: defaultOpen,
+        name: 'DatePicker',
+        state: 'open',
+    }), 2), open = _d[0], setOpen = _d[1];
+    var _e = __read(useControlled({
+        value: valueProp,
+        defaultValue: defaultValue,
+        name: 'DatePicker',
+        state: 'value',
+    }), 2), value = _e[0], setValue = _e[1];
+    var popoverProps = getCommonPopoverProps(__assign(__assign({}, props), { popoverProps: popoverPropsProp }));
+    var calendarProps = getCommonCalendarProps(__assign(__assign({}, props), { calendarProps: calendarPropsProp, ref: calendarRef }));
+    var onOffsetDateChange = function (date) {
+        setOffsetDate(date);
+    };
+    var callOnChange = function (value) {
+        var formattedDate = formatStringToDate(value);
+        setValue(formattedDate);
+        onChange === null || onChange === void 0 ? void 0 : onChange(formattedDate);
+        lastValidDate.current = value;
+    };
+    var changeInputValue = function (e, value) {
+        setInputValue(value);
+        onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e, value);
+        if (isValidDateString(value)) {
+            callOnChange(value);
+            onOffsetDateChange(formatStringToDate(value));
+        }
+    };
+    var handleExited = function () {
+        var _a;
+        onOffsetDateChange(null);
+        (_a = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.onExited) === null || _a === void 0 ? void 0 : _a.call(popoverProps);
+    };
+    /** Enables calendar keyboard interaction */
+    var enableEnforceFocus = useCalendarKeyboard({
+        controlRef: anchorRef,
+        calendarRef: calendarInnerRef,
+        active: open,
+    });
+    /** Эффект — автофокусировка в текстовом поле */
+    useEffect(function () {
+        var _a;
+        if (autoFocus)
+            (_a = anchorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [autoFocus]);
+    /** Эффект — синхронизируем значение текстового поля со значением в списке */
+    useEffect(function () {
+        var formattedDate = formatDateToString(value);
+        if (formattedDate !== inputValue) {
+            setInputValue(formattedDate);
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(null, formattedDate);
+            lastValidDate.current = formattedDate;
+        }
+    }, [value]);
+    /** Эффект для обработки ошибок */
+    useEffect(function () {
+        if (isInExclude({ exclude: exclude, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'inExclude',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+        if (isOutOfRange({ minDate: minDate, maxDate: maxDate, value: value })) {
+            onError === null || onError === void 0 ? void 0 : onError({
+                type: 'outOfRange',
+                inputValue: inputValue,
+                value: value,
+            });
+        }
+    }, [value, inputValue, onError, minDate, maxDate, exclude]);
+    /** Закрытие */
+    var handleClose = function () {
+        setOpen(false);
+        onCloseProp === null || onCloseProp === void 0 ? void 0 : onCloseProp();
+    };
+    /** Открытие */
+    var handleOpen = function () {
+        if (disabled || open)
+            return;
+        setOpen(true);
+        onOpenProp === null || onOpenProp === void 0 ? void 0 : onOpenProp();
+    };
+    /** Открытие списка по клику на текстовом поле */
+    var handleClickOnInput = function (e) {
+        var _a;
+        handleOpen();
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onClick) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Управление элементом контроля через клавиатуру */
+    var handleKeyDown = function (event) {
+        if (isKeys(event, ['ArrowDown', 'ArrowUp'])) {
+            event.preventDefault();
+            handleOpen();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+    };
+    /** Актуализация значения текстового поля после его покидания */
+    var handleBlur = function (e) {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+        if (!inputValue)
+            return;
+        if (!isValidDateString(inputValue))
+            changeInputValue(null, lastValidDate.current);
+    };
+    /** Очистка поля */
+    var handleClear = function () {
+        changeInputValue(null, '');
+    };
+    /** Событие ввода значения в текстовом поле */
+    var handleChangeInput = function (e) {
+        var _a;
+        var value = e.target.value;
+        changeInputValue(e, value);
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+    };
+    /** Событие выбора значения из календаря */
+    var handleChangeCalendar = function (date) {
+        var formattedDate = formatDateToString(date);
+        changeInputValue(null, formattedDate);
+        if (!disableCloseOnSelect)
+            handleClose();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DateInput, __assign({ size: size, disabled: disabled, label: label }, other, { className: cnDatePicker({ mode: 'date' }, className), renderRight: React.createElement(DatePickerRenderRight, { size: size, open: open, onClear: handleClear, clearText: clearText, hasValue: !!value, renderRight: renderRight, disableClearButton: disableClearButton }), value: inputValue, inputProps: __assign(__assign({ autoComplete: 'off' }, inputProps), { onBlur: handleBlur, onClick: handleClickOnInput, onChange: handleChangeInput }), bodyProps: { ref: anchorRef, 'aria-expanded': open }, onKeyDown: handleKeyDown, ref: ref })),
+        React.createElement(Popover, __assign({ open: open, anchorRef: anchorRef, onClose: handleClose }, popoverProps, { disableEnforceFocus: !enableEnforceFocus, onExited: handleExited }),
+            React.createElement(Calendar, __assign({ calendars: calendars }, calendarProps, { mode: "single", value: value || null, offsetDate: offsetDate, onOffsetDateChange: onOffsetDateChange, onChange: handleChangeCalendar })))));
+});

package/__inner__/esm/components/DatePicker/components/DatePickerModeDate/index.d.ts

@@ -0,0 +1 @@
+export * from './DatePickerModeDate';

package/__inner__/esm/components/DatePicker/components/DatePickerModeDate/index.js

@@ -0,0 +1 @@
+export * from './DatePickerModeDate';

package/__inner__/esm/components/DatePicker/components/DatePickerModeDateRange/DatePickerModeDateRange.d.ts

@@ -0,0 +1,2 @@
+import type { DatePickerModeComponent } from '../../types';
+export declare const DatePickerModeDateRange: DatePickerModeComponent<'date-range'>;