@vkontakte/vkui 5.0.3 → 5.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","names":["React","format","isMatch","parse","Icon16Clear","Icon20CalendarOutline","Calendar","Popper","multiRef","IconButton","classNamesString","FormField","useDateInput","InputLike","InputLikeDivider","useAdaptivity","callMultiple","getSizeYClassName","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","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","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"],"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { format, isMatch, parse } from \"../../lib/date\";\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 { classNamesString } from \"../../lib/classNames\";\nimport { FormField, FormFieldProps } 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 { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./DateInput.module.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      | \"viewDate\"\n      | \"onHeaderChange\"\n      | \"onNextMonth\"\n      | \"onPrevMonth\"\n      | \"prevMonthIcon\"\n      | \"nextMonthIcon\"\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\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\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\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  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\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      style={style}\n      className={classNamesString(\n        styles[\"DateInput\"],\n        getSizeYClassName(styles[\"DateInput\"], sizeY),\n        className\n      )}\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.YYYYTHH:mm\" : \"DD.MM.YYYY\")\n            : \"\"\n        }\n      />\n      <span className={styles[\"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\n              className={styles[\"DateInput__input--time-divider\"]}\n            >\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 && !disableCalendar && (\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            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"DateInput.js","names":["React","format","isMatch","parse","Icon16Clear","Icon20CalendarOutline","Calendar","Popper","multiRef","IconButton","classNames","FormField","useDateInput","InputLike","InputLikeDivider","useAdaptivity","callMultiple","getSizeYClassName","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","viewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysRef","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"],"sources":["../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { format, isMatch, parse } from '../../lib/date';\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 '@vkontakte/vkjs';\nimport { FormField, FormFieldProps } 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 { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './DateInput.module.css';\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\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      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  disableCalendar?: boolean;\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\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\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  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\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      style={style}\n      className={classNames(\n        styles['DateInput'],\n        getSizeYClassName(styles['DateInput'], sizeY),\n        className,\n      )}\n      getRootRef={multiRef(rootRef, getRootRef)}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\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={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <span className={styles['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 className={styles['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 && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\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            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,15 +1,15 @@
-import * as React from "react";
+import * as React from 'react';
 export declare type DatePickerDateFormat = {
     day: number;
     month: number;
     year: number;
 };
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "min" | "max"> {
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
     min?: DatePickerDateFormat;
     max?: DatePickerDateFormat;
     name?: string;
     defaultValue?: DatePickerDateFormat;
-    popupDirection?: "top" | "bottom";
+    popupDirection?: 'top' | 'bottom';
     monthNames?: string[];
     dayPlaceholder?: string;
     monthPlaceholder?: string;

package/dist/components/DatePicker/DatePicker.js

@@ -6,14 +6,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["name", "min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "monthNames", "day", "month", "year", "onDateChange", "disabled", "className"],
   _excluded2 = ["min", "max", "dayPlaceholder", "monthPlaceholder", "yearPlaceholder", "popupDirection", "defaultValue", "day", "month", "year", "onDateChange"],
   _excluded3 = ["defaultValue"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
-import { Input } from "../Input/Input";
-import { useAdaptivityHasPointer } from "../../hooks/useAdaptivityHasPointer";
-import { leadingZero } from "../../lib/utils";
-import { CustomSelect } from "../CustomSelect/CustomSelect";
-import { range } from "../../helpers/range";
-var DefaultMonths = ["Января", "Февраля", "Марта", "Апреля", "Мая", "Июня", "Июля", "Августа", "Сентября", "Октября", "Ноября", "Декабря"];
+import * as React from 'react';
+import { classNames, leadingZero } from '@vkontakte/vkjs';
+import { Input } from '../Input/Input';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { CustomSelect } from '../CustomSelect/CustomSelect';
+import { range } from '../../helpers/range';
+var DefaultMonths = ['Января', 'Февраля', 'Марта', 'Апреля', 'Мая', 'Июня', 'Июля', 'Августа', 'Сентября', 'Октября', 'Ноября', 'Декабря'];
 // Переводим state к формату гг-мм-дд
 function convertToInputFormat(_ref) {
   var _ref$day = _ref.day,
@@ -27,7 +26,7 @@ function convertToInputFormat(_ref) {
 
 // Переводим дату формата гг-мм-дд к объекту
 function parseInputDate(date) {
-  var splited = date.split("-");
+  var splited = date.split('-');
   return {
     day: Number(splited[2]),
     month: Number(splited[1]),
@@ -93,7 +92,7 @@ var DatePickerCustom = function DatePickerCustom(_ref2) {
     };
   });
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNamesString("vkuiDatePicker", className)
+    className: classNames("vkuiDatePicker", className)
   }, restProps), /*#__PURE__*/React.createElement("div", {
     className: "vkuiDatePicker__container"
   }, /*#__PURE__*/React.createElement("div", {

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["React","classNamesString","Input","useAdaptivityHasPointer","leadingZero","CustomSelect","range","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","useState","setValue","update","Cmp"],"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { Input } from \"../Input/Input\";\nimport { useAdaptivityHasPointer } from \"../../hooks/useAdaptivityHasPointer\";\nimport { leadingZero } from \"../../lib/utils\";\nimport { CustomSelect } from \"../CustomSelect/CustomSelect\";\nimport { range } from \"../../helpers/range\";\nimport styles from \"./DatePicker.module.css\";\n\nconst DefaultMonths: string[] = [\n  \"Января\",\n  \"Февраля\",\n  \"Марта\",\n  \"Апреля\",\n  \"Мая\",\n  \"Июня\",\n  \"Июля\",\n  \"Августа\",\n  \"Сентября\",\n  \"Октября\",\n  \"Ноября\",\n  \"Декабря\",\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport interface DatePickerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    \"defaultValue\" | \"min\" | \"max\"\n  > {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: \"top\" | \"bottom\";\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({\n  day = 0,\n  month = 0,\n  year = 0,\n}: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  const splited = date.split(\"-\");\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  className,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\n  }));\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n  return (\n    <div\n      className={classNamesString(styles[\"DatePicker\"], className)}\n      {...restProps}\n    >\n      <div className={styles[\"DatePicker__container\"]}>\n        <div className={styles[\"DatePicker__day\"]}>\n          <CustomSelect\n            name=\"day\"\n            value={day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles[\"DatePicker__month\"]}>\n          <CustomSelect\n            className={styles[\"DatePicker__monthSelect\"]}\n            name=\"month\"\n            value={month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles[\"DatePicker__year\"]}>\n          <CustomSelect\n            name=\"year\"\n            value={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input\n        type=\"hidden\"\n        name={name}\n        value={convertToInputFormat({ day, month, year })}\n      />\n    </div>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year\n      ? { defaultValue: convertToInputFormat({ day, month, year }) }\n      : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> =\n    React.useCallback(\n      (e) => {\n        onDateChange?.(parseInputDate(e.currentTarget.value));\n      },\n      [onDateChange]\n    );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(\n    () => ({\n      day: defaultValue?.day || 0,\n      month: defaultValue?.month || 0,\n      year: defaultValue?.year || 0,\n    })\n  );\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props]\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","names":["React","classNames","leadingZero","Input","useAdaptivityHasPointer","CustomSelect","range","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","useState","setValue","update","Cmp"],"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { Input } from '../Input/Input';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { range } from '../../helpers/range';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nexport interface DatePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  className,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\n  }));\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n  return (\n    <div className={classNames(styles['DatePicker'], className)} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </div>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
-import * as React from "react";
-import { CalendarRangeProps } from "../CalendarRange/CalendarRange";
-import { Placement } from "../Popper/Popper";
-import { HasRootRef } from "../../types";
-import { FormFieldProps } from "../FormField/FormField";
-export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange">, Pick<CalendarRangeProps, "disablePast" | "disableFuture" | "shouldDisableDate" | "onChange" | "value" | "weekStartsOn" | "disablePickers" | "prevMonthAriaLabel" | "nextMonthAriaLabel" | "changeMonthAriaLabel" | "changeYearAriaLabel" | "changeDayAriaLabel" | "prevMonthIcon" | "nextMonthIcon">, HasRootRef<HTMLDivElement>, FormFieldProps {
+import * as React from 'react';
+import { CalendarRangeProps } from '../CalendarRange/CalendarRange';
+import { Placement } from '../Popper/Popper';
+import { HasRootRef } from '../../types';
+import { FormFieldProps } from '../FormField/FormField';
+export interface DateRangeInputProps extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>, Pick<CalendarRangeProps, 'disablePast' | 'disableFuture' | 'shouldDisableDate' | 'onChange' | 'value' | 'weekStartsOn' | 'disablePickers' | 'prevMonthAriaLabel' | 'nextMonthAriaLabel' | 'changeMonthAriaLabel' | 'changeYearAriaLabel' | 'changeDayAriaLabel' | 'prevMonthIcon' | 'nextMonthIcon'>, HasRootRef<HTMLDivElement>, FormFieldProps {
     calendarPlacement?: Placement;
     closeOnChange?: boolean;
     clearFieldAriaLabel?: string;

package/dist/components/DateRangeInput/DateRangeInput.js

@@ -1,21 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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 { format, isMatch, parse, isAfter } from "../../lib/date";
-import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
-import { CalendarRange } from "../CalendarRange/CalendarRange";
-import { Popper } from "../Popper/Popper";
-import { IconButton } from "../IconButton/IconButton";
-import { useDateInput } from "../../hooks/useDateInput";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { classNamesString } from "../../lib/classNames";
-import { multiRef } from "../../lib/utils";
-import { FormField } from "../FormField/FormField";
-import { InputLike } from "../InputLike/InputLike";
-import { InputLikeDivider } from "../InputLike/InputLikeDivider";
-import { callMultiple } from "../../lib/callMultiple";
-import { getSizeYClassName } from "../../helpers/getSizeYClassName";
+import * as React from 'react';
+import { format, isMatch, parse, isAfter } from '../../lib/date';
+import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
+import { CalendarRange } from '../CalendarRange/CalendarRange';
+import { Popper } from '../Popper/Popper';
+import { IconButton } from '../IconButton/IconButton';
+import { useDateInput } from '../../hooks/useDateInput';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { classNames } from '@vkontakte/vkjs';
+import { multiRef } from '../../lib/utils';
+import { FormField } from '../FormField/FormField';
+import { InputLike } from '../InputLike/InputLike';
+import { InputLikeDivider } from '../InputLike/InputLikeDivider';
+import { callMultiple } from '../../lib/callMultiple';
+import { getSizeYClassName } from '../../helpers/getSizeYClassName';
 var elementsConfig = function elementsConfig(index) {
   var length = 2;
   var min = 1;
@@ -43,16 +43,16 @@ var elementsConfig = function elementsConfig(index) {
   };
 };
 var getInternalValue = function getInternalValue(value) {
-  var newValue = ["", "", "", "", "", ""];
+  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");
+    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");
+    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;
 };
@@ -67,7 +67,7 @@ export var DateRangeInput = function DateRangeInput(_ref) {
     value = _ref.value,
     onChange = _ref.onChange,
     _ref$calendarPlacemen = _ref.calendarPlacement,
-    calendarPlacement = _ref$calendarPlacemen === void 0 ? "bottom-start" : _ref$calendarPlacemen,
+    calendarPlacement = _ref$calendarPlacemen === void 0 ? 'bottom-start' : _ref$calendarPlacemen,
     style = _ref.style,
     className = _ref.className,
     _ref$closeOnChange = _ref.closeOnChange,
@@ -85,21 +85,21 @@ export var DateRangeInput = function DateRangeInput(_ref) {
     changeMonthAriaLabel = _ref.changeMonthAriaLabel,
     changeYearAriaLabel = _ref.changeYearAriaLabel,
     _ref$changeStartDayAr = _ref.changeStartDayAriaLabel,
-    changeStartDayAriaLabel = _ref$changeStartDayAr === void 0 ? "Изменить день начала" : _ref$changeStartDayAr,
+    changeStartDayAriaLabel = _ref$changeStartDayAr === void 0 ? 'Изменить день начала' : _ref$changeStartDayAr,
     _ref$changeStartMonth = _ref.changeStartMonthAriaLabel,
-    changeStartMonthAriaLabel = _ref$changeStartMonth === void 0 ? "Изменить месяц начала" : _ref$changeStartMonth,
+    changeStartMonthAriaLabel = _ref$changeStartMonth === void 0 ? 'Изменить месяц начала' : _ref$changeStartMonth,
     _ref$changeStartYearA = _ref.changeStartYearAriaLabel,
-    changeStartYearAriaLabel = _ref$changeStartYearA === void 0 ? "Изменить год начала" : _ref$changeStartYearA,
+    changeStartYearAriaLabel = _ref$changeStartYearA === void 0 ? 'Изменить год начала' : _ref$changeStartYearA,
     _ref$changeEndDayAria = _ref.changeEndDayAriaLabel,
-    changeEndDayAriaLabel = _ref$changeEndDayAria === void 0 ? "Изменить день окончания" : _ref$changeEndDayAria,
+    changeEndDayAriaLabel = _ref$changeEndDayAria === void 0 ? 'Изменить день окончания' : _ref$changeEndDayAria,
     _ref$changeEndMonthAr = _ref.changeEndMonthAriaLabel,
-    changeEndMonthAriaLabel = _ref$changeEndMonthAr === void 0 ? "Изменить месяц окончания" : _ref$changeEndMonthAr,
+    changeEndMonthAriaLabel = _ref$changeEndMonthAr === void 0 ? 'Изменить месяц окончания' : _ref$changeEndMonthAr,
     _ref$changeEndYearAri = _ref.changeEndYearAriaLabel,
-    changeEndYearAriaLabel = _ref$changeEndYearAri === void 0 ? "Изменить год окончания" : _ref$changeEndYearAri,
+    changeEndYearAriaLabel = _ref$changeEndYearAri === void 0 ? 'Изменить год окончания' : _ref$changeEndYearAri,
     _ref$clearFieldAriaLa = _ref.clearFieldAriaLabel,
-    clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? "Очистить поле" : _ref$clearFieldAriaLa,
+    clearFieldAriaLabel = _ref$clearFieldAriaLa === void 0 ? 'Очистить поле' : _ref$clearFieldAriaLa,
     _ref$showCalendarAria = _ref.showCalendarAriaLabel,
-    showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? "Показать календарь" : _ref$showCalendarAria,
+    showCalendarAriaLabel = _ref$showCalendarAria === void 0 ? 'Показать календарь' : _ref$showCalendarAria,
     prevMonthIcon = _ref.prevMonthIcon,
     nextMonthIcon = _ref.nextMonthIcon,
     _ref$disableCalendar = _ref.disableCalendar,
@@ -126,7 +126,7 @@ export var DateRangeInput = function DateRangeInput(_ref) {
     }
     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";
+    var mask = 'dd.MM.yyyy';
     if (!isMatch(formattedStartValue, mask)) {
       isStartValid = false;
     }
@@ -179,7 +179,7 @@ export var DateRangeInput = function DateRangeInput(_ref) {
   }, [onChange, closeOnChange, value, removeFocusFromField]);
   return /*#__PURE__*/React.createElement(FormField, _extends({
     style: style,
-    className: classNamesString("vkuiDateRangeInput", getSizeYClassName("vkuiDateRangeInput", sizeY), className),
+    className: classNames("vkuiDateRangeInput", getSizeYClassName("vkuiDateRangeInput", sizeY), className),
     getRootRef: multiRef(rootRef, getRootRef),
     after: value ? /*#__PURE__*/React.createElement(IconButton, {
       hoverMode: "opacity",
@@ -196,7 +196,7 @@ export var DateRangeInput = function DateRangeInput(_ref) {
   }, 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") : "") : ""
+    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
@@ -221,7 +221,7 @@ export var DateRangeInput = function DateRangeInput(_ref) {
     onElementSelect: setFocusedElement,
     value: internalValue[2],
     "aria-label": changeStartYearAriaLabel
-  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, " — "), /*#__PURE__*/React.createElement(InputLike, {
+  }), /*#__PURE__*/React.createElement(InputLikeDivider, null, ' — '), /*#__PURE__*/React.createElement(InputLike, {
     length: 2,
     getRootRef: daysEndRef,
     index: 3,

package/dist/components/DateRangeInput/DateRangeInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.js","names":["React","format","isMatch","parse","isAfter","Icon16Clear","Icon20CalendarOutline","CalendarRange","Popper","IconButton","useDateInput","useAdaptivity","classNamesString","multiRef","FormField","InputLike","InputLikeDivider","callMultiple","getSizeYClassName","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","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","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","onCalendarChange"],"sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { format, isMatch, parse, isAfter } from \"../../lib/date\";\nimport { Icon16Clear, Icon20CalendarOutline } from \"@vkontakte/icons\";\nimport {\n  CalendarRange,\n  CalendarRangeProps,\n} from \"../CalendarRange/CalendarRange\";\nimport { Popper, Placement } from \"../Popper/Popper\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport { HasRootRef } from \"../../types\";\nimport { useDateInput } from \"../../hooks/useDateInput\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { multiRef } from \"../../lib/utils\";\nimport { FormField, FormFieldProps } from \"../FormField/FormField\";\nimport { InputLike } from \"../InputLike/InputLike\";\nimport { InputLikeDivider } from \"../InputLike/InputLikeDivider\";\nimport { callMultiple } from \"../../lib/callMultiple\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport styles from \"./DateRangeInput.module.css\";\nimport dateInputStyles from \"../DateInput/DateInput.module.css\";\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, \"value\" | \"onChange\">,\n    Pick<\n      CalendarRangeProps,\n      | \"disablePast\"\n      | \"disableFuture\"\n      | \"shouldDisableDate\"\n      | \"onChange\"\n      | \"value\"\n      | \"weekStartsOn\"\n      | \"disablePickers\"\n      | \"prevMonthAriaLabel\"\n      | \"nextMonthAriaLabel\"\n      | \"changeMonthAriaLabel\"\n      | \"changeYearAriaLabel\"\n      | \"changeDayAriaLabel\"\n      | \"prevMonthIcon\"\n      | \"nextMonthIcon\"\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\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    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps[\"value\"]) => {\n  const newValue = [\"\", \"\", \"\", \"\", \"\", \"\"];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, \"0\");\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, \"0\");\n    newValue[2] = String(value[0].getFullYear()).padStart(4, \"0\");\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, \"0\");\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, \"0\");\n    newValue[5] = String(value[1].getFullYear()).padStart(4, \"0\");\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = \"bottom-start\",\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = \"Изменить день начала\",\n  changeStartMonthAriaLabel = \"Изменить месяц начала\",\n  changeStartYearAriaLabel = \"Изменить год начала\",\n  changeEndDayAriaLabel = \"Изменить день окончания\",\n  changeEndMonthAriaLabel = \"Изменить месяц окончания\",\n  changeEndYearAriaLabel = \"Изменить год окончания\",\n  clearFieldAriaLabel = \"Очистить поле\",\n  showCalendarAriaLabel = \"Показать календарь\",\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = \"dd.MM.yyyy\";\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value]\n  );\n\n  const refs = React.useMemo(\n    () => [\n      daysStartRef,\n      monthsStartRef,\n      yearsStartRef,\n      daysEndRef,\n      monthsEndRef,\n      yearsEndRef,\n    ],\n    [\n      daysStartRef,\n      monthsStartRef,\n      yearsStartRef,\n      daysEndRef,\n      monthsEndRef,\n      yearsEndRef,\n    ]\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: 5,\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    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField]\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNamesString(\n        styles[\"DateRangeInput\"],\n        getSizeYClassName(styles[\"DateRangeInput\"], sizeY),\n        className\n      )}\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            ? `${value[0] ? format(value[0], \"DD.MM.YYYY\") : \"\"} - ${\n                value[1] ? format(value[1], \"DD.MM.YYYY\") : \"\"\n              }`\n            : \"\"\n        }\n      />\n      <span\n        className={dateInputStyles[\"DateInput__input\"]}\n        onKeyDown={handleKeyDown}\n      >\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{\" — \"}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetDistance={8}\n          placement={calendarPlacement}\n        >\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAChE,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,kBAAkB;AACrE,SACEC,aAAa,QAER,gCAAgC;AACvC,SAASC,MAAM,QAAmB,kBAAkB;AACpD,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,iBAAiB,QAAQ,iCAAiC;AAsCnE,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAa,EAAK;EACxC,IAAIC,MAAM,GAAG,CAAC;EACd,IAAIC,GAAG,GAAG,CAAC;EACX,IAAIC,GAAG,GAAG,CAAC;EAEX,QAAQH,KAAK;IACX,KAAK,CAAC;IACN,KAAK,CAAC;MACJG,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,IAAI;MACVD,GAAG,GAAG,IAAI;MACVD,MAAM,GAAG,CAAC;MACV;EAAM;EAGV,OAAO;IAAEA,MAAM,EAANA,MAAM;IAAEC,GAAG,EAAHA,GAAG;IAAEC,GAAG,EAAHA;EAAI,CAAC;AAC7B,CAAC;AAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,KAAkC,EAAK;EAC/D,IAAMC,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;EACzC,IAAID,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,IAAIJ,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,OAAOH,QAAQ;AACjB,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,cAAc,GAAG,SAAjBA,cAAc,OAkCA;EAAA,IAjCzBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,aAAa,QAAbA,aAAa;IACbC,WAAW,QAAXA,WAAW;IACXV,KAAK,QAALA,KAAK;IACLW,QAAQ,QAARA,QAAQ;IAAA,6BACRC,iBAAiB;IAAjBA,iBAAiB,sCAAG,cAAc;IAClCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,0BACTC,aAAa;IAAbA,aAAa,mCAAG,IAAI;IACpBC,cAAc,QAAdA,cAAc;IACdC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,oBAAoB,QAApBA,oBAAoB;IACpBC,mBAAmB,QAAnBA,mBAAmB;IAAA,6BACnBC,uBAAuB;IAAvBA,uBAAuB,sCAAG,sBAAsB;IAAA,6BAChDC,yBAAyB;IAAzBA,yBAAyB,sCAAG,uBAAuB;IAAA,6BACnDC,wBAAwB;IAAxBA,wBAAwB,sCAAG,qBAAqB;IAAA,6BAChDC,qBAAqB;IAArBA,qBAAqB,sCAAG,yBAAyB;IAAA,6BACjDC,uBAAuB;IAAvBA,uBAAuB,sCAAG,0BAA0B;IAAA,6BACpDC,sBAAsB;IAAtBA,sBAAsB,sCAAG,wBAAwB;IAAA,6BACjDC,mBAAmB;IAAnBA,mBAAmB,sCAAG,eAAe;IAAA,6BACrCC,qBAAqB;IAArBA,qBAAqB,sCAAG,oBAAoB;IAC5CC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IAAA,4BACbC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACpBC,KAAK;EAER,IAAMC,YAAY,GAAGjE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMC,cAAc,GAAGnE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EAC1D,IAAME,aAAa,GAAGpE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACzD,IAAMG,UAAU,GAAGrE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACtD,IAAMI,YAAY,GAAGtE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMK,WAAW,GAAGvE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EAEvD,IAAMM,qBAAqB,GAAGxE,KAAK,CAACyE,WAAW,CAC7C,UAACC,aAAuB,EAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI;IACvB,IAAIC,UAAU,GAAG,IAAI;IACrB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,CAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,CAAC,CAAC,CAACxD,MAAM,EAAE;QACtDsD,YAAY,GAAG,KAAK;MACtB;IACF;IACA,KAAK,IAAIE,EAAC,GAAG,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,EAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,EAAC,CAAC,CAACxD,MAAM,EAAE;QACtDuD,UAAU,GAAG,KAAK;MACpB;IACF;IACA,IAAME,mBAAmB,aAAMJ,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACzF,IAAMK,iBAAiB,aAAML,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACvF,IAAMM,IAAI,GAAG,YAAY;IAEzB,IAAI,CAAC9E,OAAO,CAAC4E,mBAAmB,EAAEE,IAAI,CAAC,EAAE;MACvCL,YAAY,GAAG,KAAK;IACtB;IACA,IAAI,CAACzE,OAAO,CAAC6E,iBAAiB,EAAEC,IAAI,CAAC,EAAE;MACrCJ,UAAU,GAAG,KAAK;IACpB;IAEA,IAAI,CAACD,YAAY,IAAI,CAACC,UAAU,EAAE;MAChC;IACF;IAEA,IAAMK,WAAW,GAAGC,KAAK,CAACC,OAAO,CAAC1D,KAAK,CAAC;IACxC,IAAM2D,GAAG,GAAG,IAAIC,IAAI,EAAE;IACtB,IAAMC,KAAK,GAAGX,YAAY,GACtBxE,KAAK,CAAC2E,mBAAmB,EAAEE,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GACpE,IAAI;IACR,IAAMG,GAAG,GAAGX,UAAU,GAClBzE,KAAK,CAAC4E,iBAAiB,EAAEC,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GAClE,IAAI;IACR,IAAIE,KAAK,IAAIC,GAAG,IAAInF,OAAO,CAACmF,GAAG,EAAED,KAAK,CAAC,EAAE;MACvClD,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAACkD,KAAK,EAAEC,GAAG,CAAC,CAAC;IAC1B;EACF,CAAC,EACD,CAACnD,QAAQ,EAAEX,KAAK,CAAC,CAClB;EAED,IAAM+D,IAAI,GAAGxF,KAAK,CAACyF,OAAO,CACxB;IAAA,OAAM,CACJxB,YAAY,EACZE,cAAc,EACdC,aAAa,EACbC,UAAU,EACVC,YAAY,EACZC,WAAW,CACZ;EAAA,GACD,CACEN,YAAY,EACZE,cAAc,EACdC,aAAa,EACbC,UAAU,EACVC,YAAY,EACZC,WAAW,CACZ,CACF;EAED,oBAYI7D,YAAY,CAAC;MACfgF,UAAU,EAAE,CAAC;MACbF,IAAI,EAAJA,IAAI;MACJ5C,SAAS,EAATA,SAAS;MACTC,QAAQ,EAARA,QAAQ;MACR1B,cAAc,EAAdA,cAAc;MACdiB,QAAQ,EAARA,QAAQ;MACRoC,qBAAqB,EAArBA,qBAAqB;MACrBhD,gBAAgB,EAAhBA,gBAAgB;MAChBC,KAAK,EAALA;IACF,CAAC,CAAC;IArBAkE,OAAO,iBAAPA,OAAO;IACPC,WAAW,iBAAXA,WAAW;IACXC,IAAI,iBAAJA,IAAI;IACJC,YAAY,iBAAZA,YAAY;IACZC,aAAa,iBAAbA,aAAa;IACbrB,aAAa,iBAAbA,aAAa;IACbsB,aAAa,iBAAbA,aAAa;IACbC,iBAAiB,iBAAjBA,iBAAiB;IACjBC,gBAAgB,iBAAhBA,gBAAgB;IAChBC,KAAK,iBAALA,KAAK;IACLC,oBAAoB,iBAApBA,oBAAoB;EAatB,qBAAkBzF,aAAa,EAAE;IAAzB0F,KAAK,kBAALA,KAAK;EAEb,IAAMC,gBAAgB,GAAGtG,KAAK,CAACyE,WAAW,CACxC,UAAC/C,QAAyC,EAAK;IAC7CU,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGV,QAAQ,CAAC;IACpB,IAAIc,aAAa,IAAId,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,CAAC,CAAC,IAAIA,QAAQ,CAAC,CAAC,CAAC,MAAKD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,GAAE;MAChE2E,oBAAoB,EAAE;IACxB;EACF,CAAC,EACD,CAAChE,QAAQ,EAAEI,aAAa,EAAEf,KAAK,EAAE2E,oBAAoB,CAAC,CACvD;EAED,oBACE,oBAAC,SAAS;IACR,KAAK,EAAE9D,KAAM;IACb,SAAS,EAAE1B,gBAAgB,uBAEzBM,iBAAiB,uBAA2BmF,KAAK,CAAC,EAClD9D,SAAS,CACT;IACF,UAAU,EAAE1B,QAAQ,CAAC8E,OAAO,EAAEjD,UAAU,CAAE;IAC1C,KAAK,EACHjB,KAAK,gBACH,oBAAC,UAAU;MACT,SAAS,EAAC,SAAS;MACnB,cAAYkC,mBAAoB;MAChC,OAAO,EAAEwC;IAAM,gBAEf,oBAAC,WAAW,OAAG,CACJ,gBAEb,oBAAC,UAAU;MACT,SAAS,EAAC,SAAS;MACnB,cAAYvC,qBAAsB;MAClC,OAAO,EAAEkC;IAAa,gBAEtB,oBAAC,qBAAqB,OAAG,CAG9B;IACD,QAAQ,EAAEjD,QAAS;IACnB,OAAO,EAAE5B,YAAY,CAACiF,gBAAgB,EAAEpD,OAAO,CAAE;IACjD,OAAO,EAAE7B,YAAY,CAACiF,gBAAgB,EAAEnD,OAAO;EAAE,GAC7CiB,KAAK,gBAET;IACE,IAAI,EAAC,QAAQ;IACb,IAAI,EAAErB,IAAK;IACX,KAAK,EACHlB,KAAK,aACEA,KAAK,CAAC,CAAC,CAAC,GAAGxB,MAAM,CAACwB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,gBAC/CA,KAAK,CAAC,CAAC,CAAC,GAAGxB,MAAM,CAACwB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAEhD;EACL,EACD,eACF;IACE,SAAS,wBAAsC;IAC/C,SAAS,EAAEuE;EAAc,gBAEzB,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAE/B,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAEgC,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYrB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,YAAqB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,cAAe;IAC3B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE8B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYpB;EAA0B,EACtC,eACF,oBAAC,gBAAgB,YAAqB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,aAAc;IAC1B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE6B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYnB;EAAyB,EACrC,eACF,oBAAC,gBAAgB,QAAE,KAAK,CAAoB,eAC5C,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,UAAW;IACvB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE4B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYlB;EAAsB,EAClC,eACF,oBAAC,gBAAgB,YAAqB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE2B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYjB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,YAAqB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,WAAY;IACxB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE0B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYhB;EAAuB,EACnC,CACG,EACNmC,IAAI,IAAI,CAAC9B,eAAe,iBACvB,oBAAC,MAAM;IACL,SAAS,EAAE4B,OAAQ;IACnB,cAAc,EAAE,CAAE;IAClB,SAAS,EAAEtD;EAAkB,gBAE7B,oBAAC,aAAa;IACZ,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAE6E,gBAAiB;IAC3B,WAAW,EAAEnE,WAAY;IACzB,aAAa,EAAED,aAAc;IAC7B,iBAAiB,EAAED,iBAAkB;IACrC,OAAO,EAAE8D,aAAc;IACvB,UAAU,EAAEH,WAAY;IACxB,cAAc,EAAEnD,cAAe;IAC/B,kBAAkB,EAAEO,kBAAmB;IACvC,kBAAkB,EAAEC,kBAAmB;IACvC,oBAAoB,EAAEE,oBAAqB;IAC3C,mBAAmB,EAAEC,mBAAoB;IACzC,kBAAkB,EAAEF,kBAAmB;IACvC,aAAa,EAAEW,aAAc;IAC7B,aAAa,EAAEC;EAAc,EAC7B,CAEL,CACS;AAEhB,CAAC"}
+{"version":3,"file":"DateRangeInput.js","names":["React","format","isMatch","parse","isAfter","Icon16Clear","Icon20CalendarOutline","CalendarRange","Popper","IconButton","useDateInput","useAdaptivity","classNames","multiRef","FormField","InputLike","InputLikeDivider","callMultiple","getSizeYClassName","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","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","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","onCalendarChange"],"sources":["../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { format, isMatch, parse, isAfter } from '../../lib/date';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { Popper, Placement } from '../Popper/Popper';\nimport { IconButton } from '../IconButton/IconButton';\nimport { HasRootRef } from '../../types';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { classNames } from '@vkontakte/vkjs';\nimport { multiRef } from '../../lib/utils';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { getSizeYClassName } from '../../helpers/getSizeYClassName';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthAriaLabel'\n      | 'nextMonthAriaLabel'\n      | 'changeMonthAriaLabel'\n      | 'changeYearAriaLabel'\n      | 'changeDayAriaLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: Placement;\n  closeOnChange?: boolean;\n  clearFieldAriaLabel?: string;\n  showCalendarAriaLabel?: string;\n  changeStartDayAriaLabel?: string;\n  changeStartMonthAriaLabel?: string;\n  changeStartYearAriaLabel?: string;\n  changeEndDayAriaLabel?: string;\n  changeEndMonthAriaLabel?: string;\n  changeEndYearAriaLabel?: string;\n  disableCalendar?: boolean;\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    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthAriaLabel,\n  nextMonthAriaLabel,\n  changeDayAriaLabel,\n  changeMonthAriaLabel,\n  changeYearAriaLabel,\n  changeStartDayAriaLabel = 'Изменить день начала',\n  changeStartMonthAriaLabel = 'Изменить месяц начала',\n  changeStartYearAriaLabel = 'Изменить год начала',\n  changeEndDayAriaLabel = 'Изменить день окончания',\n  changeEndMonthAriaLabel = 'Изменить месяц окончания',\n  changeEndYearAriaLabel = 'Изменить год окончания',\n  clearFieldAriaLabel = 'Очистить поле',\n  showCalendarAriaLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'dd.MM.yyyy';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\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: 5,\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    (newValue?: Array<Date | null> | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(\n        styles['DateRangeInput'],\n        getSizeYClassName(styles['DateRangeInput'], sizeY),\n        className,\n      )}\n      getRootRef={multiRef(rootRef, getRootRef)}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" aria-label={clearFieldAriaLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" aria-label={showCalendarAriaLabel} onClick={openCalendar}>\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            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <span className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          aria-label={changeStartDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          aria-label={changeStartMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          aria-label={changeStartYearAriaLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          aria-label={changeEndDayAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          aria-label={changeEndMonthAriaLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          aria-label={changeEndYearAriaLabel}\n        />\n      </span>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetDistance={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthAriaLabel={prevMonthAriaLabel}\n            nextMonthAriaLabel={nextMonthAriaLabel}\n            changeMonthAriaLabel={changeMonthAriaLabel}\n            changeYearAriaLabel={changeYearAriaLabel}\n            changeDayAriaLabel={changeDayAriaLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,EAAEC,OAAO,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAgB;AAChE,SAASC,WAAW,EAAEC,qBAAqB,QAAQ,kBAAkB;AACrE,SAASC,aAAa,QAA4B,gCAAgC;AAClF,SAASC,MAAM,QAAmB,kBAAkB;AACpD,SAASC,UAAU,QAAQ,0BAA0B;AAErD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,SAAS,QAAQ,wBAAwB;AAClD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,iBAAiB,QAAQ,iCAAiC;AAsCnE,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,KAAa,EAAK;EACxC,IAAIC,MAAM,GAAG,CAAC;EACd,IAAIC,GAAG,GAAG,CAAC;EACX,IAAIC,GAAG,GAAG,CAAC;EAEX,QAAQH,KAAK;IACX,KAAK,CAAC;IACN,KAAK,CAAC;MACJG,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,EAAE;MACR;IACF,KAAK,CAAC;IACN,KAAK,CAAC;MACJA,GAAG,GAAG,IAAI;MACVD,GAAG,GAAG,IAAI;MACVD,MAAM,GAAG,CAAC;MACV;EAAM;EAGV,OAAO;IAAEA,MAAM,EAANA,MAAM;IAAEC,GAAG,EAAHA,GAAG;IAAEC,GAAG,EAAHA;EAAI,CAAC;AAC7B,CAAC;AAED,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,KAAkC,EAAK;EAC/D,IAAMC,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;EACzC,IAAID,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,IAAIJ,KAAK,aAALA,KAAK,eAALA,KAAK,CAAG,CAAC,CAAC,EAAE;IACdC,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACG,OAAO,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IACzDH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACK,QAAQ,EAAE,GAAG,CAAC,CAAC,CAACD,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;IAC9DH,QAAQ,CAAC,CAAC,CAAC,GAAGC,MAAM,CAACF,KAAK,CAAC,CAAC,CAAC,CAACM,WAAW,EAAE,CAAC,CAACF,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC/D;EACA,OAAOH,QAAQ;AACjB,CAAC;;AAED;AACA;AACA;AACA,OAAO,IAAMM,cAAc,GAAG,SAAjBA,cAAc,OAkCA;EAAA,IAjCzBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,aAAa,QAAbA,aAAa;IACbC,WAAW,QAAXA,WAAW;IACXV,KAAK,QAALA,KAAK;IACLW,QAAQ,QAARA,QAAQ;IAAA,6BACRC,iBAAiB;IAAjBA,iBAAiB,sCAAG,cAAc;IAClCC,KAAK,QAALA,KAAK;IACLC,SAAS,QAATA,SAAS;IAAA,0BACTC,aAAa;IAAbA,aAAa,mCAAG,IAAI;IACpBC,cAAc,QAAdA,cAAc;IACdC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,kBAAkB,QAAlBA,kBAAkB;IAClBC,oBAAoB,QAApBA,oBAAoB;IACpBC,mBAAmB,QAAnBA,mBAAmB;IAAA,6BACnBC,uBAAuB;IAAvBA,uBAAuB,sCAAG,sBAAsB;IAAA,6BAChDC,yBAAyB;IAAzBA,yBAAyB,sCAAG,uBAAuB;IAAA,6BACnDC,wBAAwB;IAAxBA,wBAAwB,sCAAG,qBAAqB;IAAA,6BAChDC,qBAAqB;IAArBA,qBAAqB,sCAAG,yBAAyB;IAAA,6BACjDC,uBAAuB;IAAvBA,uBAAuB,sCAAG,0BAA0B;IAAA,6BACpDC,sBAAsB;IAAtBA,sBAAsB,sCAAG,wBAAwB;IAAA,6BACjDC,mBAAmB;IAAnBA,mBAAmB,sCAAG,eAAe;IAAA,6BACrCC,qBAAqB;IAArBA,qBAAqB,sCAAG,oBAAoB;IAC5CC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IAAA,4BACbC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACpBC,KAAK;EAER,IAAMC,YAAY,GAAGjE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMC,cAAc,GAAGnE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EAC1D,IAAME,aAAa,GAAGpE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACzD,IAAMG,UAAU,GAAGrE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACtD,IAAMI,YAAY,GAAGtE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EACxD,IAAMK,WAAW,GAAGvE,KAAK,CAACkE,MAAM,CAAkB,IAAI,CAAC;EAEvD,IAAMM,qBAAqB,GAAGxE,KAAK,CAACyE,WAAW,CAC7C,UAACC,aAAuB,EAAK;IAC3B,IAAIC,YAAY,GAAG,IAAI;IACvB,IAAIC,UAAU,GAAG,IAAI;IACrB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAEA,CAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,CAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,CAAC,CAAC,CAACxD,MAAM,EAAE;QACtDsD,YAAY,GAAG,KAAK;MACtB;IACF;IACA,KAAK,IAAIE,EAAC,GAAG,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAEA,EAAC,IAAI,CAAC,EAAE;MAC9B,IAAIH,aAAa,CAACG,EAAC,CAAC,CAACxD,MAAM,GAAGF,cAAc,CAAC0D,EAAC,CAAC,CAACxD,MAAM,EAAE;QACtDuD,UAAU,GAAG,KAAK;MACpB;IACF;IACA,IAAME,mBAAmB,aAAMJ,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACzF,IAAMK,iBAAiB,aAAML,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,cAAIA,aAAa,CAAC,CAAC,CAAC,CAAE;IACvF,IAAMM,IAAI,GAAG,YAAY;IAEzB,IAAI,CAAC9E,OAAO,CAAC4E,mBAAmB,EAAEE,IAAI,CAAC,EAAE;MACvCL,YAAY,GAAG,KAAK;IACtB;IACA,IAAI,CAACzE,OAAO,CAAC6E,iBAAiB,EAAEC,IAAI,CAAC,EAAE;MACrCJ,UAAU,GAAG,KAAK;IACpB;IAEA,IAAI,CAACD,YAAY,IAAI,CAACC,UAAU,EAAE;MAChC;IACF;IAEA,IAAMK,WAAW,GAAGC,KAAK,CAACC,OAAO,CAAC1D,KAAK,CAAC;IACxC,IAAM2D,GAAG,GAAG,IAAIC,IAAI,EAAE;IACtB,IAAMC,KAAK,GAAGX,YAAY,GACtBxE,KAAK,CAAC2E,mBAAmB,EAAEE,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GACpE,IAAI;IACR,IAAMG,GAAG,GAAGX,UAAU,GAClBzE,KAAK,CAAC4E,iBAAiB,EAAEC,IAAI,EAAGC,WAAW,KAAIxD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,KAAK2D,GAAG,CAAC,GAClE,IAAI;IACR,IAAIE,KAAK,IAAIC,GAAG,IAAInF,OAAO,CAACmF,GAAG,EAAED,KAAK,CAAC,EAAE;MACvClD,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAG,CAACkD,KAAK,EAAEC,GAAG,CAAC,CAAC;IAC1B;EACF,CAAC,EACD,CAACnD,QAAQ,EAAEX,KAAK,CAAC,CAClB;EAED,IAAM+D,IAAI,GAAGxF,KAAK,CAACyF,OAAO,CACxB;IAAA,OAAM,CAACxB,YAAY,EAAEE,cAAc,EAAEC,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,CAAC;EAAA,GAC1F,CAACN,YAAY,EAAEE,cAAc,EAAEC,aAAa,EAAEC,UAAU,EAAEC,YAAY,EAAEC,WAAW,CAAC,CACrF;EAED,oBAYI7D,YAAY,CAAC;MACfgF,UAAU,EAAE,CAAC;MACbF,IAAI,EAAJA,IAAI;MACJ5C,SAAS,EAATA,SAAS;MACTC,QAAQ,EAARA,QAAQ;MACR1B,cAAc,EAAdA,cAAc;MACdiB,QAAQ,EAARA,QAAQ;MACRoC,qBAAqB,EAArBA,qBAAqB;MACrBhD,gBAAgB,EAAhBA,gBAAgB;MAChBC,KAAK,EAALA;IACF,CAAC,CAAC;IArBAkE,OAAO,iBAAPA,OAAO;IACPC,WAAW,iBAAXA,WAAW;IACXC,IAAI,iBAAJA,IAAI;IACJC,YAAY,iBAAZA,YAAY;IACZC,aAAa,iBAAbA,aAAa;IACbrB,aAAa,iBAAbA,aAAa;IACbsB,aAAa,iBAAbA,aAAa;IACbC,iBAAiB,iBAAjBA,iBAAiB;IACjBC,gBAAgB,iBAAhBA,gBAAgB;IAChBC,KAAK,iBAALA,KAAK;IACLC,oBAAoB,iBAApBA,oBAAoB;EAatB,qBAAkBzF,aAAa,EAAE;IAAzB0F,KAAK,kBAALA,KAAK;EAEb,IAAMC,gBAAgB,GAAGtG,KAAK,CAACyE,WAAW,CACxC,UAAC/C,QAAyC,EAAK;IAC7CU,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGV,QAAQ,CAAC;IACpB,IAAIc,aAAa,IAAId,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,CAAC,CAAC,IAAIA,QAAQ,CAAC,CAAC,CAAC,MAAKD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAG,CAAC,CAAC,GAAE;MAChE2E,oBAAoB,EAAE;IACxB;EACF,CAAC,EACD,CAAChE,QAAQ,EAAEI,aAAa,EAAEf,KAAK,EAAE2E,oBAAoB,CAAC,CACvD;EAED,oBACE,oBAAC,SAAS;IACR,KAAK,EAAE9D,KAAM;IACb,SAAS,EAAE1B,UAAU,uBAEnBM,iBAAiB,uBAA2BmF,KAAK,CAAC,EAClD9D,SAAS,CACT;IACF,UAAU,EAAE1B,QAAQ,CAAC8E,OAAO,EAAEjD,UAAU,CAAE;IAC1C,KAAK,EACHjB,KAAK,gBACH,oBAAC,UAAU;MAAC,SAAS,EAAC,SAAS;MAAC,cAAYkC,mBAAoB;MAAC,OAAO,EAAEwC;IAAM,gBAC9E,oBAAC,WAAW,OAAG,CACJ,gBAEb,oBAAC,UAAU;MAAC,SAAS,EAAC,SAAS;MAAC,cAAYvC,qBAAsB;MAAC,OAAO,EAAEkC;IAAa,gBACvF,oBAAC,qBAAqB,OAAG,CAG9B;IACD,QAAQ,EAAEjD,QAAS;IACnB,OAAO,EAAE5B,YAAY,CAACiF,gBAAgB,EAAEpD,OAAO,CAAE;IACjD,OAAO,EAAE7B,YAAY,CAACiF,gBAAgB,EAAEnD,OAAO;EAAE,GAC7CiB,KAAK,gBAET;IACE,IAAI,EAAC,QAAQ;IACb,IAAI,EAAErB,IAAK;IACX,KAAK,EACHlB,KAAK,aACEA,KAAK,CAAC,CAAC,CAAC,GAAGxB,MAAM,CAACwB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,gBAC/CA,KAAK,CAAC,CAAC,CAAC,GAAGxB,MAAM,CAACwB,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAEhD;EACL,EACD,eACF;IAAM,SAAS,wBAAsC;IAAC,SAAS,EAAEuE;EAAc,gBAC7E,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAE/B,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAEgC,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYrB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,cAAe;IAC3B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE8B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYpB;EAA0B,EACtC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,aAAc;IAC1B,KAAK,EAAE,CAAE;IACT,eAAe,EAAE6B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYnB;EAAyB,EACrC,eACF,oBAAC,gBAAgB,QAAE,KAAK,CAAoB,eAC5C,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,UAAW;IACvB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE4B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYlB;EAAsB,EAClC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,YAAa;IACzB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE2B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYjB;EAAwB,EACpC,eACF,oBAAC,gBAAgB,QAAC,GAAC,CAAmB,eACtC,oBAAC,SAAS;IACR,MAAM,EAAE,CAAE;IACV,UAAU,EAAEc,WAAY;IACxB,KAAK,EAAE,CAAE;IACT,eAAe,EAAE0B,iBAAkB;IACnC,KAAK,EAAEvB,aAAa,CAAC,CAAC,CAAE;IACxB,cAAYhB;EAAuB,EACnC,CACG,EACNmC,IAAI,IAAI,CAAC9B,eAAe,iBACvB,oBAAC,MAAM;IAAC,SAAS,EAAE4B,OAAQ;IAAC,cAAc,EAAE,CAAE;IAAC,SAAS,EAAEtD;EAAkB,gBAC1E,oBAAC,aAAa;IACZ,KAAK,EAAEZ,KAAM;IACb,QAAQ,EAAE6E,gBAAiB;IAC3B,WAAW,EAAEnE,WAAY;IACzB,aAAa,EAAED,aAAc;IAC7B,iBAAiB,EAAED,iBAAkB;IACrC,OAAO,EAAE8D,aAAc;IACvB,UAAU,EAAEH,WAAY;IACxB,cAAc,EAAEnD,cAAe;IAC/B,kBAAkB,EAAEO,kBAAmB;IACvC,kBAAkB,EAAEC,kBAAmB;IACvC,oBAAoB,EAAEE,oBAAqB;IAC3C,mBAAmB,EAAEC,mBAAoB;IACzC,kBAAkB,EAAEF,kBAAmB;IACvC,aAAa,EAAEW,aAAc;IAC7B,aAAa,EAAEC;EAAc,EAC7B,CAEL,CACS;AAEhB,CAAC"}

package/dist/components/Div/Div.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { HasRootRef } from "../../types";
+import * as React from 'react';
+import { HasRootRef } from '../../types';
 export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
 }
 /**

package/dist/components/Div/Div.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "getRootRef", "className"];
-import * as React from "react";
-import { classNamesString } from "../../lib/classNames";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
@@ -13,7 +13,7 @@ export var Div = function Div(_ref) {
     restProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
     ref: getRootRef,
-    className: classNamesString("vkuiDiv", className)
+    className: classNames("vkuiDiv", className)
   }), children);
 };
 //# sourceMappingURL=Div.js.map

package/dist/components/Div/Div.js.map

@@ -1 +1 @@
-{"version":3,"file":"Div.js","names":["React","classNamesString","Div","children","getRootRef","className","restProps"],"sources":["../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { HasRootRef } from \"../../types\";\nimport styles from \"./Div.module.css\";\n\nexport interface DivProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: DivProps) => {\n  return (\n    <div\n      {...restProps}\n      ref={getRootRef}\n      className={classNamesString(styles[\"Div\"], className)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,gBAAgB,QAAQ,sBAAsB;AAQvD;AACA;AACA;AACA,OAAO,IAAMC,GAAG,GAAG,SAANA,GAAG,OAKA;EAAA,IAJdC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEH,gBAAgB,YAAgBI,SAAS;EAAE,IAErDF,QAAQ,CACL;AAEV,CAAC"}
+{"version":3,"file":"Div.js","names":["React","classNames","Div","children","getRootRef","className","restProps"],"sources":["../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n  return (\n    <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAQ5C;AACA;AACA;AACA,OAAO,IAAMC,GAAG,GAAG,SAANA,GAAG,OAAoE;EAAA,IAA9DC,QAAQ,QAARA,QAAQ;IAAEC,UAAU,QAAVA,UAAU;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACjE,oBACE,wCAASA,SAAS;IAAE,GAAG,EAAEF,UAAW;IAAC,SAAS,EAAEH,UAAU,YAAgBI,SAAS;EAAE,IAClFF,QAAQ,CACL;AAEV,CAAC"}

package/dist/components/DropdownIcon/DropdownIcon.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import * as React from 'react';
 export interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {
     opened?: boolean;
 }

package/dist/components/DropdownIcon/DropdownIcon.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["opened", "className"];
-import * as React from "react";
-import { Icon20Dropdown, Icon24ChevronDown, Icon24ChevronUp, Icon20ChevronUp } from "@vkontakte/icons";
-import { classNamesString } from "../../lib/classNames";
-import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditionalRender";
+import * as React from 'react';
+import { Icon20Dropdown, Icon24ChevronDown, Icon24ChevronUp, Icon20ChevronUp } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 export var DropdownIcon = function DropdownIcon(_ref) {
   var _ref$opened = _ref.opened,
     opened = _ref$opened === void 0 ? false : _ref$opened,
@@ -15,9 +15,9 @@ export var DropdownIcon = function DropdownIcon(_ref) {
   var IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;
   var IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;
   return /*#__PURE__*/React.createElement(React.Fragment, null, sizeY.compact && /*#__PURE__*/React.createElement(IconCompact, _extends({
-    className: classNamesString("vkuiDropdownIcon", sizeY.compact.className, className)
+    className: classNames("vkuiDropdownIcon", sizeY.compact.className, className)
   }, restProps)), sizeY.regular && /*#__PURE__*/React.createElement(IconRegular, _extends({
-    className: classNamesString("vkuiDropdownIcon", sizeY.regular.className, className)
+    className: classNames("vkuiDropdownIcon", sizeY.regular.className, className)
   }, restProps)));
 };
 //# sourceMappingURL=DropdownIcon.js.map

package/dist/components/DropdownIcon/DropdownIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownIcon.js","names":["React","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","Icon20ChevronUp","classNamesString","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","compact","regular"],"sources":["../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n  Icon20ChevronUp,\n} from \"@vkontakte/icons\";\nimport { classNamesString } from \"../../lib/classNames\";\nimport { useAdaptivityConditionalRender } from \"../../hooks/useAdaptivityConditionalRender\";\nimport styles from \"./DropdownIcon.module.css\";\n\nexport interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({\n  opened = false,\n  className,\n  ...restProps\n}: DropdownIconProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n  const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n  const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && (\n        <IconCompact\n          className={classNamesString(\n            styles[\"DropdownIcon\"],\n            sizeY.compact.className,\n            className\n          )}\n          {...restProps}\n        />\n      )}\n      {sizeY.regular && (\n        <IconRegular\n          className={classNamesString(\n            styles[\"DropdownIcon\"],\n            sizeY.regular.className,\n            className\n          )}\n          {...restProps}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,QACV,kBAAkB;AACzB,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,8BAA8B,QAAQ,4CAA4C;AAO3F,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAIA;EAAA,uBAHvBC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,4BAAkBJ,8BAA8B,EAAE;IAA1CK,KAAK,yBAALA,KAAK;EACb,IAAMC,WAAW,GAAGJ,MAAM,GAAGJ,eAAe,GAAGH,cAAc;EAC7D,IAAMY,WAAW,GAAGL,MAAM,GAAGL,eAAe,GAAGD,iBAAiB;EAEhE,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZS,KAAK,CAACG,OAAO,iBACZ,oBAAC,WAAW;IACV,SAAS,EAAET,gBAAgB,qBAEzBM,KAAK,CAACG,OAAO,CAACL,SAAS,EACvBA,SAAS;EACT,GACEC,SAAS,EAEhB,EACAC,KAAK,CAACI,OAAO,iBACZ,oBAAC,WAAW;IACV,SAAS,EAAEV,gBAAgB,qBAEzBM,KAAK,CAACI,OAAO,CAACN,SAAS,EACvBA,SAAS;EACT,GACEC,SAAS,EAEhB,CACc;AAErB,CAAC"}
+{"version":3,"file":"DropdownIcon.js","names":["React","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","Icon20ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","compact","regular"],"sources":["../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n  Icon20ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport styles from './DropdownIcon.module.css';\n\nexport interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n  const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n  const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && (\n        <IconCompact\n          className={classNames(styles['DropdownIcon'], sizeY.compact.className, className)}\n          {...restProps}\n        />\n      )}\n      {sizeY.regular && (\n        <IconRegular\n          className={classNames(styles['DropdownIcon'], sizeY.regular.className, className)}\n          {...restProps}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,eAAe,QACV,kBAAkB;AACzB,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,8BAA8B,QAAQ,4CAA4C;AAO3F,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAAuE;EAAA,uBAAjEC,MAAM;IAANA,MAAM,4BAAG,KAAK;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACpE,4BAAkBJ,8BAA8B,EAAE;IAA1CK,KAAK,yBAALA,KAAK;EACb,IAAMC,WAAW,GAAGJ,MAAM,GAAGJ,eAAe,GAAGH,cAAc;EAC7D,IAAMY,WAAW,GAAGL,MAAM,GAAGL,eAAe,GAAGD,iBAAiB;EAEhE,oBACE,oBAAC,KAAK,CAAC,QAAQ,QACZS,KAAK,CAACG,OAAO,iBACZ,oBAAC,WAAW;IACV,SAAS,EAAET,UAAU,qBAAyBM,KAAK,CAACG,OAAO,CAACL,SAAS,EAAEA,SAAS;EAAE,GAC9EC,SAAS,EAEhB,EACAC,KAAK,CAACI,OAAO,iBACZ,oBAAC,WAAW;IACV,SAAS,EAAEV,UAAU,qBAAyBM,KAAK,CAACI,OAAO,CAACN,SAAS,EAAEA,SAAS;EAAE,GAC9EC,SAAS,EAEhB,CACc;AAErB,CAAC"}