@ozen-ui/kit 0.61.0 → 0.62.0

package/__inner__/cjs/components/AutocompleteNext/Autocomplete.css

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

package/__inner__/cjs/components/Calendar/Calendar.js

@@ -19,8 +19,8 @@ exports.Calendar = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? constants_1.CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _c, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "mode", "startDay", "getPeriodSwitchAriaLabel"]);
+    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.mode, mode = _b === void 0 ? constants_1.CALENDAR_DEFAULT_MODE : _b, _c = props.startDay, startDay = _c === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _c, _d = props.calendars, calendars = _d === void 0 ? constants_1.CALENDAR_DEFAULT_CALENDARS : _d, getPeriodSwitchAriaLabelProp = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "mode", "startDay", "calendars", "getPeriodSwitchAriaLabel"]);
     var getPeriodSwitchAriaLabel = getPeriodSwitchAriaLabelProp || utils_1.getPeriodSwitchAriaLabel;
     var Component = (0, getByMap_1.getByMap)(typeMap, mode);
-    return (react_1.default.createElement(Component, tslib_1.__assign({ size: size, startDay: startDay, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
+    return (react_1.default.createElement(Component, tslib_1.__assign({ size: size, startDay: startDay, calendars: calendars, getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel }, other, { ref: ref })));
 });

package/__inner__/cjs/components/Calendar/CalendarContext.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import type { CalendarSizeVariant, CalendarProps } from './types';
+import type { CalendarPropSize, CalendarProps } from './types';
 export interface CalendarContextValue {
     minDate?: Date;
     maxDate?: Date;
-    size?: CalendarSizeVariant;
-    onOffsetChange?(d: Date): void;
+    size?: CalendarPropSize;
     onDayClick?: CalendarProps['onDayClick'];
     onYearClick?: CalendarProps['onYearClick'];
     onMonthClick?: CalendarProps['onMonthClick'];

package/__inner__/cjs/components/Calendar/components/CalendarGridItem/types.d.ts

@@ -1,12 +1,12 @@
 import type { ComponentRef } from 'react';
 import type { DPDayRange } from '@rehookify/datepicker';
 import type { ExtendableComponentPropsWithRef } from '../../../../types/ExtendableComponentPropsWithRef';
-import type { CalendarSizeVariant } from '../../index';
+import type { CalendarPropSize } from '../../index';
 export type CalendarGridItemRef = ComponentRef<'button'>;
 export type CalendarGridItemProps = ExtendableComponentPropsWithRef<{
     current?: boolean;
     selected?: boolean;
     disabled?: boolean;
     range?: DPDayRange;
-    size?: CalendarSizeVariant;
+    size?: CalendarPropSize;
 }, 'button'>;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/CalendarModeRange.d.ts

@@ -1,2 +1,2 @@
-import type { CalendarTypeComponent } from '../../types';
-export declare const CalendarModeRange: CalendarTypeComponent<'range'>;
+import type { CalendarModeComponent } from '../../types';
+export declare const CalendarModeRange: CalendarModeComponent<'range'>;

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/CalendarModeRange.js

@@ -7,8 +7,8 @@ var datepicker_1 = require("@rehookify/datepicker");
 var useControlled_1 = require("../../../../hooks/useControlled");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var CalendarContext_1 = require("../../CalendarContext");
-var constants_1 = require("../../constants");
 var utils_1 = require("../../utils");
+var index_1 = require("../index");
 var components_1 = require("./components");
 // eslint-disable-next-line react/display-name
 exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
@@ -16,41 +16,37 @@ exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
         props: inProps,
         name: 'Calendar',
     });
-    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _b, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
-    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onCalendarsChange = props.onCalendarsChange, onOffsetDateChangeProp = props.onOffsetDateChange, calendars = props.calendars, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onCalendarsChange", "onOffsetDateChange", "calendars", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
+    var _a = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Calendar',
         state: 'value',
-    }), 2), value = _c[0], setValue = _c[1];
-    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), value = _a[0], setValue = _a[1];
+    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
         value: offsetDateProp,
         defaultValue: defaultOffsetDate,
         name: 'Calendar',
         state: 'offsetDate',
