@alfalab/core-components-date-range-input 1.1.0

package/Component.d.ts

@@ -0,0 +1,190 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (payload: {
+        dateFrom?: Date;
+        dateTo?: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType<CalendarProps>;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+};
+declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((payload: {
+        dateFrom?: Date | undefined;
+        dateTo?: Date | undefined;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ComponentClass<CalendarProps, any> | React.FunctionComponent<CalendarProps> | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        hasHeader?: boolean | undefined; /**
+         * Дополнительный класс
+         */
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: number | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputProps, DateRangeInput };

package/Component.js

@@ -0,0 +1,220 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('classnames');
+var mergeRefs = require('react-merge-refs');
+var dateFnsIsValid = require('date-fns/isValid');
+var hooks = require('@alfalab/hooks');
+var coreComponentsInput = require('@alfalab/core-components-input');
+var coreComponentsCalendar = require('@alfalab/core-components-calendar');
+var coreComponentsPopover = require('@alfalab/core-components-popover');
+var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
+var CalendarMIcon = require('@alfalab/icons-glyph/CalendarMIcon');
+require('date-fns/parse');
+var utils_format = require('./utils/format.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
+var mergeRefs__default = /*#__PURE__*/_interopDefaultLegacy(mergeRefs);
+var dateFnsIsValid__default = /*#__PURE__*/_interopDefaultLegacy(dateFnsIsValid);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign = function () {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s)
+                if (Object.prototype.hasOwnProperty.call(s, p))
+                    t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+function __rest(s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+var styles = {"component":"date-range-input__component_kztbp","calendarContainer":"date-range-input__calendarContainer_kztbp","calendarResponsive":"date-range-input__calendarResponsive_kztbp","block":"date-range-input__block_kztbp"};
+require('./index.css')
+
+/* eslint-disable no-useless-escape, jsx-a11y/click-events-have-key-events */
+var DateRangeInput = React__default['default'].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 = _g === void 0 ? coreComponentsCalendar.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 = hooks.useMedia([
+        ['mobile', '(max-width: 1023px)'],
+        ['desktop', '(min-width: 1024px)'],
+    ], 'desktop')[0];
+    var inputRef = React.useRef(null);
+    var calendarRef = React.useRef(null);
+    var _p = React.useState(propValue || defaultValue), value = _p[0], setValue = _p[1];
+    var _q = React.useState(false), open = _q[0], setOpen = _q[1];
+    var inputDisabled = disabled || readOnly;
+    var CalendarComponent = view === 'desktop' ? Calendar : coreComponentsCalendar.CalendarMobile;
+    var calendarResponsive = (_d = calendarProps === null || calendarProps === void 0 ? void 0 : calendarProps.responsive) !== null && _d !== void 0 ? _d : true;
+    React.useEffect(function () {
+        setOpen(defaultOpen);
+    }, [defaultOpen]);
+    var handlePeriodChange = function (selectedFrom, selectedTo) {
+        if (selectedFrom && !selectedTo && value.length === utils_format.DATE_MASK.length) {
+            setValue(utils_format.parseTimestampToDate(selectedFrom));
+        }
+        else if ((!selectedFrom && !selectedTo && value.length === utils_format.DATE_FORMAT.length) ||
+            (selectedFrom === selectedTo && value.length === utils_format.DATE_MASK.length)) {
+            setValue('');
+        }
+        if (onChange) {
+            onChange({
+                dateFrom: selectedFrom ? new Date(selectedFrom) : undefined,
+                dateTo: selectedTo ? new Date(selectedTo) : undefined,
+                value: value,
+            });
+        }
+        if (onComplete && selectedFrom && selectedTo) {
+            onComplete({
+                dateFrom: new Date(selectedFrom),
+                dateTo: new Date(selectedTo),
+                value: value,
+            });
+        }
+    };
+    var _r = coreComponentsCalendar.usePeriod({ onPeriodChange: handlePeriodChange }), selectedFrom = _r.selectedFrom, selectedTo = _r.selectedTo, updatePeriod = _r.updatePeriod, resetPeriod = _r.resetPeriod, setStart = _r.setStart, setEnd = _r.setEnd;
+    var handleInputWrapperFocus = function (event) {
+        if (view === 'desktop') {
+            if (!open && event.target.tagName !== 'INPUT' && calendarRef.current) {
+                calendarRef.current.focus();
+            }
+        }
+    };
+    var handleBlur = function (event) {
+        if (view === 'desktop') {
+            var target = (event.relatedTarget || document.activeElement);
+            if (calendarRef.current && calendarRef.current.contains(target) === false) {
+                setOpen(false);
+            }
+        }
+    };
+    var handleChange = function (event) {
+        var _a, _b;
+        var newValue = event.target.value;
+        if (newValue.length > utils_format.DATE_MASK.length)
+            return;
+        // Позволяем вводить только цифры, точки, дефис и пробелы
+        if (/[^\d. \- \d.]/.test(newValue)) {
+            return;
+        }
+        var dots = newValue.match(/\./g);
+        var hyphen = newValue.match(/\-/g);
+        // Не даем вводить больше, чем 4 точки и 1 дефис
+        if ((dots && dots.length > 4) || (hyphen && hyphen.length > 1)) {
+            return;
+        }
+        var formattedValue = utils_format.format(newValue);
+        var dateArr = formattedValue.split(' - ');
+        var dateFrom = utils_format.parseDateString(dateArr[0]);
+        var dateTo = utils_format.parseDateString(dateArr[1]);
+        if (selectedFrom && formattedValue.length < utils_format.DATE_FORMAT.length) {
+            setStart();
+        }
+        else if (selectedFrom && selectedTo) {
+            setEnd();
+        }
+        else if (dateFnsIsValid__default['default'](dateFrom) &&
+            ((_a = dateArr[0]) === null || _a === void 0 ? void 0 : _a.length) === utils_format.DATE_FORMAT.length &&
+            dateFrom.getTime() !== selectedFrom) {
+            setStart(dateFrom.getTime());
+        }
+        else if (dateFnsIsValid__default['default'](dateTo) &&
+            ((_b = dateArr[1]) === null || _b === void 0 ? void 0 : _b.length) === utils_format.DATE_FORMAT.length &&
+            dateTo.getTime() !== selectedTo) {
+            setEnd(dateTo.getTime());
+        }
+        setValue(formattedValue);
+        if (onChange)
+            onChange({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+        if (utils_format.isCompleteDateInput(formattedValue)) {
+            var valid = utils_format.isValid(formattedValue, dateArr[0], dateArr[1]);
+            if (!valid)
+                return;
+            if (onComplete) {
+                onComplete({ dateFrom: dateFrom, dateTo: dateTo, value: formattedValue }, event);
+            }
+        }
+    };
+    var handleCalendarClose = function () {
+        setOpen(false);
+    };
+    var handleClear = function () {
+        setValue('');
+        resetPeriod();
+    };
+    var handleCalendarChange = function (date) {
+        if (date) {
+            updatePeriod(date);
+        }
+    };
+    React.useEffect(function () {
+        if (selectedFrom && selectedTo) {
+            setValue(utils_format.parseTimestampToDate(selectedFrom) + " - " + utils_format.parseTimestampToDate(selectedTo));
+        }
+        else if (selectedFrom && value.length < utils_format.DATE_FORMAT.length) {
+            setValue(utils_format.parseTimestampToDate(selectedFrom));
+        }
+    }, [selectedFrom, selectedTo, value]);
+    var handleCalendarWrapperMouseDown = function (event) {
+        // Не дает инпуту терять фокус при выборе даты
+        event.preventDefault();
+    };
+    var handleInputWrapperClick = function () {
+        if (view === 'desktop' && !open) {
+            setOpen(true);
+        }
+    };
+    var handleIconButtonClick = function () {
+        if (!open)
+            setOpen(true);
+    };
+    var renderCalendar = function () { return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React__default['default'].createElement("div", { onMouseDown: handleCalendarWrapperMouseDown },
+        React__default['default'].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 })))); };
+    return (React__default['default'].createElement("div", { className: cn__default['default'](styles.component, className, (_b = {},
+            _b[styles.block] = block,
+            _b)), onClick: inputDisabled ? undefined : handleInputWrapperClick, onFocus: inputDisabled ? undefined : handleInputWrapperFocus, onBlur: handleBlur },
+        React__default['default'].createElement(coreComponentsInput.Input, __assign({}, restProps, { block: block, ref: mergeRefs__default['default']([ref, inputRef]), value: value, onChange: handleChange, disabled: disabled, readOnly: readOnly, className: inputClassName, onClear: handleClear, rightAddons: React__default['default'].createElement(React__default['default'].Fragment, null,
+                rightAddons,
+                picker && (React__default['default'].createElement(coreComponentsIconButton.IconButton, { onClick: inputDisabled ? undefined : handleIconButtonClick, icon: CalendarMIcon.CalendarMIcon, size: 'xxs' }))) })),
+        picker && (React__default['default'].createElement(coreComponentsPopover.Popover, { open: open, useAnchorWidth: useAnchorWidth, anchorElement: inputRef.current, popperClassName: cn__default['default'](styles.calendarContainer, (_c = {},
+                _c[styles.calendarResponsive] = calendarResponsive,
+                _c)), className: popoverClassName, position: popoverPosition, offset: [0, 8], withTransition: false, preventFlip: preventFlip, zIndex: zIndexPopover }, renderCalendar()))));
+});
+
+exports.DateRangeInput = DateRangeInput;

package/cssm/Component.d.ts

@@ -0,0 +1,190 @@
+/// <reference types="react" />
+import React from 'react';
+import { ChangeEvent, ElementType } from "react";
+import { InputProps } from "@alfalab/core-components-input";
+import { CalendarProps, CalendarMobileProps } from "@alfalab/core-components-calendar";
+import { PopoverProps } from "@alfalab/core-components-popover";
+type DateRangeInputProps = Omit<InputProps, 'onChange'> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: (payload: {
+        dateFrom?: Date;
+        dateTo?: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: (payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: ElementType<CalendarProps>;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarMobileProps & Record<string, unknown>);
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number;
+    /**
+     * Список событий
+     */
+    events?: Array<Date | number>;
+    /**
+     * Список выходных
+     */
+    offDays?: Array<Date | number>;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: PopoverProps['position'];
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: PopoverProps['zIndex'];
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean;
+};
+declare const DateRangeInput: React.ForwardRefExoticComponent<Pick<InputProps, "className" | "dataTestId" | "form" | "label" | "slot" | "style" | "title" | "pattern" | "leftAddons" | "rightAddons" | "size" | "block" | "colors" | "children" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "list" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "fieldClassName" | "labelClassName" | "addonsClassName" | "error" | "hint" | "labelView" | "bottomAddons" | "accept" | "alt" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "height" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "readOnly" | "required" | "src" | "width" | "clear" | "success" | "inputClassName" | "focusedClassName" | "filledClassName" | "onClear" | "wrapperRef"> & {
+    /**
+     * Дополнительный класс
+     */
+    className?: string | undefined;
+    /**
+     * Дополнительный класс для инпута
+     */
+    inputClassName?: string | undefined;
+    /**
+     * Дополнительный класс для поповера
+     */
+    popoverClassName?: string | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    picker?: boolean | undefined;
+    /**
+     * Обработчик изменения значения
+     */
+    onChange?: ((payload: {
+        dateFrom?: Date | undefined;
+        dateTo?: Date | undefined;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Обработчик окончания ввода
+     */
+    onComplete?: ((payload: {
+        dateFrom: Date;
+        dateTo: Date;
+        value: string;
+    }, event?: React.ChangeEvent<HTMLInputElement> | undefined) => void) | undefined;
+    /**
+     * Компонент календаря
+     */
+    Calendar?: React.ComponentClass<CalendarProps, any> | React.FunctionComponent<CalendarProps> | undefined;
+    /**
+     * Доп. пропсы для календаря
+     */
+    calendarProps?: (CalendarProps & Record<string, unknown>) | (CalendarProps & {
+        open: boolean;
+        title?: string | undefined;
+        onClose?: (() => void) | undefined;
+        yearsAmount?: number | undefined;
+        hasHeader?: boolean | undefined; /**
+         * Дополнительный класс
+         */
+        allowSelectionFromEmptyRange?: boolean | undefined;
+    } & Record<string, unknown>) | undefined;
+    /**
+     * Месяц в календаре по умолчанию (timestamp)
+     */
+    defaultMonth?: number | undefined;
+    /**
+     * Минимальная дата, доступная для выбора (timestamp)
+     */
+    minDate?: number | undefined;
+    /**
+     * Максимальная дата, доступная для выбора (timestamp)
+     */
+    maxDate?: number | undefined;
+    /**
+     * Список событий
+     */
+    events?: (number | Date)[] | undefined;
+    /**
+     * Список выходных
+     */
+    offDays?: (number | Date)[] | undefined;
+    /**
+     * Состояние открытия по умолчанию
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * Позиционирование поповера с календарем
+     */
+    popoverPosition?: "right" | "left" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end" | undefined;
+    /**
+     * z-index Popover
+     */
+    zIndexPopover?: number | undefined;
+    /**
+     * Запрещает поповеру менять свою позицию.
+     * Например, если места снизу недостаточно,то он все равно будет показан снизу
+     */
+    preventFlip?: boolean | undefined;
+    /**
+     * Календарь будет принимать ширину инпута
+     */
+    useAnchorWidth?: boolean | undefined;
+    /**
+     * Растягивает компонент на ширину контейнера
+     */
+    block?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export { DateRangeInputProps, DateRangeInput };