@alfalab/core-components-calendar-range 7.0.6 → 7.0.8

package/Component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index_module = require('./index.module-3391f602.js');
+var index_module = require('./index.module-255b4286.js');
 var React = require('react');
 var views_popover = require('./views/popover.js');
 var views_static = require('./views/static.js');
@@ -8,6 +8,7 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input');
 require('@alfalab/core-components-date-input');
+require('./components/divider/Component.js');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');
@@ -18,10 +19,14 @@ require('date-fns/endOfMonth');
 require('@alfalab/core-components-calendar');
 require('./utils.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var CalendarRange = function (_a) {
     var _b = _a.calendarPosition, calendarPosition = _b === void 0 ? 'static' : _b, restProps = index_module.__rest(_a, ["calendarPosition"]);
     var View = calendarPosition === 'popover' ? views_popover.CalendarRangePopover : views_static.CalendarRangeStatic;
-    return React.createElement(View, index_module.__assign({}, restProps));
+    return React__default.default.createElement(View, index_module.__assign({}, restProps));
 };
 
 exports.CalendarRange = CalendarRange;

package/components/divider/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../../Component";
+type Props = {
+    inputFromProps?: CalendarRangeProps['inputFromProps'];
+    inputToProps?: CalendarRangeProps['inputToProps'];
+};
+declare const Divider: FC<Props>;
+export { Divider };

package/components/divider/Component.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var cn = require('classnames');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+
+var styles = {"component":"calendar-range__component_1tbg6","outer":"calendar-range__outer_1tbg6","s":"calendar-range__s_1tbg6","m":"calendar-range__m_1tbg6","l":"calendar-range__l_1tbg6","xl":"calendar-range__xl_1tbg6"};
+require('./index.css')
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React__default.default.createElement("span", { className: cn__default.default(styles.component, styles[size], (_b = {}, _b[styles.outer] = outer, _b)) });
+};
+
+exports.Divider = Divider;

package/components/divider/index.css

@@ -0,0 +1,75 @@
+/* hash: 1udsd */
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.calendar-range__component_1tbg6 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.calendar-range__component_1tbg6:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.calendar-range__outer_1tbg6 {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+.calendar-range__s_1tbg6 {
+    height: var(--size-s-height);
+}
+.calendar-range__m_1tbg6 {
+    height: var(--size-m-height);
+}
+.calendar-range__l_1tbg6 {
+    height: var(--size-l-height);
+}
+.calendar-range__xl_1tbg6 {
+    height: var(--size-xl-height);
+}

package/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/components/divider/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var components_divider_Component = require('./Component.js');
+require('react');
+require('classnames');
+
+
+
+exports.Divider = components_divider_Component.Divider;

package/cssm/Component.js

@@ -8,6 +8,8 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input/cssm');
 require('@alfalab/core-components-date-input/cssm');
+require('./components/divider/Component.js');
+require('./components/divider/index.module.css');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');
@@ -19,10 +21,14 @@ require('date-fns/endOfMonth');
 require('@alfalab/core-components-calendar/cssm');
 require('./utils.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 var CalendarRange = function (_a) {
     var _b = _a.calendarPosition, calendarPosition = _b === void 0 ? 'static' : _b, restProps = tslib_es6.__rest(_a, ["calendarPosition"]);
     var View = calendarPosition === 'popover' ? views_popover.CalendarRangePopover : views_static.CalendarRangeStatic;
-    return React.createElement(View, tslib_es6.__assign({}, restProps));
+    return React__default.default.createElement(View, tslib_es6.__assign({}, restProps));
 };
 
 exports.CalendarRange = CalendarRange;

package/cssm/components/divider/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../../Component";
+type Props = {
+    inputFromProps?: CalendarRangeProps['inputFromProps'];
+    inputToProps?: CalendarRangeProps['inputToProps'];
+};
+declare const Divider: FC<Props>;
+export { Divider };

package/cssm/components/divider/Component.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var cn = require('classnames');
+var styles = require('./index.module.css');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React__default.default.createElement("span", { className: cn__default.default(styles__default.default.component, styles__default.default[size], (_b = {}, _b[styles__default.default.outer] = outer, _b)) });
+};
+
+exports.Divider = Divider;