-    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
+    var onOffsetChange = function (date) {
+        setOffsetDateState(date);
+        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
+    };
     var onDatesChange = function (data) {
         if (data) {
             setValue(data);
             onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(data);
         }
     };
-    var onOffsetChange = function (date) {
-        setOffsetDateState(date);
-        onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
-    };
     var config = {
-        calendar: {
-            startDay: startDay,
-            offsets: [1],
-        },
+        calendar: tslib_1.__assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
         locale: {
             locale: locale,
             day: 'numeric',
             weekday: 'short',
         },
         exclude: exclude,
-        offsetDate: offsetDate,
         onDatesChange: onDatesChange,
         onOffsetChange: onOffsetChange,
         dates: {
@@ -59,8 +55,9 @@ exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
             mode: 'range',
             selectSameDate: true,
         },
-        years: { numberOfYears: 15 },
         selectedDates: value || [],
+        years: { numberOfYears: 15 },
+        offsetDate: offsetDate || undefined,
     };
     return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
         react_1.default.createElement(CalendarContext_1.CalendarContext.Provider, { value: {
@@ -71,9 +68,8 @@ exports.CalendarModeRange = (0, react_1.forwardRef)(function (inProps, ref) {
                 onYearClick: onYearClick,
                 onMonthClick: onMonthClick,
                 getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-                onOffsetChange: onOffsetChange,
             } },
             react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
-                react_1.default.createElement(components_1.CalendarConsumer, null),
+                react_1.default.createElement(index_1.Calendars, { onCalendarsChange: onCalendarsChange }),
                 react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/index.d.ts

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/cjs/components/Calendar/components/CalendarModeRange/components/index.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);
-tslib_1.__exportStar(require("./CalendarConsumer"), exports);

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.d.ts

@@ -1,2 +1,2 @@
-import type { CalendarTypeComponent } from '../../types';
-export declare const CalendarModeSingle: CalendarTypeComponent<'single'>;
+import type { CalendarModeComponent } from '../../types';
+export declare const CalendarModeSingle: CalendarModeComponent<'single'>;

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/CalendarModeSingle.js

@@ -5,30 +5,25 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var datepicker_1 = require("@rehookify/datepicker");
 var useControlled_1 = require("../../../../hooks/useControlled");
-var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var CalendarContext_1 = require("../../CalendarContext");
-var constants_1 = require("../../constants");
 var utils_1 = require("../../utils");
+var index_1 = require("../index");
 var components_1 = require("./components");
 // eslint-disable-next-line react/display-name
-exports.CalendarModeSingle = (0, react_1.forwardRef)(function (inProps, ref) {
-    var props = (0, useThemeProps_1.useThemeProps)({
-        props: inProps,
-        name: 'Calendar',
-    });
-    var _a = props.size, size = _a === void 0 ? constants_1.CALENDAR_DEFAULT_SIZE : _a, _b = props.startDay, startDay = _b === void 0 ? constants_1.CALENDAR_DEFAULT_START_DAY : _b, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "defaultOffsetDate", "exclude", "minDate", "maxDate", "className", "getPeriodSwitchAriaLabel"]);
-    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
+exports.CalendarModeSingle = (0, react_1.forwardRef)(function (props, ref) {
+    var size = props.size, startDay = props.startDay, renderAdditionalControls = props.renderAdditionalControls, locale = props.locale, onChangeProp = props.onChange, onOffsetDateChangeProp = props.onOffsetDateChange, onMonthClick = props.onMonthClick, onDayClick = props.onDayClick, onYearClick = props.onYearClick, valueProp = props.value, defaultValue = props.defaultValue, offsetDateProp = props.offsetDate, onCalendarsChange = props.onCalendarsChange, defaultOffsetDate = props.defaultOffsetDate, exclude = props.exclude, minDate = props.minDate, maxDate = props.maxDate, calendars = props.calendars, className = props.className, getPeriodSwitchAriaLabel = props.getPeriodSwitchAriaLabel, other = tslib_1.__rest(props, ["size", "startDay", "renderAdditionalControls", "locale", "onChange", "onOffsetDateChange", "onMonthClick", "onDayClick", "onYearClick", "value", "defaultValue", "offsetDate", "onCalendarsChange", "defaultOffsetDate", "exclude", "minDate", "maxDate", "calendars", "className", "getPeriodSwitchAriaLabel"]);
+    var _a = tslib_1.__read((0, useControlled_1.useControlled)({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'Calendar',
         state: 'value',
-    }), 2), value = _c[0], setValue = _c[1];
-    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+    }), 2), value = _a[0], setValue = _a[1];
+    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
         value: offsetDateProp,
         defaultValue: defaultOffsetDate,
         name: 'Calendar',
         state: 'offsetDate',
-    }), 2), offsetDate = _d[0], setOffsetDateState = _d[1];
+    }), 2), offsetDate = _b[0], setOffsetDateState = _b[1];
     var onDatesChange = function (data) {
         var value = data[0];
         if (value) {
@@ -41,20 +36,18 @@ exports.CalendarModeSingle = (0, react_1.forwardRef)(function (inProps, ref) {
         onOffsetDateChangeProp === null || onOffsetDateChangeProp === void 0 ? void 0 : onOffsetDateChangeProp(date);
     };
     var config = {
-        calendar: {
-            startDay: startDay,
-        },
+        calendar: tslib_1.__assign({ startDay: startDay }, (calendars && calendars > 1 && { offsets: [1] })),
         locale: {
             locale: locale,
             day: 'numeric',
             weekday: 'short',
         },
         exclude: exclude,
-        offsetDate: offsetDate,
         onDatesChange: onDatesChange,
         onOffsetChange: onOffsetChange,
         dates: { minDate: minDate, maxDate: maxDate },
         years: { numberOfYears: 15 },
+        offsetDate: offsetDate || undefined,
         selectedDates: value ? [value] : [],
     };
     return (react_1.default.createElement(datepicker_1.DatePickerProvider, { config: config },
@@ -66,9 +59,8 @@ exports.CalendarModeSingle = (0, react_1.forwardRef)(function (inProps, ref) {
                 onYearClick: onYearClick,
                 onMonthClick: onMonthClick,
                 getPeriodSwitchAriaLabel: getPeriodSwitchAriaLabel,
-                onOffsetChange: onOffsetChange,
             } },
             react_1.default.createElement("div", tslib_1.__assign({ className: (0, utils_1.cnCalendar)({ size: size }, [className]) }, other, { ref: ref }),
-                react_1.default.createElement(components_1.CalendarConsumer, null),
+                react_1.default.createElement(index_1.Calendars, { onCalendarsChange: onCalendarsChange }),
                 react_1.default.createElement(components_1.CalendarAdditionalControls, { renderAdditionalControls: renderAdditionalControls })))));
 });

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/index.d.ts

