@alfalab/core-components 48.6.0-beta.1 → 48.7.0

package/calendar-range/cssm/views/static.js

@@ -13,6 +13,7 @@ var desktop = require('../../../calendar/cssm/desktop');
 var shared$1 = require('../../../calendar/cssm/shared');
 var shared = require('../../../calendar-input/cssm/shared');
 var coreComponentsDateInput = require('../../../date-input/cssm');
+var coreComponentsShared = require('../../../shared/cssm');
 var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
 var utils = require('../utils.js');
@@ -31,7 +32,7 @@ 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__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, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, 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, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, dataTestId = _a.dataTestId, calendarContainerClassName = _a.calendarContainerClassName;
     var _m = React.useState(valueFrom), inputFromValue = _m[0], setInputFromValue = _m[1];
     var _o = React.useState(valueTo), inputToValue = _o[0], setInputToValue = _o[1];
     var dateFrom = shared.isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -175,17 +176,20 @@ var CalendarRangeStatic = function (_a) {
             React__default.default.createElement(coreComponentsDateInput.DateInput, tslib.__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__default.default.createElement(CalendarFromComponent, tslib.__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: minMaxInSameMonth
-                    ? maxDate
-                    : maxDate && max__default.default([maxDate, endOfMonth__default.default(subMonths__default.default(maxDate, 1))]).getTime() }, rangeProps))),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.calendarContainer, calendarContainerClassName), "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'container-from') },
+                React__default.default.createElement(CalendarFromComponent, tslib.__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: minMaxInSameMonth
+                        ? 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.__assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true })),
-            React__default.default.createElement(CalendarToComponent, tslib.__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: minMaxInSameMonth
-                    ? minDate
-                    : minDate && startOfMonth__default.default(addMonths__default.default(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
+            React__default.default.createElement("div", { "data-test-id": coreComponentsShared.getDataTestId(dataTestId, 'container-to') },
+                React__default.default.createElement(CalendarToComponent, tslib.__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: minMaxInSameMonth
+                        ? minDate
+                        : minDate && startOfMonth__default.default(addMonths__default.default(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps))))));
 };
 
 exports.CalendarRangeStatic = CalendarRangeStatic;

package/calendar-range/esm/Component.d.ts

@@ -85,6 +85,10 @@ type CalendarRangeProps = {
      * Возвращать невалидную дату для кастомной валидации
      */
     returnInvalidDates?: boolean;
+    /**
+     * Дополнительный класс для контейнера календаря
+     */
+    calendarContainerClassName?: string;
 };
 declare const CalendarRange: FC<CalendarRangeProps>;
 export { CalendarRangeProps, CalendarRange };

package/calendar-range/esm/Component.js

@@ -15,11 +15,12 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-68478545.js';
+import './index.module-310fc5cc.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/esm/desktop';
 import '../../calendar/esm/shared';
+import '../../shared/esm';
 import './utils.js';
 
 var CalendarRange = function (_a) {

package/calendar-range/esm/index.js

@@ -15,10 +15,11 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-68478545.js';
+import './index.module-310fc5cc.js';
 import './views/static.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/esm/desktop';
 import '../../calendar/esm/shared';
+import '../../shared/esm';
 import './utils.js';

package/calendar-range/esm/{index.module-68478545.js → index.module-310fc5cc.js}

@@ -1,4 +1,4 @@
-var styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu"};
+var styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu","calendarContainer":"calendar-range__calendarContainer_1rriu"};
 require('./views/index.css');
 
 export { styles as s };

package/calendar-range/esm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCalendarRangeTestIds } from "../utils";

package/calendar-range/esm/shared/index.js

@@ -0,0 +1,2 @@
+export { getCalendarRangeTestIds } from '../utils.js';
+import '../../../shared/esm';

package/calendar-range/esm/utils.d.ts

@@ -1,2 +1,7 @@
 declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { isDayButton };
+declare function getCalendarRangeTestIds(dataTestId: string): {
+    component: string;
+    calendarContainerFrom: string;
+    calendarContainerTo: string;
+};
+export { isDayButton, getCalendarRangeTestIds };

package/calendar-range/esm/utils.js

@@ -1,5 +1,14 @@
+import { getDataTestId } from '../../shared/esm';
+
 var isDayButton = function (node) {
     return node && node.tagName === 'BUTTON' && node.dataset.date;
 };