package/cssm/components/divider/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/cssm/components/divider/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var components_divider_Component = require('./Component.js');
+require('react');
+require('classnames');
+require('./index.module.css');
+
+
+
+exports.Divider = components_divider_Component.Divider;

package/cssm/components/divider/index.module.css

@@ -0,0 +1,74 @@
+:root {
+    --color-light-graphic-primary: #0b1f35;
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-xs: 8px;
+}
+:root {
+    --size-s-height: 48px;
+    --size-m-height: 56px;
+    --size-l-height: 64px;
+    --size-xl-height: 72px;
+}
+:root {
+
+    /* Кнопки выбора месяцев и годов */
+
+    /* Шапка */
+
+    /* День */
+
+    /* today */
+
+    /* highlighted */
+
+    /* holidays */
+
+    /* range */
+
+    /* selected */
+
+    /* disabled */
+
+    /* marker */
+}
+.component {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    margin: 0 var(--gap-xs)
+}
+.component:after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 1px;
+        background-color: var(--color-light-graphic-primary);
+    }
+.outer {
+    position: relative;
+
+    /* FormControl .above height + margin-bottom */
+    top: 24px;
+}
+.s {
+    height: var(--size-s-height);
+}
+.m {
+    height: var(--size-m-height);
+}
+.l {
+    height: var(--size-l-height);
+}
+.xl {
+    height: var(--size-xl-height);
+}

package/cssm/hooks.js

@@ -8,6 +8,15 @@ var min = require('date-fns/min');
 var startOfMonth = require('date-fns/startOfMonth');
 var subMonths = require('date-fns/subMonths');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var isEqual__default = /*#__PURE__*/_interopDefaultCompat(isEqual);
