@alfalab/core-components-calendar-range 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.1.0](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.0.4...@alfalab/core-components-calendar-range@4.1.0) (2021-12-08)
+
+
+### Features
+
+* **calendar:** мобильные стили ([#867](https://github.com/alfa-laboratory/core-components/issues/867)) ([febf545](https://github.com/alfa-laboratory/core-components/commit/febf54551f8179a1ba03fe65ed47aa3b20b01472))
+
+
+
+
+
+## [4.0.4](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.0.3...@alfalab/core-components-calendar-range@4.0.4) (2021-12-01)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-range
+
+
+
+
+
+## [4.0.3](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.0.2...@alfalab/core-components-calendar-range@4.0.3) (2021-11-26)
+
+**Note:** Version bump only for package @alfalab/core-components-calendar-range
+
+
+
+
+
+## [4.0.2](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.0.1...@alfalab/core-components-calendar-range@4.0.2) (2021-11-22)
+
+
+### Bug Fixes
+
+* **calendar-range:** fix default month to ([#868](https://github.com/alfa-laboratory/core-components/issues/868)) ([1f9fb97](https://github.com/alfa-laboratory/core-components/commit/1f9fb9709292d28300c3fc4386ffd858b2efd852))
+
+
+
+
+
 ## [4.0.1](https://github.com/alfa-laboratory/core-components/compare/@alfalab/core-components-calendar-range@4.0.0...@alfalab/core-components-calendar-range@4.0.1) (2021-11-16)
 
 **Note:** Version bump only for package @alfalab/core-components-calendar-range

package/dist/Component.js

@@ -43,7 +43,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"calendar-range__component_1r9cz","divider":"calendar-range__divider_1r9cz"};
+var styles = {"component":"calendar-range__component_1lna6","divider":"calendar-range__divider_1lna6"};
 require('./index.css')
 
 var CalendarRange = function (_a) {
@@ -187,11 +187,11 @@ var CalendarRange = function (_a) {
         minDate: minDate,
     });
     return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className), "data-test-id": dataTestId },
-        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputFromProps, { calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
+        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
                 selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
         React__default['default'].createElement("span", { className: styles.divider }),
         React__default['default'].createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
+            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
                     selectedFrom: selectedFrom,
                     selectedTo: selectedTo }) })))));
 };

package/dist/cssm/Component.js

@@ -186,11 +186,11 @@ var CalendarRange = function (_a) {
         minDate: minDate,
     });
     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, __assign({}, inputFromProps, { calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
+        React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
                 selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
         React__default['default'].createElement("span", { className: styles__default['default'].divider }),
         React__default['default'].createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
+            React__default['default'].createElement(coreComponentsCalendarInput.CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
                     selectedFrom: selectedFrom,
                     selectedTo: selectedTo }) })))));
 };

package/dist/cssm/useCalendarMonthes.js

