@vkontakte/vkui 5.3.1 → 5.4.0

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/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"}

package/dist/cjs/components/Header/Header.js

@@ -18,8 +18,8 @@ var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _footnote = require("../Typography/Footnote/Footnote");
 var _headline = require("../Typography/Headline/Headline");
+var _paragraph = require("../Typography/Paragraph/Paragraph");
 var _subhead = require("../Typography/Subhead/Subhead");
-var _text = require("../Typography/Text/Text");
 var _title = require("../Typography/Title/Title");
 var HeaderContent = function(_param) {
     var mode = _param.mode, size = _param.size, restProps = _objectWithoutProperties(_param, [
@@ -38,16 +38,16 @@ var HeaderContent = function(_param) {
                     weight: "1",
                     level: "3"
                 }, restProps));
+            case "secondary":
+                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
+                    weight: "1",
+                    caps: true
+                }, restProps));
             case "tertiary":
                 return /*#__PURE__*/ _react.createElement(_title.Title, _objectSpread({
                     weight: "1",
                     level: "3"
                 }, restProps));
-            case "secondary":
-                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
-                    weight: "2",
-                    caps: true
-                }, restProps));
         }
     }
     if (platform === _platform.Platform.VKCOM) {
@@ -57,9 +57,14 @@ var HeaderContent = function(_param) {
                     level: "2",
                     weight: "1"
                 }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
-                    weight: "3"
+                    level: "1",
+                    weight: "2"
                 }, restProps));
             case "secondary":
+                return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
+                    caps: true,
+                    weight: "1"
+                }, restProps));
             case "tertiary":
                 return /*#__PURE__*/ _react.createElement(_footnote.Footnote, restProps);
         }
@@ -72,15 +77,15 @@ var HeaderContent = function(_param) {
             }, restProps)) : /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
                 weight: "2"
             }, restProps));
-        case "tertiary":
-            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
-                weight: "2"
-            }, restProps));
         case "secondary":
             return /*#__PURE__*/ _react.createElement(_footnote.Footnote, _objectSpread({
                 weight: "1",
                 caps: true
             }, restProps));
+        case "tertiary":
+            return /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpread({
+                weight: "2"
+            }, restProps));
     }
     return null;
 };
