@alfalab/core-components-date-range-input 2.1.2 → 2.2.0

package/esm/{Component.js → Component-e59830f5.js}

@@ -2,13 +2,11 @@ import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import dateFnsIsValid from 'date-fns/isValid';
-import { usePeriod, CalendarMobile, Calendar } from '@alfalab/core-components-calendar/esm';
+import { usePeriod, Calendar } from '@alfalab/core-components-calendar/esm';
 import { IconButton } from '@alfalab/core-components-icon-button/esm';
 import { Input } from '@alfalab/core-components-input/esm';
 import { Popover } from '@alfalab/core-components-popover/esm';
-import { useMedia } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
-import 'date-fns/parse';
 import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
 
 /******************************************************************************
@@ -50,24 +48,19 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"date-range-input__component_1l4m9","calendarContainer":"date-range-input__calendarContainer_1l4m9","calendarResponsive":"date-range-input__calendarResponsive_1l4m9","block":"date-range-input__block_1l4m9"};
-require('./index.css')
+var styles = {"component":"date-range-input__component_1yhrr","calendarContainer":"date-range-input__calendarContainer_1yhrr","calendarResponsive":"date-range-input__calendarResponsive_1yhrr","block":"date-range-input__block_1yhrr"};
+require('./components/date-range-input/index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
 var DateRangeInput = React.forwardRef(function (_a, ref) {
     var _b, _c;
     var _d;
-    var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar$1 = _g === void 0 ? Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen"]);
-    var view = useMedia([
-        ['mobile', '(max-width: 1023px)'],
-        ['desktop', '(min-width: 1024px)'],
-    ], 'desktop')[0];
+    var className = _a.className, inputClassName = _a.inputClassName, popoverClassName = _a.popoverClassName, disabled = _a.disabled, readOnly = _a.readOnly, picker = _a.picker, _e = _a.defaultValue, defaultValue = _e === void 0 ? '' : _e, propValue = _a.value, onChange = _a.onChange, onComplete = _a.onComplete, rightAddons = _a.rightAddons, useAnchorWidth = _a.useAnchorWidth, block = _a.block, _f = _a.popoverPosition, popoverPosition = _f === void 0 ? 'bottom-start' : _f, zIndexPopover = _a.zIndexPopover, preventFlip = _a.preventFlip, _g = _a.Calendar, Calendar$1 = _g === void 0 ? Calendar : _g, _h = _a.calendarProps, calendarProps = _h === void 0 ? {} : _h, defaultMonth = _a.defaultMonth, _j = _a.minDate, minDate = _j === void 0 ? calendarProps.minDate : _j, _k = _a.maxDate, maxDate = _k === void 0 ? calendarProps.maxDate : _k, _l = _a.offDays, offDays = _l === void 0 ? calendarProps.offDays || [] : _l, _m = _a.events, events = _m === void 0 ? calendarProps.events || [] : _m, _o = _a.defaultOpen, defaultOpen = _o === void 0 ? false : _o, _p = _a.view, view = _p === void 0 ? 'desktop' : _p, restProps = __rest(_a, ["className", "inputClassName", "popoverClassName", "disabled", "readOnly", "picker", "defaultValue", "value", "onChange", "onComplete", "rightAddons", "useAnchorWidth", "block", "popoverPosition", "zIndexPopover", "preventFlip", "Calendar", "calendarProps", "defaultMonth", "minDate", "maxDate", "offDays", "events", "defaultOpen", "view"]);
     var inputRef = useRef(null);
     var calendarRef = useRef(null);
-    var _p = useState(propValue || defaultValue), value = _p[0], setValue = _p[1];
-    var _q = useState(false), open = _q[0], setOpen = _q[1];
+    var _q = useState(propValue || defaultValue), value = _q[0], setValue = _q[1];
+    var _r = useState(false), open = _r[0], setOpen = _r[1];
     var inputDisabled = disabled || readOnly;
-    var CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
     var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
     useEffect(function () {
         setOpen(defaultOpen);
@@ -95,7 +88,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
             });
         }
     };
-    var _r = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _r.selectedFrom, selectedTo = _r.selectedTo, updatePeriod = _r.updatePeriod, resetPeriod = _r.resetPeriod, setStart = _r.setStart, setEnd = _r.setEnd;
+    var _s = usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _s.selectedFrom, selectedTo = _s.selectedTo, updatePeriod = _s.updatePeriod, resetPeriod = _s.resetPeriod, setStart = _s.setStart, setEnd = _s.setEnd;
     var handleInputWrapperFocus = function (event) {
         if (view === 'desktop') {
             if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
@@ -172,7 +165,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
     };
     useEffect(function () {
         if (selectedFrom && selectedTo) {
-            setValue(parseTimestampToDate(selectedFrom) + " - " + parseTimestampToDate(selectedTo));
+            setValue("".concat(parseTimestampToDate(selectedFrom), " - ").concat(parseTimestampToDate(selectedTo)));
         }
         else if (selectedFrom && value.length < DATE_FORMAT.length) {
             setValue(parseTimestampToDate(selectedFrom));
@@ -194,7 +187,7 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
     var renderCalendar = function () { return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React.createElement(CalendarComponent, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
+        React.createElement(Calendar$1, __assign({}, calendarProps, { responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })))); };
     return (React.createElement("div", { className: cn(styles.component, className, (_b = {},
             _b[styles.block] = block,
             _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
@@ -206,4 +199,4 @@ var DateRangeInput = React.forwardRef(function (_a, ref) {
                 _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
 });
 
-export { DateRangeInput };
+export { DateRangeInput as D, __assign as _, __rest as a };

package/esm/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./Component-e59830f5";
+type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view'>;
+declare const DateRangeInputDesktop: FC<DateRangeInputDesktopProps>;
+export { DateRangeInputDesktopProps, DateRangeInputDesktop };

package/esm/Component.desktop.js

@@ -0,0 +1,16 @@
+import { D as DateRangeInput, _ as __assign } from './Component-e59830f5.js';
+import React from 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+var DateRangeInputDesktop = function (props) { return (React.createElement(DateRangeInput, __assign({}, props))); };
+
+export { DateRangeInputDesktop };

package/esm/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./Component-e59830f5";
+type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view'>;
+declare const DateRangeInputMobile: FC<DateRangeInputMobileProps>;
+export { DateRangeInputMobileProps, DateRangeInputMobile };

package/esm/Component.mobile.js

@@ -0,0 +1,16 @@
+import { D as DateRangeInput, _ as __assign } from './Component-e59830f5.js';
+import React from 'react';
+import { CalendarMobile } from '@alfalab/core-components-calendar/esm';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+var DateRangeInputMobile = function (props) { return (React.createElement(DateRangeInput, __assign({ Calendar: CalendarMobile, view: 'mobile' }, props))); };
+
+export { DateRangeInputMobile };

package/esm/Component.responsive.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./Component-e59830f5";
+type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type DateRangeInputMedia = 'desktop' | 'mobile';
+declare const DateRangeInputResponsive: FC<DateRangeInputResponsiveProps>;
+export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/esm/Component.responsive.js

@@ -0,0 +1,26 @@
+import { a as __rest, _ as __assign } from './Component-e59830f5.js';
+import React from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { DateRangeInputDesktop } from './Component.desktop.js';
+import { DateRangeInputMobile } from './Component.mobile.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+var DateRangeInputResponsive = function (_a) {
+    var _b = _a.breakpoint, breakpoint = _b === void 0 ? 1024 : _b, restProps = __rest(_a, ["breakpoint"]);
+    var view = useMedia([
+        ['mobile', "(max-width: ".concat(breakpoint - 1, "px)")],
+        ['desktop', "(min-width: ".concat(breakpoint, "px)")],
+    ], 'desktop')[0];
+    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, __assign({}, restProps))) : (React.createElement(DateRangeInputMobile, __assign({}, restProps)));
+};
+
+export { DateRangeInputResponsive };

package/esm/components/date-range-input/Component.js

@@ -0,0 +1,12 @@
+export { D as DateRangeInput } from '../../Component-e59830f5.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../utils/format.js';
+import 'date-fns/parse';

package/{index.css → esm/components/date-range-input/index.css}

@@ -1,4 +1,4 @@
-/* hash: 1exyq */
+/* hash: 2v93k */
 :root {
 
     /* Hard */
@@ -39,26 +39,26 @@
 :root {
     --calendar-popover-border-radius: 0 0 var(--border-radius-s) var(--border-radius-s);
 }
-.date-range-input__component_1l4m9 {
+.date-range-input__component_1yhrr {
     display: inline-block;
     outline: none;
     position: relative;
 }
-.date-range-input__calendarContainer_1l4m9 {
+.date-range-input__calendarContainer_1yhrr {
     display: inline-block;
     box-sizing: border-box;
     border-radius: var(--calendar-popover-border-radius)
 }
 @media (max-width: 374px) {
-.date-range-input__calendarContainer_1l4m9 {
+.date-range-input__calendarContainer_1yhrr {
         width: 100%;
         min-width: 288px
 }
     }
-.date-range-input__calendarResponsive_1l4m9 {
+.date-range-input__calendarResponsive_1yhrr {
     width: var(--calendar-width);
     padding: 0 var(--gap-m);
 }
-.date-range-input__block_1l4m9 {
+.date-range-input__block_1yhrr {
     width: 100%;
 }

package/esm/components/date-range-input/index.d.ts

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

package/esm/components/date-range-input/index.js

@@ -0,0 +1,12 @@
+export { D as DateRangeInput } from '../../Component-e59830f5.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import '../../utils/format.js';
+import 'date-fns/parse';

package/esm/desktop.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.desktop";
+export {};

package/esm/desktop.js

@@ -0,0 +1,13 @@
+export { DateRangeInputDesktop } from './Component.desktop.js';
+import './Component-e59830f5.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';

package/esm/index.d.ts

@@ -1 +1 @@
-export * from "./Component";
+export { DateRangeInputResponsive as DateRangeInput, DateRangeInputResponsiveProps as DateRangeInputProps } from "./responsive";

package/esm/index.js

@@ -1,4 +1,5 @@
-export { DateRangeInput } from './Component.js';
+export { DateRangeInputResponsive as DateRangeInput } from './Component.responsive.js';
+import './Component-e59830f5.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';
@@ -7,7 +8,9 @@ import '@alfalab/core-components-calendar/esm';
 import '@alfalab/core-components-icon-button/esm';
 import '@alfalab/core-components-input/esm';
 import '@alfalab/core-components-popover/esm';
-import '@alfalab/hooks';
 import '@alfalab/icons-glyph/CalendarMIcon';
-import 'date-fns/parse';
 import './utils/format.js';
+import 'date-fns/parse';
+import '@alfalab/hooks';
+import './Component.desktop.js';
+import './Component.mobile.js';

package/esm/mobile.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/esm/mobile.js

@@ -0,0 +1,13 @@
+export { DateRangeInputMobile } from './Component.mobile.js';
+import './Component-e59830f5.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';

package/esm/responsive.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.responsive";
+export {};

package/esm/responsive.js

@@ -0,0 +1,16 @@
+export { DateRangeInputResponsive } from './Component.responsive.js';
+import './Component-e59830f5.js';
+import 'react';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/esm';
+import '@alfalab/core-components-icon-button/esm';
+import '@alfalab/core-components-input/esm';
+import '@alfalab/core-components-popover/esm';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+import '@alfalab/hooks';
+import './Component.desktop.js';
+import './Component.mobile.js';

package/esm/utils/format.js

@@ -72,12 +72,12 @@ var parseTimestampToDate = function (timestamp) {
     var month = date.getMonth() + 1;
     var day = date.getDate();
     if (month < 10) {
-        month = "0" + month;
+        month = "0".concat(month);
     }
     if (day < 10) {
-        day = "0" + day;
+        day = "0".concat(day);
     }
-    return day + "." + month + "." + year;
+    return "".concat(day, ".").concat(month, ".").concat(year);
 };
 
 export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate };

package/esm/utils/index.js

@@ -1,3 +1,3 @@
+export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';
 import 'date-fns/isValid';
 import 'date-fns/parse';
-export { DATE_FORMAT, DATE_MASK, format, isCompleteDateInput, isValid, parseDateString, parseTimestampToDate } from './format.js';

package/index.d.ts

@@ -1 +1 @@
-export * from "./Component";
+export { DateRangeInputResponsive as DateRangeInput, DateRangeInputResponsiveProps as DateRangeInputProps } from "./responsive";

package/index.js

@@ -1,8 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Component = require('./Component.js');
+var Component_responsive = require('./Component.responsive.js');
+require('./Component-105ad648.js');
 require('react');
 require('react-merge-refs');
 require('classnames');
@@ -11,11 +10,13 @@ require('@alfalab/core-components-calendar');
 require('@alfalab/core-components-icon-button');
 require('@alfalab/core-components-input');
 require('@alfalab/core-components-popover');
-require('@alfalab/hooks');
 require('@alfalab/icons-glyph/CalendarMIcon');
-require('date-fns/parse');
 require('./utils/format.js');
+require('date-fns/parse');
+require('@alfalab/hooks');
+require('./Component.desktop.js');
+require('./Component.mobile.js');
 
 
 
-exports.DateRangeInput = Component.DateRangeInput;
+exports.DateRangeInput = Component_responsive.DateRangeInputResponsive;

package/mobile.d.ts

@@ -0,0 +1,2 @@
+export * from "./Component.mobile";
+export {};

package/mobile.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var Component_mobile = require('./Component.mobile.js');
+require('./Component-105ad648.js');
+require('react');
+require('react-merge-refs');
+require('classnames');
+require('date-fns/isValid');
+require('@alfalab/core-components-calendar');
+require('@alfalab/core-components-icon-button');
+require('@alfalab/core-components-input');
+require('@alfalab/core-components-popover');
+require('@alfalab/icons-glyph/CalendarMIcon');
+require('./utils/format.js');
+require('date-fns/parse');
+
+
+
+exports.DateRangeInputMobile = Component_mobile.DateRangeInputMobile;

package/modern/Component.desktop.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./components/date-range-input/Component";
+type DateRangeInputDesktopProps = Omit<DateRangeInputProps, 'view'>;
+declare const DateRangeInputDesktop: FC<DateRangeInputDesktopProps>;
+export { DateRangeInputDesktopProps, DateRangeInputDesktop };

package/modern/Component.desktop.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DateRangeInput } from './components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/modern';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-popover/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+const DateRangeInputDesktop = (props) => (React.createElement(DateRangeInput, { ...props }));
+
+export { DateRangeInputDesktop };

package/modern/Component.mobile.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./components/date-range-input/Component";
+type DateRangeInputMobileProps = Omit<DateRangeInputProps, 'view'>;
+declare const DateRangeInputMobile: FC<DateRangeInputMobileProps>;
+export { DateRangeInputMobileProps, DateRangeInputMobile };

package/modern/Component.mobile.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CalendarMobile } from '@alfalab/core-components-calendar/modern';
+import { DateRangeInput } from './components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-popover/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+const DateRangeInputMobile = (props) => (React.createElement(DateRangeInput, { Calendar: CalendarMobile, view: 'mobile', ...props }));
+
+export { DateRangeInputMobile };

package/modern/Component.responsive.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { DateRangeInputProps } from "./components/date-range-input/Component";
+type DateRangeInputResponsiveProps = Omit<DateRangeInputProps, 'view'> & {
+    /**
+     * Контрольная точка, с нее начинается desktop версия
+     * @default 1024
+     */
+    breakpoint?: number;
+};
+type DateRangeInputMedia = 'desktop' | 'mobile';
+declare const DateRangeInputResponsive: FC<DateRangeInputResponsiveProps>;
+export { DateRangeInputResponsiveProps, DateRangeInputMedia, DateRangeInputResponsive };

package/modern/Component.responsive.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useMedia } from '@alfalab/hooks';
+import { DateRangeInputDesktop } from './Component.desktop.js';
+import { DateRangeInputMobile } from './Component.mobile.js';
+import './components/date-range-input/Component.js';
+import 'react-merge-refs';
+import 'classnames';
+import 'date-fns/isValid';
+import '@alfalab/core-components-calendar/modern';
+import '@alfalab/core-components-icon-button/modern';
+import '@alfalab/core-components-input/modern';
+import '@alfalab/core-components-popover/modern';
+import '@alfalab/icons-glyph/CalendarMIcon';
+import './utils/format.js';
+import 'date-fns/parse';
+
+const DateRangeInputResponsive = ({ breakpoint = 1024, ...restProps }) => {
+    const [view] = useMedia([
+        ['mobile', `(max-width: ${breakpoint - 1}px)`],
+        ['desktop', `(min-width: ${breakpoint}px)`],
+    ], 'desktop');
+    return view === 'desktop' ? (React.createElement(DateRangeInputDesktop, { ...restProps })) : (React.createElement(DateRangeInputMobile, { ...restProps }));
+};
+
+export { DateRangeInputResponsive };

package/{Component.d.ts → modern/components/date-range-input/Component.d.ts}

@@ -40,7 +40,7 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
     /**
      * Компонент календаря
      */
-    Calendar?: ElementType<CalendarProps>;
+    Calendar?: ElementType;
     /**
      * Доп. пропсы для календаря
      */
@@ -90,6 +90,10 @@ type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
      * Растягивает компонент на ширину контейнера
      */
     block?: boolean;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
 };
 declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "onChange"> & {
     /**
@@ -115,7 +119,7 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
         dateFrom?: Date;
         dateTo?: Date;
         value: string;
-    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
     /**
      * Обработчик окончания ввода
      */
@@ -123,11 +127,11 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
         dateFrom: Date;
         dateTo: Date;
         value: string;
-    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    }, event?: ChangeEvent<HTMLInputElement>) => void) | undefined;
     /**
      * Компонент календаря
      */