@@ -1,2 +1 @@
 export * from './CalendarAdditionalControls';
-export * from './CalendarConsumer';

package/__inner__/cjs/components/Calendar/components/CalendarModeSingle/components/index.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CalendarAdditionalControls"), exports);
-tslib_1.__exportStar(require("./CalendarConsumer"), exports);

package/__inner__/cjs/components/Calendar/components/Calendars/Calendars.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import type { CalendarProps } from '../../index';
+type CalendarsProps = Pick<CalendarProps, 'onCalendarsChange'>;
+export declare const Calendars: FC<CalendarsProps>;
+export {};

package/__inner__/cjs/components/Calendar/components/Calendars/Calendars.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendars = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importStar(require("react"));
+var datepicker_1 = require("@rehookify/datepicker");
+var useMutableRef_1 = require("../../../../hooks/useMutableRef");
+var Stack_1 = require("../../../Stack");
+var index_1 = require("../index");
+var Calendars = function (_a) {
+    var onCalendarsChange = _a.onCalendarsChange;
+    var calendars = (0, datepicker_1.useDatePickerContext)().data.calendars;
+    var _b = tslib_1.__read(calendars || [], 2), calendarFrom = _b[0], calendarTo = _b[1];
+    var savedOnCalendarsChange = (0, useMutableRef_1.useMutableRef)(onCalendarsChange);
+    var calendarFromHash = "".concat(calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.month, "-").concat(calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.year);
+    var calendarToHash = "".concat(calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.month, "-").concat(calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.year);
+    (0, react_1.useEffect)(function () {
+        var _a, _b, _c, _d, _e;
+        var calendarFromDays = calendarFrom === null || calendarFrom === void 0 ? void 0 : calendarFrom.days;
+        var calendarToDays = calendarTo === null || calendarTo === void 0 ? void 0 : calendarTo.days;
+        var startPeriod = (_a = calendarFromDays === null || calendarFromDays === void 0 ? void 0 : calendarFromDays.find(function (_a) {
+            var inCurrentMonth = _a.inCurrentMonth;
+            return inCurrentMonth;
+        })) === null || _a === void 0 ? void 0 : _a.$date;
+        var endPeriod = calendarToDays
+            ? (_c = (_b = calendarToDays === null || calendarToDays === void 0 ? void 0 : calendarToDays.reverse()) === null || _b === void 0 ? void 0 : _b.find(function (_a) {
+                var inCurrentMonth = _a.inCurrentMonth;
+                return inCurrentMonth;
+            })) === null || _c === void 0 ? void 0 : _c.$date
+            : (_d = calendarFromDays === null || calendarFromDays === void 0 ? void 0 : calendarFromDays.reverse().find(function (_a) {
+                var inCurrentMonth = _a.inCurrentMonth;
+                return inCurrentMonth;
+            })) === null || _d === void 0 ? void 0 : _d.$date;
+        if (startPeriod && endPeriod) {
+            (_e = savedOnCalendarsChange.current) === null || _e === void 0 ? void 0 : _e.call(savedOnCalendarsChange, [startPeriod, endPeriod]);
+        }
+    }, [calendarFromHash, calendarToHash]);
+    // There should not be more than two calendars
+    if (calendars.length > 2)
+        return null;
+    return (react_1.default.createElement(Stack_1.Stack, null,
+        calendarFrom && (react_1.default.createElement(index_1.CalendarItem, { calendar: calendarFrom, type: calendars.length === 1 ? 'single' : 'first' })),
+        calendarTo && react_1.default.createElement(index_1.CalendarItem, { calendar: calendarTo, type: "last" })));
+};
+exports.Calendars = Calendars;