+var max__default = /*#__PURE__*/_interopDefaultCompat(max);
+var min__default = /*#__PURE__*/_interopDefaultCompat(min);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var subMonths__default = /*#__PURE__*/_interopDefaultCompat(subMonths);
+
 function usePopoverViewMonthes(_a) {
     var dateFrom = _a.dateFrom, dateTo = _a.dateTo, defaultMonth = _a.defaultMonth, resetKey = _a.resetKey;
     var _b = React.useState(), monthFrom = _b[0], setMonthFrom = _b[1];
@@ -25,10 +34,10 @@ function usePopoverViewMonthes(_a) {
         }
     }, [dateFrom]);
     React.useEffect(function () {
-        setMonthFrom(dateFrom ? startOfMonth(dateFrom).getTime() : defaultMonth);
+        setMonthFrom(dateFrom ? startOfMonth__default.default(dateFrom).getTime() : defaultMonth);
     }, [defaultMonth, dateFrom, resetKey]);
     React.useEffect(function () {
-        setMonthTo(dateTo ? startOfMonth(dateTo).getTime() : monthFrom);
+        setMonthTo(dateTo ? startOfMonth__default.default(dateTo).getTime() : monthFrom);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [dateTo, resetKey]);
     return {
@@ -44,44 +53,44 @@ function useStaticViewMonthes(_a) {
      * Если указана начальная дата — левый месяц равен ей, иначе используется дата конца.
      * Если обе даты не указаны, то используется дефолтный месяц
      */
-    var initialMonthFrom = React.useMemo(function () { return startOfMonth(selectedFrom || selectedTo || defaultMonth).getTime(); }, 
+    var initialMonthFrom = React.useMemo(function () { return startOfMonth__default.default(selectedFrom || selectedTo || defaultMonth).getTime(); }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     /**
      * Правый месяц должен быть как минимум на 1 месяц больше левого
      */
     var initialMonthTo = React.useMemo(function () {
-        return max([
-            selectedTo ? startOfMonth(selectedTo) : 0,
-            addMonths(initialMonthFrom, 1),
+        return max__default.default([
+            selectedTo ? startOfMonth__default.default(selectedTo) : 0,
+            addMonths__default.default(initialMonthFrom, 1),
         ]).getTime();
     }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []);
     if (defaultMonthPosition === 'right') {
         initialMonthTo = initialMonthFrom;
-        initialMonthFrom = subMonths(initialMonthFrom, 1).getTime();
+        initialMonthFrom = subMonths__default.default(initialMonthFrom, 1).getTime();
     }
     var _b = React.useState(initialMonthFrom), monthFrom = _b[0], setMonthFrom = _b[1];
     var _c = React.useState(initialMonthTo), monthTo = _c[0], setMonthTo = _c[1];
     var handleMonthFromChange = React.useCallback(function (newMonthFrom) {
         setMonthFrom(newMonthFrom);
-        if (monthTo && isEqual(newMonthFrom, monthTo)) {
-            var nextMonth = addMonths(newMonthFrom, 1).getTime();
+        if (monthTo && isEqual__default.default(newMonthFrom, monthTo)) {
+            var nextMonth = addMonths__default.default(newMonthFrom, 1).getTime();
             setMonthTo(nextMonth);
         }
     }, [monthTo]);
     var handleMonthToChange = React.useCallback(function (newMonthTo) {
         setMonthTo(newMonthTo);
-        if (monthFrom && isEqual(newMonthTo, monthFrom)) {
-            var prevMonth = subMonths(newMonthTo, 1).getTime();
+        if (monthFrom && isEqual__default.default(newMonthTo, monthFrom)) {
+            var prevMonth = subMonths__default.default(newMonthTo, 1).getTime();
             setMonthFrom(prevMonth);
         }
     }, [monthFrom]);
     // eslint-disable-next-line complexity
     React.useEffect(function () {
-        var selectedFromMonth = selectedFrom ? startOfMonth(selectedFrom).getTime() : undefined;
-        var selectedToMonth = selectedTo ? startOfMonth(selectedTo).getTime() : undefined;
+        var selectedFromMonth = selectedFrom ? startOfMonth__default.default(selectedFrom).getTime() : undefined;
+        var selectedToMonth = selectedTo ? startOfMonth__default.default(selectedTo).getTime() : undefined;
         // Проверяем, показываются ли выбранные месяцы в левой или правой части компонента
         var fromMonthOnLeft = selectedFromMonth && selectedFromMonth === monthFrom;
         var fromMonthOnRight = selectedFromMonth && selectedFromMonth === monthTo;
@@ -90,25 +99,25 @@ function useStaticViewMonthes(_a) {
         var fromMonthOnScreen = fromMonthOnLeft || fromMonthOnRight;
         var toMonthOnScreen = toMonthOnLeft || toMonthOnRight;
         if (fromMonthOnLeft && toMonthOnLeft) {
-            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
             return;
         }
         if (fromMonthOnRight && toMonthOnRight) {
-            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
             return;
         }
         if (selectedFromMonth && selectedToMonth) {
             setMonthFrom(selectedFromMonth);
-            setMonthTo(max([addMonths(selectedFromMonth, 1), selectedToMonth]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), selectedToMonth]).getTime());
             return;
         }
         if (selectedFromMonth && !selectedToMonth && !fromMonthOnScreen) {
             setMonthFrom(selectedFromMonth);
-            setMonthTo(max([addMonths(selectedFromMonth, 1), monthTo]).getTime());
+            setMonthTo(max__default.default([addMonths__default.default(selectedFromMonth, 1), monthTo]).getTime());
         }
         if (selectedToMonth && !selectedFromMonth && !toMonthOnScreen) {
             setMonthTo(selectedToMonth);
-            setMonthFrom(min([subMonths(selectedToMonth, 1), monthFrom]).getTime());
+            setMonthFrom(min__default.default([subMonths__default.default(selectedToMonth, 1), monthFrom]).getTime());
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedFrom, selectedTo]);
@@ -124,15 +133,15 @@ function useSelectionProps(from, to, highlighted) {
         if (from && to) {
             return {
                 rangeComplete: true,
-                selectedFrom: min([from, to]).getTime(),
-                selectedTo: max([from, to]).getTime(),
+                selectedFrom: min__default.default([from, to]).getTime(),
+                selectedTo: max__default.default([from, to]).getTime(),
             };
         }
         var dates = [from, to, highlighted].filter(function (date) { return date !== undefined; });
         return {
             rangeComplete: false,
-            selectedFrom: from || dates.length === 2 ? min(dates).getTime() : undefined,
-            selectedTo: to || dates.length === 2 ? max(dates).getTime() : undefined,
+            selectedFrom: from || dates.length === 2 ? min__default.default(dates).getTime() : undefined,
+            selectedTo: to || dates.length === 2 ? max__default.default(dates).getTime() : undefined,
         };
     }, [from, highlighted, to]);
 }

package/cssm/index.js

@@ -8,6 +8,8 @@ require('classnames');
 require('date-fns/startOfMonth');
 require('@alfalab/core-components-calendar-input/cssm');
 require('@alfalab/core-components-date-input/cssm');
+require('./components/divider/Component.js');
+require('./components/divider/index.module.css');
 require('./hooks.js');
 require('date-fns/addMonths');
 require('date-fns/isEqual');

package/cssm/views/index.module.css

@@ -1,6 +1,3 @@
-:root {
-    --color-light-graphic-primary: #0b1f35;
-}
 :root {
 
     /* Hard */
@@ -9,9 +6,6 @@
 
     /* Hard up */
 }
-:root {
-    --gap-xs: 8px;
-}
 :root {
     --calendar-inner-width: 280px;
 
@@ -47,21 +41,6 @@
 .component *[class*='calendarIcon_'] {
         margin-right: 0;
     }
-.divider {
-    height: 48px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    margin: 0 var(--gap-xs)
-}
-.divider:after {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 1px;
-        background-color: var(--color-light-graphic-primary);
-    }
 .static .calendar {
         width: var(--calendar-inner-width);
     }

package/cssm/views/popover.js

@@ -6,16 +6,25 @@ var cn = require('classnames');
 var startOfMonth = require('date-fns/startOfMonth');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var styles = require('./index.module.css');
+require('../components/divider/index.module.css');
 require('date-fns/addMonths');
 require('date-fns/isEqual');
 require('date-fns/max');
 require('date-fns/min');
 require('date-fns/subMonths');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var CalendarRangePopover = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, onError = _a.onError, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default.default(new Date()).getTime() : _b, minDate = _a.minDate, maxDate = _a.maxDate, _c = _a.valueFrom, valueFrom = _c === void 0 ? '' : _c, _d = _a.valueTo, valueTo = _d === void 0 ? '' : _d, _e = _a.onDateFromChange, onDateFromChange = _e === void 0 ? function () { return null; } : _e, _f = _a.onDateToChange, onDateToChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onChange, onChange = _g === void 0 ? function () { return null; } : _g, onError = _a.onError, _h = _a.inputFromProps, inputFromProps = _h === void 0 ? {} : _h, _j = _a.inputToProps, inputToProps = _j === void 0 ? {} : _j, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
     var _k = React.useState(valueFrom), inputFromValue = _k[0], setInputFromValue = _k[1];
     var _l = React.useState(valueTo), inputToValue = _l[0], setInputToValue = _l[1];
     /**
@@ -107,10 +116,10 @@ var CalendarRangePopover = function (_a) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hasValidateError]);
-    return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-start', error: inputFromInvalid || bothInvalid || inputFromProps.error, onChange: handleFromChange, onInputChange: handleInputFromChange, onBlur: handleInputFromBlur, value: inputFromValue, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
-        React.createElement("span", { className: styles.divider }),
-        React.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
+    return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, className), "data-test-id": dataTestId },
+        React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-start', error: inputFromInvalid || bothInvalid || inputFromProps.error, onChange: handleFromChange, onInputChange: handleInputFromChange, onBlur: handleInputFromBlur, value: inputFromValue, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: 'full' }) })),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
+        React__default.default.createElement(coreComponentsCalendarInput.CalendarInput, tslib_es6.__assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: 'popover', popoverPosition: 'bottom-end', error: inputToInvalid || bothInvalid || inputToProps.error, onChange: handleToChange, onInputChange: handleInputToChange, onBlur: handleInputToBlur, value: inputToValue, minDate: dateFrom || minDate, maxDate: maxDate, offDays: offDays, events: events, calendarProps: tslib_es6.__assign(tslib_es6.__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: 'full' }) }))));
 };
 
 exports.CalendarRangePopover = CalendarRangePopover;

package/cssm/views/static.js

@@ -11,14 +11,27 @@ var subMonths = require('date-fns/subMonths');
 var coreComponentsCalendar = require('@alfalab/core-components-calendar/cssm');
 var coreComponentsCalendarInput = require('@alfalab/core-components-calendar-input/cssm');
 var coreComponentsDateInput = require('@alfalab/core-components-date-input/cssm');
+var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var utils = require('../utils.js');
 var styles = require('./index.module.css');
+require('../components/divider/index.module.css');
 require('date-fns/isEqual');
 require('date-fns/min');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var addMonths__default = /*#__PURE__*/_interopDefaultCompat(addMonths);
+var endOfMonth__default = /*#__PURE__*/_interopDefaultCompat(endOfMonth);
+var max__default = /*#__PURE__*/_interopDefaultCompat(max);
+var startOfMonth__default = /*#__PURE__*/_interopDefaultCompat(startOfMonth);
+var subMonths__default = /*#__PURE__*/_interopDefaultCompat(subMonths);
+var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
+
 var CalendarRangeStatic = function (_a) {
-    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth(new Date()).getTime() : _b, _c = _a.defaultMonthPosition, defaultMonthPosition = _c === void 0 ? 'left' : _c, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.valueFrom, valueFrom = _d === void 0 ? '' : _d, _e = _a.valueTo, valueTo = _e === void 0 ? '' : _e, _f = _a.onDateFromChange, onDateFromChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDateToChange, onDateToChange = _g === void 0 ? function () { return null; } : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, onError = _a.onError, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
+    var className = _a.className, _b = _a.defaultMonth, defaultMonth = _b === void 0 ? startOfMonth__default.default(new Date()).getTime() : _b, _c = _a.defaultMonthPosition, defaultMonthPosition = _c === void 0 ? 'left' : _c, minDate = _a.minDate, maxDate = _a.maxDate, _d = _a.valueFrom, valueFrom = _d === void 0 ? '' : _d, _e = _a.valueTo, valueTo = _e === void 0 ? '' : _e, _f = _a.onDateFromChange, onDateFromChange = _f === void 0 ? function () { return null; } : _f, _g = _a.onDateToChange, onDateToChange = _g === void 0 ? function () { return null; } : _g, _h = _a.onChange, onChange = _h === void 0 ? function () { return null; } : _h, onError = _a.onError, _j = _a.inputFromProps, inputFromProps = _j === void 0 ? {} : _j, _k = _a.inputToProps, inputToProps = _k === void 0 ? {} : _k, offDays = _a.offDays, events = _a.events, dataTestId = _a.dataTestId;
     var _l = React.useState(valueFrom), inputFromValue = _l[0], setInputFromValue = _l[1];
     var _m = React.useState(valueTo), inputToValue = _m[0], setInputToValue = _m[1];
     var dateFrom = coreComponentsCalendarInput.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -148,18 +161,18 @@ var CalendarRangeStatic = function (_a) {
     var CalendarToComponent = dateInputToProps.Calendar || coreComponentsCalendar.Calendar;
     return (
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-    React.createElement("div", { className: cn(styles.component, styles.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
-        React.createElement("div", null,
-            React.createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
+    React__default.default.createElement("div", { className: cn__default.default(styles__default.default.component, styles__default.default.static, className), onMouseOver: handleMouseOver, "data-test-id": dataTestId },
+        React__default.default.createElement("div", null,
+            React__default.default.createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputFromProps, { mobileMode: dateInputFromProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputFromProps.mobileMode, value: inputFromValue, onChange: handleInputFromChange, onClear: handleClearFrom, onBlur: handleValidInputFrom, error: bothInvalid || inputFromInvalid || dateInputFromProps.error, clear: true, block: true })),
-            React.createElement(CalendarFromComponent, tslib_es6.__assign({}, calendarFromProps, { className: cn(styles.calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
-        React.createElement("span", { className: styles.divider }),
-        React.createElement("div", null,
-            React.createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
+            React__default.default.createElement(CalendarFromComponent, tslib_es6.__assign({}, calendarFromProps, { className: cn__default.default(styles__default.default.calendar, calendarFromProps === null || calendarFromProps === void 0 ? void 0 : calendarFromProps.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: maxDate && max__default.default([maxDate, endOfMonth__default.default(subMonths__default.default(maxDate, 1))]).getTime() }, rangeProps))),
+        React__default.default.createElement(components_divider_Component.Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
+        React__default.default.createElement("div", null,
+            React__default.default.createElement(coreComponentsDateInput.DateInput, tslib_es6.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid, clear: true, block: true })),
-            React.createElement(CalendarToComponent, tslib_es6.__assign({}, calendarToProps, { className: cn(styles.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
+            React__default.default.createElement(CalendarToComponent, tslib_es6.__assign({}, calendarToProps, { className: cn__default.default(styles__default.default.calendar, calendarToProps === null || calendarToProps === void 0 ? void 0 : calendarToProps.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minDate && startOfMonth__default.default(addMonths__default.default(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
 };
 
 exports.CalendarRangeStatic = CalendarRangeStatic;

package/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './index.module-bf0c7948.js';
+import { _ as __rest, a as __assign } from './index.module-1aaed941.js';
 import React from 'react';
 import { CalendarRangePopover } from './views/popover.js';
 import { CalendarRangeStatic } from './views/static.js';
@@ -6,6 +6,7 @@ import 'classnames';
 import 'date-fns/startOfMonth';
 import '@alfalab/core-components-calendar-input/esm';
 import '@alfalab/core-components-date-input/esm';
+import './components/divider/Component.js';
 import './hooks.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';

package/esm/components/divider/Component.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CalendarRangeProps } from "../../Component";
+type Props = {
+    inputFromProps?: CalendarRangeProps['inputFromProps'];
+    inputToProps?: CalendarRangeProps['inputToProps'];
+};
+declare const Divider: FC<Props>;
+export { Divider };

package/esm/components/divider/Component.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import cn from 'classnames';
+
+var styles = {"component":"calendar-range__component_1tbg6","outer":"calendar-range__outer_1tbg6","s":"calendar-range__s_1tbg6","m":"calendar-range__m_1tbg6","l":"calendar-range__l_1tbg6","xl":"calendar-range__xl_1tbg6"};
+require('./index.css')
+
+var Divider = function (_a) {
+    var _b;
+    var inputFromProps = _a.inputFromProps, inputToProps = _a.inputToProps;
+    var outer = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.label) &&
+        (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.labelView) === 'outer' &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.label) &&
+        (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.labelView) === 'outer';
+    var size = (inputFromProps === null || inputFromProps === void 0 ? void 0 : inputFromProps.size) || (inputToProps === null || inputToProps === void 0 ? void 0 : inputToProps.size) || 's';
+    return React.createElement("span", { className: cn(styles.component, styles[size], (_b = {}, _b[styles.outer] = outer, _b)) });
+};
+
+export { Divider };