@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/cssm/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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","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":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","SizeType","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","styles","dateInputStyles","sizeYClassNames","none","COMPACT","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthAriaLabel","nextMonthAriaLabel","changeDayAriaLabel","changeMonthAriaLabel","changeYearAriaLabel","changeStartDayAriaLabel","changeStartMonthAriaLabel","changeStartYearAriaLabel","changeEndDayAriaLabel","changeEndMonthAriaLabel","changeEndYearAriaLabel","clearFieldAriaLabel","showCalendarAriaLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","REGULAR","after","hoverMode","aria-label","input","type","span","onKeyDown","onElementSelect","targetRef","offsetDistance","placement","onClose"],"mappings":"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"}

package/dist/cssm/components/DateRangeInput/DateRangeInput.module.css

@@ -1 +1,26 @@
-.vkuiDateRangeInput__input{cursor:text;flex-grow:1;font-size:16px;font-variant-numeric:tabular-nums;margin-left:10px;margin-right:14px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;white-space:nowrap;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiDateRangeInput--sizeY-compact .vkuiDateRangeInput__input{font-size:15px;margin-right:22px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiDateRangeInput--sizeY-none .vkuiDateRangeInput__input{font-size:15px;margin-right:22px}}
+.DateRangeInput__input {
+  flex-grow: 1;
+  margin-left: 10px;
+  margin-right: 14px;
+  font-size: 16px;
+  z-index: var(--vkui_internal--z_index_form_field_element);
+  cursor: text;
+  white-space: nowrap;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+  font-variant-numeric: tabular-nums;
+}
+
+.DateRangeInput--sizeY-compact .DateRangeInput__input {
+  font-size: 15px;
+  margin-right: 22px;
+}
+
+@media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
+  .DateRangeInput--sizeY-none .DateRangeInput__input {
+    font-size: 15px;
+    margin-right: 22px;
+  }
+}

package/dist/cssm/components/Div/Div.module.css