@@ -97,15 +102,14 @@ var Header = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var AsideTypography = platform === _platform.Platform.VKCOM ? _subhead.Subhead : _text.Text;
-    var SubtitleTypography = mode === "secondary" ? _subhead.Subhead : _footnote.Footnote;
+    var AsideTypography = platform === _platform.Platform.VKCOM ? _subhead.Subhead : _paragraph.Paragraph;
     return /*#__PURE__*/ _react.createElement("header", _objectSpreadProps(_objectSpread({}, restProps), {
         ref: getRootRef,
         className: (0, _vkjs.classNames)("vkuiHeader", platform === _platform.Platform.VKCOM && "vkuiHeader--vkcom", platform === _platform.Platform.ANDROID && "vkuiHeader--android", platform === _platform.Platform.IOS && "vkuiHeader--ios", {
             primary: "vkuiHeader--mode-primary",
             secondary: "vkuiHeader--mode-secondary",
             tertiary: "vkuiHeader--mode-tertiary"
-        }[mode], (0, _vkjs.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", className)
+        }[mode], (0, _vkjs.isPrimitiveReactNode)(indicator) && "vkuiHeader--pi", (0, _vkjs.hasReactNode)(subtitle) && "vkuiHeader--with-subtitle", className)
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiHeader__main"
     }, /*#__PURE__*/ _react.createElement(HeaderContent, {
@@ -117,8 +121,8 @@ var Header = function(_param) {
         className: (0, _vkjs.classNames)("vkuiHeader__content-in", multiline && "vkuiHeader__content-in--multiline")
     }, children), (0, _vkjs.hasReactNode)(indicator) && /*#__PURE__*/ _react.createElement(_footnote.Footnote, {
         className: "vkuiHeader__indicator",
-        weight: mode === "primary" || mode === "secondary" ? "1" : undefined
-    }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(SubtitleTypography, {
+        weight: "2"
+    }, indicator)), (0, _vkjs.hasReactNode)(subtitle) && /*#__PURE__*/ _react.createElement(_subhead.Subhead, {
         className: "vkuiHeader__subtitle",
         Component: "span"
     }, subtitle)), (0, _vkjs.hasReactNode)(aside) && /*#__PURE__*/ _react.createElement(AsideTypography, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n      case 'secondary':\n        return <Footnote weight=\"2\" caps {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline weight=\"3\" {...restProps} />\n        );\n      case 'secondary':\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;\n  const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote\n              className={styles['Header__indicator']}\n              weight={mode === 'primary' || mode === 'secondary' ? '1' : undefined}\n            >\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <SubtitleTypography className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </SubtitleTypography>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","VKCOM","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Text","SubtitleTypography","header","ref","classNames","ANDROID","primary","secondary","tertiary","isPrimitiveReactNode","div","Component","span","hasReactNode","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Header.module.css';\n\nexport interface HeaderProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {\n  mode?: 'primary' | 'secondary' | 'tertiary';\n  size?: 'regular' | 'large';\n  subtitle?: React.ReactNode;\n  /**\n   * Допускаются иконки, текст, Link\n   */\n  aside?: React.ReactNode;\n  /**\n   * Допускаются текст, Indicator\n   */\n  indicator?: React.ReactNode;\n  multiline?: boolean;\n}\n\ntype HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &\n  HasComponent;\n\nconst HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {\n  const isLarge = size === 'large';\n\n  const platform = usePlatform();\n  if (platform === Platform.IOS) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"2\" {...restProps} />\n        ) : (\n          <Title weight=\"1\" level=\"3\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote weight=\"1\" caps {...restProps} />;\n      case 'tertiary':\n        return <Title weight=\"1\" level=\"3\" {...restProps} />;\n    }\n  }\n\n  if (platform === Platform.VKCOM) {\n    switch (mode) {\n      case 'primary':\n        return isLarge ? (\n          <Title level=\"2\" weight=\"1\" {...restProps} />\n        ) : (\n          <Headline level=\"1\" weight=\"2\" {...restProps} />\n        );\n      case 'secondary':\n        return <Footnote caps weight=\"1\" {...restProps} />;\n      case 'tertiary':\n        return <Footnote {...restProps} />;\n    }\n  }\n\n  switch (mode) {\n    case 'primary':\n      return isLarge ? (\n        <Title level=\"2\" weight=\"2\" {...restProps} />\n      ) : (\n        <Headline weight=\"2\" {...restProps} />\n      );\n    case 'secondary':\n      return <Footnote weight=\"1\" caps {...restProps} />;\n    case 'tertiary':\n      return <Headline weight=\"2\" {...restProps} />;\n  }\n\n  return null;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Header\n */\nexport const Header = ({\n  mode = 'primary',\n  size = 'regular',\n  children,\n  subtitle,\n  indicator,\n  aside,\n  getRootRef,\n  multiline,\n  className,\n  ...restProps\n}: HeaderProps) => {\n  const platform = usePlatform();\n\n  const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;\n\n  return (\n    <header\n      {...restProps}\n      ref={getRootRef}\n      className={classNames(\n        styles['Header'],\n        platform === Platform.VKCOM && styles['Header--vkcom'],\n        platform === Platform.ANDROID && styles['Header--android'],\n        platform === Platform.IOS && styles['Header--ios'],\n        {\n          primary: styles['Header--mode-primary'],\n          secondary: styles['Header--mode-secondary'],\n          tertiary: styles['Header--mode-tertiary'],\n        }[mode],\n        isPrimitiveReactNode(indicator) && styles['Header--pi'],\n        hasReactNode(subtitle) && styles['Header--with-subtitle'],\n        className,\n      )}\n    >\n      <div className={styles['Header__main']}>\n        <HeaderContent\n          className={styles['Header__content']}\n          Component=\"span\"\n          mode={mode}\n          size={size}\n        >\n          <span\n            className={classNames(\n              styles['Header__content-in'],\n              multiline && styles['Header__content-in--multiline'],\n            )}\n          >\n            {children}\n          </span>\n          {hasReactNode(indicator) && (\n            <Footnote className={styles['Header__indicator']} weight=\"2\">\n              {indicator}\n            </Footnote>\n          )}\n        </HeaderContent>\n\n        {hasReactNode(subtitle) && (\n          <Subhead className={styles['Header__subtitle']} Component=\"span\">\n            {subtitle}\n          </Subhead>\n        )}\n      </div>\n\n      {hasReactNode(aside) && (\n        <AsideTypography className={styles['Header__aside']} Component=\"span\">\n          {aside}\n        </AsideTypography>\n      )}\n    </header>\n  );\n};\n"],"names":["Header","HeaderContent","mode","size","restProps","isLarge","platform","usePlatform","Platform","IOS","Title","level","weight","Footnote","caps","VKCOM","Headline","children","subtitle","indicator","aside","getRootRef","multiline","className","AsideTypography","Subhead","Paragraph","header","ref","classNames","ANDROID","primary","secondary","tertiary","isPrimitiveReactNode","hasReactNode","div","Component","span"],"mappings":"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"}