+function getCalendarRangeTestIds(dataTestId) {
+    return {
+        component: dataTestId,
+        calendarContainerFrom: getDataTestId(dataTestId, 'container-from'),
+        calendarContainerTo: getDataTestId(dataTestId, 'container-to'),
+    };
+}
 
-export { isDayButton };
+export { getCalendarRangeTestIds, isDayButton };

package/calendar-range/esm/views/index.css

@@ -57,4 +57,8 @@
         width: var(--calendar-inner-width)
     } .calendar-range__static_1rriu .calendar-range__calendar_1rriu > div:first-child {
             padding: var(--gap-16) var(--gap-0) var(--gap-12);
-        }
+        } .calendar-range__calendarContainer_1rriu {
+    width: var(--calendar-inner-width);
+    display: flex;
+    justify-content: center;
+}

package/calendar-range/esm/views/popover.js

@@ -8,7 +8,7 @@ import { isCompleteDateInput } from '../../../date-input/esm';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import { Divider } from '../components/divider/Component.js';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-68478545.js';
+import { s as styles } from '../index.module-310fc5cc.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
 import 'date-fns/max';

package/calendar-range/esm/views/static.js

@@ -11,15 +11,16 @@ import { CalendarDesktop } from '../../../calendar/esm/desktop';
 import { usePeriodWithReset } from '../../../calendar/esm/shared';
 import { isValidInputValue, parseDateString, formatDate } from '../../../calendar-input/esm/shared';
 import { isCompleteDateInput, DateInput } from '../../../date-input/esm';
+import { getDataTestId } from '../../../shared/esm';
 import { Divider } from '../components/divider/Component.js';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
-import { s as styles } from '../index.module-68478545.js';
+import { s as styles } from '../index.module-310fc5cc.js';
 import 'date-fns/isEqual';
 import 'date-fns/min';
 
 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, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, dataTestId = _a.dataTestId;
+    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, _l = _a.returnInvalidDates, returnInvalidDates = _l === void 0 ? false : _l, dataTestId = _a.dataTestId, calendarContainerClassName = _a.calendarContainerClassName;
     var _m = useState(valueFrom), inputFromValue = _m[0], setInputFromValue = _m[1];
     var _o = useState(valueTo), inputToValue = _o[0], setInputToValue = _o[1];
     var dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -163,17 +164,20 @@ var CalendarRangeStatic = function (_a) {
             React.createElement(DateInput, __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, __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: minMaxInSameMonth
-                    ? maxDate
-                    : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps))),
+            React.createElement("div", { className: cn(styles.calendarContainer, calendarContainerClassName), "data-test-id": getDataTestId(dataTestId, 'container-from') },
+                React.createElement(CalendarFromComponent, __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: minMaxInSameMonth
+                        ? maxDate
+                        : maxDate &&
+                            max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime() }, rangeProps)))),
         React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement("div", null,
             React.createElement(DateInput, __assign({}, dateInputToProps, { mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true })),
-            React.createElement(CalendarToComponent, __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: minMaxInSameMonth
-                    ? minDate
-                    : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps)))));
+            React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'container-to') },
+                React.createElement(CalendarToComponent, __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: minMaxInSameMonth
+                        ? minDate
+                        : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate }, rangeProps))))));
 };
 
 export { CalendarRangeStatic };

package/calendar-range/{index.module-0764a2af.js → index.module-ed2ad236.js}

@@ -1,4 +1,4 @@
-var styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu"};
+var styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu","calendarContainer":"calendar-range__calendarContainer_1rriu"};
 require('./views/index.css');
 
 exports.styles = styles;

package/calendar-range/modern/Component.d.ts

@@ -85,6 +85,10 @@ type CalendarRangeProps = {
      * Возвращать невалидную дату для кастомной валидации
      */
     returnInvalidDates?: boolean;
+    /**
+     * Дополнительный класс для контейнера календаря
+     */
+    calendarContainerClassName?: string;
 };
 declare const CalendarRange: FC<CalendarRangeProps>;
 export { CalendarRangeProps, CalendarRange };

package/calendar-range/modern/Component.js

@@ -14,11 +14,12 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-e111b3f4.js';
+import './index.module-33e98a48.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/modern/desktop';
 import '../../calendar/modern/shared';
