@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/DateRangeInput/DateRangeInput.js

@@ -1,273 +1,280 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["shouldDisableDate", "disableFuture", "disablePast", "value", "onChange", "calendarPlacement", "style", "className", "closeOnChange", "disablePickers", "getRootRef", "name", "autoFocus", "disabled", "onClick", "onFocus", "prevMonthAriaLabel", "nextMonthAriaLabel", "changeDayAriaLabel", "changeMonthAriaLabel", "changeYearAriaLabel", "changeStartDayAriaLabel", "changeStartMonthAriaLabel", "changeStartYearAriaLabel", "changeEndDayAriaLabel", "changeEndMonthAriaLabel", "changeEndYearAriaLabel", "clearFieldAriaLabel", "showCalendarAriaLabel", "prevMonthIcon", "nextMonthIcon", "disableCalendar"];
-import * as React from 'react';
-import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { useDateInput } from '../../hooks/useDateInput';
-import { useExternRef } from '../../hooks/useExternRef';
-import { SizeType } from '../../lib/adaptivity';
-import { callMultiple } from '../../lib/callMultiple';
-import { format, isAfter, isMatch, parse } from '../../lib/date';
-import { CalendarRange } from '../CalendarRange/CalendarRange';
-import { FormField } from '../FormField/FormField';
-import { IconButton } from '../IconButton/IconButton';
-import { InputLike } from '../InputLike/InputLike';
-import { InputLikeDivider } from '../InputLike/InputLikeDivider';
-import { Popper } from '../Popper/Popper';
-var sizeYClassNames = _defineProperty({
-  none: "vkuiDateRangeInput--sizeY-none"
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import * as React from "react";
+import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useDateInput } from "../../hooks/useDateInput";
+import { useExternRef } from "../../hooks/useExternRef";
+import { SizeType } from "../../lib/adaptivity";
+import { callMultiple } from "../../lib/callMultiple";
+import { format, isAfter, isMatch, parse } from "../../lib/date";
+import { CalendarRange } from "../CalendarRange/CalendarRange";
+import { FormField } from "../FormField/FormField";
+import { IconButton } from "../IconButton/IconButton";
+import { InputLike } from "../InputLike/InputLike";
+import { InputLikeDivider } from "../InputLike/InputLikeDivider";
+import { Popper } from "../Popper/Popper";
+var sizeYClassNames = _define_property({
+    none: "vkuiDateRangeInput--sizeY-none"
 }, SizeType.COMPACT, "vkuiDateRangeInput--sizeY-compact");
-var elementsConfig = function elementsConfig(index) {
-  var length = 2;
-  var min = 1;
-  var max = 0;
-  switch (index) {
-    case 0:
-    case 3:
-      max = 31;
-      break;
-    case 1:
-    case 4:
-      max = 12;
-      break;
-    case 2:
-    case 5:
-      max = 2100;
-      min = 1900;
-      length = 4;
-      break;
-  }
-  return {
-    length: length,
-    min: min,
-    max: max
-  };
+var elementsConfig = function(index) {
+    var length = 2;
+    var min = 1;
+    var max = 0;
+    switch(index){
+        case 0:
+        case 3:
+            max = 31;
+            break;
+        case 1:
+        case 4:
+            max = 12;
+            break;
+        case 2:
+        case 5:
+            max = 2100;
+            min = 1900;
+            length = 4;
+            break;
+    }
+    return {
+        length: length,
+        min: min,
+        max: max
+    };
 };
-var getInternalValue = function getInternalValue(value) {
-  var newValue = ['', '', '', '', '', ''];
-  if (value !== null && value !== void 0 && value[0]) {
-    newValue[0] = String(value[0].getDate()).padStart(2, '0');
-    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');
-    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');
-  }
-  if (value !== null && value !== void 0 && value[1]) {
-    newValue[3] = String(value[1].getDate()).padStart(2, '0');
-    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');
-    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');
-  }
-  return newValue;
+var getInternalValue = function(value) {
+    var newValue = [
+        "",
+        "",
+        "",
+        "",
+        "",
+        ""
+    ];
+    if (value === null || value === void 0 ? void 0 : value[0]) {
+        newValue[0] = String(value[0].getDate()).padStart(2, "0");
+        newValue[1] = String(value[0].getMonth() + 1).padStart(2, "0");
+        newValue[2] = String(value[0].getFullYear()).padStart(4, "0");
+    }
+    if (value === null || value === void 0 ? void 0 : value[1]) {
+        newValue[3] = String(value[1].getDate()).padStart(2, "0");
+        newValue[4] = String(value[1].getMonth() + 1).padStart(2, "0");
+        newValue[5] = String(value[1].getFullYear()).padStart(4, "0");
+    }
+    return newValue;
 };
-
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
- */
-export var DateRangeInput = function DateRangeInput(_ref) {
-  var shouldDisableDate = _ref.shouldDisableDate,
-    disableFuture = _ref.disableFuture,
-    disablePast = _ref.disablePast,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    _ref$calendarPlacemen = _ref.calendarPlacement,
-    calendarPlacement = _ref$calendarPlacemen === void 0 ? 'bottom-start' : _ref$calendarPlacemen,
-    style = _ref.style,
-    className = _ref.className,
-    _ref$closeOnChange = _ref.closeOnChange,
-    closeOnChange = _ref$closeOnChange === void 0 ? true : _ref$closeOnChange,
-    disablePickers = _ref.disablePickers,
-    getRootRef = _ref.getRootRef,
-    name = _ref.name,
-    autoFocus = _ref.autoFocus,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    onFocus = _ref.onFocus,
-    prevMonthAriaLabel = _ref.prevMonthAriaLabel,
-    nextMonthAriaLabel = _ref.nextMonthAriaLabel,
-    changeDayAriaLabel = _ref.changeDayAriaLabel,
-    changeMonthAriaLabel = _ref.changeMonthAriaLabel,
-    changeYearAriaLabel = _ref.changeYearAriaLabel,
-    _ref$changeStartDayAr = _ref.changeStartDayAriaLabel,
-    changeStartDayAriaLabel = _ref$changeStartDayAr === void 0 ? 'Изменить день начала' : _ref$changeStartDayAr,
-    _ref$changeStartMonth = _ref.changeStartMonthAriaLabel,
-    changeStartMonthAriaLabel = _ref$changeStartMonth === void 0 ? 'Изменить месяц начала' : _ref$changeStartMonth,
-    _ref$changeStartYearA = _ref.changeStartYearAriaLabel,
-    changeStartYearAriaLabel = _ref$changeStartYearA === void 0 ? 'Изменить год начала' : _ref$changeStartYearA,
-    _ref$changeEndDayAria = _ref.changeEndDayAriaLabel,
-    changeEndDayAriaLabel = _ref$changeEndDayAria === void 0 ? 'Изменить день окончания' : _ref$changeEndDayAria,
-    _ref$changeEndMonthAr = _ref.changeEndMonthAriaLabel,
-    changeEndMonthAriaLabel = _ref$changeEndMonthAr === void 0 ? 'Изменить месяц окончания' : _ref$changeEndMonthAr,
-    _ref$changeEndYearAri = _ref.changeEndYearAriaLabel,
-    changeEndYearAriaLabel = _ref$changeEndYearAri === void 0 ? 'Изменить год окончания' : _ref$changeEndYearAri,
-    _ref$clearFieldAriaLa = _ref.clearFieldAriaLabel,
-    clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? 'Очистить поле' : _ref$clearFieldAriaLa,
-    _ref$showCalendarAria = _ref.showCalendarAriaLabel,
-    showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? 'Показать календарь' : _ref$showCalendarAria,
-    prevMonthIcon = _ref.prevMonthIcon,
-    nextMonthIcon = _ref.nextMonthIcon,
-    _ref$disableCalendar = _ref.disableCalendar,
-    disableCalendar = _ref$disableCalendar === void 0 ? false : _ref$disableCalendar,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var daysStartRef = React.useRef(null);
-  var monthsStartRef = React.useRef(null);
-  var yearsStartRef = React.useRef(null);
-  var daysEndRef = React.useRef(null);
-  var monthsEndRef = React.useRef(null);
-  var yearsEndRef = React.useRef(null);
-  var onInternalValueChange = React.useCallback(function (internalValue) {
-    var isStartValid = true;
-    var isEndValid = true;
-    for (var i = 0; i <= 2; i += 1) {
-      if (internalValue[i].length < elementsConfig(i).length) {
-        isStartValid = false;
-      }
-    }
-    for (var _i = 3; _i <= 5; _i += 1) {
-      if (internalValue[_i].length < elementsConfig(_i).length) {
-        isEndValid = false;
-      }
-    }
-    var formattedStartValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
-    var formattedEndValue = "".concat(internalValue[3], ".").concat(internalValue[4], ".").concat(internalValue[5]);
-    var mask = 'dd.MM.yyyy';
-    if (!isMatch(formattedStartValue, mask)) {
-      isStartValid = false;
-    }
-    if (!isMatch(formattedEndValue, mask)) {
-      isEndValid = false;
-    }
-    if (!isStartValid && !isEndValid) {
-      return;
-    }
-    var valueExists = Array.isArray(value);
-    var now = new Date();
-    var start = isStartValid ? parse(formattedStartValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[0]) || now) : null;
-    var end = isEndValid ? parse(formattedEndValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[1]) || now) : null;
-    if (start && end && isAfter(end, start)) {
-      onChange === null || onChange === void 0 ? void 0 : onChange([start, end]);
-    }
-  }, [onChange, value]);
-  var refs = React.useMemo(function () {
-    return [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef];
-  }, [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef]);
-  var _useDateInput = useDateInput({
-      maxElement: 5,
-      refs: refs,
-      autoFocus: autoFocus,
-      disabled: disabled,
-      elementsConfig: elementsConfig,
-      onChange: onChange,
-      onInternalValueChange: onInternalValueChange,
-      getInternalValue: getInternalValue,
-      value: value
-    }),
-    rootRef = _useDateInput.rootRef,
-    calendarRef = _useDateInput.calendarRef,
-    open = _useDateInput.open,
-    openCalendar = _useDateInput.openCalendar,
-    closeCalendar = _useDateInput.closeCalendar,
-    internalValue = _useDateInput.internalValue,
-    handleKeyDown = _useDateInput.handleKeyDown,
-    setFocusedElement = _useDateInput.setFocusedElement,
-    handleFieldEnter = _useDateInput.handleFieldEnter,
-    clear = _useDateInput.clear,
-    removeFocusFromField = _useDateInput.removeFocusFromField;
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var handleRootRef = useExternRef(rootRef, getRootRef);
-  var onCalendarChange = React.useCallback(function (newValue) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    if (closeOnChange && newValue !== null && newValue !== void 0 && newValue[1] && newValue[1] !== (value === null || value === void 0 ? void 0 : value[1])) {
-      removeFocusFromField();
-    }
-  }, [onChange, closeOnChange, value, removeFocusFromField]);
-  return /*#__PURE__*/React.createElement(FormField, _extends({
-    style: style,
-    className: classNames("vkuiDateRangeInput", sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
-    getRootRef: handleRootRef,
-    after: value ? /*#__PURE__*/React.createElement(IconButton, {
-      hoverMode: "opacity",
-      "aria-label": clearFieldAriaLabel,
-      onClick: clear
-    }, /*#__PURE__*/React.createElement(Icon16Clear, null)) : /*#__PURE__*/React.createElement(IconButton, {
-      hoverMode: "opacity",
-      "aria-label": showCalendarAriaLabel,
-      onClick: openCalendar
-    }, /*#__PURE__*/React.createElement(Icon20CalendarOutline, null)),
-    disabled: disabled,
-    onClick: callMultiple(handleFieldEnter, onClick),
-    onFocus: callMultiple(handleFieldEnter, onFocus)
-  }, props), /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
-    name: name,
-    value: value ? "".concat(value[0] ? format(value[0], 'DD.MM.YYYY') : '', " - ").concat(value[1] ? format(value[1], 'DD.MM.YYYY') : '') : ''
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "vkuiDateInput__input",
-    onKeyDown: handleKeyDown
-  }, /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: daysStartRef,
-    index: 0,
-    onElementSelect: setFocusedElement,
-    value: internalValue[0],
-    "aria-label": changeStartDayAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: monthsStartRef,
-    index: 1,
-    onElementSelect: setFocusedElement,
-    value: internalValue[1],
-    "aria-label": changeStartMonthAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 4,
-    getRootRef: yearsStartRef,
-    index: 2,
-    onElementSelect: setFocusedElement,
-    value: internalValue[2],
-    "aria-label": changeStartYearAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, ' — '), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: daysEndRef,
-    index: 3,
-    onElementSelect: setFocusedElement,
-    value: internalValue[3],
-    "aria-label": changeEndDayAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 2,
-    getRootRef: monthsEndRef,
-    index: 4,
-    onElementSelect: setFocusedElement,
-    value: internalValue[4],
-    "aria-label": changeEndMonthAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/React.createElement(InputLike, {
-    length: 4,
-    getRootRef: yearsEndRef,
-    index: 5,
-    onElementSelect: setFocusedElement,
-    value: internalValue[5],
-    "aria-label": changeEndYearAriaLabel
-  })), open && !disableCalendar && /*#__PURE__*/React.createElement(Popper, {
-    targetRef: rootRef,
-    offsetDistance: 8,
-    placement: calendarPlacement
-  }, /*#__PURE__*/React.createElement(CalendarRange, {
-    value: value,
-    onChange: onCalendarChange,
-    disablePast: disablePast,
-    disableFuture: disableFuture,
-    shouldDisableDate: shouldDisableDate,
-    onClose: closeCalendar,
-    getRootRef: calendarRef,
-    disablePickers: disablePickers,
-    prevMonthAriaLabel: prevMonthAriaLabel,
-    nextMonthAriaLabel: nextMonthAriaLabel,
-    changeMonthAriaLabel: changeMonthAriaLabel,
-    changeYearAriaLabel: changeYearAriaLabel,
-    changeDayAriaLabel: changeDayAriaLabel,
-    prevMonthIcon: prevMonthIcon,
-    nextMonthIcon: nextMonthIcon
-  })));
+ */ export var DateRangeInput = function(_param) {
+    var shouldDisableDate = _param.shouldDisableDate, disableFuture = _param.disableFuture, disablePast = _param.disablePast, value = _param.value, onChange = _param.onChange, _param_calendarPlacement = _param.calendarPlacement, calendarPlacement = _param_calendarPlacement === void 0 ? "bottom-start" : _param_calendarPlacement, style = _param.style, className = _param.className, _param_closeOnChange = _param.closeOnChange, closeOnChange = _param_closeOnChange === void 0 ? true : _param_closeOnChange, disablePickers = _param.disablePickers, getRootRef = _param.getRootRef, name = _param.name, autoFocus = _param.autoFocus, disabled = _param.disabled, onClick = _param.onClick, onFocus = _param.onFocus, prevMonthAriaLabel = _param.prevMonthAriaLabel, nextMonthAriaLabel = _param.nextMonthAriaLabel, changeDayAriaLabel = _param.changeDayAriaLabel, changeMonthAriaLabel = _param.changeMonthAriaLabel, changeYearAriaLabel = _param.changeYearAriaLabel, _param_changeStartDayAriaLabel = _param.changeStartDayAriaLabel, changeStartDayAriaLabel = _param_changeStartDayAriaLabel === void 0 ? "Изменить день начала" : _param_changeStartDayAriaLabel, _param_changeStartMonthAriaLabel = _param.changeStartMonthAriaLabel, changeStartMonthAriaLabel = _param_changeStartMonthAriaLabel === void 0 ? "Изменить месяц начала" : _param_changeStartMonthAriaLabel, _param_changeStartYearAriaLabel = _param.changeStartYearAriaLabel, changeStartYearAriaLabel = _param_changeStartYearAriaLabel === void 0 ? "Изменить год начала" : _param_changeStartYearAriaLabel, _param_changeEndDayAriaLabel = _param.changeEndDayAriaLabel, changeEndDayAriaLabel = _param_changeEndDayAriaLabel === void 0 ? "Изменить день окончания" : _param_changeEndDayAriaLabel, _param_changeEndMonthAriaLabel = _param.changeEndMonthAriaLabel, changeEndMonthAriaLabel = _param_changeEndMonthAriaLabel === void 0 ? "Изменить месяц окончания" : _param_changeEndMonthAriaLabel, _param_changeEndYearAriaLabel = _param.changeEndYearAriaLabel, changeEndYearAriaLabel = _param_changeEndYearAriaLabel === void 0 ? "Изменить год окончания" : _param_changeEndYearAriaLabel, _param_clearFieldAriaLabel = _param.clearFieldAriaLabel, clearFieldAriaLabel = _param_clearFieldAriaLabel === void 0 ? "Очистить поле" : _param_clearFieldAriaLabel, _param_showCalendarAriaLabel = _param.showCalendarAriaLabel, showCalendarAriaLabel = _param_showCalendarAriaLabel === void 0 ? "Показать календарь" : _param_showCalendarAriaLabel, prevMonthIcon = _param.prevMonthIcon, nextMonthIcon = _param.nextMonthIcon, _param_disableCalendar = _param.disableCalendar, disableCalendar = _param_disableCalendar === void 0 ? false : _param_disableCalendar, props = _object_without_properties(_param, [
+        "shouldDisableDate",
+        "disableFuture",
+        "disablePast",
+        "value",
+        "onChange",
+        "calendarPlacement",
+        "style",
+        "className",
+        "closeOnChange",
+        "disablePickers",
+        "getRootRef",
+        "name",
+        "autoFocus",
+        "disabled",
+        "onClick",
+        "onFocus",
+        "prevMonthAriaLabel",
+        "nextMonthAriaLabel",
+        "changeDayAriaLabel",
+        "changeMonthAriaLabel",
+        "changeYearAriaLabel",
+        "changeStartDayAriaLabel",
+        "changeStartMonthAriaLabel",
+        "changeStartYearAriaLabel",
+        "changeEndDayAriaLabel",
+        "changeEndMonthAriaLabel",
+        "changeEndYearAriaLabel",
+        "clearFieldAriaLabel",
+        "showCalendarAriaLabel",
+        "prevMonthIcon",
+        "nextMonthIcon",
+        "disableCalendar"
+    ]);
+    var daysStartRef = React.useRef(null);
+    var monthsStartRef = React.useRef(null);
+    var yearsStartRef = React.useRef(null);
+    var daysEndRef = React.useRef(null);
+    var monthsEndRef = React.useRef(null);
+    var yearsEndRef = React.useRef(null);
+    var onInternalValueChange = React.useCallback(function(internalValue) {
+        var isStartValid = true;
+        var isEndValid = true;
+        for(var i = 0; i <= 2; i += 1){
+            if (internalValue[i].length < elementsConfig(i).length) {
+                isStartValid = false;
+            }
+        }
+        for(var i1 = 3; i1 <= 5; i1 += 1){
+            if (internalValue[i1].length < elementsConfig(i1).length) {
+                isEndValid = false;
+            }
+        }
+        var formattedStartValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
+        var formattedEndValue = "".concat(internalValue[3], ".").concat(internalValue[4], ".").concat(internalValue[5]);
+        var mask = "dd.MM.yyyy";
+        if (!isMatch(formattedStartValue, mask)) {
+            isStartValid = false;
+        }
+        if (!isMatch(formattedEndValue, mask)) {
+            isEndValid = false;
+        }
+        if (!isStartValid && !isEndValid) {
+            return;
+        }
+        var valueExists = Array.isArray(value);
+        var now = new Date();
+        var start = isStartValid ? parse(formattedStartValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[0]) || now) : null;
+        var end = isEndValid ? parse(formattedEndValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[1]) || now) : null;
+        if (start && end && isAfter(end, start)) {
+            onChange === null || onChange === void 0 ? void 0 : onChange([
+                start,
+                end
+            ]);
+        }
+    }, [
+        onChange,
+        value
+    ]);
+    var refs = React.useMemo(function() {
+        return [
+            daysStartRef,
+            monthsStartRef,
+            yearsStartRef,
+            daysEndRef,
+            monthsEndRef,
+            yearsEndRef
+        ];
+    }, [
+        daysStartRef,
+        monthsStartRef,
+        yearsStartRef,
+        daysEndRef,
+        monthsEndRef,
+        yearsEndRef
+    ]);
+    var _useDateInput = useDateInput({
+        maxElement: 5,
+        refs: refs,
+        autoFocus: autoFocus,
+        disabled: disabled,
+        elementsConfig: elementsConfig,
+        onChange: onChange,
+        onInternalValueChange: onInternalValueChange,
+        getInternalValue: getInternalValue,
+        value: value
+    }), rootRef = _useDateInput.rootRef, calendarRef = _useDateInput.calendarRef, open = _useDateInput.open, openCalendar = _useDateInput.openCalendar, closeCalendar = _useDateInput.closeCalendar, internalValue = _useDateInput.internalValue, handleKeyDown = _useDateInput.handleKeyDown, setFocusedElement = _useDateInput.setFocusedElement, handleFieldEnter = _useDateInput.handleFieldEnter, clear = _useDateInput.clear, removeFocusFromField = _useDateInput.removeFocusFromField;
+    var _useAdaptivity = useAdaptivity(), _useAdaptivity_sizeY = _useAdaptivity.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
+    var handleRootRef = useExternRef(rootRef, getRootRef);
+    var onCalendarChange = React.useCallback(function(newValue) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        if (closeOnChange && (newValue === null || newValue === void 0 ? void 0 : newValue[1]) && newValue[1] !== (value === null || value === void 0 ? void 0 : value[1])) {
+            removeFocusFromField();
+        }
+    }, [
+        onChange,
+        closeOnChange,
+        value,
+        removeFocusFromField
+    ]);
+    return /*#__PURE__*/ React.createElement(FormField, _object_spread({
+        style: style,
+        className: classNames(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        getRootRef: handleRootRef,
+        after: value ? /*#__PURE__*/ React.createElement(IconButton, {
+            hoverMode: "opacity",
+            "aria-label": clearFieldAriaLabel,
+            onClick: clear
+        }, /*#__PURE__*/ React.createElement(Icon16Clear, null)) : /*#__PURE__*/ React.createElement(IconButton, {
+            hoverMode: "opacity",
+            "aria-label": showCalendarAriaLabel,
+            onClick: openCalendar
+        }, /*#__PURE__*/ React.createElement(Icon20CalendarOutline, null)),
+        disabled: disabled,
+        onClick: callMultiple(handleFieldEnter, onClick),
+        onFocus: callMultiple(handleFieldEnter, onFocus)
+    }, props), /*#__PURE__*/ React.createElement("input", {
+        type: "hidden",
+        name: name,
+        value: value ? "".concat(value[0] ? format(value[0], "DD.MM.YYYY") : "", " - ").concat(value[1] ? format(value[1], "DD.MM.YYYY") : "") : ""
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "vkuiDateInput__input",
+        onKeyDown: handleKeyDown
+    }, /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: daysStartRef,
+        index: 0,
+        onElementSelect: setFocusedElement,
+        value: internalValue[0],
+        "aria-label": changeStartDayAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: monthsStartRef,
+        index: 1,
+        onElementSelect: setFocusedElement,
+        value: internalValue[1],
+        "aria-label": changeStartMonthAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 4,
+        getRootRef: yearsStartRef,
+        index: 2,
+        onElementSelect: setFocusedElement,
+        value: internalValue[2],
+        "aria-label": changeStartYearAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, " — "), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: daysEndRef,
+        index: 3,
+        onElementSelect: setFocusedElement,
+        value: internalValue[3],
+        "aria-label": changeEndDayAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 2,
+        getRootRef: monthsEndRef,
+        index: 4,
+        onElementSelect: setFocusedElement,
+        value: internalValue[4],
+        "aria-label": changeEndMonthAriaLabel
+    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
+        length: 4,
+        getRootRef: yearsEndRef,
+        index: 5,
+        onElementSelect: setFocusedElement,
+        value: internalValue[5],
+        "aria-label": changeEndYearAriaLabel
+    })), open && !disableCalendar && /*#__PURE__*/ React.createElement(Popper, {
+        targetRef: rootRef,
+        offsetDistance: 8,
+        placement: calendarPlacement
+    }, /*#__PURE__*/ React.createElement(CalendarRange, {
+        value: value,
+        onChange: onCalendarChange,
+        disablePast: disablePast,
+        disableFuture: disableFuture,
+        shouldDisableDate: shouldDisableDate,
+        onClose: closeCalendar,
+        getRootRef: calendarRef,
+        disablePickers: disablePickers,
+        prevMonthAriaLabel: prevMonthAriaLabel,
+        nextMonthAriaLabel: nextMonthAriaLabel,
+        changeMonthAriaLabel: changeMonthAriaLabel,
+        changeYearAriaLabel: changeYearAriaLabel,
+        changeDayAriaLabel: changeDayAriaLabel,
+        prevMonthIcon: prevMonthIcon,
+        nextMonthIcon: nextMonthIcon
+    })));
 };
+
 //# sourceMappingURL=DateRangeInput.js.map