package/__inner__/cjs/components/Calendar/components/Calendars/index.d.ts

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

package/__inner__/cjs/components/Calendar/components/{CalendarModeSingle/components/CalendarConsumer → Calendars}/index.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./CalendarConsumer"), exports);
+tslib_1.__exportStar(require("./Calendars"), exports);

package/__inner__/cjs/components/Calendar/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './CalendarGrid';
 export * from './CalendarModeSingle';
 export * from './CalendarModeRange';
 export * from './CalendarItem';
+export * from './Calendars';

package/__inner__/cjs/components/Calendar/components/index.js

@@ -7,3 +7,4 @@ tslib_1.__exportStar(require("./CalendarGrid"), exports);
 tslib_1.__exportStar(require("./CalendarModeSingle"), exports);
 tslib_1.__exportStar(require("./CalendarModeRange"), exports);
 tslib_1.__exportStar(require("./CalendarItem"), exports);
+tslib_1.__exportStar(require("./Calendars"), exports);

package/__inner__/cjs/components/Calendar/constants.d.ts

@@ -1,4 +1,4 @@
 export declare const CALENDAR_DEFAULT_START_DAY = 1;
-export declare const CALENDAR_ITEM_DEFAULT_TAG = "button";
 export declare const CALENDAR_DEFAULT_SIZE = "m";
 export declare const CALENDAR_DEFAULT_MODE = "single";