+import '../../shared/modern';
 import './utils.js';
 
 const CalendarRange = ({ calendarPosition = 'static', ...restProps }) => {

package/calendar-range/modern/index.js

@@ -14,10 +14,11 @@ import 'date-fns/isEqual';
 import 'date-fns/max';
 import 'date-fns/min';
 import 'date-fns/subMonths';
-import './index.module-e111b3f4.js';
+import './index.module-33e98a48.js';
 import './views/static.js';
 import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/modern/desktop';
 import '../../calendar/modern/shared';
+import '../../shared/modern';
 import './utils.js';

package/calendar-range/modern/{index.module-e111b3f4.js → index.module-33e98a48.js}

@@ -1,4 +1,4 @@
-const styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu"};
+const styles = {"component":"calendar-range__component_1rriu","static":"calendar-range__static_1rriu","calendar":"calendar-range__calendar_1rriu","calendarContainer":"calendar-range__calendarContainer_1rriu"};
 require('./views/index.css');
 
 export { styles as s };

package/calendar-range/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCalendarRangeTestIds } from "../utils";

package/calendar-range/modern/shared/index.js

@@ -0,0 +1,2 @@
+export { getCalendarRangeTestIds } from '../utils.js';
+import '../../../shared/modern';

package/calendar-range/modern/utils.d.ts

@@ -1,2 +1,7 @@
 declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { isDayButton };
+declare function getCalendarRangeTestIds(dataTestId: string): {
+    component: string;
+    calendarContainerFrom: string;
+    calendarContainerTo: string;
+};
+export { isDayButton, getCalendarRangeTestIds };

package/calendar-range/modern/utils.js

@@ -1,3 +1,12 @@
+import { getDataTestId } from '../../shared/modern';
+
 const isDayButton = (node) => node && node.tagName === 'BUTTON' && node.dataset.date;
+function getCalendarRangeTestIds(dataTestId) {
+    return {
+        component: dataTestId,
+        calendarContainerFrom: getDataTestId(dataTestId, 'container-from'),
+        calendarContainerTo: getDataTestId(dataTestId, 'container-to'),
+    };
+}
 
-export { isDayButton };
+export { getCalendarRangeTestIds, isDayButton };

package/calendar-range/modern/views/index.css

@@ -57,4 +57,8 @@
         width: var(--calendar-inner-width)
     } .calendar-range__static_1rriu .calendar-range__calendar_1rriu > div:first-child {
             padding: var(--gap-16) var(--gap-0) var(--gap-12);
-        }
+        } .calendar-range__calendarContainer_1rriu {
+    width: var(--calendar-inner-width);
+    display: flex;
+    justify-content: center;
+}

package/calendar-range/modern/views/popover.js

@@ -7,7 +7,7 @@ import { isCompleteDateInput } from '../../../date-input/modern';
 import { useDidUpdateEffect } from '@alfalab/hooks';
 import { Divider } from '../components/divider/Component.js';
 import { usePopoverViewMonthes } from '../hooks.js';
-import { s as styles } from '../index.module-e111b3f4.js';
+import { s as styles } from '../index.module-33e98a48.js';
 import 'date-fns/addMonths';
 import 'date-fns/isEqual';
 import 'date-fns/max';

package/calendar-range/modern/views/static.js

@@ -10,15 +10,16 @@ import { CalendarDesktop } from '../../../calendar/modern/desktop';
 import { usePeriodWithReset } from '../../../calendar/modern/shared';
 import { isValidInputValue, parseDateString, formatDate } from '../../../calendar-input/modern/shared';
 import { isCompleteDateInput, DateInput } from '../../../date-input/modern';
+import { getDataTestId } from '../../../shared/modern';
 import { Divider } from '../components/divider/Component.js';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
-import { s as styles } from '../index.module-e111b3f4.js';
+import { s as styles } from '../index.module-33e98a48.js';
 import 'date-fns/isEqual';
 import 'date-fns/min';
 
 /* eslint-disable complexity */
-const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, returnInvalidDates = false, dataTestId, }) => {
+const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, returnInvalidDates = false, dataTestId, calendarContainerClassName, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -162,17 +163,20 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
             React.createElement(DateInput, { ...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, { ...calendarFromProps, className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
-                    ? maxDate
-                    : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps })),
+            React.createElement("div", { className: cn(styles.calendarContainer, calendarContainerClassName), "data-test-id": getDataTestId(dataTestId, 'container-from') },
+                React.createElement(CalendarFromComponent, { ...calendarFromProps, className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
+                        ? maxDate
+                        : maxDate &&
+                            max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps }))),
         React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement("div", null,
             React.createElement(DateInput, { ...dateInputToProps, mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true }),
-            React.createElement(CalendarToComponent, { ...calendarToProps, className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
-                    ? minDate
-                    : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, ...rangeProps }))));
+            React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'container-to') },
+                React.createElement(CalendarToComponent, { ...calendarToProps, className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
+                        ? minDate
+                        : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, ...rangeProps })))));
 };
 
 export { CalendarRangeStatic };

