@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Вставляет основной контент.\n   * @deprecated since v6.0.0\n   */\n  option?: any;\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === 'string' ? children : undefined;\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n\n  if (!!option && process.env.NODE_ENV === 'development') {\n    // TODO v6.0.0. Удалить св-во `option`\n    warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n  }\n\n  return (\n    <Paragraph\n      {...restProps}\n      Component=\"div\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        hovered && !disabled && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>{description}</Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["CustomSelectOption","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","restProps","title","undefined","useAdaptivity","sizeY","React","useMemo","process","env","NODE_ENV","Paragraph","Component","role","aria-disabled","aria-selected","classNames","COMPACT","hasReactNode","div","Footnote","Icon16Done"],"mappings":";;;;+BAiEaA;;;eAAAA;;;;;;;;2DAjEU;qBACI;oBACc;6BACX;0BACL;wBACA;wBAEA;yBACC;AAG1B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA+CnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,qBAAqB,iBAaH;QAZ7BO,kBAAAA,oCACAC,WAAAA,0CAAY,sBACZC,iBAAAA,SACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,UACAC,AAAOC,mBAAPD,OACAE,mBAAAA,WACGC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,QAAQ,OAAOb,aAAa,WAAWA,WAAWc,SAAS;IACjE,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMP,QAAQQ,OAAMC,OAAO,CACzB;eACEjB,YAAY,IACR;YACE,yDAAyDA;WACtDS,aAELA,SAAS;OACf;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUa,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,sCAAsC;QACtCvB,KAAK;IACP,CAAC;IAED,qBACE,qBAACwB,oBAAS,uCACJV;QACJW,WAAU;QACVC,MAAK;QACLX,OAAOA;QACPY,iBAAejB;QACfkB,iBAAevB;QACfQ,WAAWgB,IAAAA,gBAAU,4BAEnBX,UAAUpB,oBAAQ,CAACgC,OAAO,IAAIlC,eAAe,CAACsB,MAAM,EACpDd,WAAW,CAACM,6CACZA,gDACAP,YAAY,0CACZU;QAEFF,OAAOA;QAENoB,IAAAA,kBAAY,EAACzB,yBAAW,qBAAC0B;QAAInB,SAAS;OAAyCP,uBAChF,qBAAC0B;QAAInB,SAAS;qBACZ,qBAACmB;QAAInB,SAAS;OAA2CX,WACxD6B,IAAAA,kBAAY,EAACtB,8BACZ,qBAACwB,kBAAQ;QAACpB,SAAS;OAA8CJ,6BAGrE,qBAACuB;QAAInB,SAAS;OACXkB,IAAAA,kBAAY,EAACxB,wBAAU,qBAACyB,aAAKzB,QAC7BF,0BAAY,qBAAC6B,iBAAU;QAACrB,SAAS;;AAI1C"}
+{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Вставляет основной контент.\n   * @deprecated since v6.0.0\n   */\n  option?: any;\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === 'string' ? children : undefined;\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n\n  if (!!option && process.env.NODE_ENV === 'development') {\n    // TODO [>=6]: Удалить св-во `option`\n    warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n  }\n\n  return (\n    <Paragraph\n      {...restProps}\n      Component=\"div\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        hovered && !disabled && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>{description}</Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["CustomSelectOption","sizeYClassNames","none","SizeType","REGULAR","warn","warnOnce","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","restProps","title","undefined","useAdaptivity","sizeY","React","useMemo","process","env","NODE_ENV","Paragraph","Component","role","aria-disabled","aria-selected","classNames","COMPACT","hasReactNode","div","Footnote","Icon16Done"],"mappings":";;;;+BAiEaA;;;eAAAA;;;;;;;;2DAjEU;qBACI;oBACc;6BACX;0BACL;wBACA;wBAEA;yBACC;AAG1B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA+CnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,qBAAqB,iBAaH;QAZ7BO,kBAAAA,oCACAC,WAAAA,0CAAY,sBACZC,iBAAAA,SACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,OACAC,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,UACAC,AAAOC,mBAAPD,OACAE,mBAAAA,WACGC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,QAAQ,OAAOb,aAAa,WAAWA,WAAWc,SAAS;IACjE,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMP,QAAQQ,OAAMC,OAAO,CACzB;eACEjB,YAAY,IACR;YACE,yDAAyDA;WACtDS,aAELA,SAAS;OACf;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUa,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCvB,KAAK;IACP,CAAC;IAED,qBACE,qBAACwB,oBAAS,uCACJV;QACJW,WAAU;QACVC,MAAK;QACLX,OAAOA;QACPY,iBAAejB;QACfkB,iBAAevB;QACfQ,WAAWgB,IAAAA,gBAAU,4BAEnBX,UAAUpB,oBAAQ,CAACgC,OAAO,IAAIlC,eAAe,CAACsB,MAAM,EACpDd,WAAW,CAACM,6CACZA,gDACAP,YAAY,0CACZU;QAEFF,OAAOA;QAENoB,IAAAA,kBAAY,EAACzB,yBAAW,qBAAC0B;QAAInB,SAAS;OAAyCP,uBAChF,qBAAC0B;QAAInB,SAAS;qBACZ,qBAACmB;QAAInB,SAAS;OAA2CX,WACxD6B,IAAAA,kBAAY,EAACtB,8BACZ,qBAACwB,kBAAQ;QAACpB,SAAS;OAA8CJ,6BAGrE,qBAACuB;QAAInB,SAAS;OACXkB,IAAAA,kBAAY,EAACxB,wBAAU,qBAACyB,aAAKzB,QAC7BF,0BAAY,qBAAC6B,iBAAU;QAACrB,SAAS;;AAI1C"}

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

@@ -133,7 +133,7 @@ var DateRangeInput = function(_param) {
         }
         var formattedStartValue = "".concat(internalValue[0], ".").concat(internalValue[1], ".").concat(internalValue[2]);
         var formattedEndValue = "".concat(internalValue[3], ".").concat(internalValue[4], ".").concat(internalValue[5]);
-        var mask = "dd.MM.yyyy";
+        var mask = "DD.MM.YYYY";
         if (!(0, _date.isMatch)(formattedStartValue, mask)) {
             isStartValid = false;
         }

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/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/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 { 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":["ScrollSaver","children","initialScroll","saveScroll","React","useContext","ScrollContext","getScroll","scrollTo","useIsomorphicLayoutEffect","y","Fragment"],"mappings":";;;;+BAaaA;;;eAAAA;;;;2DAbU;yCACmB;6BACZ;AAWvB,IAAMA,cAAc,gBAA+D;QAA5DC,iBAAAA,UAAUC,sBAAAA,eAAeC,mBAAAA;IACrD,IAAgCC,oBAAAA,OAAMC,UAAU,CAACC,4BAAa,GAAtDC,YAAwBH,kBAAxBG,WAAWC,WAAaJ,kBAAbI;IACnBC,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAI,OAAOP,kBAAkB,UAAU;YACrCM,SAAS,GAAGN;QACd,CAAC;QACD,OAAO;mBAAMC,WAAWI,YAAYG,CAAC;;IACvC,GAAG,EAAE;IACL,qBAAO,qBAACN,OAAMO,QAAQ,QAAEV;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;;;;2DAbU;yCACmB;6BAEZ;AAUvB,IAAMA,cAAc,gBAA+D;QAA5DC,iBAAAA,UAAUC,sBAAAA,eAAeC,mBAAAA;IACrD,IAAgCC,oBAAAA,OAAMC,UAAU,CAACC,4BAAa,GAAtDC,YAAwBH,kBAAxBG,WAAWC,WAAaJ,kBAAbI;IACnBC,IAAAA,oDAAyB,EAAC,WAAM;QAC9B,IAAI,OAAOP,kBAAkB,UAAU;YACrCM,SAAS,GAAGN;QACd,CAAC;QACD,OAAO;mBAAMC,WAAWI,YAAYG,CAAC;;IACvC,GAAG,EAAE;IACL,qBAAO,qBAACN,OAAMO,QAAQ,QAAEV;AAC1B"}

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

@@ -14,7 +14,7 @@ var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").def
 var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _button = require("../Button/Button");
-var _visuallyHiddenInput = require("../VisuallyHiddenInput/VisuallyHiddenInput");
+var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var File = function(_param) {
     var _param_children = _param.children, children = _param_children === void 0 ? "Выберите файл" : _param_children, _param_align = _param.align, align = _param_align === void 0 ? "left" : _param_align, size = _param.size, mode = _param.mode, stretched = _param.stretched, before = _param.before, after = _param.after, loading = _param.loading, className = _param.className, style = _param.style, getRef = _param.getRef, getRootRef = _param.getRootRef, appearance = _param.appearance, restProps = _objectWithoutProperties(_param, [
         "children",
@@ -45,9 +45,10 @@ var File = function(_param) {
         style: style,
         getRootRef: getRootRef,
         disabled: restProps.disabled
-    }, /*#__PURE__*/ _react.createElement(_visuallyHiddenInput.VisuallyHiddenInput, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, _objectSpreadProps(_objectSpread({}, restProps), {
+        Component: "input",
         type: "file",
-        getRef: getRef
+        getRootRef: getRef
     })), children);
 };
 

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 { 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":["File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Button","Component","disabled","VisuallyHiddenInput","type"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;2DAdU;sBAEiB;mCACJ;AAW7B,IAAMA,OAAO,iBAeH;iCAdfC,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,wCAAmB,uCAAKJ;QAAWK,MAAK;QAAOR,QAAQA;SACvDV;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;;;;;;;2DAdU;sBAEiB;8BACT;AAWxB,IAAMA,OAAO,iBAeH;iCAdfC,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,uCAAKJ;QAAWE,WAAU;QAAQG,MAAK;QAAOP,YAAYD;SACxEV;AAGP"}

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

@@ -33,7 +33,7 @@ var FixedLayout = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var ref = (0, _useExternRef.useExternRef)(getRootRef, getRef); // TODO: v6 удалить getRef
+    var ref = (0, _useExternRef.useExternRef)(getRootRef, getRef); // TODO [>=6]: удалить getRef
     var _React_useState = _slicedToArray(_react.useState(undefined), 2), width = _React_useState[0], setWidth = _React_useState[1];
     var window = (0, _dom.useDOM)().window;
     var colRef = _react.useContext(_splitColContext.SplitColContext).colRef;

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\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":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","classNames","Platform","IOS","top","bottom"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;2DAlCU;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;AAyB1B,IAAMA,cAAc,iBASH;QARtBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,MAAMC,IAAAA,0BAAY,EAACR,YAAYC,SAAS,0BAA0B;IACxE,IAA0BQ,iCAAAA,OAAMC,QAAQ,CAAqBC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,WAAM,IAAjBD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,UAAU,CAACC,gCAAe,EAA3CF;IACR,IAAMG,WAAW,WAAM;QACrB,IAAIH,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQI,OAAO,EAAE;YACnB,IAAMC,gBAAgBC,iBAAiBN,OAAOI,OAAO;YAErDP,SACE,AAAC,GAIA,OAHCG,OAAOI,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,GACtC;QAEL,OAAO;YACLb,SAASF;QACX,CAAC;IACH;IACAF,OAAMkB,SAAS,CAACR,UAAU;QAACH;QAAQX;KAAS;IAC5CuB,IAAAA,8CAAsB,EAACd,QAAQ,UAAUK;IAEzC,qBACE,qBAACU,kCAAgB,uCACXzB;QACJ0B,OAAAA,IAAK;QACLvB,KAAKA;QACLJ,WAAW4B,IAAAA,gBAAU,qBAEnB1B,aAAa2B,kBAAQ,CAACC,GAAG,IAAI,gCAC7B/B,qCACAH,YACE,CAAA;YACEmC,GAAG;YACHC,QAAQJ,IAAAA,gBAAU,sCAEhB;QAEJ,CAAA,CAAC,CAAChC,SAAS,EACbI;QAEFL,OAAO,qCAAKA;YAAOc,OAAAA;;QAElBf;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\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":["FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","restProps","platform","usePlatform","ref","useExternRef","React","useState","undefined","width","setWidth","window","useDOM","colRef","useContext","SplitColContext","doResize","current","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","useGlobalEventListener","TooltipContainer","fixed","classNames","Platform","IOS","top","bottom"],"mappings":";;;;+BAkCaA;;;eAAAA;;;;;;;;2DAlCU;oBACI;4BACE;sCACU;2BACX;mBACL;wBACE;+BAEO;gCACC;AAyB1B,IAAMA,cAAc,iBASH;QARtBC,kBAAAA,UACAC,eAAAA,OACAC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,gBAAAA,QACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IAAMC,MAAMC,IAAAA,0BAAY,EAACR,YAAYC,SAAS,6BAA6B;IAC3E,IAA0BQ,iCAAAA,OAAMC,QAAQ,CAAqBC,gBAAtDC,QAAmBH,oBAAZI,WAAYJ;IAC1B,IAAM,AAAEK,SAAWC,IAAAA,WAAM,IAAjBD;IACR,IAAM,AAAEE,SAAWP,OAAMQ,UAAU,CAACC,gCAAe,EAA3CF;IACR,IAAMG,WAAW,WAAM;QACrB,IAAIH,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQI,OAAO,EAAE;YACnB,IAAMC,gBAAgBC,iBAAiBN,OAAOI,OAAO;YAErDP,SACE,AAAC,GAIA,OAHCG,OAAOI,OAAO,CAACG,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,GACtC;QAEL,OAAO;YACLb,SAASF;QACX,CAAC;IACH;IACAF,OAAMkB,SAAS,CAACR,UAAU;QAACH;QAAQX;KAAS;IAC5CuB,IAAAA,8CAAsB,EAACd,QAAQ,UAAUK;IAEzC,qBACE,qBAACU,kCAAgB,uCACXzB;QACJ0B,OAAAA,IAAK;QACLvB,KAAKA;QACLJ,WAAW4B,IAAAA,gBAAU,qBAEnB1B,aAAa2B,kBAAQ,CAACC,GAAG,IAAI,gCAC7B/B,qCACAH,YACE,CAAA;YACEmC,GAAG;YACHC,QAAQJ,IAAAA,gBAAU,sCAEhB;QAEJ,CAAA,CAAC,CAAChC,SAAS,EACbI;QAEFL,OAAO,qCAAKA;YAAOc,OAAAA;;QAElBf;AAGP"}

package/dist/cjs/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/cjs/components/FocusVisible/FocusVisible.js

@@ -12,12 +12,13 @@ var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcar
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var FocusVisible = function(param) {
-    var mode = param.mode;
+    var visible = param.visible, mode = param.mode, thin = param.thin;
     return /*#__PURE__*/ _react.createElement("span", {
         "aria-hidden": true,
-        className: (0, _vkjs.classNames)("vkuiFocusVisible", {
+        className: (0, _vkjs.classNames)("vkuiFocusVisible", visible && "vkuiFocusVisible--visible", thin && "vkuiFocusVisible--thin", {
             inside: "vkuiFocusVisible--mode-inside",
-            outside: "vkuiFocusVisible--mode-outside"
+            outside: "vkuiFocusVisible--mode-outside",
+            outline: "vkuiFocusVisible--mode-outline"
         }[mode])
     });
 };

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';\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":["FocusVisible","mode","span","aria-hidden","className","classNames","inside","outside"],"mappings":";;;;+BAaaA;;;eAAAA;;;;2DAbU;oBACI;AAYpB,IAAMA,eAAe;QAAGC,aAAAA;yBAC7B,qBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWC,IAAAA,gBAAU,sBAEnB;YACEC,MAAM;YACNC,OAAO;QACT,CAAC,CAACN,KAAK"}
+{"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":["FocusVisible","visible","mode","thin","span","aria-hidden","className","classNames","inside","outside","outline"],"mappings":";;;;+BAeaA;;;eAAAA;;;;2DAfU;oBACI;AAcpB,IAAMA,eAAe;QAAGC,gBAAAA,SAASC,aAAAA,MAAMC,aAAAA;yBAC5C,qBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWC,IAAAA,gBAAU,sBAEnBN,wCACAE,kCACA;YACEK,MAAM;YACNC,OAAO;YACPC,OAAO;QACT,CAAC,CAACR,KAAK"}

package/dist/cjs/components/FormField/FormField.js

@@ -17,7 +17,10 @@ var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
+var _useExternRef = require("../../hooks/useExternRef");
+var _useFocusWithin = require("../../hooks/useFocusWithin");
 var _adaptivity = require("../../lib/adaptivity");
+var _focusVisible = require("../FocusVisible/FocusVisible");
 var sizeYClassNames = _defineProperty({
     none: "vkuiFormField--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiFormField--sizeY-compact");
@@ -33,6 +36,8 @@ var FormField = function(_param) {
         "mode",
         "className"
     ]);
+    var elRef = (0, _useExternRef.useExternRef)(getRootRef);
+    var focusWithin = (0, _useFocusWithin.useFocusWithin)(elRef);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
     var _React_useState = _slicedToArray(_react.useState(false), 2), hover = _React_useState[0], setHover = _React_useState[1];
     var handleMouseEnter = function(e) {
@@ -44,7 +49,7 @@ var FormField = function(_param) {
         setHover(false);
     };
     return /*#__PURE__*/ _react.createElement(Component, _objectSpreadProps(_objectSpread({}, restProps), {
-        ref: getRootRef,
+        ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         className: (0, _vkjs.classNames)("vkuiFormField", mode === "default" && "vkuiFormField--mode-default", status !== "default" && ({
@@ -58,6 +63,10 @@ var FormField = function(_param) {
     }, after), /*#__PURE__*/ _react.createElement("span", {
         "aria-hidden": true,
         className: "vkuiFormField__border"
+    }), /*#__PURE__*/ _react.createElement(_focusVisible.FocusVisible, {
+        thin: true,
+        visible: focusWithin,
+        mode: "outline"
     }));
 };
 

package/dist/cjs/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":["FormField","sizeYClassNames","none","SizeType","COMPACT","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","error","valid","REGULAR","span","aria-hidden"],"mappings":";;;;+BA8CaA;;;eAAAA;;;;;;;;;2DA9CU;oBACI;6BACG;0BACL;AAIzB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAqCZ,IAAMJ,YAAY,iBAWA;kCAVvBK,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0BC,iCAAAA,OAAMC,QAAQ,CAAC,KAAK,OAAvCC,QAAmBF,oBAAZG,WAAYH;IAE1B,IAAMI,mBAAmB,SAACC,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,IAAI;IACf;IAEA,IAAMI,mBAAmB,SAACF,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,KAAK;IAChB;IAEA,qBACE,qBAACf,gDACKS;QACJW,KAAKjB;QACLkB,cAAcL;QACdM,cAAcH;QACdX,WAAWe,IAAAA,gBAAU,mBAEnBhB,SAAS,4CACTN,WAAW,aACT,CAAA;YACEuB,KAAK;YACLC,KAAK;QACP,CAAA,CAAC,CAACxB,OAAO,EACXU,UAAUb,oBAAQ,CAAC4B,OAAO,IAAI9B,eAAe,CAACe,MAAM,EACpDL,uCACA,CAACA,YAAYQ,iCACbN;QAGDJ,wBAAU,qBAACuB;QAAKnB,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,qBAACsB;QAAKnB,WAAWe,IAAAA,gBAAU,0BAA6B;OACrDlB,sBAGL,qBAACsB;QAAKC,eAAAA,IAAW;QAACpB,SAAS;;AAGjC"}
+{"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":["FormField","sizeYClassNames","none","SizeType","COMPACT","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","useExternRef","focusWithin","useFocusWithin","useAdaptivity","sizeY","React","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","classNames","error","valid","REGULAR","span","aria-hidden","FocusVisible","thin","visible"],"mappings":";;;;+BAiDaA;;;eAAAA;;;;;;;;;2DAjDU;oBACI;6BACG;4BACD;8BACE;0BACN;4BAEI;AAG7B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AAqCZ,IAAMJ,YAAY,iBAWA;kCAVvBK,WAAAA,0CAAY,kDACZC,QAAAA,oCAAS,2BACTC,kBAAAA,UACAC,oBAAAA,YACAC,gBAAAA,QACAC,eAAAA,OACAC,kBAAAA,+BACAC,MAAAA,gCAAO,yBACPC,mBAAAA,WACGC;QATHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,QAAQC,IAAAA,0BAAY,EAACR;IAC3B,IAAMS,cAAcC,IAAAA,8BAAc,EAACH;IACnC,IAA2BI,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA0BC,iCAAAA,OAAMC,QAAQ,CAAC,KAAK,OAAvCC,QAAmBF,oBAAZG,WAAYH;IAE1B,IAAMI,mBAAmB,SAACC,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,IAAI;IACf;IAEA,IAAMI,mBAAmB,SAACF,GAAkB;QAC1CA,EAAEC,eAAe;QACjBH,SAAS,KAAK;IAChB;IAEA,qBACE,qBAACnB,gDACKS;QACJe,KAAKd;QACLe,cAAcL;QACdM,cAAcH;QACdf,WAAWmB,IAAAA,gBAAU,mBAEnBpB,SAAS,4CACTN,WAAW,aACT,CAAA;YACE2B,KAAK;YACLC,KAAK;QACP,CAAA,CAAC,CAAC5B,OAAO,EACXc,UAAUjB,oBAAQ,CAACgC,OAAO,IAAIlC,eAAe,CAACmB,MAAM,EACpDT,uCACA,CAACA,YAAYY,iCACbV;QAGDJ,wBAAU,qBAAC2B;QAAKvB,SAAS;OAAgCJ,SACzDF,UACAG,uBACC,qBAAC0B;QAAKvB,WAAWmB,IAAAA,gBAAU,0BAA6B;OACrDtB,sBAGL,qBAAC0B;QAAKC,eAAAA,IAAW;QAACxB,SAAS;sBAC3B,qBAACyB,0BAAY;QAACC,MAAAA,IAAI;QAACC,SAASvB;QAAaL,MAAK;;AAGpD"}

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

@@ -7,8 +7,10 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
+     *
+     * Режим `indent` предназначен для визуального отступа
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem

package/dist/cjs/components/FormItem/FormItem.js

@@ -57,7 +57,8 @@ var FormItem = function(_param) {
                 onRemove(e, rootEl.current);
             }
         },
-        removePlaceholder: removePlaceholder
+        removePlaceholder: removePlaceholder,
+        indent: removable === "indent"
     }, /*#__PURE__*/ _react.createElement("div", {
         className: (0, _vkjs.classNames)("vkuiFormItem__removable", "vkuiInternalFormItem__removable")
     }, wrappedChildren)) : wrappedChildren);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","ref","error","valid","REGULAR","Removable","align","e","current","div"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;;2DApCU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;AAqBG,IAAMH,WAAW,iBAYH;QAXnBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACJ;IAC5B,IAA2BK,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAAClB,sBAAQ,qBAACmB,gBAAO;QAACV,SAAS;OAA4BT,MACnED,UACAmB,IAAAA,kBAAY,EAACjB,yBAAW,qBAACmB,kBAAQ;QAACX,SAAS;OAA+BR;IAI/E,qBACE,qBAACE,gDACKO;QACJW,KAAKV;QACLF,WAAWb,IAAAA,gBAAU,kBAEnB,wBACAM,WAAW,aACT,CAAA;YACEoB,OAAO1B,IAAAA,gBAAU,gCAEf;YAEF2B,OAAO3B,IAAAA,gBAAU,gCAEf;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXY,UAAUjB,oBAAQ,CAAC2B,OAAO,IAAI9B,eAAe,CAACoB,MAAM,EACpDI,IAAAA,kBAAY,EAAClB,QACXJ,IAAAA,gBAAU,2BAA8B,kCAC1CQ,aAAaR,IAAAA,gBAAU,6BAAgC,oCACvDa;QAGDL,0BACC,qBAACqB,oBAAS;QACRC,OAAM;QACNrB,UAAU,SAACsB,GAAM;YACf,IAAIhB,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQiB,OAAO,EAAE;gBACnBvB,SAASsB,GAAGhB,OAAOiB,OAAO;YAC5B,CAAC;QACH;QACArB,mBAAmBA;qBAEnB,qBAACsB;QACCpB,WAAWb,IAAAA,gBAAU,6BAAgC;OAEpDmB,oBAILA,eACD;AAGP"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","ref","error","valid","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;2DAtCU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;AAuBG,IAAMH,WAAW,iBAYH;QAXnBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACGC;QAVHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACJ;IAC5B,IAA2BK,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAAClB,sBAAQ,qBAACmB,gBAAO;QAACV,SAAS;OAA4BT,MACnED,UACAmB,IAAAA,kBAAY,EAACjB,yBAAW,qBAACmB,kBAAQ;QAACX,SAAS;OAA+BR;IAI/E,qBACE,qBAACE,gDACKO;QACJW,KAAKV;QACLF,WAAWb,IAAAA,gBAAU,kBAEnB,wBACAM,WAAW,aACT,CAAA;YACEoB,OAAO1B,IAAAA,gBAAU,gCAEf;YAEF2B,OAAO3B,IAAAA,gBAAU,gCAEf;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXY,UAAUjB,oBAAQ,CAAC2B,OAAO,IAAI9B,eAAe,CAACoB,MAAM,EACpDI,IAAAA,kBAAY,EAAClB,QACXJ,IAAAA,gBAAU,2BAA8B,kCAC1CQ,aAAaR,IAAAA,gBAAU,6BAAgC,oCACvDa;QAGDL,0BACC,qBAACqB,oBAAS;QACRC,OAAM;QACNrB,UAAU,SAACsB,GAAM;YACf,IAAIhB,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQiB,OAAO,EAAE;gBACnBvB,SAASsB,GAAGhB,OAAOiB,OAAO;YAC5B,CAAC;QACH;QACArB,mBAAmBA;QACnBsB,QAAQzB,cAAc;qBAEtB,qBAAC0B;QACCrB,WAAWb,IAAAA,gBAAU,6BAAgC;OAEpDmB,oBAILA,eACD;AAGP"}

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

@@ -5,8 +5,10 @@ export interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElemen
     mode?: 'vertical' | 'horizontal';
     /**
      * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.
+     *
+     * Режим `indent` предназначен для визуального отступа.
      */
-    removable?: boolean;
+    removable?: boolean | 'indent';
     /**
      * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.
      */

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js

@@ -47,7 +47,8 @@ var FormLayoutGroup = function(_param) {
             if (rootEl === null || rootEl === void 0 ? void 0 : rootEl.current) {
                 onRemove(e, rootEl.current);
             }
-        }
+        },
+        indent: removable === "indent"
     }, children) : /*#__PURE__*/ _react.createElement(_react.Fragment, null, children, /*#__PURE__*/ _react.createElement("span", {
         className: "vkuiFormLayoutGroup__offset",
         "aria-hidden": true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["FormLayoutGroup","sizeYClassNames","none","classNames","SizeType","COMPACT","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","div","ref","REGULAR","Removable","align","e","current","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;2DAvCU;oBACU;6BACH;4BACD;0BACJ;yBAEiB;AAG1C,IAAMC,kBAKJ;IAJAC,MAAMC,IAAAA,gBAAU,qCAEd;GAEDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,wCAE5B;AAuBG,IAAMH,kBAAkB,iBAUH;QAT1BM,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWC,UAAI,oBACfC,oBAAAA,YACAC,mBAAAA,WACGC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,cAAcV,aAAaD,SAAS;IAC1C,IAAMY,cAAcV,aAAaF,SAAS;IAC1C,IAAMa,SAASC,IAAAA,0BAAY,EAACR;IAE5B,qBACE,qBAACS;QACCC,KAAKH;QACLN,WAAWX,IAAAA,gBAAU,EACnBc,UAAUb,oBAAQ,CAACoB,OAAO,IAAIvB,eAAe,CAACgB,MAAM,EACpDV,SAAS,gBACPJ,IAAAA,gBAAU,0CAER,iDAEJe,eACEf,IAAAA,gBAAU,oCAER,2CAEJgB,eACEhB,IAAAA,gBAAU,oCAER,2CAEJW;OAEEC,YAEHG,4BACC,qBAACO,oBAAS;QACRX,SAAS;QACTY,OAAM;QACNhB,mBAAmBA;QACnBC,UAAU,SAACgB,GAAM;YACf,IAAIP,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQQ,OAAO,EAAE;gBACnBjB,SAASgB,GAAGP,OAAOQ,OAAO;YAC5B,CAAC;QACH;OAECtB,0BAGH,qBAACuB,OAAMC,QAAQ,QACZxB,wBACD,qBAACyB;QAAKjB,SAAS;QAAqCkB,eAAAA,IAAW;OAElE;AAGP"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport styles from './FormLayoutGroup.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(\n    styles['FormLayoutGroup--sizeY-none'],\n    'vkuiInternalFormLayoutGroup--sizeY-none',\n  ),\n  [SizeType.COMPACT]: classNames(\n    styles['FormLayoutGroup--sizeY-compact'],\n    'vkuiInternalFormLayoutGroup--sizeY-compact',\n  ),\n};\n\nexport interface FormLayoutGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    RemovableProps,\n    HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   *\n   * Режим `indent` предназначен для визуального отступа.\n   */\n  removable?: boolean | 'indent';\n\n  /**\n   * Только для режима horizontal. Дает возможность склеить несколько `FormItem`.\n   */\n  segmented?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayoutGroup\n */\nexport const FormLayoutGroup = ({\n  children,\n  mode = 'vertical',\n  removable,\n  segmented,\n  removePlaceholder = 'Удалить',\n  onRemove = noop,\n  getRootRef,\n  className,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const isSegmented = segmented && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      className={classNames(\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        mode === 'horizontal' &&\n          classNames(\n            styles['FormLayoutGroup--mode-horizontal'],\n            'vkuiInternalFormLayoutGroup--mode-horizontal',\n          ),\n        isRemovable &&\n          classNames(\n            styles['FormLayoutGroup--removable'],\n            'vkuiInternalFormLayoutGroup--removable',\n          ),\n        isSegmented &&\n          classNames(\n            styles['FormLayoutGroup--segmented'],\n            'vkuiInternalFormLayoutGroup--segmented',\n          ),\n        className,\n      )}\n      {...restProps}\n    >\n      {isRemovable ? (\n        <Removable\n          className={styles['FormLayoutGroup__removable']}\n          align=\"start\"\n          removePlaceholder={removePlaceholder}\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          indent={removable === 'indent'}\n        >\n          {children}\n        </Removable>\n      ) : (\n        <React.Fragment>\n          {children}\n          <span className={styles['FormLayoutGroup__offset']} aria-hidden />\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n"],"names":["FormLayoutGroup","sizeYClassNames","none","classNames","SizeType","COMPACT","children","mode","removable","segmented","removePlaceholder","onRemove","noop","getRootRef","className","restProps","useAdaptivity","sizeY","isRemovable","isSegmented","rootEl","useExternRef","div","ref","REGULAR","Removable","align","e","current","indent","React","Fragment","span","aria-hidden"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;2DAzCU;oBACU;6BACH;4BACD;0BACJ;yBAEiB;AAG1C,IAAMC,kBAKJ;IAJAC,MAAMC,IAAAA,gBAAU,qCAEd;GAEDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,wCAE5B;AAyBG,IAAMH,kBAAkB,iBAUH;QAT1BM,kBAAAA,+BACAC,MAAAA,gCAAO,0BACPC,mBAAAA,WACAC,mBAAAA,6CACAC,mBAAAA,0DAAoB,+DACpBC,UAAAA,wCAAWC,UAAI,oBACfC,oBAAAA,YACAC,mBAAAA,WACGC;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAA2BE,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAMC,cAAcV,aAAaD,SAAS;IAC1C,IAAMY,cAAcV,aAAaF,SAAS;IAC1C,IAAMa,SAASC,IAAAA,0BAAY,EAACR;IAE5B,qBACE,qBAACS;QACCC,KAAKH;QACLN,WAAWX,IAAAA,gBAAU,EACnBc,UAAUb,oBAAQ,CAACoB,OAAO,IAAIvB,eAAe,CAACgB,MAAM,EACpDV,SAAS,gBACPJ,IAAAA,gBAAU,0CAER,iDAEJe,eACEf,IAAAA,gBAAU,oCAER,2CAEJgB,eACEhB,IAAAA,gBAAU,oCAER,2CAEJW;OAEEC,YAEHG,4BACC,qBAACO,oBAAS;QACRX,SAAS;QACTY,OAAM;QACNhB,mBAAmBA;QACnBC,UAAU,SAACgB,GAAM;YACf,IAAIP,mBAAAA,oBAAAA,KAAAA,IAAAA,OAAQQ,OAAO,EAAE;gBACnBjB,SAASgB,GAAGP,OAAOQ,OAAO;YAC5B,CAAC;QACH;QACAC,QAAQrB,cAAc;OAErBF,0BAGH,qBAACwB,OAAMC,QAAQ,QACZzB,wBACD,qBAAC0B;QAAKlB,SAAS;QAAqCmB,eAAAA,IAAW;OAElE;AAGP"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {
+import { HasChildren, HasRootRef } from '../../types';
+export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement>, HasChildren {
     header?: React.ReactNode;
     description?: React.ReactNode;
     /**
@@ -20,6 +20,8 @@ export interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttribute
      * Отвечает за отступы вокруг контента в режиме 'card'.
      */
     padding?: 's' | 'm';
-    children?: React.ReactNode;
 }
+/**
+ * @see https://vkcom.github.io/VKUI/#/Group
+ */
 export declare const Group: ({ header, description, children, separator, getRootRef, mode: modeProps, padding, className, tabIndex: tabIndexProp, ...restProps }: GroupProps) => JSX.Element;

package/dist/cjs/components/Group/Group.js

@@ -28,7 +28,7 @@ var _obj;
 var sizeXClassNames = (_obj = {
     none: "vkuiGroup--sizeX-none"
 }, _defineProperty(_obj, _adaptivity.SizeType.COMPACT, "vkuiGroup--sizeX-compact"), _defineProperty(_obj, _adaptivity.SizeType.REGULAR, "vkuiGroup--sizeX-regular"), _obj);
-var warn = (0, _warnOnce.warnOnce)("TabsItem");
+var warn = (0, _warnOnce.warnOnce)("Group");
 var Group = function(_param) {
     var header = _param.header, description = _param.description, children = _param.children, _param_separator = _param.separator, separator = _param_separator === void 0 ? "auto" : _param_separator, getRootRef = _param.getRootRef, modeProps = _param.mode, _param_padding = _param.padding, padding = _param_padding === void 0 ? "m" : _param_padding, className = _param.className, tabIndexProp = _param.tabIndex, restProps = _objectWithoutProperties(_param, [
         "header",
@@ -58,7 +58,7 @@ var Group = function(_param) {
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("section", _objectSpreadProps(_objectSpread({}, restProps), {
         tabIndex: tabIndex,
         ref: getRootRef,
-        className: (0, _vkjs.classNames)("vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
+        className: (0, _vkjs.classNames)("vkuiInternalGroup", "vkuiGroup", platform === _platform.Platform.IOS && "vkuiGroup--ios", sizeXClassNames[sizeX], mode && ({
             none: (0, _vkjs.classNames)("vkuiGroup--mode-none", "vkuiInternalGroup--mode-none"),
             plain: (0, _vkjs.classNames)("vkuiGroup--mode-plain", "vkuiInternalGroup--mode-plain"),
             card: (0, _vkjs.classNames)("vkuiGroup--mode-card", "vkuiInternalGroup--mode-card")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps extends HasRootRef<HTMLElement>, React.HTMLAttributes<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce('TabsItem');\n\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["Group","sizeXClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","section","ref","Platform","IOS","plain","card","s","m","hasReactNode","Footnote","Fragment","Spacing","size","Separator"],"mappings":";;;;+BA6CaA;;;eAAAA;;;;;;;;2DA7CU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;gCAEQ;yBACP;uBACF;wBACC;IAGD;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;mBADkB,MAErBC,oBAAQ,CAACC,OAAO,+CAFK,MAGrBD,oBAAQ,CAACE,OAAO,+BAHK;AA6BxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAEf,IAAMP,QAAQ,iBAWH;QAVhBQ,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkBC,OAAMC,UAAU,CAACC,kCAAgB,EAAnDH;IACR,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAId,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,IAAMQ,aAAaT,UAAUU,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACT,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,IAAMW,WAAWW,cAAcV,iBAAiBe,YAAY,IAAIf,YAAY;IAE5E,IAAMgB,qBAAqBC,IAAAA,gBAAU,0BAEnCxB,cAAc;IAGhB,qBACE,0DACE,qBAACyB,gDACKjB;QACJF,UAAUA;QACVoB,KAAKzB;QACLI,WAAWmB,IAAAA,gBAAU,eAEnBX,aAAac,kBAAQ,CAACC,GAAG,sBACzBtC,eAAe,CAAC0B,MAAM,EACtBd,QACE,CAAA;YACEX,MAAMiC,IAAAA,gBAAU,0BAA6B;YAC7CK,OAAOL,IAAAA,gBAAU,2BAA8B;YAC/CM,MAAMN,IAAAA,gBAAU,0BAA6B;QAC/C,CAAA,CAAC,CAACtB,KAAK,EACT;YACE6B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,QAAQ,EACVC;QAGDR,QACAE,UACAkC,IAAAA,kBAAY,EAACnC,8BACZ,qBAACoC,kBAAQ;QAAC7B,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,qBAACU,OAAMyB,QAAQ,sBACb,qBAACC,gBAAO;QACN/B,WAAWmB,IAAAA,gBAAU,EAACD;QACtBc,MAAM;sBAER,qBAACC,oBAAS;QACRjC,WAAWmB,IAAAA,gBAAU,EAACD;;AAMlC"}
+{"version":3,"sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren, HasRootRef } from '../../types';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: styles['Group--sizeX-none'],\n  [SizeType.COMPACT]: styles['Group--sizeX-compact'],\n  [SizeType.REGULAR]: styles['Group--sizeX-regular'],\n};\n\nexport interface GroupProps\n  extends HasRootRef<HTMLElement>,\n    React.HTMLAttributes<HTMLElement>,\n    HasChildren {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    show - разделитель всегда показывается,\n    hide - разделитель всегда спрятан,\n    auto - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен 'card', выглядит как карточка c\n   * обводкой и внешними отступами. Если 'plain' — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX`. В модальных окнах\n   * по умолчанию 'plain'.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме 'card'.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  getRootRef,\n  mode: modeProps,\n  padding = 'm',\n  className,\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n  const { sizeX = 'none' } = useAdaptivity();\n\n  let mode: GroupProps['mode'] | 'none' = modeProps;\n\n  if (!modeProps) {\n    // Подробнее в \"none\" можно прочитать в ADAPTIVITY_GUIDE.md\n    mode = isInsideModal ? 'plain' : 'none';\n  }\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  const separatorClassName = classNames(\n    styles['Group__separator'],\n    separator === 'show' && styles['Group__separator--force'],\n  );\n\n  return (\n    <>\n      <section\n        {...restProps}\n        tabIndex={tabIndex}\n        ref={getRootRef}\n        className={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          platform === Platform.IOS && styles['Group--ios'],\n          sizeXClassNames[sizeX],\n          mode &&\n            {\n              none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n              plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n              card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n            }[mode],\n          {\n            s: styles['Group--padding-s'],\n            m: styles['Group--padding-m'],\n          }[padding],\n          className,\n        )}\n      >\n        {header}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </section>\n\n      {separator !== 'hide' && (\n        <React.Fragment>\n          <Spacing\n            className={classNames(separatorClassName, styles['Group__separator--spacing'])}\n            size={16}\n          />\n          <Separator\n            className={classNames(separatorClassName, styles['Group__separator--separator'])}\n          />\n        </React.Fragment>\n      )}\n    </>\n  );\n};\n"],"names":["Group","sizeXClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","header","description","children","separator","getRootRef","mode","modeProps","padding","className","tabIndex","tabIndexProp","restProps","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","useAdaptivity","sizeX","isTabPanel","role","process","env","NODE_ENV","undefined","separatorClassName","classNames","section","ref","Platform","IOS","plain","card","s","m","hasReactNode","Footnote","Fragment","Spacing","size","Separator"],"mappings":";;;;+BAiDaA;;;eAAAA;;;;;;;;2DAjDU;oBACkB;6BACX;2BACF;0BACH;wBACA;wBACA;gCAEQ;yBACP;uBACF;wBACC;IAGD;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;mBADkB,MAErBC,oBAAQ,CAACC,OAAO,+CAFK,MAGrBD,oBAAQ,CAACE,OAAO,+BAHK;AA+BxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAIf,IAAMP,QAAQ,iBAWH;QAVhBQ,gBAAAA,QACAC,qBAAAA,aACAC,kBAAAA,oCACAC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,AAAMC,mBAAND,8BACAE,SAAAA,sCAAU,sBACVC,mBAAAA,WACAC,AAAUC,sBAAVD,UACGE;QATHX;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,IAAM,AAAEG,gBAAkBC,OAAMC,UAAU,CAACC,kCAAgB,EAAnDH;IACR,IAAMI,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAId,OAAoCC;IAExC,IAAI,CAACA,WAAW;QACd,2DAA2D;QAC3DD,OAAOO,gBAAgB,UAAU,MAAM;IACzC,CAAC;IAED,IAAMQ,aAAaT,UAAUU,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACT,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAb,KACE;IAEJ,CAAC;IAED,IAAMW,WAAWW,cAAcV,iBAAiBe,YAAY,IAAIf,YAAY;IAE5E,IAAMgB,qBAAqBC,IAAAA,gBAAU,0BAEnCxB,cAAc;IAGhB,qBACE,0DACE,qBAACyB,gDACKjB;QACJF,UAAUA;QACVoB,KAAKzB;QACLI,WAAWmB,IAAAA,gBAAU,EACnB,kCAEAX,aAAac,kBAAQ,CAACC,GAAG,sBACzBtC,eAAe,CAAC0B,MAAM,EACtBd,QACE,CAAA;YACEX,MAAMiC,IAAAA,gBAAU,0BAA6B;YAC7CK,OAAOL,IAAAA,gBAAU,2BAA8B;YAC/CM,MAAMN,IAAAA,gBAAU,0BAA6B;QAC/C,CAAA,CAAC,CAACtB,KAAK,EACT;YACE6B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC5B,QAAQ,EACVC;QAGDR,QACAE,UACAkC,IAAAA,kBAAY,EAACnC,8BACZ,qBAACoC,kBAAQ;QAAC7B,SAAS;OAAiCP,eAIvDE,cAAc,wBACb,qBAACU,OAAMyB,QAAQ,sBACb,qBAACC,gBAAO;QACN/B,WAAWmB,IAAAA,gBAAU,EAACD;QACtBc,MAAM;sBAER,qBAACC,oBAAS;QACRjC,WAAWmB,IAAAA,gBAAU,EAACD;;AAMlC"}