@@ -7,10 +7,18 @@ var dateFns = require('date-fns');
 
 function useCalendarMonthes(_a) {
     var inputValueFrom = _a.inputValueFrom, inputValueTo = _a.inputValueTo, defaultMonth = _a.defaultMonth, isPopover = _a.isPopover;
-    var initialMonthFrom = !inputValueFrom.value || !inputValueFrom.date
-        ? defaultMonth
-        : dateFns.startOfMonth(inputValueFrom.date).getTime();
-    var initialMonthTo = isPopover ? initialMonthFrom : dateFns.addMonths(initialMonthFrom, 1).getTime();
+    var initialMonthFrom = (function () {
+        if (inputValueFrom.value && inputValueFrom.date) {
+            return dateFns.startOfMonth(inputValueFrom.date).getTime();
+        }
+        return defaultMonth;
+    })();
+    var initialMonthTo = (function () {
+        if (inputValueTo.value && inputValueTo.date) {
+            return dateFns.startOfMonth(inputValueTo.date).getTime();
+        }
+        return isPopover ? initialMonthFrom : dateFns.addMonths(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) {

package/dist/esm/Component.js

@@ -34,7 +34,7 @@ var __assign = function () {
     return __assign.apply(this, arguments);
 };
 
-var styles = {"component":"calendar-range__component_1r9cz","divider":"calendar-range__divider_1r9cz"};
+var styles = {"component":"calendar-range__component_1lna6","divider":"calendar-range__divider_1lna6"};
 require('./index.css')
 
 var CalendarRange = function (_a) {
@@ -178,11 +178,11 @@ var CalendarRange = function (_a) {
         minDate: minDate,
     });
     return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(CalendarInput, __assign({}, inputFromProps, { calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
+        React.createElement(CalendarInput, __assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: __assign(__assign({}, inputFromProps.calendarProps), { month: monthFrom, onMonthChange: handleMonthFromChange, selectorView: selectorView,
                 selectedFrom: selectedFrom, selectedTo: calendarSelectedTo }) })),
         React.createElement("span", { className: styles.divider }),
         React.createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React.createElement(CalendarInput, __assign({}, inputToProps, { calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
+            React.createElement(CalendarInput, __assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: __assign(__assign({}, inputToProps.calendarProps), { month: monthTo, onMonthChange: handleMonthToChange, selectorView: selectorView,
                     selectedFrom: selectedFrom,
                     selectedTo: selectedTo }) })))));
 };

package/dist/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: jkizo */
+/* hash: n3311 */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -13,13 +13,13 @@
 :root {
     --gap-xs: 8px;
 }
-.calendar-range__component_1r9cz {
+.calendar-range__component_1lna6 {
     display: flex
 }
-.calendar-range__component_1r9cz button[aria-selected='true'] {
+.calendar-range__component_1lna6 button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__divider_1r9cz {
+.calendar-range__divider_1lna6 {
     height: 48px;
     display: flex;
     align-items: center;
@@ -27,7 +27,7 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1r9cz:after {
+.calendar-range__divider_1lna6:after {
         content: '';
         display: block;
         width: 100%;

package/dist/esm/useCalendarMonthes.js

@@ -3,10 +3,18 @@ import { startOfMonth, addMonths, subMonths } from 'date-fns';
 
 function useCalendarMonthes(_a) {
     var inputValueFrom = _a.inputValueFrom, inputValueTo = _a.inputValueTo, defaultMonth = _a.defaultMonth, isPopover = _a.isPopover;
-    var initialMonthFrom = !inputValueFrom.value || !inputValueFrom.date
-        ? defaultMonth
-        : startOfMonth(inputValueFrom.date).getTime();
-    var initialMonthTo = isPopover ? initialMonthFrom : addMonths(initialMonthFrom, 1).getTime();
+    var initialMonthFrom = (function () {
+        if (inputValueFrom.value && inputValueFrom.date) {
+            return startOfMonth(inputValueFrom.date).getTime();
+        }
+        return defaultMonth;
+    })();
+    var initialMonthTo = (function () {
+        if (inputValueTo.value && inputValueTo.date) {
+            return startOfMonth(inputValueTo.date).getTime();
+        }
+        return isPopover ? initialMonthFrom : addMonths(initialMonthFrom, 1).getTime();
+    })();
     var _b = useState(initialMonthFrom), monthFrom = _b[0], setMonthFrom = _b[1];
     var _c = useState(initialMonthTo), monthTo = _c[0], setMonthTo = _c[1];
     var handleMonthFromChange = useCallback(function (newMonthFrom) {

package/dist/index.css

@@ -1,4 +1,4 @@
-/* hash: jkizo */
+/* hash: n3311 */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -13,13 +13,13 @@
 :root {
     --gap-xs: 8px;
 }
-.calendar-range__component_1r9cz {
+.calendar-range__component_1lna6 {
     display: flex
 }
-.calendar-range__component_1r9cz button[aria-selected='true'] {
+.calendar-range__component_1lna6 button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__divider_1r9cz {
+.calendar-range__divider_1lna6 {
     height: 48px;
     display: flex;
     align-items: center;
@@ -27,7 +27,7 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1r9cz:after {
+.calendar-range__divider_1lna6:after {
         content: '';
         display: block;
         width: 100%;

package/dist/modern/Component.js

@@ -7,7 +7,7 @@ import { initialValueState, getCorrectValueState, isDayButton } from './utils.js
 import { useCalendarMonthes } from './useCalendarMonthes.js';
 import { useCalendarMaxMinDates } from './useCalendarMaxMinDates.js';
 
-var styles = {"component":"calendar-range__component_1r9cz","divider":"calendar-range__divider_1r9cz"};
+var styles = {"component":"calendar-range__component_1lna6","divider":"calendar-range__divider_1lna6"};
 require('./index.css')
 
 /* eslint-disable multiline-comment-style */
@@ -149,7 +149,7 @@ const CalendarRange = ({ className, defaultMonth = startOfMonth(new Date()).getT
         minDate,
     });
     return (React.createElement("div", { className: cn(styles.component, className), "data-test-id": dataTestId },
-        React.createElement(CalendarInput, Object.assign({}, inputFromProps, { calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: {
+        React.createElement(CalendarInput, Object.assign({}, inputFromProps, { useAnchorWidth: false, calendarPosition: calendarPosition, onInputChange: handleInputFromChange, onCalendarChange: handleFromCalendarChange, value: inputValueFrom.value, minDate: maxMinDates.fromMinDate, maxDate: maxMinDates.fromMaxDate, calendarProps: {
                 ...inputFromProps.calendarProps,
                 month: monthFrom,
                 onMonthChange: handleMonthFromChange,
@@ -159,7 +159,7 @@ const CalendarRange = ({ className, defaultMonth = startOfMonth(new Date()).getT
             } })),
         React.createElement("span", { className: styles.divider }),
         React.createElement("div", { onMouseOver: handleCalendarToMouseOver },
-            React.createElement(CalendarInput, Object.assign({}, inputToProps, { calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: {
+            React.createElement(CalendarInput, Object.assign({}, inputToProps, { useAnchorWidth: false, calendarPosition: calendarPosition, popoverPosition: 'bottom-end', onInputChange: handleInputToChange, onCalendarChange: handleToCalendarChange, value: inputValueTo.value, minDate: maxMinDates.toMinDate, maxDate: maxMinDates.toMaxDate, calendarProps: {
                     ...inputToProps.calendarProps,
                     month: monthTo,
                     onMonthChange: handleMonthToChange,

package/dist/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: jkizo */
+/* hash: n3311 */
 :root {
     --color-light-graphic-primary: #0b1f35;
 }
@@ -13,13 +13,13 @@
 :root {
     --gap-xs: 8px;
 }
-.calendar-range__component_1r9cz {
+.calendar-range__component_1lna6 {
     display: flex
 }
-.calendar-range__component_1r9cz button[aria-selected='true'] {
+.calendar-range__component_1lna6 button[aria-selected='true'] {
         cursor: pointer;
     }
-.calendar-range__divider_1r9cz {
+.calendar-range__divider_1lna6 {
     height: 48px;
     display: flex;
     align-items: center;
@@ -27,7 +27,7 @@
     width: 16px;
     margin: 0 var(--gap-xs)
 }
-.calendar-range__divider_1r9cz:after {
+.calendar-range__divider_1lna6:after {
         content: '';
         display: block;
         width: 100%;

package/dist/modern/useCalendarMonthes.js

@@ -2,10 +2,18 @@ import { useState, useCallback } from 'react';
 import { startOfMonth, addMonths, subMonths } from 'date-fns';
 
 function useCalendarMonthes({ inputValueFrom, inputValueTo, defaultMonth, isPopover, }) {
-    const initialMonthFrom = !inputValueFrom.value || !inputValueFrom.date
-        ? defaultMonth
-        : startOfMonth(inputValueFrom.date).getTime();
-    const initialMonthTo = isPopover ? initialMonthFrom : addMonths(initialMonthFrom, 1).getTime();
+    const initialMonthFrom = (() => {
+        if (inputValueFrom.value && inputValueFrom.date) {
+            return startOfMonth(inputValueFrom.date).getTime();
+        }
+        return defaultMonth;
+    })();
+    const initialMonthTo = (() => {
+        if (inputValueTo.value && inputValueTo.date) {
+            return startOfMonth(inputValueTo.date).getTime();
+        }
+        return isPopover ? initialMonthFrom : addMonths(initialMonthFrom, 1).getTime();
+    })();
     const [monthFrom, setMonthFrom] = useState(initialMonthFrom);
     const [monthTo, setMonthTo] = useState(initialMonthTo);
     const handleMonthFromChange = useCallback((newMonthFrom) => {

package/dist/useCalendarMonthes.js

@@ -7,10 +7,18 @@ var dateFns = require('date-fns');
 
 function useCalendarMonthes(_a) {
     var inputValueFrom = _a.inputValueFrom, inputValueTo = _a.inputValueTo, defaultMonth = _a.defaultMonth, isPopover = _a.isPopover;
-    var initialMonthFrom = !inputValueFrom.value || !inputValueFrom.date
-        ? defaultMonth
-        : dateFns.startOfMonth(inputValueFrom.date).getTime();
-    var initialMonthTo = isPopover ? initialMonthFrom : dateFns.addMonths(initialMonthFrom, 1).getTime();
+    var initialMonthFrom = (function () {
+        if (inputValueFrom.value && inputValueFrom.date) {
+            return dateFns.startOfMonth(inputValueFrom.date).getTime();
+        }
+        return defaultMonth;
+    })();
+    var initialMonthTo = (function () {
+        if (inputValueTo.value && inputValueTo.date) {
+            return dateFns.startOfMonth(inputValueTo.date).getTime();
+        }
+        return isPopover ? initialMonthFrom : dateFns.addMonths(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) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-calendar-range",
-    "version": "4.0.1",
+    "version": "4.1.0",
     "description": "Calendar range component",
     "keywords": [],
     "license": "MIT",
@@ -19,11 +19,11 @@
         "react-dom": "^16.9.0 || ^17.0.1"
     },
     "dependencies": {
-        "@alfalab/core-components-calendar": "^3.1.3",
-        "@alfalab/core-components-calendar-input": "^5.0.1",
+        "@alfalab/core-components-calendar": "^3.2.0",
+        "@alfalab/core-components-calendar-input": "^5.1.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.16.1",
         "react-merge-refs": "^1.1.0"
     },
-    "gitHead": "f9b419c80381117e6006f155af4bee4877a3ace0"
+    "gitHead": "19a2d088b6c18a127940199cfd6e6fc4e8639ec5"
 }