+export declare const CALENDAR_DEFAULT_CALENDARS = 1;

package/__inner__/cjs/components/Calendar/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CALENDAR_DEFAULT_MODE = exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_ITEM_DEFAULT_TAG = exports.CALENDAR_DEFAULT_START_DAY = void 0;
+exports.CALENDAR_DEFAULT_CALENDARS = exports.CALENDAR_DEFAULT_MODE = exports.CALENDAR_DEFAULT_SIZE = exports.CALENDAR_DEFAULT_START_DAY = void 0;
 exports.CALENDAR_DEFAULT_START_DAY = 1;
-exports.CALENDAR_ITEM_DEFAULT_TAG = 'button';
 exports.CALENDAR_DEFAULT_SIZE = 'm';
 exports.CALENDAR_DEFAULT_MODE = 'single';
+exports.CALENDAR_DEFAULT_CALENDARS = 1;

package/__inner__/cjs/components/Calendar/types.d.ts

@@ -1,57 +1,93 @@
-import type { ComponentPropsWithRef, MouseEvent, ReactElement, ReactNode } from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 import type { DPExcludeConfig, DPDayInteger } from '@rehookify/datepicker';
+import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { CALENDAR_DEFAULT_MODE } from './constants';
 export declare const calendarStepVariant: readonly ["days", "months", "years"];
 export declare const calendarSizeVariant: readonly ["s", "m", "l"];
 export declare const calendarModeVariant: readonly ["single", "range"];
 export type CalendarStepVariant = (typeof calendarStepVariant)[number];
 export type CalendarModeVariant = (typeof calendarModeVariant)[number];