-    Calendar?: React.ElementType<CalendarProps> | undefined;
+    Calendar?: React.ElementType<any> | undefined;
     /**
      * Доп. пропсы для календаря
      */
@@ -184,5 +188,9 @@ declare const DateRangeInput: React.ForwardRefExoticComponent<Omit<InputProps, "
      * Растягивает компонент на ширину контейнера
      */
     block?: boolean | undefined;
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: "desktop" | "mobile" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export { DateRangeInputProps, DateRangeInput };

package/modern/{Component.js → components/date-range-input/Component.js}

@@ -2,30 +2,24 @@ import React, { useRef, useState, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 import dateFnsIsValid from 'date-fns/isValid';
-import { Calendar, usePeriod, CalendarMobile } from '@alfalab/core-components-calendar/modern';
+import { usePeriod, Calendar } from '@alfalab/core-components-calendar/modern';
 import { IconButton } from '@alfalab/core-components-icon-button/modern';
 import { Input } from '@alfalab/core-components-input/modern';
 import { Popover } from '@alfalab/core-components-popover/modern';
-import { useMedia } from '@alfalab/hooks';
 import { CalendarMIcon } from '@alfalab/icons-glyph/CalendarMIcon';
+import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from '../../utils/format.js';
 import 'date-fns/parse';
-import { parseTimestampToDate, DATE_FORMAT, DATE_MASK, format, parseDateString, isCompleteDateInput, isValid } from './utils/format.js';
 
-var styles = {"component":"date-range-input__component_1l4m9","calendarContainer":"date-range-input__calendarContainer_1l4m9","calendarResponsive":"date-range-input__calendarResponsive_1l4m9","block":"date-range-input__block_1l4m9"};
+const styles = {"component":"date-range-input__component_1yhrr","calendarContainer":"date-range-input__calendarContainer_1yhrr","calendarResponsive":"date-range-input__calendarResponsive_1yhrr","block":"date-range-input__block_1yhrr"};
 require('./index.css')
 
 /* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
-const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, ...restProps }, ref) => {
-    const [view] = useMedia([
-        ['mobile', '(max-width: 1023px)'],
-        ['desktop', '(min-width: 1024px)'],
-    ], 'desktop');
+const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverClassName, disabled, readOnly, picker, defaultValue = '', value: propValue, onChange, onComplete, rightAddons, useAnchorWidth, block, popoverPosition = 'bottom-start', zIndexPopover, preventFlip, Calendar: Calendar$1 = Calendar, calendarProps = {}, defaultMonth, minDate = calendarProps.minDate, maxDate = calendarProps.maxDate, offDays = calendarProps.offDays || [], events = calendarProps.events || [], defaultOpen = false, view = 'desktop', ...restProps }, ref) => {
     const inputRef = useRef(null);
     const calendarRef = useRef(null);
     const [value, setValue] = useState(propValue || defaultValue);
     const [open, setOpen] = useState(false);
     const inputDisabled = disabled || readOnly;
-    const CalendarComponent = view === 'desktop' ? Calendar$1 : CalendarMobile;
     const calendarResponsive = calendarProps?.responsive ?? true;
     useEffect(() => {
         setOpen(defaultOpen);
@@ -151,7 +145,7 @@ const DateRangeInput = React.forwardRef(({ className, inputClassName, popoverCla
     const renderCalendar = () => (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     React.createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
-        React.createElement(CalendarComponent, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
+        React.createElement(Calendar$1, { ...calendarProps, responsive: calendarResponsive, open: open, onClose: handleCalendarClose, ref: calendarRef, defaultMonth: defaultMonth, selectedFrom: selectedFrom, selectedTo: selectedTo, onChange: handleCalendarChange, minDate: minDate, maxDate: maxDate, offDays: offDays, events: events })));
     return (React.createElement("div", { className: cn(styles.component, className, {
             [styles.block]: block,
         }), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },