@vkontakte/vkui 4.27.0 → 4.28.0

package/dist/cjs/components/DateInput/DateInput.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateInput = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _icons = require("@vkontakte/icons");
+
+var _Calendar = require("../Calendar/Calendar");
+
+var _Popper = require("../Popper/Popper");
+
+var _utils = require("../../lib/utils");
+
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+
+var _classNames = require("../../lib/classNames");
+
+var _FormField = require("../FormField/FormField");
+
+var _useDateInput2 = require("../../hooks/useDateInput");
+
+var _InputLike = require("../InputLike/InputLike");
+
+var _InputLikeDivider = require("../InputLike/InputLikeDivider");
+
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _callMultiple = require("../../lib/callMultiple");
+
+var _excluded = ["enableTime", "shouldDisableDate", "disableFuture", "disablePast", "value", "onChange", "calendarPlacement", "style", "className", "doneButtonText", "closeOnChange", "disablePickers", "getRootRef", "name", "autoFocus", "disabled", "onClick", "onFocus", "prevMonthAriaLabel", "nextMonthAriaLabel", "showNeighboringMonth", "size", "changeMonthAriaLabel", "changeYearAriaLabel", "changeDayAriaLabel", "changeHoursAriaLabel", "changeMinutesAriaLabel", "clearFieldAriaLabel", "showCalendarAriaLabel"];
+
+var elementsConfig = function elementsConfig(index) {
+  var length = 2;
+  var min = 1;
+  var max = 0;
+
+  switch (index) {
+    case 0:
+      max = 31;
+      break;
+
+    case 1:
+      max = 12;
+      break;
+
+    case 2:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+
+    case 3:
+      max = 23;
+      break;
+
+    case 4:
+      max = 59;
+      break;
+  }
+
+  return {
+    length: length,
+    min: min,
+    max: max
+  };
+};
+
+var getInternalValue = function getInternalValue(value) {
+  var newValue = ["", "", "", "", ""];
+
+  if (value) {
+    newValue[0] = String(value.getDate()).padStart(2, "0");
+    newValue[1] = String(value.getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value.getFullYear()).padStart(4, "0");
+    newValue[3] = String(value.getHours()).padStart(2, "0");
+    newValue[4] = String(value.getMinutes()).padStart(2, "0");
+  }
+
+  return newValue;
+};
+
+var DateInput = function DateInput(_ref) {
+  var enableTime = _ref.enableTime,
+      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,
+      doneButtonText = _ref.doneButtonText,
+      _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,
+      showNeighboringMonth = _ref.showNeighboringMonth,
+      size = _ref.size,
+      _ref$changeMonthAriaL = _ref.changeMonthAriaLabel,
+      changeMonthAriaLabel = _ref$changeMonthAriaL === void 0 ? "Изменить месяц" : _ref$changeMonthAriaL,
+      _ref$changeYearAriaLa = _ref.changeYearAriaLabel,
+      changeYearAriaLabel = _ref$changeYearAriaLa === void 0 ? "Изменить год" : _ref$changeYearAriaLa,
+      _ref$changeDayAriaLab = _ref.changeDayAriaLabel,
+      changeDayAriaLabel = _ref$changeDayAriaLab === void 0 ? "Изменить день" : _ref$changeDayAriaLab,
+      _ref$changeHoursAriaL = _ref.changeHoursAriaLabel,
+      changeHoursAriaLabel = _ref$changeHoursAriaL === void 0 ? "Изменить час" : _ref$changeHoursAriaL,
+      _ref$changeMinutesAri = _ref.changeMinutesAriaLabel,
+      changeMinutesAriaLabel = _ref$changeMinutesAri === void 0 ? "Изменить минуту" : _ref$changeMinutesAri,
+      _ref$clearFieldAriaLa = _ref.clearFieldAriaLabel,
+      clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? "Очистить поле" : _ref$clearFieldAriaLa,
+      _ref$showCalendarAria = _ref.showCalendarAriaLabel,
+      showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? "Показать календарь" : _ref$showCalendarAria,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var daysRef = React.useRef(null);
+  var monthsRef = React.useRef(null);
+  var yearsRef = React.useRef(null);
+  var hoursRef = React.useRef(null);
+  var minutesRef = React.useRef(null);
+  var maxElement = enableTime ? 4 : 2;
+  var onInternalValueChange = React.useCallback(function (internalValue) {
+    for (var i = 0; i <= maxElement; i += 1) {
+      if (internalValue[i].length < elementsConfig(i).length) {
+        return;
+      }
+    }
+
+    var formattedValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
+    var mask = "dd.MM.yyyy";
+
+    if (enableTime) {
+      formattedValue += " ".concat(internalValue[3], ":").concat(internalValue[4]);
+      mask += " HH:mm";
+    }
+
+    if ((0, _dateFns.isMatch)(formattedValue, mask)) {
+      onChange === null || onChange === void 0 ? void 0 : onChange((0, _dateFns.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : new Date()));
+    }
+  }, [enableTime, maxElement, onChange, value]);
+  var refs = React.useMemo(function () {
+    return [daysRef, monthsRef, yearsRef, hoursRef, minutesRef];
+  }, [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]);
+
+  var _useDateInput = (0, _useDateInput2.useDateInput)({
+    maxElement: maxElement,
+    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 = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  var onCalendarChange = React.useCallback(function (value) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+
+    if (closeOnChange && !enableTime) {
+      removeFocusFromField();
+    }
+  }, [onChange, removeFocusFromField, closeOnChange, enableTime]);
+  return (0, _jsxRuntime.createScopedElement)(_FormField.FormField, (0, _extends2.default)({
+    vkuiClass: (0, _classNames.classNames)("DateInput", "DateInput--sizeY-".concat(sizeY)),
+    style: style,
+    className: className,
+    getRootRef: (0, _utils.multiRef)(rootRef, getRootRef),
+    after: value ? (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": clearFieldAriaLabel,
+      onClick: clear
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon16Clear, null)) : (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": showCalendarAriaLabel,
+      onClick: openCalendar
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon20CalendarOutline, null)),
+    disabled: disabled,
+    onClick: (0, _callMultiple.callMultiple)(handleFieldEnter, onClick),
+    onFocus: (0, _callMultiple.callMultiple)(handleFieldEnter, onFocus)
+  }, props), (0, _jsxRuntime.createScopedElement)("input", {
+    type: "hidden",
+    name: name,
+    value: value ? (0, _dateFns.format)(value, enableTime ? "dd.MM.yyyy'T'HH:mm" : "dd.MM.yyyy") : ""
+  }), (0, _jsxRuntime.createScopedElement)("span", {
+    vkuiClass: "DateInput__input",
+    onKeyDown: handleKeyDown
+  }, (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    tabIndex: 1,
+    length: 2,
+    getRootRef: daysRef,
+    index: 0,
+    onElementSelect: setFocusedElement,
+    value: internalValue[0],
+    "aria-label": changeDayAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: monthsRef,
+    index: 1,
+    onElementSelect: setFocusedElement,
+    value: internalValue[1],
+    "aria-label": changeMonthAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 4,
+    getRootRef: yearsRef,
+    index: 2,
+    onElementSelect: setFocusedElement,
+    value: internalValue[2],
+    "aria-label": changeYearAriaLabel
+  }), enableTime && (0, _jsxRuntime.createScopedElement)(React.Fragment, null, (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, {
+    vkuiClass: "DateInput__input-time-divider"
+  }, " "), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: hoursRef,
+    index: 3,
+    onElementSelect: setFocusedElement,
+    value: internalValue[3],
+    "aria-label": changeHoursAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, ":"), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: minutesRef,
+    index: 4,
+    onElementSelect: setFocusedElement,
+    value: internalValue[4],
+    "aria-label": changeMinutesAriaLabel
+  }))), open && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, {
+    targetRef: rootRef,
+    offsetDistance: 8,
+    placement: calendarPlacement
+  }, (0, _jsxRuntime.createScopedElement)(_Calendar.Calendar, {
+    value: value,
+    onChange: onCalendarChange,
+    enableTime: enableTime,
+    disablePast: disablePast,
+    disableFuture: disableFuture,
+    shouldDisableDate: shouldDisableDate,
+    onClose: closeCalendar,
+    getRootRef: calendarRef,
+    doneButtonText: doneButtonText,
+    disablePickers: disablePickers,
+    changeHoursAriaLabel: changeHoursAriaLabel,
+    changeMinutesAriaLabel: changeMinutesAriaLabel,
+    prevMonthAriaLabel: prevMonthAriaLabel,
+    nextMonthAriaLabel: nextMonthAriaLabel,
+    changeMonthAriaLabel: changeMonthAriaLabel,
+    changeYearAriaLabel: changeYearAriaLabel,
+    changeDayAriaLabel: changeDayAriaLabel,
+    showNeighboringMonth: showNeighboringMonth,
+    size: size
+  })));
+};
+
+exports.DateInput = DateInput;
+//# sourceMappingURL=DateInput.js.map

package/dist/cjs/components/DateInput/DateInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":["elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","doneButtonText","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","showNeighboringMonth","size","changeMonthAriaLabel","changeYearAriaLabel","changeDayAriaLabel","changeHoursAriaLabel","changeMinutesAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","props","daysRef","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","onCalendarChange"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { format, isMatch, parse } from \"date-fns\";\nimport { Icon16Clear, Icon20CalendarOutline } from \"@vkontakte/icons\";\nimport { Calendar, CalendarProps } from \"../Calendar/Calendar\";\nimport { Popper, Placement } from \"../Popper/Popper\";\nimport { multiRef } from \"../../lib/utils\";\nimport IconButton from \"../IconButton/IconButton\";\nimport { classNames } from \"../../lib/classNames\";\nimport { FormField } from \"../FormField/FormField\";\nimport { HasRootRef } from \"../../types\";\nimport { useDateInput } from \"../../hooks/useDateInput\";\nimport { InputLike } from \"../InputLike/InputLike\";\nimport { InputLikeDivider } from \"../InputLike/InputLikeDivider\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport \"./DateInput.css\";\n\nexport interface DateInputProps\n  extends Omit<\n      React.InputHTMLAttributes<HTMLDivElement>,\n      \"value\" | \"onChange\" | \"size\"\n    >,\n    Pick<\n      CalendarProps,\n      | \"disablePast\"\n      | \"disableFuture\"\n      | \"enableTime\"\n      | \"shouldDisableDate\"\n      | \"onChange\"\n      | \"value\"\n      | \"doneButtonText\"\n      | \"weekStartsOn\"\n      | \"disablePickers\"\n      | \"changeHoursAriaLabel\"\n      | \"changeMinutesAriaLabel\"\n      | \"prevMonthAriaLabel\"\n      | \"nextMonthAriaLabel\"\n      | \"changeMonthAriaLabel\"\n      | \"changeYearAriaLabel\"\n      | \"changeDayAriaLabel\"\n      | \"showNeighboringMonth\"\n      | \"size\"\n    >,\n    HasRootRef<HTMLDivElement> {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps[\"value\"]) => {\n  const newValue = [\"\", \"\", \"\", \"\", \"\"];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, \"0\");\n    newValue[1] = String(value.getMonth() + 1).padStart(2, \"0\");\n    newValue[2] = String(value.getFullYear()).padStart(4, \"0\");\n    newValue[3] = String(value.getHours()).padStart(2, \"0\");\n    newValue[4] = String(value.getMinutes()).padStart(2, \"0\");\n  }\n  return newValue;\n};\n\nexport const DateInput: React.FC<DateInputProps> = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = \"bottom-start\",\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  showNeighboringMonth,\n  size,\n  changeMonthAriaLabel = \"Изменить месяц\",\n  changeYearAriaLabel = \"Изменить год\",\n  changeDayAriaLabel = \"Изменить день\",\n  changeHoursAriaLabel = \"Изменить час\",\n  changeMinutesAriaLabel = \"Изменить минуту\",\n  clearFieldAriaLabel = \"Очистить поле\",\n  showCalendarAriaLabel = \"Показать календарь\",\n  ...props\n}) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = \"dd.MM.yyyy\";\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += \" HH:mm\";\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value]\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef]\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY } = useAdaptivity();\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime]\n  );\n\n  return (\n    <FormField\n      vkuiClass={classNames(\"DateInput\", `DateInput--sizeY-${sizeY}`)}\n      style={style}\n      className={className}\n      getRootRef={multiRef(rootRef, getRootRef)}\n      after={\n        value ? (\n          <IconButton\n            hoverMode=\"opacity\"\n            aria-label={clearFieldAriaLabel}\n            onClick={clear}\n          >\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton\n            hoverMode=\"opacity\"\n            aria-label={showCalendarAriaLabel}\n            onClick={openCalendar}\n          >\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? format(value, enableTime ? \"dd.MM.yyyy'T'HH:mm\" : \"dd.MM.yyyy\")\n            : \"\"\n        }\n      />\n      <span vkuiClass=\"DateInput__input\" onKeyDown={handleKeyDown}>\n        <InputLike\n          tabIndex={1}\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeYearAriaLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider vkuiClass=\"DateInput__input-time-divider\">\n              {\" \"}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              aria-label={changeHoursAriaLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              aria-label={changeMinutesAriaLabel}\n            />\n          </React.Fragment>\n        )}\n      </span>\n      {open && (\n        <Popper\n          targetRef={rootRef}\n          offsetDistance={8}\n          placement={calendarPlacement}\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursAriaLabel={changeHoursAriaLabel}\n            changeMinutesAriaLabel={changeMinutesAriaLabel}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"file":"DateInput.js"}

package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { CalendarRangeProps } from "../CalendarRange/CalendarRange";
+import { Placement } from "../Popper/Popper";
+import { HasRootRef } from "../../types";
+import "./DateRangeInput.css";
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange">, Pick<CalendarRangeProps, "disablePast" | "disableFuture" | "shouldDisableDate" | "onChange" | "value" | "weekStartsOn" | "disablePickers" | "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "changeDayAriaLabel">, HasRootRef<HTMLDivElement> {
+    calendarPlacement?: Placement;
+    closeOnChange?: boolean;
+    clearFieldAriaLabel?: string;
+    showCalendarAriaLabel?: string;
+    changeStartDayAriaLabel?: string;
+    changeStartMonthAriaLabel?: string;
+    changeStartYearAriaLabel?: string;
+    changeEndDayAriaLabel?: string;
+    changeEndMonthAriaLabel?: string;
+    changeEndYearAriaLabel?: string;
+}
+export declare const DateRangeInput: React.FC<DateRangeInputProps>;

package/dist/cjs/components/DateRangeInput/DateRangeInput.js

@@ -0,0 +1,310 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateRangeInput = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _icons = require("@vkontakte/icons");
+
+var _CalendarRange = require("../CalendarRange/CalendarRange");
+
+var _Popper = require("../Popper/Popper");
+
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+
+var _useDateInput2 = require("../../hooks/useDateInput");
+
+var _useAdaptivity2 = require("../../hooks/useAdaptivity");
+
+var _classNames = require("../../lib/classNames");
+
+var _utils = require("../../lib/utils");
+
+var _FormField = require("../FormField/FormField");
+
+var _InputLike = require("../InputLike/InputLike");
+
+var _InputLikeDivider = require("../InputLike/InputLikeDivider");
+
+var _callMultiple = require("../../lib/callMultiple");
+
+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"];
+
+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 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 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,
+      props = (0, _objectWithoutProperties2.default)(_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 (!(0, _dateFns.isMatch)(formattedStartValue, mask)) {
+      isStartValid = false;
+    }
+
+    if (!(0, _dateFns.isMatch)(formattedEndValue, mask)) {
+      isEndValid = false;
+    }
+
+    if (!isStartValid && !isEndValid) {
+      return;
+    }
+
+    var valueExists = Array.isArray(value);
+    var now = new Date();
+    var start = isStartValid ? (0, _dateFns.parse)(formattedStartValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[0]) || now) : null;
+    var end = isEndValid ? (0, _dateFns.parse)(formattedEndValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[1]) || now) : null;
+
+    if (start && end && (0, _dateFns.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 = (0, _useDateInput2.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 = (0, _useAdaptivity2.useAdaptivity)(),
+      sizeY = _useAdaptivity.sizeY;
+
+  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 (0, _jsxRuntime.createScopedElement)(_FormField.FormField, (0, _extends2.default)({
+    vkuiClass: (0, _classNames.classNames)("DateRangeInput", "DateRangeInput--sizeY-".concat(sizeY)),
+    style: style,
+    className: className,
+    getRootRef: (0, _utils.multiRef)(rootRef, getRootRef),
+    after: value ? (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": clearFieldAriaLabel,
+      onClick: clear
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon16Clear, null)) : (0, _jsxRuntime.createScopedElement)(_IconButton.default, {
+      hoverMode: "opacity",
+      "aria-label": showCalendarAriaLabel,
+      onClick: openCalendar
+    }, (0, _jsxRuntime.createScopedElement)(_icons.Icon20CalendarOutline, null)),
+    disabled: disabled,
+    onClick: (0, _callMultiple.callMultiple)(handleFieldEnter, onClick),
+    onFocus: (0, _callMultiple.callMultiple)(handleFieldEnter, onFocus)
+  }, props), (0, _jsxRuntime.createScopedElement)("input", {
+    type: "hidden",
+    name: name,
+    value: value ? "".concat(value[0] ? (0, _dateFns.format)(value[0], "dd.MM.yyyy") : "", " - ").concat(value[1] ? (0, _dateFns.format)(value[1], "dd.MM.yyyy") : "") : ""
+  }), (0, _jsxRuntime.createScopedElement)("span", {
+    vkuiClass: "DateInput__input",
+    onKeyDown: handleKeyDown
+  }, (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: daysStartRef,
+    index: 0,
+    onElementSelect: setFocusedElement,
+    value: internalValue[0],
+    "aria-label": changeStartDayAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: monthsStartRef,
+    index: 1,
+    onElementSelect: setFocusedElement,
+    value: internalValue[1],
+    "aria-label": changeStartMonthAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 4,
+    getRootRef: yearsStartRef,
+    index: 2,
+    onElementSelect: setFocusedElement,
+    value: internalValue[2],
+    "aria-label": changeStartYearAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, " — "), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: daysEndRef,
+    index: 3,
+    onElementSelect: setFocusedElement,
+    value: internalValue[3],
+    "aria-label": changeEndDayAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 2,
+    getRootRef: monthsEndRef,
+    index: 4,
+    onElementSelect: setFocusedElement,
+    value: internalValue[4],
+    "aria-label": changeEndMonthAriaLabel
+  }), (0, _jsxRuntime.createScopedElement)(_InputLikeDivider.InputLikeDivider, null, "."), (0, _jsxRuntime.createScopedElement)(_InputLike.InputLike, {
+    length: 4,
+    getRootRef: yearsEndRef,
+    index: 5,
+    onElementSelect: setFocusedElement,
+    value: internalValue[5],
+    "aria-label": changeEndYearAriaLabel
+  })), open && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, {
+    targetRef: rootRef,
+    offsetDistance: 8,
+    placement: calendarPlacement
+  }, (0, _jsxRuntime.createScopedElement)(_CalendarRange.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
+  })));
+};
+
+exports.DateRangeInput = DateRangeInput;
+//# sourceMappingURL=DateRangeInput.js.map