-export type CalendarValue<MODE extends CalendarModeVariant> = (MODE extends 'range' ? Date[] : Date) | null;
-export type CalendarOnChange<MODE extends CalendarModeVariant> = (date: CalendarValue<MODE>) => void;
-export type CalendarOnOffsetDateChange = (date: Date) => void;
-export type CalendarSizeVariant = (typeof calendarSizeVariant)[number];
-export type CalendarExclude = DPExcludeConfig;
-export type CalendarStartDay = DPDayInteger;
-export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = (props: {
+export type CalendarPropValue<MODE extends CalendarModeVariant> = (MODE extends 'range' ? Date[] : Date) | null;
+export type CalendarPropOnChange<MODE extends CalendarModeVariant> = (date: CalendarPropValue<MODE>) => void;
+export type CalendarPropOnOffsetDateChange = (date: Date) => void;
+export type CalendarPropSize = (typeof calendarSizeVariant)[number];
+export type CalendarPropExclude = DPExcludeConfig;
+export type CalendarPropStartDay = DPDayInteger;
+export type CalendarPropRenderAdditionalControls<MODE extends CalendarModeVariant> = (props: {
     date?: MODE extends 'range' ? Date[] : Date;
 }) => ReactElement;
-export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = {
+export type CalendarPropCalendars = 1 | 2;
+/**
+ * @deprecated
+ * Use the `CalendarPropOnChange` type to replace it.
+ * */
+export type CalendarOnChange<MODE extends CalendarModeVariant> = CalendarPropOnChange<MODE>;
+/**
+ * @deprecated
+ * Use the `CalendarPropOnOffsetDateChange` type to replace it.
+ * */
+export type CalendarOnOffsetDateChange = CalendarPropOnOffsetDateChange;
+/**
+ * @deprecated
+ * Use the `CalendarPropSize` type to replace it.
+ * */
+export type CalendarSizeVariant = CalendarPropSize;
+/**
+ * @deprecated
+ * Use the `CalendarPropExclude` type to replace it.
+ * */
+export type CalendarExclude = CalendarPropExclude;
+/**
+ * @deprecated
+ * Use the `CalendarPropStartDay` type to replace it.
+ * */
+export type CalendarStartDay = CalendarPropStartDay;
+export type CalendarRenderAdditionalControls<MODE extends CalendarModeVariant> = CalendarPropRenderAdditionalControls<MODE>;
+export type CalendarProps<MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
+    /** Способ выбора даты:
+     * - `single` — позволяет выбрать одну дату (показывает один календарь).
+     * - `range` — позволяет выбрать период: дату начала и дату конца (показывает два календаря).
+     * */
     mode?: MODE;
     /** Выбранная дата */
-    value?: CalendarValue<MODE>;
+    value?: CalendarPropValue<MODE>;
     /** Выбранная дата по умолчанию (неконтролируемое состояние) */
-    defaultValue?: CalendarValue<MODE>;
+    defaultValue?: CalendarPropValue<MODE>;
     /** Смещение календаря — на какой странице показать календарь */
-    offsetDate?: Date;
+    offsetDate?: Date | null;
     /** Смещение календаря по умолчанию */
     defaultOffsetDate?: Date;
     /** Обработчик событий выбора даты */
-    onChange?: CalendarOnChange<MODE>;
+    onChange?: CalendarPropOnChange<MODE>;
     /** Обработчик событий на смещение календаря */
-    onOffsetDateChange?: CalendarOnOffsetDateChange;
+    onOffsetDateChange?: CalendarPropOnOffsetDateChange;
     /** Локализация */
     locale?: Intl.LocalesArgument;
     /** Первый день недели календаря */
-    startDay?: CalendarStartDay;
+    startDay?: CalendarPropStartDay;
     /** Размер */
-    size?: CalendarSizeVariant;
+    size?: CalendarPropSize;
     /** Исключенные даты календаря */
-    exclude?: CalendarExclude;
+    exclude?: CalendarPropExclude;
     /** Ограничение выбора дат по меньшей дате */
     minDate?: Date;
     /** Ограничение выбора дат по большей дате */
     maxDate?: Date;
     /** Обработчик нажатия на кнопку месяца */
-    onMonthClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onMonthClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Обработчик нажатия на кнопку дня */
-    onDayClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onDayClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Обработчик нажатия на кнопку года */
-    onYearClick?: (e: MouseEvent<HTMLElement>, date: Date) => void;
+    onYearClick?(e: MouseEvent<HTMLElement>, date: Date): void;
     /** Дополнительные контролы — рендер функция */
-    renderAdditionalControls?: CalendarRenderAdditionalControls<MODE>;
-    /** Функция форматирования атрибута aria-label для кнопок переключения периодов */
+    renderAdditionalControls?: CalendarPropRenderAdditionalControls<MODE>;
+    /** Функция форматирования атрибута `aria-label` для кнопок переключения периодов */
     getPeriodSwitchAriaLabel?: (step: CalendarStepVariant) => [string, string];
+    /** Обработчик событий на изменение календарей */
+    onCalendarsChange?(period: [Date, Date]): void;
+    /** Количество отображаемых календарей в компоненте: один или два */
+    calendars?: CalendarPropCalendars;
     children?: never;
-} & Omit<ComponentPropsWithRef<'div'>, 'onChange' | 'defaultValue'>;
+}, 'div'>;
 export type CalendarComponent = <MODE extends CalendarModeVariant = typeof CALENDAR_DEFAULT_MODE>(props: CalendarProps<MODE>) => ReactNode;
-export type CalendarTypeComponent<MODE extends CalendarModeVariant> = (props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode;
+export type CalendarModeComponent<MODE extends CalendarModeVariant> = (props: Omit<CalendarProps<MODE>, 'mode'>) => ReactNode;

package/__inner__/cjs/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__/cjs/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__/cjs/components/DatePicker/DatePicker.d.ts

@@ -1,5 +1,4 @@
 import './DatePicker.css';
-import React from 'react';
-import type { DatePickerProps } from './types';
+import type { DatePickerComponent } from './types';
 export declare const cnDatePicker: import("@bem-react/classname").ClassNameFormatter;
-export declare const DatePicker: React.ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DatePicker: DatePickerComponent;