@@ -1 +1,4 @@
-.vkuiDiv{padding:12px 16px;padding:var(--vkui--size_base_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}
+.Div {
+  padding: var(--vkui--size_base_padding_vertical--regular)
+    var(--vkui--size_base_padding_horizontal--regular);
+}

package/dist/cssm/components/Epic/Epic.module.css

@@ -1 +1,4 @@
-.vkuiEpic{height:100%;width:100%}
+.Epic {
+  width: 100%;
+  height: 100%;
+}

package/dist/cssm/components/Epic/ScrollSaver.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-export interface ScrollSaverProps {
+/// <reference types="react" />
+import { HasChildren } from '../../types';
+export interface ScrollSaverProps extends HasChildren {
     initialScroll?: number;
     saveScroll: (this: void, scroll: number) => any;
-    children?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ScrollSaver

package/dist/cssm/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 { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n  children?: React.ReactNode;\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":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAChF,SAASC,aAAa,QAAQ,2BAA2B;AAQzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,SAAQ,EAAEC,cAAa,EAAEC,WAAU,EAAoB,GAAK;IACxF,MAAM,EAAEC,UAAS,EAAEC,SAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B,IAAM;QAC9B,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd,CAAC;QACD,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,oBAACV,MAAMW,QAAQ,QAAEP;AAC1B,EAAE"}
+{"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":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,SAAQ,EAAEC,cAAa,EAAEC,WAAU,EAAoB,GAAK;IACxF,MAAM,EAAEC,UAAS,EAAEC,SAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B,IAAM;QAC9B,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd,CAAC;QACD,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,oBAACV,MAAMW,QAAQ,QAAEP;AAC1B,EAAE"}

package/dist/cssm/components/File/File.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Button } from '../Button/Button';
-import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 /**
  * @see https://vkcom.github.io/VKUI/#/File
  */ export const File = ({ children ='Выберите файл' , align ='left' , size , mode , stretched , before , after , loading , className , style , getRef , getRootRef , appearance , ...restProps })=>{
@@ -18,10 +18,11 @@ import { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput'
         style: style,
         getRootRef: getRootRef,
         disabled: restProps.disabled
-    }, /*#__PURE__*/ React.createElement(VisuallyHiddenInput, {
+    }, /*#__PURE__*/ React.createElement(VisuallyHidden, {
         ...restProps,
+        Component: "input",
         type: "file",
-        getRef: getRef
+        getRootRef: getRef
     }), children);
 };
 

package/dist/cssm/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 { VisuallyHiddenInput } from '../VisuallyHiddenInput/VisuallyHiddenInput';\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      <VisuallyHiddenInput {...restProps} type=\"file\" getRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["React","Button","VisuallyHiddenInput","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,mBAAmB,QAAQ,6CAA6C;AAQjF;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,UAAW,gBAAe,EAC1BC,OAAQ,OAAM,EACdC,KAAI,EACJC,KAAI,EACJC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,WAAU,EACVC,WAAU,EACV,GAAGC,WACO,GAAK;IACf,qBACE,oBAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;qBAE5B,oBAACjB;QAAqB,GAAGe,SAAS;QAAEG,MAAK;QAAON,QAAQA;QACvDV;AAGP,EAAE"}
+{"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":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,UAAW,gBAAe,EAC1BC,OAAQ,OAAM,EACdC,KAAI,EACJC,KAAI,EACJC,UAAS,EACTC,OAAM,EACNC,MAAK,EACLC,QAAO,EACPC,UAAS,EACTC,MAAK,EACLC,OAAM,EACNC,WAAU,EACVC,WAAU,EACV,GAAGC,WACO,GAAK;IACf,qBACE,oBAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;qBAE5B,oBAACjB;QAAgB,GAAGe,SAAS;QAAEC,WAAU;QAAQE,MAAK;QAAOL,YAAYD;QACxEV;AAGP,EAAE"}

package/dist/cssm/components/FixedLayout/FixedLayout.js

@@ -12,7 +12,7 @@ import styles from './FixedLayout.module.css';
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children , style , vertical , getRootRef , getRef , filled , className , ...restProps })=>{
     const platform = usePlatform();
-    const ref = useExternRef(getRootRef, getRef); // TODO: v6 удалить getRef
+    const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef
     const [width, setWidth] = React.useState(undefined);
     const { window  } = useDOM();
     const { colRef  } = React.useContext(SplitColContext);

package/dist/cssm/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\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  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO: v6 удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n  const doResize = () => {\n    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]);\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":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,0BAA0B;IACxE,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,UAAU,CAACpB;IACpC,MAAMqB,WAAW,IAAM;QACrB,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX,CAAC;IACH;IACAxB,MAAMoC,SAAS,CAACR,UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA,IAAK;QACLjB,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,GAAG,IAAI,gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}
+{"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\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  ...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  const doResize = () => {\n    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]);\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":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAqB9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAQ,EACRC,MAAK,EACLC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,OAAM,EACNC,UAAS,EACT,GAAGC,WACc,GAAK;IACtB,MAAMC,WAAWf;IACjB,MAAMgB,MAAMlB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACM,OAAOC,SAAS,GAAGtB,MAAMuB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,OAAM,EAAE,GAAGpB;IACnB,MAAM,EAAEqB,OAAM,EAAE,GAAG1B,MAAM2B,UAAU,CAACpB;IACpC,MAAMqB,WAAW,IAAM;QACrB,IAAIF,QAAQG,SAAS;YACnB,MAAMC,gBAAgBC,iBAAiBL,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLb,SAASE;QACX,CAAC;IACH;IACAxB,MAAMoC,SAAS,CAACR,UAAU;QAACF;QAAQP;KAAS;IAC5ChB,uBAAuBsB,QAAQ,UAAUG;IAEzC,qBACE,oBAACpB;QACE,GAAGU,SAAS;QACbmB,OAAAA,IAAK;QACLjB,KAAKA;QACLH,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBU,aAAab,SAASgC,GAAG,IAAI,gCAC7BtB,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE0B,KAAK9B,MAAM,CAAC,4BAA4B;YACxC+B,QAAQvC,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAES;QAAM;OAExBV;AAGP,EAAE"}

package/dist/cssm/components/FixedLayout/FixedLayout.module.css

@@ -1 +1,58 @@
-.vkuiFixedLayout{box-sizing:border-box;left:auto;padding-left:0;padding-left:var(--vkui_internal--safe_area_inset_left);padding-right:0;padding-right:var(--vkui_internal--safe_area_inset_right);position:fixed;z-index:3;z-index:var(--vkui_internal--z_index_fixed_layout)}.vkuiFixedLayout--filled{background:#fff;background:var(--vkui--color_background_content)}.vkuiFixedLayout--vertical-top{top:0;width:100%}.vkuiFixedLayout--vertical-bottom{bottom:0;padding-bottom:0;padding-bottom:var(--vkui_internal--safe_area_inset_bottom);width:100%}.vkuiInternalEpic--hasTabbar .vkuiFixedLayout--vertical-bottom{padding-bottom:calc(48px + 0px);padding-bottom:calc(var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom))}.vkuiInternalPanelHeader~* .vkuiFixedLayout--vertical-top:not(.vkuiPanelHeader__fixed),.vkuiInternalPanelHeader~.vkuiFixedLayout--vertical-top{top:calc(56px + 0px);top:calc(var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top))}
+.FixedLayout {
+  position: fixed;
+  box-sizing: border-box;
+  /**
+   * ⚠️ WARNING ⚠️
+   * `left: auto` решает следующие задачи:
+   * 1. При фиксированной ширине компонента позиционирует компонент по центру.
+   * 2. При использовании `SplitLayout` позиционирует компонент с права от `<SplitCol fixed />`.
+   *
+   * Подробности можно почитать здесь https://github.com/VKCOM/VKUI/pull/2472
+   *
+   * Единственное, есть проблема при срабатывании insets в landscape ориентации экрана (https://github.com/VKCOM/VKUI/issues/2422).
+   */
+  left: auto;
+  z-index: var(--vkui_internal--z_index_fixed_layout);
+  padding-left: var(--vkui_internal--safe_area_inset_left);
+  padding-right: var(--vkui_internal--safe_area_inset_right);
+}
+
+.FixedLayout--filled {
+  background: var(--vkui--color_background_content);
+}
+
+.FixedLayout--vertical-top {
+  width: 100%;
+  top: 0;
+}
+
+.FixedLayout--vertical-bottom {
+  width: 100%;
+  bottom: 0;
+  padding-bottom: var(--vkui_internal--safe_area_inset_bottom);
+}
+
+/**
+ * CMP:
+ * Epic
+ */
+
+:global(.vkuiInternalEpic--hasTabbar) .FixedLayout--vertical-bottom {
+  padding-bottom: calc(
+    var(--vkui_internal--tabbar_height) + var(--vkui_internal--safe_area_inset_bottom)
+  );
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
+
+:global(.vkuiInternalPanelHeader) ~ .FixedLayout--vertical-top,
+:global(.vkuiInternalPanelHeader)
+  ~ *
+  .FixedLayout--vertical-top:not(:global(.vkuiInternalPanelHeader__fixed)) {
+  top: calc(
+    var(--vkui--size_panel_header_height--regular) + var(--vkui_internal--safe_area_inset_top)
+  );
+}

package/dist/cssm/components/FocusVisible/FocusVisible.d.ts

@@ -1,9 +1,11 @@
 /// <reference types="react" />
-export type FocusVisibleMode = 'inside' | 'outside';
+export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
 export interface FocusVisibleProps {
+    visible: boolean | undefined;
     mode: FocusVisibleMode;
+    thin?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
  */
-export declare const FocusVisible: ({ mode }: FocusVisibleProps) => JSX.Element;
+export declare const FocusVisible: ({ visible, mode, thin }: FocusVisibleProps) => JSX.Element;

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -3,11 +3,12 @@ import { classNames } from '@vkontakte/vkjs';
 import styles from './FocusVisible.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */ export const FocusVisible = ({ mode  })=>/*#__PURE__*/ React.createElement("span", {
+ */ export const FocusVisible = ({ visible , mode , thin  })=>/*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
-        className: classNames(styles['FocusVisible'], {
+        className: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], {
             inside: styles['FocusVisible--mode-inside'],
-            outside: styles['FocusVisible--mode-outside']
+            outside: styles['FocusVisible--mode-outside'],
+            outline: styles['FocusVisible--mode-outline']
         }[mode])
     });
 

package/dist/cssm/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';\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","mode","span","aria-hidden","className","inside","outside"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,KAAI,EAAqB,iBACtD,oBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWN,WACTC,MAAM,CAAC,eAAe,EACtB;YACEM,QAAQN,MAAM,CAAC,4BAA4B;YAC3CO,SAASP,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACE,KAAK;OAGX"}
+{"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 }: FocusVisibleProps) => (\n  <span\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":["React","classNames","styles","FocusVisible","visible","mode","thin","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,QAAO,EAAEC,KAAI,EAAEC,KAAI,EAAqB,iBACrE,oBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWR,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;YACEQ,QAAQR,MAAM,CAAC,4BAA4B;YAC3CS,SAAST,MAAM,CAAC,6BAA6B;YAC7CU,SAASV,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}

package/dist/cssm/components/FocusVisible/FocusVisible.module.css

@@ -1 +1,104 @@
-[class$="--focus-visible"]>.vkuiFocusVisible{border-radius:inherit;overflow:hidden;pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[class$="--focus-visible"]>.vkuiFocusVisible--mode-inside{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);border-style:solid;border-width:2px;bottom:2px;box-sizing:border-box;left:2px;right:2px;top:2px}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{bottom:-2px;box-shadow:0 0 0 2px #2688eb;box-shadow:0 0 0 2px var(--vkui--color_stroke_accent);left:-2px;right:-2px;top:-2px}@media (prefers-reduced-motion:no-preference){[class$="--focus-visible"]>.vkuiFocusVisible{animation:vkui-animation-focus-visible .15s ease-in-out forwards;animation-delay:.01ms;bottom:4px;left:4px;right:4px;top:4px;will-change:top,left,bottom,right}[class$="--focus-visible"]>.vkuiFocusVisible--mode-outside{animation-name:vkui-animation-focus-visible-outside;bottom:0;left:0;right:0;top:0}@keyframes vkui-animation-focus-visible{to{bottom:0;left:0;right:0;top:0;will-change:auto}}@keyframes vkui-animation-focus-visible-outside{to{bottom:-2px;left:-2px;right:-2px;top:-2px;will-change:auto}}}
+.FocusVisible {
+  visibility: hidden;
+  position: absolute;
+  border-radius: inherit;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: none;
+  overflow: hidden;
+  top: var(--vkui_internal--focus_visible_distance, 0);
+  left: var(--vkui_internal--focus_visible_distance, 0);
+  right: var(--vkui_internal--focus_visible_distance, 0);
+  bottom: var(--vkui_internal--focus_visible_distance, 0);
+}
+
+.FocusVisible--visible {
+  visibility: visible;
+}
+
+/* Необходимо перебить селектор `.Tappable > *` */
+
+.FocusVisible.FocusVisible {
+  position: absolute;
+}
+
+.FocusVisible {
+  --vkui_internal--focus_visible_thin: 2px;
+}
+
+.FocusVisible--thin {
+  --vkui_internal--focus_visible_thin: var(--vkui_internal--thin_border);
+}
+
+.FocusVisible--mode-inside,
+.FocusVisible--mode-outline {
+  border-color: var(--vkui--color_stroke_accent);
+  border-width: var(--vkui_internal--focus_visible_thin);
+  border-style: solid;
+  box-sizing: border-box;
+}
+
+.FocusVisible--mode-outline {
+  --vkui_internal--focus_visible_distance: 0;
+}
+
+.FocusVisible--mode-inside {
+  --vkui_internal--focus_visible_distance: 2px;
+}
+
+.FocusVisible--mode-outside {
+  box-shadow: 0 0 0 var(--vkui_internal--focus_visible_thin) var(--vkui--color_stroke_accent);
+
+  --vkui_internal--focus_visible_distance: -2px;
+}
+
+/**
+ * [a11y]
+ * add animation for browsers that support prefers-reduced-motion
+ * so that users with vestibular motion disorders have no problem
+ * navigating accessible vkui apps via keyboard
+ */
+
+@media (prefers-reduced-motion: no-preference) {
+  .FocusVisible--visible.FocusVisible--mode-inside {
+    animation: vkui-animation-focus-visible 0.15s ease-in-out forwards;
+    animation-delay: 0.01ms;
+    will-change: top, left, bottom, right;
+
+    --vkui_internal--focus_visible_distance: 4px;
+  }
+
+  .FocusVisible--visible.FocusVisible--mode-outside {
+    animation-name: vkui-animation-focus-visible-outside;
+
+    --vkui_internal--focus_visible_distance: 0;
+  }
+
+  @keyframes vkui-animation-focus-visible {
+    0% {
+    }
+
+    100% {
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      will-change: auto;
+    }
+  }
+
+  @keyframes vkui-animation-focus-visible-outside {
+    0% {
+    }
+
+    100% {
+      top: -2px;
+      left: -2px;
+      bottom: -2px;
+      right: -2px;
+      will-change: auto;
+    }
+  }
+}

package/dist/cssm/components/Footer/Footer.module.css

@@ -1 +1,9 @@
-.vkuiFooter{color:#818c99;color:var(--vkui--color_text_secondary);display:block;margin:24px 16px;margin:24px var(--vkui--size_base_padding_horizontal--regular);padding-bottom:0;padding-top:0;text-align:center}
+.Footer {
+  display: block;
+  /* TODO [>=6]: переделать на padding */
+  margin: 24px var(--vkui--size_base_padding_horizontal--regular);
+  padding-top: 0;
+  padding-bottom: 0;
+  text-align: center;
+  color: var(--vkui--color_text_secondary);
+}

package/dist/cssm/components/FormField/FormField.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { SizeType } from '../../lib/adaptivity';
+import { FocusVisible } from '../FocusVisible/FocusVisible';
 import styles from './FormField.module.css';
 const sizeYClassNames = {
     none: styles['FormField--sizeY-none'],
@@ -10,6 +13,8 @@ const sizeYClassNames = {
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */ export const FormField = ({ Component ='span' , status ='default' , children , getRootRef , before , after , disabled , mode ='default' , className , ...restProps })=>{
+    const elRef = useExternRef(getRootRef);
+    const focusWithin = useFocusWithin(elRef);
     const { sizeY ='none'  } = useAdaptivity();
     const [hover, setHover] = React.useState(false);
     const handleMouseEnter = (e)=>{
@@ -22,7 +27,7 @@ const sizeYClassNames = {
     };
     return /*#__PURE__*/ React.createElement(Component, {
         ...restProps,
-        ref: getRootRef,
+        ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && ({
@@ -36,6 +41,10 @@ const sizeYClassNames = {
     }, after), /*#__PURE__*/ React.createElement("span", {
         "aria-hidden": true,
         className: styles['FormField__border']
+    }), /*#__PURE__*/ React.createElement(FocusVisible, {
+        thin: true,
+        visible: focusWithin,
+        mode: "outline"
     }));
 };
 

package/dist/cssm/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe,GAAK;IACvB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGjB;IAC3B,MAAM,CAACkB,OAAOC,SAAS,GAAGrB,MAAMsB,QAAQ,CAAC,KAAK;IAE9C,MAAMC,mBAAmB,CAACC,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,IAAI;IACf;IAEA,MAAMK,mBAAmB,CAACF,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACZ;QACE,GAAGS,SAAS;QACbS,KAAKf;QACLgB,cAAcL;QACdM,cAAcH;QACdT,WAAWhB,WACTG,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEoB,OAAO1B,MAAM,CAAC,0BAA0B;YACxC2B,OAAO3B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXS,UAAUhB,SAAS6B,OAAO,IAAI3B,eAAe,CAACc,MAAM,EACpDJ,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYK,SAAShB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACoB;QAAKhB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWhB,WAAWG,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACmB;QAAKC,eAAAA,IAAW;QAACjB,WAAWb,MAAM,CAAC,oBAAoB;;AAG9D,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe,GAAK;IACvB,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,OAAQ,OAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC,KAAK;IAE9C,MAAMC,mBAAmB,CAACC,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,IAAI;IACf;IAEA,MAAMK,mBAAmB,CAACF,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,OAAO,IAAI7B,eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA,IAAW;QAACnB,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA,IAAI;QAACC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}