@vkontakte/vkui 5.5.4 → 5.6.0

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

@@ -134,7 +134,8 @@ var DateInput = function(_param) {
             mask += " HH:mm";
         }
         if ((0, _date.isMatch)(formattedValue, mask)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange((0, _date.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : new Date()));
+            var _onChange;
+            (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange((0, _date.parse)(formattedValue, mask, value !== null && value !== void 0 ? value : new Date()));
         }
     }, [
         enableTime,
@@ -171,7 +172,8 @@ var DateInput = function(_param) {
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var handleRootRef = (0, _useExternRef.useExternRef)(rootRef, getRootRef);
     var onCalendarChange = _react.useCallback(function(value) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        var _onChange;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(value);
         if (closeOnChange && !enableTime) {
             removeFocusFromField();
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\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?: PlacementWithAuto;\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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\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          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"],"names":["DateInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","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","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","useDateInput","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetDistance","placement","Calendar","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateInput--sizeY-compact'],\n};\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?: PlacementWithAuto;\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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\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          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"],"names":["DateInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","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","React","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","isMatch","parse","Date","refs","useMemo","useDateInput","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Fragment","Popper","targetRef","offsetDistance","placement","Calendar","onClose"],"mappings":"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"}

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -78,7 +78,8 @@ var DatePickerCustom = function(_param) {
         "className"
     ]);
     var onSelectChange = function(e) {
-        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(_define_property._({
+        var _onDateChange;
+        (_onDateChange = onDateChange) === null || _onDateChange === void 0 ? void 0 : _onDateChange(_define_property._({
             day: day,
             month: month,
             year: year
@@ -177,7 +178,8 @@ var DatePickerNative = function(_param) {
         })
     } : {};
     var onStringChange = _react.useCallback(function(e) {
-        onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(parseInputDate(e.currentTarget.value));
+        var _onDateChange;
+        (_onDateChange = onDateChange) === null || _onDateChange === void 0 ? void 0 : _onDateChange(parseInputDate(e.currentTarget.value));
     }, [
         onDateChange
     ]);
@@ -194,10 +196,11 @@ var DatePicker = function(_param) {
     ]);
     var hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
     var _React_useState = _sliced_to_array._(_react.useState(function() {
+        var _defaultValue, _defaultValue1, _defaultValue2;
         return {
-            day: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.day) || 0,
-            month: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.month) || 0,
-            year: (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.year) || 0
+            day: ((_defaultValue = defaultValue) === null || _defaultValue === void 0 ? void 0 : _defaultValue.day) || 0,
+            month: ((_defaultValue1 = defaultValue) === null || _defaultValue1 === void 0 ? void 0 : _defaultValue1.month) || 0,
+            year: ((_defaultValue2 = defaultValue) === null || _defaultValue2 === void 0 ? void 0 : _defaultValue2.year) || 0
         };
     }), 2), value = _React_useState[0], setValue = _React_useState[1];
     var onDateChange = _react.useCallback(function(update) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\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"],"names":["DatePicker","DefaultMonths","convertToInputFormat","day","month","year","leadingZero","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","range","map","label","String","monthOptions","index","yearOptions","div","classNames","CustomSelect","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","React","useCallback","currentTarget","Input","props","hasPointer","useAdaptivityHasPointer","useState","setValue","update","Cmp"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\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"],"names":["DatePicker","DefaultMonths","convertToInputFormat","day","month","year","leadingZero","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","range","map","label","String","monthOptions","index","yearOptions","div","classNames","CustomSelect","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","React","useCallback","currentTarget","Input","props","hasPointer","useAdaptivityHasPointer","useState","setValue","update","Cmp"],"mappings":";;;;+BAsLaA;;;eAAAA;;;;;;;;;+DAtLU;oBACiB;qBAClB;uCACkB;4BACX;qBACP;AAGtB,IAAMC,gBAA0B;IAC9B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;CACD;AAuBD,qCAAqC;AACrC,SAASC,qBAAqB,KAA+D;qBAA/D,MAAEC,KAAAA,8BAAM,+BAAR,MAAWC,OAAAA,kCAAQ,gCAAnB,MAAsBC,MAAAA,gCAAO;IACzD,OAAO,AAAC,GAAUC,OAARD,MAAK,KAAyBC,OAAtBA,IAAAA,iBAAW,EAACF,QAAO,KAAoB,OAAjBE,IAAAA,iBAAW,EAACH;AACtD;AAEA,4CAA4C;AAC5C,SAASI,eAAeC,IAAY;IAClC,IAAMC,UAAUD,KAAKE,KAAK,CAAC;IAE3B,OAAO;QACLP,KAAKQ,OAAOF,OAAO,CAAC,EAAE;QACtBL,OAAOO,OAAOF,OAAO,CAAC,EAAE;QACxBJ,MAAMM,OAAOF,OAAO,CAAC,EAAE;IACzB;AACF;AAEA,SAASG,eAAeR,KAAc,EAAEC,IAAa;IACnD,OAAOD,QAAQ,IAAIS,KAAKR,QAAQ,MAAMD,OAAO,GAAGU,OAAO,KAAK;AAC9D;AAEA,IAAMC,mBAAmB;QACvBC,cAAAA,0BACAC,KAAAA,8BAAM;QAAEd,KAAK;QAAGC,OAAO;QAAGC,MAAM;IAAE,oCAClCa,KAAAA,8BAAM;QAAEf,KAAK;QAAIC,OAAO;QAAIC,MAAM;IAAK,gBACvCc,wBAAAA,gBACAC,0BAAAA,kBACAC,yBAAAA,iBACAC,wBAAAA,gBACAC,sBAAAA,cACAC,oBAAAA,gCACArB,KAAAA,8BAAM,sCACNC,OAAAA,kCAAQ,uCACRC,MAAAA,gCAAO,iBACPoB,sBAAAA,cACAC,kBAAAA,UACAC,mBAAAA,WACGC;QAfHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACArB;QACAC;QACAC;QACAoB;QACAC;QACAC;;IAGA,IAAME,iBAA8D,SAACC;YACnEL;SAAAA,gBAAAA,0BAAAA,oCAAAA,cAIE;YAHAtB,KAAAA;YACAC,OAAAA;YACAC,MAAAA;WACCyB,EAAEC,MAAM,CAACf,IAAI,EAAGL,OAAOmB,EAAEC,MAAM,CAACC,KAAK;IAE1C;IACA,IAAMC,aAAaC,IAAAA,YAAK,EAAC,GAAGtB,eAAeR,OAAOC,OAAO8B,GAAG,CAAC,SAACH;eAAW;YACvEI,OAAOC,OAAOL;YACdA,OAAAA;QACF;;IACA,IAAMM,eAAe,AAACd,CAAAA,cAAcvB,aAAY,EAAGkC,GAAG,CAAC,SAACnB,MAAMuB;eAAW;YACvEH,OAAOpB;YACPgB,OAAOO,QAAQ;QACjB;;IACA,IAAMC,cAAcN,IAAAA,YAAK,EAAChB,IAAIb,IAAI,EAAEY,IAAIZ,IAAI,EAAE8B,GAAG,CAAC,SAACH;eAAW;YAC5DI,OAAOC,OAAOL;YACdA,OAAOA;QACT;;IACA,qBACE,qBAACS;QAAId,WAAWe,IAAAA,gBAAU,oBAAuBf;OAAgBC,0BAC/D,qBAACa;QAAId,SAAS;qBACZ,qBAACc;QAAId,SAAS;qBACZ,qBAACgB,0BAAY;QACX3B,MAAK;QACLgB,OAAO7B;QACPyC,SAASX;QACTY,aAAa1B;QACbG,gBAAgBA;QAChBwB,UAAUjB;QACVH,UAAUA;uBAGd,qBAACe;QAAId,SAAS;qBACZ,qBAACgB,0BAAY;QACXhB,SAAS;QACTX,MAAK;QACLgB,OAAO5B;QACPwC,SAASN;QACTO,aAAazB;QACbE,gBAAgBA;QAChBwB,UAAUjB;QACVH,UAAUA;uBAGd,qBAACe;QAAId,SAAS;qBACZ,qBAACgB,0BAAY;QACX3B,MAAK;QACLgB,OAAO3B;QACPuC,SAASJ;QACTK,aAAaxB;QACbC,gBAAgBA;QAChBwB,UAAUjB;QACVH,UAAUA;wBAIhB,qBAACqB;QAAMC,MAAK;QAAShC,MAAMA;QAAMgB,OAAO9B,qBAAqB;YAAEC,KAAAA;YAAKC,OAAAA;YAAOC,MAAAA;QAAK;;AAGtF;AAEA,IAAM4C,mBAAmB;4BACvBhC,KAAAA,8BAAM;QAAEd,KAAK;QAAGC,OAAO;QAAGC,MAAM;IAAE,oCAClCa,KAAAA,8BAAM;QAAEf,KAAK;QAAIC,OAAO;QAAIC,MAAM;IAAK,gBACvCc,wBAAAA,gBACAC,0BAAAA,kBACAC,yBAAAA,iBACAC,wBAAAA,gBACAC,sBAAAA,cACApB,aAAAA,KACAC,eAAAA,OACAC,cAAAA,MACAoB,sBAAAA,cACGG;QAXHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACApB;QACAC;QACAC;QACAoB;;IAGA,IAAMyB,WACJ/C,OAAOC,SAASC,OAAO;QAAEkB,cAAcrB,qBAAqB;YAAEC,KAAAA;YAAKC,OAAAA;YAAOC,MAAAA;QAAK;IAAG,IAAI,CAAC;IACzF,IAAM8C,iBAA6DC,OAAMC,WAAW,CAClF,SAACvB;YACCL;SAAAA,gBAAAA,0BAAAA,oCAAAA,cAAelB,eAAeuB,EAAEwB,aAAa,CAACtB,KAAK;IACrD,GACA;QAACP;KAAa;IAEhB,qBACE,qBAAC8B,YAAK,+DACA3B;QACJoB,MAAK;QACLF,UAAUK;QACVlC,KAAKf,qBAAqBe;QAC1BC,KAAKhB,qBAAqBgB;QACtBgC;AAGV;AAKO,IAAMlD,aAAa;QAAGuB,sBAAAA,cAAiBiC;QAAjBjC;;IAC3B,IAAMkC,aAAaC,IAAAA,gDAAuB;IAC1C,IAA0BN,qCAAAA,OAAMO,QAAQ,CAAgC;YACjEpC,eACEA,gBACDA;eAHuE;YAC7EpB,KAAKoB,EAAAA,gBAAAA,0BAAAA,oCAAAA,cAAcpB,GAAG,KAAI;YAC1BC,OAAOmB,EAAAA,iBAAAA,0BAAAA,qCAAAA,eAAcnB,KAAK,KAAI;YAC9BC,MAAMkB,EAAAA,iBAAAA,0BAAAA,qCAAAA,eAAclB,IAAI,KAAI;QAC9B;YAJO2B,QAAmBoB,oBAAZQ,WAAYR;IAM1B,IAAM3B,eAAe2B,OAAMC,WAAW,CACpC,SAACQ;QACCD,SAASC;QACTL,MAAM/B,YAAY,IAAI+B,MAAM/B,YAAY,CAAC,qBAAKoC;IAChD,GACA;QAACL;KAAM;IAGT,IAAMM,MAAML,aAAa1C,mBAAmBkC;IAC5C,qBAAO,qBAACa,iDAAQN,OAAWxB;QAAOP,cAAcA;;AAClD"}

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

@@ -57,6 +57,7 @@ var elementsConfig = function(index) {
     };
 };
 var getInternalValue = function(value) {
+    var _value, _value1;
     var newValue = [
         "",
         "",
@@ -65,12 +66,12 @@ var getInternalValue = function(value) {
         "",
         ""
     ];
-    if (value === null || value === void 0 ? void 0 : value[0]) {
+    if ((_value = value) === null || _value === void 0 ? void 0 : _value[0]) {
         newValue[0] = String(value[0].getDate()).padStart(2, "0");
         newValue[1] = String(value[0].getMonth() + 1).padStart(2, "0");
         newValue[2] = String(value[0].getFullYear()).padStart(4, "0");
     }
-    if (value === null || value === void 0 ? void 0 : value[1]) {
+    if ((_value1 = value) === null || _value1 === void 0 ? void 0 : _value1[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");
@@ -119,6 +120,7 @@ var DateRangeInput = function(_param) {
     var monthsEndRef = _react.useRef(null);
     var yearsEndRef = _react.useRef(null);
     var onInternalValueChange = _react.useCallback(function(internalValue) {
+        var _value, _value1;
         var isStartValid = true;
         var isEndValid = true;
         for(var i = 0; i <= 2; i += 1){
@@ -145,10 +147,11 @@ var DateRangeInput = function(_param) {
         }
         var valueExists = Array.isArray(value);
         var now = new Date();
-        var start = isStartValid ? (0, _date.parse)(formattedStartValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[0]) || now) : null;
-        var end = isEndValid ? (0, _date.parse)(formattedEndValue, mask, valueExists && (value === null || value === void 0 ? void 0 : value[1]) || now) : null;
+        var start = isStartValid ? (0, _date.parse)(formattedStartValue, mask, valueExists && ((_value = value) === null || _value === void 0 ? void 0 : _value[0]) || now) : null;
+        var end = isEndValid ? (0, _date.parse)(formattedEndValue, mask, valueExists && ((_value1 = value) === null || _value1 === void 0 ? void 0 : _value1[1]) || now) : null;
         if (start && end && (0, _date.isAfter)(end, start)) {
-            onChange === null || onChange === void 0 ? void 0 : onChange([
+            var _onChange;
+            (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange([
                 start,
                 end
             ]);
@@ -188,8 +191,9 @@ var DateRangeInput = function(_param) {
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var handleRootRef = (0, _useExternRef.useExternRef)(rootRef, getRootRef);
     var onCalendarChange = _react.useCallback(function(newValue) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        if (closeOnChange && (newValue === null || newValue === void 0 ? void 0 : newValue[1]) && newValue[1] !== (value === null || value === void 0 ? void 0 : value[1])) {
+        var _onChange, _newValue, _value;
+        (_onChange = onChange) === null || _onChange === void 0 ? void 0 : _onChange(newValue);
+        if (closeOnChange && ((_newValue = newValue) === null || _newValue === void 0 ? void 0 : _newValue[1]) && newValue[1] !== ((_value = value) === null || _value === void 0 ? void 0 : _value[1])) {
             removeFocusFromField();
         }
     }, [

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\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?: PlacementWithAuto;\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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\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"],"names":["DateRangeInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","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","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","useDateInput","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Popper","targetRef","offsetDistance","placement","CalendarRange","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  [SizeType.COMPACT]: styles['DateRangeInput--sizeY-compact'],\n};\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?: PlacementWithAuto;\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 = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\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(sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\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"],"names":["DateRangeInput","sizeYClassNames","none","SizeType","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","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","React","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","isMatch","valueExists","Array","isArray","now","Date","start","parse","end","isAfter","refs","useMemo","useDateInput","maxElement","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","useAdaptivity","sizeY","handleRootRef","useExternRef","onCalendarChange","FormField","classNames","REGULAR","after","IconButton","hoverMode","aria-label","Icon16Clear","Icon20CalendarOutline","callMultiple","input","type","format","span","onKeyDown","InputLike","onElementSelect","InputLikeDivider","Popper","targetRef","offsetDistance","placement","CalendarRange","onClose"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["Div","children","getRootRef","className","restProps","div","ref","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;oBACI;AAWpB,IAAMA,MAAM;QAAGC,kBAAAA,UAAUC,oBAAAA,YAAYC,mBAAAA,WAAcC;QAApCH;QAAUC;QAAYC;;IAC1C,qBACE,qBAACE,mDAAQD;QAAWE,KAAKJ;QAAYC,WAAWI,IAAAA,6BAA0BJ;QACvEF;AAGP"}
+{"version":3,"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"],"names":["Div","children","getRootRef","className","restProps","div","ref","classNames"],"mappings":";;;;+BAYaA;;;eAAAA;;;;;;;+DAZU;oBACI;AAWpB,IAAMA,MAAM;QAAGC,kBAAAA,UAAUC,oBAAAA,YAAYC,mBAAAA,WAAcC;QAApCH;QAAUC;QAAYC;;IAC1C,qBACE,qBAACE,mDAAQD;QAAWE,KAAKJ;QAAYC,WAAWI,IAAAA,gBAAU,aAAgBJ;QACvEF;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20ChevronUp,\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\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 className={classNames(sizeY.compact.className, className)} {...restProps} />\n      )}\n      {sizeY.regular && (\n        <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["DropdownIcon","opened","className","restProps","sizeY","useAdaptivityConditionalRender","IconCompact","Icon20ChevronUp","Icon20Dropdown","IconRegular","Icon24ChevronUp","Icon24ChevronDown","React","Fragment","compact","classNames","regular"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;+DAdU;qBAMhB;oBACoB;8CACoB;AAMxC,IAAMA,eAAe;+BAAGC,QAAAA,oCAAS,uBAAOC,mBAAAA,WAAcC;QAA9BF;QAAgBC;;IAC7C,IAAM,AAAEE,QAAUC,IAAAA,kEAAVD;IACR,IAAME,cAAcL,SAASM,yBAAkBC;IAC/C,IAAMC,cAAcR,SAASS,yBAAkBC;IAE/C,qBACE,qBAACC,OAAMC,gBACJT,MAAMU,yBACL,qBAACR;QAAYJ,WAAWa,IAAAA,kBAAWX,MAAMU,QAAQZ,WAAWA;OAAgBC,aAE7EC,MAAMY,yBACL,qBAACP;QAAYP,WAAWa,IAAAA,kBAAWX,MAAMY,QAAQd,WAAWA;OAAgBC;AAIpF"}
+{"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20ChevronUp,\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\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 className={classNames(sizeY.compact.className, className)} {...restProps} />\n      )}\n      {sizeY.regular && (\n        <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["DropdownIcon","opened","className","restProps","sizeY","useAdaptivityConditionalRender","IconCompact","Icon20ChevronUp","Icon20Dropdown","IconRegular","Icon24ChevronUp","Icon24ChevronDown","React","Fragment","compact","classNames","regular"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;+DAdU;qBAMhB;oBACoB;8CACoB;AAMxC,IAAMA,eAAe;+BAAGC,QAAAA,oCAAS,uBAAOC,mBAAAA,WAAcC;QAA9BF;QAAgBC;;IAC7C,IAAM,AAAEE,QAAUC,IAAAA,8DAA8B,IAAxCD;IACR,IAAME,cAAcL,SAASM,sBAAe,GAAGC,qBAAc;IAC7D,IAAMC,cAAcR,SAASS,sBAAe,GAAGC,wBAAiB;IAEhE,qBACE,qBAACC,OAAMC,QAAQ,QACZT,MAAMU,OAAO,kBACZ,qBAACR;QAAYJ,WAAWa,IAAAA,gBAAU,EAACX,MAAMU,OAAO,CAACZ,SAAS,EAAEA;OAAgBC,aAE7EC,MAAMY,OAAO,kBACZ,qBAACP;QAAYP,WAAWa,IAAAA,gBAAU,EAACX,MAAMY,OAAO,CAACd,SAAS,EAAEA;OAAgBC;AAIpF"}

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
     tabbar?: React.ReactNode;
     activeStory: string;
+    children: React.ReactElement | Iterable<React.ReactElement>;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n}\n\nconst warn = warnOnce('Epic');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, className, ...restProps } = props;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)}\n    >\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n"],"names":["Epic","warn","warnOnce","props","scroll","React","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","getNavId","div","classNames","ScrollSaver","key","initialScroll","saveScroll","value"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;+DAjBU;oBACI;wBACF;wBACA;2BACG;AAQ5B,IAAMC,OAAOC,IAAAA,oBAAS;AAKf,IAAMF,OAAO,SAACG;IACnB,IAAMC,SAASC,OAAMC,OAAkC,CAAC,GAAGC;IAC3D,IAAQC,cAA2DL,MAA3DK,aAAaC,SAA8CN,MAA9CM,QAAQC,WAAsCP,MAAtCO,UAAUC,YAA4BR,MAA5BQ,WAAcC,yCAAcT;QAA3DK;QAAaC;QAAQC;QAAUC;;QAGpCN;IADH,IAAMQ,QACJ,CAACR,+BAAAA,OAAMS,SAASC,QAAQL,UAAUM,KAChC,SAACH;6BAAUR,OAAMY,eAAeJ,UAAUK,IAAAA,oBAASL,MAAMV,OAAOF,UAAUO;oBAD3EH,0CAAAA,+BAEuC;IAE1C,qBACE,qBAACc,mDACKP;QACJD,WAAWS,IAAAA,8BAA2BX,UAAU,+BAA+BE;sBAE/E,qBAACU;QACCC,KAAKd;QACLe,eAAenB,MAAM,CAACI,YAAY,IAAI;QACtCgB,YAAY,SAACC;mBAAWrB,MAAM,CAACI,YAAY,GAAGiB;;OAE7CZ,QAEFJ;AAGP"}
+{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, className, ...restProps } = props;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)}\n    >\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </div>\n  );\n};\n"],"names":["Epic","warn","warnOnce","props","scroll","React","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","getNavId","div","classNames","ScrollSaver","key","initialScroll","saveScroll","value"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;+DAlBU;oBACI;wBACF;wBACA;2BACG;AAS5B,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMF,OAAO,SAACG;IACnB,IAAMC,SAASC,OAAMC,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAClE,IAAQC,cAA2DL,MAA3DK,aAAaC,SAA8CN,MAA9CM,QAAQC,WAAsCP,MAAtCO,UAAUC,YAA4BR,MAA5BQ,WAAcC,yCAAcT;QAA3DK;QAAaC;QAAQC;QAAUC;;QAGpCN;IADH,IAAMQ,QACJ,CAACR,+BAAAA,OAAMS,QAAQ,CAACC,OAAO,CAACL,UAAUM,IAAI,CACpC,SAACH;6BAAUR,OAAMY,cAAc,CAACJ,UAAUK,IAAAA,kBAAQ,EAACL,MAAMV,KAAK,EAAEF,UAAUO;oBAD3EH,0CAAAA,+BAEuC;IAE1C,qBACE,qBAACc,mDACKP;QACJD,WAAWS,IAAAA,gBAAU,cAAiBX,UAAU,+BAA+BE;sBAE/E,qBAACU,wBAAW;QACVC,KAAKd;QACLe,eAAenB,MAAM,CAACI,YAAY,IAAI;QACtCgB,YAAY,SAACC;mBAAWrB,MAAM,CAACI,YAAY,GAAGiB;;OAE7CZ,QAEFJ;AAGP"}

package/dist/cjs/components/Epic/ScrollSaver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["ScrollSaver","children","initialScroll","saveScroll","React","useContext","ScrollContext","getScroll","scrollTo","useIsomorphicLayoutEffect","y","Fragment"],"mappings":";;;;+BAaaA;;;eAAAA;;;;+DAbU;yCACmB;6BAEZ;AAUvB,IAAMA,cAAc;QAAGC,iBAAAA,UAAUC,sBAAAA,eAAeC,mBAAAA;IACrD,IAAgCC,oBAAAA,OAAMC,WAAWC,+BAAzCC,YAAwBH,kBAAxBG,WAAWC,WAAaJ,kBAAbI;IACnBC,IAAAA,sDAA0B;QACxB,IAAI,OAAOP,kBAAkB,UAAU;YACrCM,SAAS,GAAGN;QACd;QACA,OAAO;mBAAMC,WAAWI,YAAYG;;IACtC,GAAG,EAAE;IACL,qBAAO,qBAACN,OAAMO,gBAAUV;AAC1B"}
+{"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["ScrollSaver","children","initialScroll","saveScroll","React","useContext","ScrollContext","getScroll","scrollTo","useIsomorphicLayoutEffect","y","Fragment"],"mappings":";;;;+BAaaA;;;eAAAA;;;;+DAbU;yCACmB;6BAEZ;AAUvB,IAAMA,cAAc;QAAGC,iBAAAA,UAAUC,sBAAAA,eAAeC,mBAAAA;IACrD,IAAgCC,oBAAAA,OAAMC,UAAU,CAACC,4BAAa,GAAtDC,YAAwBH,kBAAxBG,WAAWC,WAAaJ,kBAAbI;IACnBC,IAAAA,oDAAyB,EAAC;QACxB,IAAI,OAAOP,kBAAkB,UAAU;YACrCM,SAAS,GAAGN;QACd;QACA,OAAO;mBAAMC,WAAWI,YAAYG,CAAC;;IACvC,GAAG,EAAE;IACL,qBAAO,qBAACN,OAAMO,QAAQ,QAAEV;AAC1B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHidden {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Button","Component","disabled","VisuallyHidden","type"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;sBAEiB;8BACT;AAWxB,IAAMA,OAAO;iCAClBC,UAAAA,wCAAW,yDACXC,OAAAA,kCAAQ,uBACRC,cAAAA,MACAC,cAAAA,MACAC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,iBAAAA,SACAC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE;QACCC,WAAU;QACVd,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZK,UAAUH,UAAUG;qBAEpB,qBAACC,4EAAmBJ;QAAWE,WAAU;QAAQG,MAAK;QAAOP,YAAYD;SACxEV;AAGP"}
+{"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHidden {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Button","Component","disabled","VisuallyHidden","type"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;+DAdU;sBAEiB;8BACT;AAWxB,IAAMA,OAAO;iCAClBC,UAAAA,wCAAW,yDACXC,OAAAA,kCAAQ,uBACRC,cAAAA,MACAC,cAAAA,MACAC,mBAAAA,WACAC,gBAAAA,QACAC,eAAAA,OACAC,iBAAAA,SACAC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,oBAAAA,YACAC,oBAAAA,YACGC;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,cAAM;QACLC,WAAU;QACVd,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZK,UAAUH,UAAUG,QAAQ;qBAE5B,qBAACC,8BAAc,8CAAKJ;QAAWE,WAAU;QAAQG,MAAK;QAAOP,YAAYD;SACxEV;AAGP"}

package/dist/cjs/components/FixedLayout/FixedLayout.js

@@ -39,11 +39,12 @@ var FixedLayout = function(_param) {
     var window = (0, _dom.useDOM)().window;
     var colRef = _react.useContext(_SplitColContext.SplitColContext).colRef;
     var doResize = function() {
+        var _colRef;
         if (useParentWidth && ref.current) {
             var _ref_current_parentElement;
             var parentWidth = (_ref_current_parentElement = ref.current.parentElement) === null || _ref_current_parentElement === void 0 ? void 0 : _ref_current_parentElement.getBoundingClientRect().width;
             setWidth(parentWidth ? "".concat(parentWidth, "px") : undefined);
-        } else if (colRef === null || colRef === void 0 ? void 0 : colRef.current) {
+        } else if ((_colRef = colRef) === null || _colRef === void 0 ? void 0 : _colRef.current) {
             var computedStyle = getComputedStyle(colRef.current);
             setWidth("".concat(colRef.current.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight), "px"));
         } else {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","classNames","Platform","IOS","top","bottom"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;+DAvCU;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;AA8B1B,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA;IACjB,IAAMC,MAAMC,IAAAA,4BAAaT,YAAYC,SAAS,6BAA6B;IAC3E,IAA0BS,qCAAAA,OAAMC,SAA6BC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,eAAXD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,WAAWC,kCAA5BF;IAER,IAAMG,WAAW;QACf,IAAIhB,kBAAkBI,IAAIa,SAAS;gBACbb;YAApB,IAAMc,cAAcd,CAAAA,6BAAAA,IAAIa,QAAQE,2BAAZf,wCAAAA,KAAAA,IAAAA,2BAA2BgB,wBAAwBX;YACvEC,SAASQ,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMV;QAC9C,OAAO,IAAIK,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQI,SAAS;YAC1B,IAAMI,gBAAgBC,iBAAiBT,OAAOI;YAE9CP,SACE,AAAC,GAIA,OAHCG,OAAOI,QAAQM,cACfC,WAAWH,cAAcI,eACzBD,WAAWH,cAAcK,eAC1B;QAEL,OAAO;YACLhB,SAASF;QACX;IACF;IACAF,OAAMqB,UAAUX,UAAU;QAACH;QAAQX;QAAUE;QAAKJ;KAAe;IACjE4B,IAAAA,gDAAuBjB,QAAQ,UAAUK;IAEzC,qBACE,qBAACa,gFACK5B;QACJ6B,OAAAA;QACA1B,KAAKA;QACLL,WAAWgC,IAAAA,qCAET7B,aAAa8B,mBAASC,OAAO,gCAC7BnC,qCACAH,YACE,CAAA;YACEuC,GAAG;YACHC,QAAQJ,IAAAA,sDAEN;QAEJ,CAAA,CAAC,CAACpC,SAAS,EACbI;QAEFL,OAAO,4CAAKA;YAAOe,OAAAA;;QAElBhB;AAGP"}
+{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","classNames","Platform","IOS","top","bottom"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;+DAvCU;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;AA8B1B,IAAMA,cAAc;QACzBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACAC,wBAAAA,gBACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,MAAMC,IAAAA,0BAAY,EAACT,YAAYC,SAAS,6BAA6B;IAC3E,IAA0BS,qCAAAA,OAAMC,QAAQ,CAAqBC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,WAAM,IAAjBD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,UAAU,CAACC,gCAAe,EAA3CF;IAER,IAAMG,WAAW;YAIJH;QAHX,IAAIb,kBAAkBI,IAAIa,OAAO,EAAE;gBACbb;YAApB,IAAMc,eAAcd,6BAAAA,IAAIa,OAAO,CAACE,aAAa,cAAzBf,iDAAAA,2BAA2BgB,qBAAqB,GAAGX,KAAK;YAC5EC,SAASQ,cAAc,AAAC,GAAc,OAAZA,aAAY,QAAMV;QAC9C,OAAO,KAAIK,UAAAA,oBAAAA,8BAAAA,QAAQI,OAAO,EAAE;YAC1B,IAAMI,gBAAgBC,iBAAiBT,OAAOI,OAAO;YAErDP,SACE,AAAC,GAIA,OAHCG,OAAOI,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,GACtC;QAEL,OAAO;YACLhB,SAASF;QACX;IACF;IACAF,OAAMqB,SAAS,CAACX,UAAU;QAACH;QAAQX;QAAUE;QAAKJ;KAAe;IACjE4B,IAAAA,8CAAsB,EAACjB,QAAQ,UAAUK;IAEzC,qBACE,qBAACa,kCAAgB,8CACX5B;QACJ6B,OAAAA;QACA1B,KAAKA;QACLL,WAAWgC,IAAAA,gBAAU,qBAEnB7B,aAAa8B,kBAAQ,CAACC,GAAG,IAAI,gCAC7BnC,qCACAH,YACE,CAAA;YACEuC,GAAG;YACHC,QAAQJ,IAAAA,gBAAU,sCAEhB;QAEJ,CAAA,CAAC,CAACpC,SAAS,EACbI;QAEFL,OAAO,4CAAKA;YAAOe,OAAAA;;QAElBhB;AAGP"}

package/dist/cjs/components/FocusTrap/FocusTrap.js

@@ -37,8 +37,8 @@ var FocusTrap = function(_param) {
     // HANDLE TRAP MOUNT
     var keyboardInput = _react.useContext(_AppRootContext.AppRootContext).keyboardInput;
     var focusOnTrapMount = (0, _useTimeout.useTimeout)(function() {
-        var _ref_current;
-        if (keyboardInput && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(document.activeElement)) && (focusableNodes === null || focusableNodes === void 0 ? void 0 : focusableNodes.length)) {
+        var _ref_current, _focusableNodes;
+        if (keyboardInput && !((_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.contains(document.activeElement)) && ((_focusableNodes = focusableNodes) === null || _focusableNodes === void 0 ? void 0 : _focusableNodes.length)) {
             focusableNodes[0].focus();
         }
     }, timeout);
@@ -84,7 +84,8 @@ var FocusTrap = function(_param) {
         restoreFocus
     ]);
     var onDocumentKeydown = function(e) {
-        if ((0, _accessibility.pressedKey)(e) === _accessibility.Keys.TAB && (focusableNodes === null || focusableNodes === void 0 ? void 0 : focusableNodes.length)) {
+        var _focusableNodes;
+        if ((0, _accessibility.pressedKey)(e) === _accessibility.Keys.TAB && ((_focusableNodes = focusableNodes) === null || _focusableNodes === void 0 ? void 0 : _focusableNodes.length)) {
             var lastIdx = focusableNodes.length - 1;
             var targetIdx = focusableNodes.findIndex(function(node) {
                 return node === e.target;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","AppRootContext","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","useDOM","document","window","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","AppRootContext","focusOnTrapMount","useTimeout","current","contains","activeElement","length","focus","useIsomorphicLayoutEffect","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","useGlobalEventListener","capture","tabIndex"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <span\n    {...restProps}\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n        outline: styles['FocusVisible--mode-outline'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["FocusVisible","visible","mode","thin","restProps","span","aria-hidden","className","classNames","inside","outside","outline"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,eAAe;QAAGC,iBAAAA,SAASC,cAAAA,MAAMC,cAAAA,MAASC;QAAxBH;QAASC;QAAMC;;WAC5C,qBAACE,oDACKD;QACJE,eAAAA;QACAC,WAAWC,IAAAA,sCAETP,wCACAE,kCACA;YACEM,MAAM;YACNC,OAAO;YACPC,OAAO;QACT,CAAC,CAACT,KAAK;;AAEV"}
+{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <span\n    {...restProps}\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n        outline: styles['FocusVisible--mode-outline'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["FocusVisible","visible","mode","thin","restProps","span","aria-hidden","className","classNames","inside","outside","outline"],"mappings":";;;;+BAeaA;;;eAAAA;;;;;;;+DAfU;oBACI;AAcpB,IAAMA,eAAe;QAAGC,iBAAAA,SAASC,cAAAA,MAAMC,cAAAA,MAASC;QAAxBH;QAASC;QAAMC;;WAC5C,qBAACE,oDACKD;QACJE,eAAAA;QACAC,WAAWC,IAAAA,gBAAU,sBAEnBP,wCACAE,kCACA;YACEM,MAAM;YACNC,OAAO;YACPC,OAAO;QACT,CAAC,CAACT,KAAK;;AAEV"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;+DAXU;oBACI;wBAEF;AAQlB,IAAMA,SAAS;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE;QAASC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gCAA6BJ;QACjFD;AAGP"}
+{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["Footer","children","className","restProps","Footnote","Component","classNames"],"mappings":";;;;+BAWaA;;;eAAAA;;;;;;;+DAXU;oBACI;wBAEF;AAQlB,IAAMA,SAAS;QAAGC,kBAAAA,UAAUC,mBAAAA,WAAcC;QAAxBF;QAAUC;;IACjC,qBACE,qBAACE,kBAAQ;QAACC,WAAU;OAAaF;QAAWD,WAAWI,IAAAA,gBAAU,gBAAmBJ;QACjFD;AAGP"}