package/calendar-range/moderncssm/Component.d.ts

@@ -85,6 +85,10 @@ type CalendarRangeProps = {
      * Возвращать невалидную дату для кастомной валидации
      */
     returnInvalidDates?: boolean;
+    /**
+     * Дополнительный класс для контейнера календаря
+     */
+    calendarContainerClassName?: string;
 };
 declare const CalendarRange: FC<CalendarRangeProps>;
 export { CalendarRangeProps, CalendarRange };

package/calendar-range/moderncssm/Component.js

@@ -20,6 +20,7 @@ import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/moderncssm/desktop';
 import '../../calendar/moderncssm/shared';
+import '../../shared/moderncssm';
 import './utils.js';
 
 const CalendarRange = ({ calendarPosition = 'static', ...restProps }) => {

package/calendar-range/moderncssm/index.js

@@ -21,4 +21,5 @@ import 'date-fns/endOfMonth';
 import 'date-fns/isSameMonth';
 import '../../calendar/moderncssm/desktop';
 import '../../calendar/moderncssm/shared';
+import '../../shared/moderncssm';
 import './utils.js';

package/calendar-range/moderncssm/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCalendarRangeTestIds } from "../utils";

package/calendar-range/moderncssm/shared/index.js

@@ -0,0 +1,2 @@
+export { getCalendarRangeTestIds } from '../utils.js';
+import '../../../shared/moderncssm';

package/calendar-range/moderncssm/utils.d.ts

@@ -1,2 +1,7 @@
 declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { isDayButton };
+declare function getCalendarRangeTestIds(dataTestId: string): {
+    component: string;
+    calendarContainerFrom: string;
+    calendarContainerTo: string;
+};
+export { isDayButton, getCalendarRangeTestIds };

package/calendar-range/moderncssm/utils.js

@@ -1,3 +1,12 @@
+import { getDataTestId } from '../../shared/moderncssm';
+
 const isDayButton = (node) => node && node.tagName === 'BUTTON' && node.dataset.date;
+function getCalendarRangeTestIds(dataTestId) {
+    return {
+        component: dataTestId,
+        calendarContainerFrom: getDataTestId(dataTestId, 'container-from'),
+        calendarContainerTo: getDataTestId(dataTestId, 'container-to'),
+    };
+}
 
-export { isDayButton };
+export { getCalendarRangeTestIds, isDayButton };

package/calendar-range/moderncssm/views/index.module.css

@@ -40,3 +40,8 @@
 .static .calendar > div:first-child {
             padding: var(--gap-16) var(--gap-0) var(--gap-12);
         }
+.calendarContainer {
+    width: var(--calendar-inner-width);
+    display: flex;
+    justify-content: center;
+}

package/calendar-range/moderncssm/views/static.js

@@ -10,6 +10,7 @@ import { CalendarDesktop } from '../../../calendar/moderncssm/desktop';
 import { usePeriodWithReset } from '../../../calendar/moderncssm/shared';
 import { isValidInputValue, parseDateString, formatDate } from '../../../calendar-input/moderncssm/shared';
 import { isCompleteDateInput, DateInput } from '../../../date-input/moderncssm';
+import { getDataTestId } from '../../../shared/moderncssm';
 import { Divider } from '../components/divider/Component.js';
 import { useStaticViewMonthes, useSelectionProps } from '../hooks.js';
 import { isDayButton } from '../utils.js';
@@ -19,7 +20,7 @@ import 'date-fns/isEqual';
 import 'date-fns/min';
 
 /* eslint-disable complexity */
