@vkontakte/vkui 5.4.1 → 5.4.3

package/dist/components/PanelHeader/PanelHeader.js

@@ -8,6 +8,7 @@ import { useAdaptivityConditionalRender } from "../../hooks/useAdaptivityConditi
 import { usePlatform } from "../../hooks/usePlatform";
 import { SizeType } from "../../lib/adaptivity";
 import { Platform } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
 import { useConfigProvider, WebviewType } from "../ConfigProvider/ConfigProviderContext";
 import { FixedLayout } from "../FixedLayout/FixedLayout";
 import { ModalRootContext } from "../ModalRoot/ModalRootContext";
@@ -24,24 +25,27 @@ var sizeXClassNames = {
     none: "vkuiPanelHeader--sizeX-none",
     regular: "vkuiPanelHeader--sizeX-regular"
 };
-var PanelHeaderContent = function(param) {
-    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
-    var platform = usePlatform();
-    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
-        weight: "2",
-        Component: Component,
-        id: id
-    }, children) : /*#__PURE__*/ React.createElement(Component, {
-        className: "vkuiPanelHeader__content-in",
-        id: id
-    }, children);
-};
-PanelHeaderContent.displayName = "PanelHeaderContent";
 var PanelHeaderIn = function(param) {
-    var before = param.before, after = param.after, separator = param.separator, children = param.children;
+    var before = param.before, after = param.after, separator = param.separator, children = param.children, _param_typographyProps = param.typographyProps, typographyProps = _param_typographyProps === void 0 ? {} : _param_typographyProps;
+    var _typographyProps_Component = typographyProps.Component, Component = _typographyProps_Component === void 0 ? "span" : _typographyProps_Component, restProps = _object_without_properties(typographyProps, [
+        "Component"
+    ]);
     var webviewType = useConfigProvider().webviewType;
     var isInsideModal = React.useContext(ModalRootContext).isInsideModal;
     var platform = usePlatform();
+    var typographyNode;
+    // TODO [>=6]: Удалить условие
+    if (/*#__PURE__*/ React.isValidElement(children) && // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    children.type.displayName === LegacyPanelHeaderContent.displayName) {
+        typographyNode = children;
+    } else {
+        typographyNode = platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, _object_spread({
+            weight: "2",
+            Component: Component
+        }, restProps), children) : /*#__PURE__*/ React.createElement(Component, _object_spread({
+            className: "vkuiPanelHeader__content-in"
+        }, restProps), children);
+    }
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(TooltipContainer, {
         fixed: true,
         className: "vkuiPanelHeader__in"
@@ -49,7 +53,7 @@ var PanelHeaderIn = function(param) {
         className: classNames("vkuiPanelHeader__before", "vkuiInternalPanelHeader__before")
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPanelHeader__content"
-    }, /*#__PURE__*/ React.isValidElement(children) && children.type.displayName === PanelHeaderContent.displayName ? children : /*#__PURE__*/ React.createElement(PanelHeaderContent, null, children)), /*#__PURE__*/ React.createElement("div", {
+    }, typographyNode), /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiPanelHeader__after", "vkuiInternalPanelHeader__after")
     }, (webviewType === WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === Platform.VKCOM && /*#__PURE__*/ React.createElement(Separator, {
         className: "vkuiPanelHeader__separator",
@@ -59,7 +63,7 @@ var PanelHeaderIn = function(param) {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeader
  */ export var PanelHeader = function(_param) {
-    var before = _param.before, children = _param.children, after = _param.after, _param_separator = _param.separator, separator = _param_separator === void 0 ? true : _param_separator, _param_visor = _param.visor, visor = _param_visor === void 0 ? true : _param_visor, _param_transparent = _param.transparent, transparent = _param_transparent === void 0 ? false : _param_transparent, shadow = _param.shadow, getRef = _param.getRef, getRootRef = _param.getRootRef, fixed = _param.fixed, className = _param.className, restProps = _object_without_properties(_param, [
+    var before = _param.before, children = _param.children, after = _param.after, _param_separator = _param.separator, separator = _param_separator === void 0 ? true : _param_separator, _param_visor = _param.visor, visor = _param_visor === void 0 ? true : _param_visor, _param_transparent = _param.transparent, transparent = _param_transparent === void 0 ? false : _param_transparent, shadow = _param.shadow, getRef = _param.getRef, getRootRef = _param.getRootRef, fixed = _param.fixed, className = _param.className, typographyProps = _param.typographyProps, restProps = _object_without_properties(_param, [
         "before",
         "children",
         "after",
@@ -70,7 +74,8 @@ var PanelHeaderIn = function(param) {
         "getRef",
         "getRootRef",
         "fixed",
-        "className"
+        "className",
+        "typographyProps"
     ]);
     var platform = usePlatform();
     var webviewType = useConfigProvider().webviewType;
@@ -79,7 +84,7 @@ var PanelHeaderIn = function(param) {
     var _useAdaptivityConditionalRender = useAdaptivityConditionalRender(), adaptiveSizeX = _useAdaptivityConditionalRender.sizeX;
     var isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;
     return /*#__PURE__*/ React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
-        className: classNames("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && classNames("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && classNames("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
+        className: classNames("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && classNames("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && classNames("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && classNames("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX], className),
         ref: isFixed ? getRootRef : getRef
     }), isFixed ? /*#__PURE__*/ React.createElement(FixedLayout, {
         className: classNames("vkuiPanelHeader__fixed", "vkuiInternalPanelHeader__fixed"),
@@ -88,11 +93,13 @@ var PanelHeaderIn = function(param) {
     }, /*#__PURE__*/ React.createElement(PanelHeaderIn, {
         before: before,
         after: after,
-        separator: separator
+        separator: separator,
+        typographyProps: typographyProps
     }, children)) : /*#__PURE__*/ React.createElement(PanelHeaderIn, {
         before: before,
         after: after,
-        separator: separator
+        separator: separator,
+        typographyProps: typographyProps
     }, children), separator && visor && platform !== Platform.VKCOM && /*#__PURE__*/ React.createElement(React.Fragment, null, adaptiveSizeX.compact && /*#__PURE__*/ React.createElement(Separator, {
         className: adaptiveSizeX.compact.className
     }), adaptiveSizeX.regular && /*#__PURE__*/ React.createElement(Spacing, {
@@ -100,6 +107,26 @@ var PanelHeaderIn = function(param) {
         size: 16
     })));
 };
-PanelHeader.Content = PanelHeaderContent;
+var warn = warnOnce("PanelHeader");
+/**
+ * TODO [>=6]: Удалить подкомпонент
+ * @deprecated
+ */ var LegacyPanelHeaderContent = function(param) {
+    var children = param.children, _param_Component = param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, id = param.id;
+    if (process.env.NODE_ENV === "development") {
+        warn("Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.");
+    }
+    var platform = usePlatform();
+    return platform === Platform.VKCOM ? /*#__PURE__*/ React.createElement(Text, {
+        weight: "2",
+        Component: Component,
+        id: id
+    }, children) : /*#__PURE__*/ React.createElement(Component, {
+        className: "vkuiPanelHeader__content-in",
+        id: id
+    }, children);
+};
+LegacyPanelHeaderContent.displayName = "LegacyPanelHeaderContent";
+PanelHeader.Content = LegacyPanelHeaderContent;
 
 //# sourceMappingURL=PanelHeader.js.map

package/dist/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n}\n\ninterface PanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst PanelHeaderContent = ({ children, Component = 'span', id }: PanelHeaderContentProps) => {\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nPanelHeaderContent.displayName = 'PanelHeaderContent';\n\nconst PanelHeaderIn = ({ before, after, separator, children }: PanelHeaderProps) => {\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>\n          {/* Поддерживаем обратную совместимость для подкомпонентного подхода */}\n          {React.isValidElement(children) &&\n          (children as JSX.Element).type.displayName === PanelHeaderContent.displayName ? (\n            children\n          ) : (\n            <PanelHeaderContent>{children}</PanelHeaderContent>\n          )}\n        </div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before && styles['PanelHeader--no-before'],\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} separator={separator}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} separator={separator}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\nPanelHeader.Content = PanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderContent","children","Component","id","platform","VKCOM","weight","className","displayName","PanelHeaderIn","before","after","separator","webviewType","isInsideModal","useContext","Fragment","fixed","div","isValidElement","type","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","restProps","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","Content"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasComponent, HasRef, HasRootRef } from '../../types';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: classNames(styles['PanelHeader--ios'], 'vkuiInternalPanelHeader--ios'),\n  android: classNames(styles['PanelHeader--android'], 'vkuiInternalPanelHeader--android'),\n  vkcom: classNames(styles['PanelHeader--vkcom'], 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles['PanelHeader--sizeX-none'],\n  regular: styles['PanelHeader--sizeX-regular'],\n};\n\nexport interface PanelHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  separator?: boolean;\n  transparent?: boolean;\n  shadow?: boolean;\n  /**\n   * Если `false`, то шапка будет нулевой высоты и контент панели \"залезет\" под неё\n   */\n  visor?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement>;\n}\n\nconst PanelHeaderIn = ({\n  before,\n  after,\n  separator,\n  children,\n  typographyProps = {},\n}: PanelHeaderProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const platform = usePlatform();\n\n  let typographyNode: React.ReactNode;\n\n  // TODO [>=6]: Удалить условие\n  if (\n    React.isValidElement(children) &&\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    (children as JSX.Element).type.displayName === LegacyPanelHeaderContent.displayName\n  ) {\n    typographyNode = children;\n  } else {\n    typographyNode =\n      platform === Platform.VKCOM ? (\n        <Text weight=\"2\" Component={Component} {...restProps}>\n          {children}\n        </Text>\n      ) : (\n        <Component className={styles['PanelHeader__content-in']} {...restProps}>\n          {children}\n        </Component>\n      );\n  }\n\n  return (\n    <React.Fragment>\n      <TooltipContainer fixed className={styles['PanelHeader__in']}>\n        <div\n          className={classNames(styles['PanelHeader__before'], 'vkuiInternalPanelHeader__before')}\n        >\n          {before}\n        </div>\n        <div className={styles['PanelHeader__content']}>{typographyNode}</div>\n        <div className={classNames(styles['PanelHeader__after'], 'vkuiInternalPanelHeader__after')}>\n          {(webviewType === WebviewType.INTERNAL || isInsideModal) && after}\n        </div>\n      </TooltipContainer>\n      {separator && platform === Platform.VKCOM && (\n        <Separator className={styles['PanelHeader__separator']} wide />\n      )}\n    </React.Fragment>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  separator = true,\n  visor = true,\n  transparent = false,\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  className,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps) => {\n  const platform = usePlatform();\n  const { webviewType } = useConfigProvider();\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  let isFixed = fixed !== undefined ? fixed : platform !== Platform.VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PanelHeader'],\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles['PanelHeader--trnsp'],\n        shadow && styles['PanelHeader--shadow'],\n        visor && classNames(styles['PanelHeader--vis'], 'vkuiInternalPanelHeader--vis'),\n        separator &&\n          visor &&\n          classNames(styles['PanelHeader--sep'], 'vkuiInternalPanelHeader--sep'),\n        webviewType === WebviewType.VKAPPS && !isInsideModal && styles['PanelHeader--vkapps'],\n        !before &&\n          classNames(styles['PanelHeader--no-before'], 'vkuiInternalPanelHeader--no-before'),\n        !after && styles['PanelHeader--no-after'],\n        isFixed && styles['PanelHeader--fixed'],\n        sizeX !== SizeType.COMPACT && sizeXClassNames[sizeX],\n        className,\n      )}\n      ref={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles['PanelHeader__fixed'], 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn\n            before={before}\n            after={after}\n            separator={separator}\n            typographyProps={typographyProps}\n          >\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn\n          before={before}\n          after={after}\n          separator={separator}\n          typographyProps={typographyProps}\n        >\n          {children}\n        </PanelHeaderIn>\n      )}\n      {separator && visor && platform !== Platform.VKCOM && (\n        <React.Fragment>\n          {adaptiveSizeX.compact && <Separator className={adaptiveSizeX.compact.className} />}\n          {adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </React.Fragment>\n      )}\n    </div>\n  );\n};\n\ninterface LegacyPanelHeaderContentProps extends React.HTMLAttributes<HTMLElement>, HasComponent {}\n\nconst warn = warnOnce('PanelHeader');\n\n/**\n * TODO [>=6]: Удалить подкомпонент\n * @deprecated\n */\nconst LegacyPanelHeaderContent = ({\n  children,\n  Component = 'span',\n  id,\n}: LegacyPanelHeaderContentProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    warn(\n      'Подкомпонент PanelHeader.Content устарел и будет удалён в v6. Используйте параметр typographyProps.',\n    );\n  }\n\n  const platform = usePlatform();\n\n  return platform === Platform.VKCOM ? (\n    <Text weight=\"2\" Component={Component} id={id}>\n      {children}\n    </Text>\n  ) : (\n    <Component className={styles['PanelHeader__content-in']} id={id}>\n      {children}\n    </Component>\n  );\n};\n\nLegacyPanelHeaderContent.displayName = 'LegacyPanelHeaderContent';\n\nPanelHeader.Content = LegacyPanelHeaderContent;\n"],"names":["React","classNames","useAdaptivity","useAdaptivityConditionalRender","usePlatform","SizeType","Platform","warnOnce","useConfigProvider","WebviewType","FixedLayout","ModalRootContext","Separator","Spacing","TooltipContainer","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","isInsideModal","useContext","platform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","VKCOM","weight","className","Fragment","fixed","div","INTERNAL","wide","PanelHeader","visor","transparent","shadow","getRef","getRootRef","sizeX","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","COMPACT","ref","vertical","compact","size","warn","id","process","env","NODE_ENV","Content"],"mappings":"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"}

package/dist/components/TabsItem/TabsItem.js

@@ -11,6 +11,7 @@ import { TabsModeContext } from "../Tabs/Tabs";
 import { Tappable } from "../Tappable/Tappable";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden";
 var sizeYClassNames = _define_property({
     none: "vkuiTabsItem--sizeY-none"
 }, SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
@@ -37,9 +38,9 @@ var warn = warnOnce("TabsItem");
             Component: "span",
             className: classNames("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
             weight: "2"
-        }, status) : /*#__PURE__*/ React.createElement("span", {
+        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0"), status) : /*#__PURE__*/ React.createElement("span", {
             className: "vkuiTabsItem__status"
-        }, status);
+        }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, "\xa0"), status);
     }
     if (process.env.NODE_ENV === "development" && isTabFlow) {
         if (!restProps["aria-controls"]) {

package/dist/components/TabsItem/TabsItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>{status}</span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAA2BC,eAAe,QAAQ,eAAe;AACjE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AAGxD,IAAMC;IACJC,IAAI;GACHP,SAASQ,OAAO;AA6BnB,IAAMC,OAAOR,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMS,WAAW,iBAUH;QATnBC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,KAAK,oBAChBC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BnB,iBAAAA,wCAAAA,eAAnBsB,OAAAA,0CAAQ;IAChB,IAA6CxB,oBAAAA,MAAMyB,UAAU,CAACpB,kBAAtDqB,OAAqC1B,kBAArC0B,MAAMC,WAA+B3B,kBAA/B2B;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYT,SAAS;IAE3B,IAAIJ,QAAQ;QACVY,kBACE,OAAOZ,WAAW,yBAChB,oBAACR;YACCsB,WAAU;YACVX,WAAWlB;YACX8B,QAAO;WAENf,wBAGH,oBAACgB;YAAKb,SAAS;WAA+BH,OAC/C;IACL,CAAC;IAED,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBN,WAAW;QACvD,IAAI,CAACN,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ,CAAC;IACH,CAAC;IAED,IAAIS,WAAWC;IACf,IAAIO,aAAaR,aAAae,WAAW;QACvCf,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,oBAACZ,kDACKiB;QACJJ,WAAWlB,2BAETyB,QACE,CAAA;YACEW,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACb,KAAK,EACTR,sCACAM,UAAUrB,SAASqC,OAAO,IAAI/B,eAAe,CAACe,MAAM,EACpDG,sCACAR;QAEFsB,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChBxB,MAAMA;QACNyB,iBAAe3B;QACfG,UAAUA;QAETP,wBAAU,oBAACgC;QAAI3B,SAAS;OAA+BL,uBACxD,oBAACP;QACCuB,WAAU;QACVX,SAAS;QACT4B,OAAOrB,SAAS,YAAY,MAAM,GAAG;QACrCK,QAAO;OAENhB,WAEFa,iBACAX,uBAAS,oBAAC6B;QAAI3B,SAAS;OAA8BF,QACrDS,SAAS,2BACR,oBAACoB;QAAI3B,SAAS;QAAiC6B,eAAAA,IAAW;QAACC,iBAAe/B;;AAIlF,EAAE"}
+{"version":3,"sources":["../../../src/components/TabsItem/TabsItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { TabsContextProps, TabsModeContext } from '../Tabs/Tabs';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './TabsItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['TabsItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['TabsItem--sizeY-compact'],\n};\n\nexport interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Добавляет иконку слева.\n   *\n   * - Для `mode=\"default\"` используйте иконки размером 24.\n   * - Для всех остальных `mode` используйте иконки размером 20.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент слева от `after`.\n   *\n   * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode=\"prominent\"`.\n   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode=\"prominent\" size=\"s\"`.\n   * - `number` – для показа текстового блока с переданным числом.\n   */\n  status?: React.ReactElement | number;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Например, `<Icon16Dropdown />`\n   */\n  after?: React.ReactNode;\n  selected?: boolean;\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('TabsItem');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/TabsItem\n */\nexport const TabsItem = ({\n  before,\n  children,\n  status,\n  after,\n  selected = false,\n  className,\n  role = 'tab',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: TabsItemProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { mode, withGaps }: TabsContextProps = React.useContext(TabsModeContext);\n  let statusComponent = null;\n\n  const isTabFlow = role === 'tab';\n\n  if (status) {\n    statusComponent =\n      typeof status === 'number' ? (\n        <Subhead\n          Component=\"span\"\n          className={classNames(styles['TabsItem__status'], styles['TabsItem__status--count'])}\n          weight=\"2\"\n        >\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </Subhead>\n      ) : (\n        <span className={styles['TabsItem__status']}>\n          <VisuallyHidden>&nbsp;</VisuallyHidden>\n          {status}\n        </span>\n      );\n  }\n\n  if (process.env.NODE_ENV === 'development' && isTabFlow) {\n    if (!restProps['aria-controls']) {\n      warn(`Передайте в \"aria-controls\" id контролируемого блока`, 'warn');\n    } else if (!restProps['id']) {\n      warn(\n        `Передайте \"id\" компоненту для использования в \"aria-labelledby\" контролируемого блока`,\n        'warn',\n      );\n    }\n  }\n\n  let tabIndex = tabIndexProp;\n  if (isTabFlow && tabIndex === undefined) {\n    tabIndex = selected ? 0 : -1;\n  }\n\n  return (\n    <Tappable\n      {...restProps}\n      className={classNames(\n        styles['TabsItem'],\n        mode &&\n          {\n            default: styles['TabsItem--mode-default'],\n            accent: styles['TabsItem--mode-accent'],\n            secondary: styles['TabsItem--mode-secondary'],\n          }[mode],\n        selected && styles['TabsItem--selected'],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        withGaps && styles['TabsItem--withGaps'],\n        className,\n      )}\n      hoverMode={styles['TabsItem--hover']}\n      activeMode=\"\"\n      focusVisibleMode=\"inside\"\n      hasActive={false}\n      role={role}\n      aria-selected={selected}\n      tabIndex={tabIndex}\n    >\n      {before && <div className={styles['TabsItem__before']}>{before}</div>}\n      <Headline\n        Component=\"span\"\n        className={styles['TabsItem__label']}\n        level={mode === 'default' ? '1' : '2'}\n        weight=\"2\"\n      >\n        {children}\n      </Headline>\n      {statusComponent}\n      {after && <div className={styles['TabsItem__after']}>{after}</div>}\n      {mode === 'default' && (\n        <div className={styles['TabsItem__underline']} aria-hidden data-selected={selected} />\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","warnOnce","TabsModeContext","Tappable","Headline","Subhead","VisuallyHidden","sizeYClassNames","none","COMPACT","warn","TabsItem","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","sizeY","useContext","mode","withGaps","statusComponent","isTabFlow","Component","weight","span","process","env","NODE_ENV","undefined","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","level","aria-hidden","data-selected"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAA2BC,eAAe,QAAQ,eAAe;AACjE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,cAAc,QAAQ,mCAAmC;AAGlE,IAAMC;IACJC,IAAI;GACHR,SAASS,OAAO;AA6BnB,IAAMC,OAAOT,SAAS;AAEtB;;CAEC,GACD,OAAO,IAAMU,WAAW,iBAUH;QATnBC,gBAAAA,QACAC,kBAAAA,UACAC,gBAAAA,QACAC,eAAAA,gCACAC,UAAAA,wCAAW,KAAK,oBAChBC,mBAAAA,gCACAC,MAAAA,gCAAO,qBACPC,AAAUC,sBAAVD,UACGE;QARHT;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAA2BpB,iBAAAA,wCAAAA,eAAnBuB,OAAAA,0CAAQ;IAChB,IAA6CzB,oBAAAA,MAAM0B,UAAU,CAACrB,kBAAtDsB,OAAqC3B,kBAArC2B,MAAMC,WAA+B5B,kBAA/B4B;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYT,SAAS;IAE3B,IAAIJ,QAAQ;QACVY,kBACE,OAAOZ,WAAW,yBAChB,oBAACT;YACCuB,WAAU;YACVX,WAAWnB;YACX+B,QAAO;yBAEP,oBAACvB,sBAAe,SACfQ,wBAGH,oBAACgB;YAAKb,SAAS;yBACb,oBAACX,sBAAe,SACfQ,OAEJ;IACL,CAAC;IAED,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBN,WAAW;QACvD,IAAI,CAACN,SAAS,CAAC,gBAAgB,EAAE;YAC/BX,KAAM,wDAAuD;QAC/D,OAAO,IAAI,CAACW,SAAS,CAAC,KAAK,EAAE;YAC3BX,KACG,yFACD;QAEJ,CAAC;IACH,CAAC;IAED,IAAIS,WAAWC;IACf,IAAIO,aAAaR,aAAae,WAAW;QACvCf,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,oBAACb,kDACKkB;QACJJ,WAAWnB,2BAET0B,QACE,CAAA;YACEW,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACb,KAAK,EACTR,sCACAM,UAAUtB,SAASsC,OAAO,IAAI/B,eAAe,CAACe,MAAM,EACpDG,sCACAR;QAEFsB,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChBxB,MAAMA;QACNyB,iBAAe3B;QACfG,UAAUA;QAETP,wBAAU,oBAACgC;QAAI3B,SAAS;OAA+BL,uBACxD,oBAACR;QACCwB,WAAU;QACVX,SAAS;QACT4B,OAAOrB,SAAS,YAAY,MAAM,GAAG;QACrCK,QAAO;OAENhB,WAEFa,iBACAX,uBAAS,oBAAC6B;QAAI3B,SAAS;OAA8BF,QACrDS,SAAS,2BACR,oBAACoB;QAAI3B,SAAS;QAAiC6B,eAAAA,IAAW;QAACC,iBAAe/B;;AAIlF,EAAE"}

package/dist/components/VisuallyHidden/VisuallyHidden.d.ts

@@ -3,12 +3,11 @@ import { HasComponent, HasRootRef } from '../../types';
 interface VisuallyHiddenProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
 }
 /**
- * @since v5.4.0
- * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
- * @description
- *
  * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его
  * доступным для ассистивных технологий. По умолчанию — `span`.
+ *
+ * @since v5.4.0
+ * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
  */
 export declare const VisuallyHidden: ({ Component, getRootRef, className, ...restProps }: VisuallyHiddenProps) => JSX.Element;
 export {};

package/dist/components/VisuallyHidden/VisuallyHidden.js

@@ -4,12 +4,11 @@ import _object_without_properties from "@swc/helpers/src/_object_without_propert
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 /**
- * @since v5.4.0
- * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
- * @description
- *
  * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его
  * доступным для ассистивных технологий. По умолчанию — `span`.
+ *
+ * @since v5.4.0
+ * @see https://vkcom.github.io/VKUI/#/VisuallyHidden
  */ export var VisuallyHidden = function(_param) {
     var _param_Component = _param.Component, Component = _param_Component === void 0 ? "span" : _param_Component, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties(_param, [
         "Component",

package/dist/components/VisuallyHidden/VisuallyHidden.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './VisuallyHidden.module.css';\n\ninterface VisuallyHiddenProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * @since v5.4.0\n * @see https://vkcom.github.io/VKUI/#/VisuallyHidden\n * @description\n *\n * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его\n * доступным для ассистивных технологий. По умолчанию — `span`.\n */\nexport const VisuallyHidden = ({\n  Component = 'span',\n  getRootRef,\n  className,\n  ...restProps\n}: VisuallyHiddenProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['VisuallyHidden'], className)}\n      ref={getRootRef}\n    />\n  );\n};\n"],"names":["React","classNames","VisuallyHidden","Component","getRootRef","className","restProps","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAS7C;;;;;;;CAOC,GACD,OAAO,IAAMC,iBAAiB,iBAKH;kCAJzBC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,oBAACF,mDACKG;QACJD,WAAWJ,iCAAqCI;QAChDE,KAAKH;;AAGX,EAAE"}
+{"version":3,"sources":["../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './VisuallyHidden.module.css';\n\ninterface VisuallyHiddenProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {}\n\n/**\n * Компонент-обертка. Позволяет скрыть контент визуально, но оставить его\n * доступным для ассистивных технологий. По умолчанию — `span`.\n *\n * @since v5.4.0\n * @see https://vkcom.github.io/VKUI/#/VisuallyHidden\n */\nexport const VisuallyHidden = ({\n  Component = 'span',\n  getRootRef,\n  className,\n  ...restProps\n}: VisuallyHiddenProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['VisuallyHidden'], className)}\n      ref={getRootRef}\n    />\n  );\n};\n"],"names":["React","classNames","VisuallyHidden","Component","getRootRef","className","restProps","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAS7C;;;;;;CAMC,GACD,OAAO,IAAMC,iBAAiB,iBAKH;kCAJzBC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,oBAACF,mDACKG;QACJD,WAAWJ,iCAAqCI;QAChDE,KAAKH;;AAGX,EAAE"}

package/dist/components/WriteBar/WriteBar.js

@@ -9,6 +9,17 @@ import { useExternRef } from "../../hooks/useExternRef";
 import { usePlatform } from "../../hooks/usePlatform";
 import { Platform } from "../../lib/platform";
 import { Headline } from "../Typography/Headline/Headline";
+import { Title } from "../Typography/Title/Title";
+var WriteBarTypography = function(props) {
+    var platform = usePlatform();
+    if (platform === Platform.IOS) {
+        return /*#__PURE__*/ React.createElement(Title, _object_spread_props(_object_spread({}, props), {
+            level: "3",
+            weight: "3"
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(Headline, props);
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/WriteBar
  */ export var WriteBar = function(_param) {
@@ -49,7 +60,8 @@ import { Headline } from "../Typography/Headline/Headline";
     ]);
     React.useEffect(resize, [
         resize,
-        value
+        value,
+        platform
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         ref: getRootRef,
@@ -61,7 +73,7 @@ import { Headline } from "../Typography/Headline/Headline";
         className: "vkuiWriteBar__before"
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiWriteBar__formIn"
-    }, /*#__PURE__*/ React.createElement(Headline, _object_spread_props(_object_spread({}, restProps), {
+    }, /*#__PURE__*/ React.createElement(WriteBarTypography, _object_spread_props(_object_spread({}, restProps), {
         Component: "textarea",
         className: "vkuiWriteBar__textarea",
         onChange: onChange,

package/dist/components/WriteBar/WriteBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport styles from './WriteBar.module.css';\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  defaultValue,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    ...restProps,\n  });\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = '';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  React.useEffect(resize, [resize, value]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(\n        styles['WriteBar'],\n        platform === Platform.IOS && styles['WriteBar--ios'],\n        shadow && styles['WriteBar--shadow'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['WriteBar__form']}>\n        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}\n\n        <div className={styles['WriteBar__formIn']}>\n          <Headline\n            {...restProps}\n            Component=\"textarea\"\n            className={styles['WriteBar__textarea']}\n            onChange={onChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useEnsuredControl","useExternRef","usePlatform","Platform","Headline","WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","platform","value","onChange","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","IOS","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AA+B3D;;CAEC,GACD,OAAO,IAAMC,WAAW,iBAYH;QAXnBC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,qBAAAA,aACAC,eAAAA,OACAC,oBAAAA,YACAC,gBAAAA,QACAC,wBAAAA,uCACAC,QAAAA,oCAAS,KAAK,kBACdC,sBAAAA,cACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWf;IAEjB,IAA0BF,sCAAAA,kBAAkB;QAC1Ce,cAAAA;OACGC,iBAFEE,QAAmBlB,uBAAZmB,WAAYnB;IAK1B,IAAMoB,cAAcnB,aAAaW;IACjC,IAAMS,sBAAsBxB,MAAMyB,MAAM;IAExC,IAAMC,SAAS1B,MAAM2B,WAAW,CAAC,WAAM;QACrC,IAAMC,aAAaL,YAAYM,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWlB,KAAK,CAACqB,MAAM,GAAG;YAC1BH,WAAWlB,KAAK,CAACqB,MAAM,GAAG,AAAC,GAA0B,OAAxBH,WAAWI,YAAY,EAAC;YAErD,IAAIJ,WAAWI,YAAY,KAAKR,oBAAoBK,OAAO,IAAIb,gBAAgB;gBAC7EA;gBACAQ,oBAAoBK,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAAChB;QAAgBO;KAAY;IAEhCvB,MAAMiC,SAAS,CAACP,QAAQ;QAACA;QAAQL;KAAM;IAEvC,qBACE,oBAACa;QACCC,KAAKrB;QACLL,WAAWR,2BAETmB,aAAad,SAAS8B,GAAG,yBACzBnB,kCACAR;QAEFC,OAAOA;qBAEP,oBAACwB;QAAIzB,SAAS;OACXP,aAAaS,yBAAW,oBAACuB;QAAIzB,SAAS;OAA+BE,uBAEtE,oBAACuB;QAAIzB,SAAS;qBACZ,oBAACF,kDACKY;QACJkB,WAAU;QACV5B,SAAS;QACTa,UAAUA;QACVR,YAAYS;QACZF,OAAOA;SAERnB,aAAaU,8BACZ,oBAACsB;QAAIzB,SAAS;OAAoCG,eAIrDV,aAAaW,wBAAU,oBAACqB;QAAIzB,SAAS;OAA8BI;AAI5E,EAAE"}
+{"version":3,"sources":["../../../src/components/WriteBar/WriteBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport { TypographyProps } from '../Typography/Typography';\nimport styles from './WriteBar.module.css';\n\nexport interface WriteBarProps\n  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLTextAreaElement> {\n  /**\n   * Содержимое, отображаемое слева от поля ввода.\n   */\n  before?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое поверх поля ввода (актуально для iOS)\n   */\n  inlineAfter?: React.ReactNode;\n  /**\n   * Содержимое, отображаемое справа от поля ввода\n   */\n  after?: React.ReactNode;\n  /**\n   * Вызывается при смене высоты поля ввода\n   */\n  onHeightChange?: VoidFunction;\n  /**\n   * Добавляет тень вокруг поля ввода\n   */\n  shadow?: boolean;\n\n  children?: never;\n}\n\nconst WriteBarTypography = (props: TypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === Platform.IOS) {\n    return <Title {...props} level=\"3\" weight=\"3\" />;\n  }\n\n  return <Headline {...props} />;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/WriteBar\n */\nexport const WriteBar = ({\n  className,\n  style,\n  before,\n  inlineAfter,\n  after,\n  getRootRef,\n  getRef,\n  onHeightChange,\n  shadow = false,\n  defaultValue,\n  ...restProps\n}: WriteBarProps) => {\n  const platform = usePlatform();\n\n  const [value, onChange] = useEnsuredControl({\n    defaultValue,\n    ...restProps,\n  });\n\n  const textareaRef = useExternRef(getRef);\n  const currentScrollHeight = React.useRef<number>();\n\n  const resize = React.useCallback(() => {\n    const textareaEl = textareaRef.current;\n    if (!textareaEl) {\n      return;\n    }\n\n    if (textareaEl.offsetParent) {\n      textareaEl.style.height = '';\n      textareaEl.style.height = `${textareaEl.scrollHeight}px`;\n\n      if (textareaEl.scrollHeight !== currentScrollHeight.current && onHeightChange) {\n        onHeightChange();\n        currentScrollHeight.current = textareaEl.scrollHeight;\n      }\n    }\n  }, [onHeightChange, textareaRef]);\n\n  React.useEffect(resize, [resize, value, platform]);\n\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(\n        styles['WriteBar'],\n        platform === Platform.IOS && styles['WriteBar--ios'],\n        shadow && styles['WriteBar--shadow'],\n        className,\n      )}\n      style={style}\n    >\n      <div className={styles['WriteBar__form']}>\n        {hasReactNode(before) && <div className={styles['WriteBar__before']}>{before}</div>}\n\n        <div className={styles['WriteBar__formIn']}>\n          <WriteBarTypography\n            {...restProps}\n            Component=\"textarea\"\n            className={styles['WriteBar__textarea']}\n            onChange={onChange}\n            getRootRef={textareaRef}\n            value={value}\n          />\n          {hasReactNode(inlineAfter) && (\n            <div className={styles['WriteBar__inlineAfter']}>{inlineAfter}</div>\n          )}\n        </div>\n\n        {hasReactNode(after) && <div className={styles['WriteBar__after']}>{after}</div>}\n      </div>\n    </div>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useEnsuredControl","useExternRef","usePlatform","Platform","Headline","Title","WriteBarTypography","props","platform","IOS","level","weight","WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","value","onChange","textareaRef","currentScrollHeight","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","Component"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAgClD,IAAMC,qBAAqB,SAACC,OAA2B;IACrD,IAAMC,WAAWN;IAEjB,IAAIM,aAAaL,SAASM,GAAG,EAAE;QAC7B,qBAAO,oBAACJ,+CAAUE;YAAOG,OAAM;YAAIC,QAAO;;IAC5C,CAAC;IAED,qBAAO,oBAACP,UAAaG;AACvB;AAEA;;CAEC,GACD,OAAO,IAAMK,WAAW,iBAYH;QAXnBC,mBAAAA,WACAC,eAAAA,OACAC,gBAAAA,QACAC,qBAAAA,aACAC,eAAAA,OACAC,oBAAAA,YACAC,gBAAAA,QACAC,wBAAAA,uCACAC,QAAAA,oCAAS,KAAK,kBACdC,sBAAAA,cACGC;QAVHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAMd,WAAWN;IAEjB,IAA0BF,sCAAAA,kBAAkB;QAC1CsB,cAAAA;OACGC,iBAFEC,QAAmBxB,uBAAZyB,WAAYzB;IAK1B,IAAM0B,cAAczB,aAAakB;IACjC,IAAMQ,sBAAsB9B,MAAM+B,MAAM;IAExC,IAAMC,SAAShC,MAAMiC,WAAW,CAAC,WAAM;QACrC,IAAMC,aAAaL,YAAYM,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWjB,KAAK,CAACoB,MAAM,GAAG;YAC1BH,WAAWjB,KAAK,CAACoB,MAAM,GAAG,AAAC,GAA0B,OAAxBH,WAAWI,YAAY,EAAC;YAErD,IAAIJ,WAAWI,YAAY,KAAKR,oBAAoBK,OAAO,IAAIZ,gBAAgB;gBAC7EA;gBACAO,oBAAoBK,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAACf;QAAgBM;KAAY;IAEhC7B,MAAMuC,SAAS,CAACP,QAAQ;QAACA;QAAQL;QAAOhB;KAAS;IAEjD,qBACE,oBAAC6B;QACCC,KAAKpB;QACLL,WAAWf,2BAETU,aAAaL,SAASM,GAAG,yBACzBY,kCACAR;QAEFC,OAAOA;qBAEP,oBAACuB;QAAIxB,SAAS;OACXd,aAAagB,yBAAW,oBAACsB;QAAIxB,SAAS;OAA+BE,uBAEtE,oBAACsB;QAAIxB,SAAS;qBACZ,oBAACP,4DACKiB;QACJgB,WAAU;QACV1B,SAAS;QACTY,UAAUA;QACVP,YAAYQ;QACZF,OAAOA;SAERzB,aAAaiB,8BACZ,oBAACqB;QAAIxB,SAAS;OAAoCG,eAIrDjB,aAAakB,wBAAU,oBAACoB;QAAIxB,SAAS;OAA8BI;AAI5E,EAAE"}