-const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, returnInvalidDates = false, dataTestId, }) => {
+const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()).getTime(), defaultMonthPosition = 'left', minDate, maxDate, valueFrom = '', valueTo = '', onDateFromChange = () => null, onDateToChange = () => null, onChange = () => null, onError, inputFromProps = {}, inputToProps = {}, offDays, events, returnInvalidDates = false, dataTestId, calendarContainerClassName, }) => {
     const [inputFromValue, setInputFromValue] = useState(valueFrom);
     const [inputToValue, setInputToValue] = useState(valueTo);
     let dateFrom = isValidInputValue(inputFromValue, minDate, maxDate, offDays)
@@ -163,17 +164,20 @@ const CalendarRangeStatic = ({ className, defaultMonth = startOfMonth(new Date()
             React.createElement(DateInput, { ...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, { ...calendarFromProps, className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
-                    ? maxDate
-                    : maxDate && max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps })),
+            React.createElement("div", { className: cn(styles.calendarContainer, calendarContainerClassName), "data-test-id": getDataTestId(dataTestId, 'container-from') },
+                React.createElement(CalendarFromComponent, { ...calendarFromProps, className: cn(styles.calendar, calendarFromProps?.className), month: monthFrom, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthFromChange, minDate: minDate, maxDate: minMaxInSameMonth
+                        ? maxDate
+                        : maxDate &&
+                            max([maxDate, endOfMonth(subMonths(maxDate, 1))]).getTime(), ...rangeProps }))),
         React.createElement(Divider, { inputFromProps: inputFromProps, inputToProps: inputToProps }),
         React.createElement("div", null,
             React.createElement(DateInput, { ...dateInputToProps, mobileMode: dateInputToProps.mobileMode === 'popover'
                     ? 'input'
                     : dateInputToProps.mobileMode, value: inputToValue, onChange: handleInputToChange, onClear: handleClearTo, onBlur: handleValidInputTo, error: bothInvalid || inputToInvalid || dateInputToProps.error, clear: true, block: true }),
-            React.createElement(CalendarToComponent, { ...calendarToProps, className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
-                    ? minDate
-                    : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, ...rangeProps }))));
+            React.createElement("div", { "data-test-id": getDataTestId(dataTestId, 'container-to') },
+                React.createElement(CalendarToComponent, { ...calendarToProps, className: cn(styles.calendar, calendarToProps?.className), month: monthTo, selectorView: 'month-only', offDays: offDays, events: events, onChange: period.updatePeriod, onMonthChange: handleMonthToChange, minDate: minMaxInSameMonth
+                        ? minDate
+                        : minDate && startOfMonth(addMonths(minDate, 1)).getTime(), maxDate: maxDate, ...rangeProps })))));
 };
 
 export { CalendarRangeStatic };

package/calendar-range/shared/index.d.ts

@@ -0,0 +1 @@
+export { getCalendarRangeTestIds } from "../utils";

package/calendar-range/shared/index.js

@@ -0,0 +1,7 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getCalendarRangeTestIds = utils.getCalendarRangeTestIds;

package/calendar-range/utils.d.ts

@@ -1,2 +1,7 @@
 declare const isDayButton: (node: HTMLElement | null) => string | false | null | undefined;
-export { isDayButton };
+declare function getCalendarRangeTestIds(dataTestId: string): {
+    component: string;
+    calendarContainerFrom: string;
+    calendarContainerTo: string;
+};
+export { isDayButton, getCalendarRangeTestIds };

package/calendar-range/utils.js

@@ -1,7 +1,17 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var coreComponentsShared = require('../shared');
+
 var isDayButton = function (node) {
     return node && node.tagName === 'BUTTON' && node.dataset.date;
 };
+function getCalendarRangeTestIds(dataTestId) {
+    return {
+        component: dataTestId,
+        calendarContainerFrom: coreComponentsShared.getDataTestId(dataTestId, 'container-from'),
+        calendarContainerTo: coreComponentsShared.getDataTestId(dataTestId, 'container-to'),
+    };
+}
 
+exports.getCalendarRangeTestIds = getCalendarRangeTestIds;
 exports.isDayButton = isDayButton;

package/calendar-range/views/index.css

@@ -57,4 +57,8 @@
         width: var(--calendar-inner-width)
     } .calendar-range__static_1rriu .calendar-range__calendar_1rriu > div:first-child {
             padding: var(--gap-16) var(--gap-0) var(--gap-12);
-        }
+        } .calendar-range__calendarContainer_1rriu {
+    width: var(--calendar-inner-width);
+    display: flex;
+    justify-content: center;
+}

package/calendar-range/views/popover.js

@@ -10,7 +10,7 @@ var coreComponentsDateInput = require('../../date-input');
 var hooks$1 = require('@alfalab/hooks');
 var components_divider_Component = require('../components/divider/Component.js');
 var hooks = require('../hooks.js');
-var index_module = require('../index.module-0764a2af.js');
+var index_module = require('../index.module-ed2ad236.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }