@vkontakte/vkui 5.4.1 → 5.4.3

package/dist/cjs/components/PanelHeader/PanelHeader.js

@@ -19,6 +19,7 @@ var _useAdaptivityConditionalRender = require("../../hooks/useAdaptivityConditio
 var _usePlatform = require("../../hooks/usePlatform");
 var _adaptivity = require("../../lib/adaptivity");
 var _platform = require("../../lib/platform");
+var _warnOnce = require("../../lib/warnOnce");
 var _configProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _fixedLayout = require("../FixedLayout/FixedLayout");
 var _modalRootContext = require("../ModalRoot/ModalRootContext");
@@ -35,24 +36,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 = (0, _usePlatform.usePlatform)();
-    return platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_text.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 = _objectWithoutProperties(typographyProps, [
+        "Component"
+    ]);
     var webviewType = (0, _configProviderContext.useConfigProvider)().webviewType;
     var isInsideModal = _react.useContext(_modalRootContext.ModalRootContext).isInsideModal;
     var platform = (0, _usePlatform.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.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_text.Text, _objectSpread({
+            weight: "2",
+            Component: Component
+        }, restProps), children) : /*#__PURE__*/ _react.createElement(Component, _objectSpread({
+            className: "vkuiPanelHeader__content-in"
+        }, restProps), children);
+    }
     return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_tooltipContainer.TooltipContainer, {
         fixed: true,
         className: "vkuiPanelHeader__in"
@@ -60,7 +64,7 @@ var PanelHeaderIn = function(param) {
         className: (0, _vkjs.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: (0, _vkjs.classNames)("vkuiPanelHeader__after", "vkuiInternalPanelHeader__after")
     }, (webviewType === _configProviderContext.WebviewType.INTERNAL || isInsideModal) && after)), separator && platform === _platform.Platform.VKCOM && /*#__PURE__*/ _react.createElement(_separator.Separator, {
         className: "vkuiPanelHeader__separator",
@@ -68,7 +72,7 @@ var PanelHeaderIn = function(param) {
     }));
 };
 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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_param, [
         "before",
         "children",
         "after",
@@ -79,7 +83,8 @@ var PanelHeader = function(_param) {
         "getRef",
         "getRootRef",
         "fixed",
-        "className"
+        "className",
+        "typographyProps"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var webviewType = (0, _configProviderContext.useConfigProvider)().webviewType;
@@ -88,7 +93,7 @@ var PanelHeader = function(_param) {
     var _useAdaptivityConditionalRender1 = (0, _useAdaptivityConditionalRender.useAdaptivityConditionalRender)(), adaptiveSizeX = _useAdaptivityConditionalRender1.sizeX;
     var isFixed = fixed !== undefined ? fixed : platform !== _platform.Platform.VKCOM;
     return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
-        className: (0, _vkjs.classNames)("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && (0, _vkjs.classNames)("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && (0, _vkjs.classNames)("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === _configProviderContext.WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && "vkuiPanelHeader--no-before", !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== _adaptivity.SizeType.COMPACT && sizeXClassNames[sizeX], className),
+        className: (0, _vkjs.classNames)("vkuiPanelHeader", "vkuiInternalPanelHeader", platformClassNames.hasOwnProperty(platform) ? platformClassNames[platform] : platformClassNames.android, transparent && "vkuiPanelHeader--trnsp", shadow && "vkuiPanelHeader--shadow", visor && (0, _vkjs.classNames)("vkuiPanelHeader--vis", "vkuiInternalPanelHeader--vis"), separator && visor && (0, _vkjs.classNames)("vkuiPanelHeader--sep", "vkuiInternalPanelHeader--sep"), webviewType === _configProviderContext.WebviewType.VKAPPS && !isInsideModal && "vkuiPanelHeader--vkapps", !before && (0, _vkjs.classNames)("vkuiPanelHeader--no-before", "vkuiInternalPanelHeader--no-before"), !after && "vkuiPanelHeader--no-after", isFixed && "vkuiPanelHeader--fixed", sizeX !== _adaptivity.SizeType.COMPACT && sizeXClassNames[sizeX], className),
         ref: isFixed ? getRootRef : getRef
     }), isFixed ? /*#__PURE__*/ _react.createElement(_fixedLayout.FixedLayout, {
         className: (0, _vkjs.classNames)("vkuiPanelHeader__fixed", "vkuiInternalPanelHeader__fixed"),
@@ -97,11 +102,13 @@ var PanelHeader = 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.Platform.VKCOM && /*#__PURE__*/ _react.createElement(_react.Fragment, null, adaptiveSizeX.compact && /*#__PURE__*/ _react.createElement(_separator.Separator, {
         className: adaptiveSizeX.compact.className
     }), adaptiveSizeX.regular && /*#__PURE__*/ _react.createElement(_spacing.Spacing, {
@@ -109,6 +116,26 @@ var PanelHeader = function(_param) {
         size: 16
     })));
 };
-PanelHeader.Content = PanelHeaderContent;
+var warn = (0, _warnOnce.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 = (0, _usePlatform.usePlatform)();
+    return platform === _platform.Platform.VKCOM ? /*#__PURE__*/ _react.createElement(_text.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/cjs/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":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderContent","children","Component","id","platform","usePlatform","Platform","VKCOM","Text","weight","className","displayName","PanelHeaderIn","before","after","separator","webviewType","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","Fragment","TooltipContainer","fixed","div","isValidElement","type","WebviewType","INTERNAL","Separator","wide","visor","transparent","shadow","getRef","getRootRef","restProps","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","SizeType","COMPACT","ref","FixedLayout","vertical","compact","Spacing","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":["PanelHeader","platformClassNames","ios","classNames","android","vkcom","sizeXClassNames","none","regular","PanelHeaderIn","before","after","separator","children","typographyProps","Component","restProps","webviewType","useConfigProvider","isInsideModal","React","useContext","ModalRootContext","platform","usePlatform","typographyNode","isValidElement","type","displayName","LegacyPanelHeaderContent","Platform","VKCOM","Text","weight","className","Fragment","TooltipContainer","fixed","div","WebviewType","INTERNAL","Separator","wide","visor","transparent","shadow","getRef","getRootRef","useAdaptivity","sizeX","useAdaptivityConditionalRender","adaptiveSizeX","isFixed","undefined","hasOwnProperty","VKAPPS","SizeType","COMPACT","ref","FixedLayout","vertical","compact","Spacing","size","warn","warnOnce","id","process","env","NODE_ENV","Content"],"mappings":"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"}

package/dist/cjs/components/TabsItem/TabsItem.js

@@ -22,6 +22,7 @@ var _tabs = require("../Tabs/Tabs");
 var _tappable = require("../Tappable/Tappable");
 var _headline = require("../Typography/Headline/Headline");
 var _subhead = require("../Typography/Subhead/Subhead");
+var _visuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var sizeYClassNames = _defineProperty({
     none: "vkuiTabsItem--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiTabsItem--sizeY-compact");
@@ -46,9 +47,9 @@ var TabsItem = function(_param) {
             Component: "span",
             className: (0, _vkjs.classNames)("vkuiTabsItem__status", "vkuiTabsItem__status--count"),
             weight: "2"
-        }, status) : /*#__PURE__*/ _react.createElement("span", {
+        }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, null, "\xa0"), status) : /*#__PURE__*/ _react.createElement("span", {
             className: "vkuiTabsItem__status"
-        }, status);
+        }, /*#__PURE__*/ _react.createElement(_visuallyHidden.VisuallyHidden, null, "\xa0"), status);
     }
     if (process.env.NODE_ENV === "development" && isTabFlow) {
         if (!restProps["aria-controls"]) {

package/dist/cjs/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":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;2DA/CU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;AAGxB,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW,iBAUH;QATnBO,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,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;WAENpB,wBAGH,qBAACqB;YAAKlB,SAAS;WAA+BH,OAC/C;IACL,CAAC;IAED,IAAIsB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBR,WAAW;QACvD,IAAI,CAACT,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,IAAIU,aAAaX,aAAaoB,WAAW;QACvCpB,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,qBAACwB,kBAAQ,uCACHnB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEc,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAAChB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACoC,OAAO,IAAItC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF4B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChB9B,MAAMA;QACN+B,iBAAejC;QACfG,UAAUA;QAETP,wBAAU,qBAACsC;QAAIjC,SAAS;OAA+BL,uBACxD,qBAACuC,kBAAQ;QACPnB,WAAU;QACVf,SAAS;QACTmC,OAAOzB,SAAS,YAAY,MAAM,GAAG;QACrCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACmC;QAAIjC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACuB;QAAIjC,SAAS;QAAiCoC,eAAAA,IAAW;QAACC,iBAAetC;;AAIlF"}
+{"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":["TabsItem","sizeYClassNames","none","SizeType","COMPACT","warn","warnOnce","before","children","status","after","selected","className","role","tabIndex","tabIndexProp","restProps","useAdaptivity","sizeY","React","useContext","TabsModeContext","mode","withGaps","statusComponent","isTabFlow","Subhead","Component","classNames","weight","VisuallyHidden","span","process","env","NODE_ENV","undefined","Tappable","default","accent","secondary","REGULAR","hoverMode","activeMode","focusVisibleMode","hasActive","aria-selected","div","Headline","level","aria-hidden","data-selected"],"mappings":";;;;+BAgDaA;;;eAAAA;;;;;;;;2DAhDU;oBACI;6BACG;0BACL;wBACA;oBACyB;wBACzB;wBACA;uBACD;8BACO;AAG/B,IAAMC;IACJC,IAAI;GACHC,oBAAQ,CAACC,OAAO;AA6BnB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMN,WAAW,iBAUH;QATnBO,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,IAA2BG,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAA6CC,oBAAAA,OAAMC,UAAU,CAACC,qBAAe,GAArEC,OAAqCH,kBAArCG,MAAMC,WAA+BJ,kBAA/BI;IACd,IAAIC,kBAAkB,IAAI;IAE1B,IAAMC,YAAYZ,SAAS;IAE3B,IAAIJ,QAAQ;QACVe,kBACE,OAAOf,WAAW,yBAChB,qBAACiB,gBAAO;YACNC,WAAU;YACVf,WAAWgB,IAAAA,gBAAU;YACrBC,QAAO;yBAEP,qBAACC,8BAAc,QAAC,SACfrB,wBAGH,qBAACsB;YAAKnB,SAAS;yBACb,qBAACkB,8BAAc,QAAC,SACfrB,OAEJ;IACL,CAAC;IAED,IAAIuB,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBT,WAAW;QACvD,IAAI,CAACT,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,IAAIU,aAAaX,aAAaqB,WAAW;QACvCrB,WAAWH,WAAW,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,qBACE,qBAACyB,kBAAQ,uCACHpB;QACJJ,WAAWgB,IAAAA,gBAAU,kBAEnBN,QACE,CAAA;YACEe,OAAO;YACPC,MAAM;YACNC,SAAS;QACX,CAAA,CAAC,CAACjB,KAAK,EACTX,sCACAO,UAAUf,oBAAQ,CAACqC,OAAO,IAAIvC,eAAe,CAACiB,MAAM,EACpDK,sCACAX;QAEF6B,SAAS;QACTC,YAAW;QACXC,kBAAiB;QACjBC,WAAW,KAAK;QAChB/B,MAAMA;QACNgC,iBAAelC;QACfG,UAAUA;QAETP,wBAAU,qBAACuC;QAAIlC,SAAS;OAA+BL,uBACxD,qBAACwC,kBAAQ;QACPpB,WAAU;QACVf,SAAS;QACToC,OAAO1B,SAAS,YAAY,MAAM,GAAG;QACrCO,QAAO;OAENrB,WAEFgB,iBACAd,uBAAS,qBAACoC;QAAIlC,SAAS;OAA8BF,QACrDY,SAAS,2BACR,qBAACwB;QAAIlC,SAAS;QAAiCqC,eAAAA,IAAW;QAACC,iBAAevC;;AAIlF"}

package/dist/cjs/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/cjs/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":["VisuallyHidden","Component","getRootRef","className","restProps","classNames","ref"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;;2DAlBU;oBACI;AAiBpB,IAAMA,iBAAiB,iBAKH;kCAJzBC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACF,gDACKG;QACJD,WAAWE,IAAAA,gBAAU,wBAA2BF;QAChDG,KAAKJ;;AAGX"}
+{"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":["VisuallyHidden","Component","getRootRef","className","restProps","classNames","ref"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;;;;2DAjBU;oBACI;AAgBpB,IAAMA,iBAAiB,iBAKH;kCAJzBC,WAAAA,0CAAY,2BACZC,oBAAAA,YACAC,mBAAAA,WACGC;QAHHH;QACAC;QACAC;;IAGA,qBACE,qBAACF,gDACKG;QACJD,WAAWE,IAAAA,gBAAU,wBAA2BF;QAChDG,KAAKJ;;AAGX"}

package/dist/cjs/components/WriteBar/WriteBar.js

@@ -20,6 +20,17 @@ var _useExternRef = require("../../hooks/useExternRef");
 var _usePlatform = require("../../hooks/usePlatform");
 var _platform = require("../../lib/platform");
 var _headline = require("../Typography/Headline/Headline");
+var _title = require("../Typography/Title/Title");
+var WriteBarTypography = function(props) {
+    var platform = (0, _usePlatform.usePlatform)();
+    if (platform === _platform.Platform.IOS) {
+        return /*#__PURE__*/ _react.createElement(_title.Title, _objectSpreadProps(_objectSpread({}, props), {
+            level: "3",
+            weight: "3"
+        }));
+    }
+    return /*#__PURE__*/ _react.createElement(_headline.Headline, props);
+};
 var WriteBar = function(_param) {
     var className = _param.className, style = _param.style, before = _param.before, inlineAfter = _param.inlineAfter, after = _param.after, getRootRef = _param.getRootRef, getRef = _param.getRef, onHeightChange = _param.onHeightChange, _param_shadow = _param.shadow, shadow = _param_shadow === void 0 ? false : _param_shadow, defaultValue = _param.defaultValue, restProps = _objectWithoutProperties(_param, [
         "className",
@@ -58,7 +69,8 @@ var WriteBar = function(_param) {
     ]);
     _react.useEffect(resize, [
         resize,
-        value
+        value,
+        platform
     ]);
     return /*#__PURE__*/ _react.createElement("div", {
         ref: getRootRef,
@@ -70,7 +82,7 @@ var WriteBar = function(_param) {
         className: "vkuiWriteBar__before"
     }, before), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiWriteBar__formIn"
-    }, /*#__PURE__*/ _react.createElement(_headline.Headline, _objectSpreadProps(_objectSpread({}, restProps), {
+    }, /*#__PURE__*/ _react.createElement(WriteBarTypography, _objectSpreadProps(_objectSpread({}, restProps), {
         Component: "textarea",
         className: "vkuiWriteBar__textarea",
         onChange: onChange,

package/dist/cjs/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":["WriteBar","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","platform","usePlatform","useEnsuredControl","value","onChange","textareaRef","useExternRef","currentScrollHeight","React","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","classNames","Platform","IOS","hasReactNode","Headline","Component"],"mappings":";;;;+BAyCaA;;;eAAAA;;;;;;;;2DAzCU;oBACkB;iCACP;4BACL;2BACD;wBACH;wBAEA;AAkClB,IAAMA,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,WAAWC,IAAAA,wBAAW;IAE5B,IAA0BC,qCAAAA,IAAAA,oCAAiB,EAAC;QAC1CJ,cAAAA;OACGC,iBAFEI,QAAmBD,wBAAZE,WAAYF;IAK1B,IAAMG,cAAcC,IAAAA,0BAAY,EAACX;IACjC,IAAMY,sBAAsBC,OAAMC,MAAM;IAExC,IAAMC,SAASF,OAAMG,WAAW,CAAC,WAAM;QACrC,IAAMC,aAAaP,YAAYQ,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWtB,KAAK,CAACyB,MAAM,GAAG;YAC1BH,WAAWtB,KAAK,CAACyB,MAAM,GAAG,AAAC,GAA0B,OAAxBH,WAAWI,YAAY,EAAC;YAErD,IAAIJ,WAAWI,YAAY,KAAKT,oBAAoBM,OAAO,IAAIjB,gBAAgB;gBAC7EA;gBACAW,oBAAoBM,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAACpB;QAAgBS;KAAY;IAEhCG,OAAMS,SAAS,CAACP,QAAQ;QAACA;QAAQP;KAAM;IAEvC,qBACE,qBAACe;QACCC,KAAKzB;QACLL,WAAW+B,IAAAA,gBAAU,kBAEnBpB,aAAaqB,kBAAQ,CAACC,GAAG,yBACzBzB,kCACAR;QAEFC,OAAOA;qBAEP,qBAAC4B;QAAI7B,SAAS;OACXkC,IAAAA,kBAAY,EAAChC,yBAAW,qBAAC2B;QAAI7B,SAAS;OAA+BE,uBAEtE,qBAAC2B;QAAI7B,SAAS;qBACZ,qBAACmC,kBAAQ,uCACHzB;QACJ0B,WAAU;QACVpC,SAAS;QACTe,UAAUA;QACVV,YAAYW;QACZF,OAAOA;SAERoB,IAAAA,kBAAY,EAAC/B,8BACZ,qBAAC0B;QAAI7B,SAAS;OAAoCG,eAIrD+B,IAAAA,kBAAY,EAAC9B,wBAAU,qBAACyB;QAAI7B,SAAS;OAA8BI;AAI5E"}
+{"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":["WriteBar","WriteBarTypography","props","platform","usePlatform","Platform","IOS","Title","level","weight","Headline","className","style","before","inlineAfter","after","getRootRef","getRef","onHeightChange","shadow","defaultValue","restProps","useEnsuredControl","value","onChange","textareaRef","useExternRef","currentScrollHeight","React","useRef","resize","useCallback","textareaEl","current","offsetParent","height","scrollHeight","useEffect","div","ref","classNames","hasReactNode","Component"],"mappings":";;;;+BAqDaA;;;eAAAA;;;;;;;;2DArDU;oBACkB;iCACP;4BACL;2BACD;wBACH;wBAEA;qBACH;AAgCtB,IAAMC,qBAAqB,SAACC,OAA2B;IACrD,IAAMC,WAAWC,IAAAA,wBAAW;IAE5B,IAAID,aAAaE,kBAAQ,CAACC,GAAG,EAAE;QAC7B,qBAAO,qBAACC,YAAK,uCAAKL;YAAOM,OAAM;YAAIC,QAAO;;IAC5C,CAAC;IAED,qBAAO,qBAACC,kBAAQ,EAAKR;AACvB;AAKO,IAAMF,WAAW,iBAYH;QAXnBW,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,IAAMjB,WAAWC,IAAAA,wBAAW;IAE5B,IAA0BkB,qCAAAA,IAAAA,oCAAiB,EAAC;QAC1CF,cAAAA;OACGC,iBAFEE,QAAmBD,wBAAZE,WAAYF;IAK1B,IAAMG,cAAcC,IAAAA,0BAAY,EAACT;IACjC,IAAMU,sBAAsBC,OAAMC,MAAM;IAExC,IAAMC,SAASF,OAAMG,WAAW,CAAC,WAAM;QACrC,IAAMC,aAAaP,YAAYQ,OAAO;QACtC,IAAI,CAACD,YAAY;YACf;QACF,CAAC;QAED,IAAIA,WAAWE,YAAY,EAAE;YAC3BF,WAAWpB,KAAK,CAACuB,MAAM,GAAG;YAC1BH,WAAWpB,KAAK,CAACuB,MAAM,GAAG,AAAC,GAA0B,OAAxBH,WAAWI,YAAY,EAAC;YAErD,IAAIJ,WAAWI,YAAY,KAAKT,oBAAoBM,OAAO,IAAIf,gBAAgB;gBAC7EA;gBACAS,oBAAoBM,OAAO,GAAGD,WAAWI,YAAY;YACvD,CAAC;QACH,CAAC;IACH,GAAG;QAAClB;QAAgBO;KAAY;IAEhCG,OAAMS,SAAS,CAACP,QAAQ;QAACA;QAAQP;QAAOpB;KAAS;IAEjD,qBACE,qBAACmC;QACCC,KAAKvB;QACLL,WAAW6B,IAAAA,gBAAU,kBAEnBrC,aAAaE,kBAAQ,CAACC,GAAG,yBACzBa,kCACAR;QAEFC,OAAOA;qBAEP,qBAAC0B;QAAI3B,SAAS;OACX8B,IAAAA,kBAAY,EAAC5B,yBAAW,qBAACyB;QAAI3B,SAAS;OAA+BE,uBAEtE,qBAACyB;QAAI3B,SAAS;qBACZ,qBAACV,yDACKoB;QACJqB,WAAU;QACV/B,SAAS;QACTa,UAAUA;QACVR,YAAYS;QACZF,OAAOA;SAERkB,IAAAA,kBAAY,EAAC3B,8BACZ,qBAACwB;QAAI3B,SAAS;OAAoCG,eAIrD2B,IAAAA,kBAAY,EAAC1B,wBAAU,qBAACuB;QAAI3B,SAAS;OAA8BI;AAI5E"}

package/dist/cjs/hooks/useTodayDate.js

@@ -12,25 +12,48 @@ var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.
 var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
 var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 var _date = require("../lib/date");
+var _dom = require("../lib/dom");
 function useTodayDate() {
     var listenDayChangesForUpdate = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : false;
+    var _useDOM = (0, _dom.useDOM)(), document = _useDOM.document, window = _useDOM.window;
     var _React_useState = _slicedToArray(_react.default.useState(function() {
         return new Date();
     }), 2), todayDate = _React_useState[0], setTodayDate = _React_useState[1];
     _react.default.useEffect(function() {
-        if (!listenDayChangesForUpdate) {
+        if (!listenDayChangesForUpdate || !document || !window) {
             return;
         }
-        var timeToDayChange = (0, _date.getMillisecondsToTomorrow)(todayDate);
-        var timeout = setTimeout(function() {
-            setTodayDate(new Date());
-        }, timeToDayChange);
+        var timeout = undefined;
+        var recalcTimeout = function() {
+            if (document.visibilityState === "visible") {
+                var now = new Date();
+                var timeToDayChange = (0, _date.getMillisecondsToTomorrow)(now);
+                // Удаляем старый таймаут
+                window.clearTimeout(timeout);
+                // Создаем новый таймаут
+                timeout = window.setTimeout(function() {
+                    setTodayDate(now);
+                }, timeToDayChange);
+                // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
+                if (!(0, _date.isSameDay)(todayDate, now)) {
+                    setTodayDate(now);
+                }
+            }
+        };
+        recalcTimeout();
+        // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки
+        // Если человек ее долго не трогал или закрывал крышку ноута и тп
+        // https://developer.chrome.com/blog/page-lifecycle-api/
+        document.addEventListener("visibilitychange", recalcTimeout);
         return function() {
-            clearTimeout(timeout);
+            window.clearTimeout(timeout);
+            document.removeEventListener("visibilitychange", recalcTimeout);
         };
     }, [
+        document,
         listenDayChangesForUpdate,
-        todayDate
+        todayDate,
+        window
     ]);
     return todayDate;
 }

package/dist/cjs/hooks/useTodayDate.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow } from '../lib/date';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate) {\n      return;\n    }\n\n    const timeToDayChange = getMillisecondsToTomorrow(todayDate);\n\n    const timeout = setTimeout(() => {\n      setTodayDate(new Date());\n    }, timeToDayChange);\n\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [listenDayChangesForUpdate, todayDate]);\n\n  return todayDate;\n}\n"],"names":["useTodayDate","listenDayChangesForUpdate","React","useState","Date","todayDate","setTodayDate","useEffect","timeToDayChange","getMillisecondsToTomorrow","timeout","setTimeout","clearTimeout"],"mappings":";;;;+BAYgBA;;;eAAAA;;;;;0DAZE;oBACwB;AAWnC,SAASA,eAAgD;QAAnCC,4BAAAA,iEAA4B,KAAK;IAC5D,IAAkCC,iCAAAA,cAAK,CAACC,QAAQ,CAAC;eAAM,IAAIC;YAApDC,YAA2BH,oBAAhBI,eAAgBJ;IAElCA,cAAK,CAACK,SAAS,CAAC,WAAM;QACpB,IAAI,CAACN,2BAA2B;YAC9B;QACF,CAAC;QAED,IAAMO,kBAAkBC,IAAAA,+BAAyB,EAACJ;QAElD,IAAMK,UAAUC,WAAW,WAAM;YAC/BL,aAAa,IAAIF;QACnB,GAAGI;QAEH,OAAO,WAAM;YACXI,aAAaF;QACf;IACF,GAAG;QAACT;QAA2BI;KAAU;IAEzC,OAAOA;AACT"}
+{"version":3,"sources":["../../../src/hooks/useTodayDate.ts"],"sourcesContent":["import React from 'react';\nimport { getMillisecondsToTomorrow, isSameDay } from '../lib/date';\nimport { useDOM } from '../lib/dom';\n\n/**\n * Опционально обновляемая дата сегодняшнего дня\n *\n * Дата - сегодня (в соответствии с системным временем)\n *\n * Часы, минуты, секунды, миллисекунды - произвольные\n *\n * @param listenDayChangesForUpdate - флаг по которому определяется, будет ли создаваться подписка на смену календарного дня\n */\nexport function useTodayDate(listenDayChangesForUpdate = false) {\n  const { document, window } = useDOM();\n  const [todayDate, setTodayDate] = React.useState(() => new Date());\n\n  React.useEffect(() => {\n    if (!listenDayChangesForUpdate || !document || !window) {\n      return;\n    }\n\n    let timeout: number | undefined = undefined;\n\n    const recalcTimeout = () => {\n      if (document.visibilityState === 'visible') {\n        const now = new Date();\n\n        const timeToDayChange = getMillisecondsToTomorrow(now);\n\n        // Удаляем старый таймаут\n        window.clearTimeout(timeout);\n\n        // Создаем новый таймаут\n        timeout = window.setTimeout(() => {\n          setTodayDate(now);\n        }, timeToDayChange);\n\n        // Если todayDate не обновился в таймаут - обновить при заходе на вкладку\n        if (!isSameDay(todayDate, now)) {\n          setTodayDate(now);\n        }\n      }\n    };\n\n    recalcTimeout();\n\n    // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки\n    // Если человек ее долго не трогал или закрывал крышку ноута и тп\n    // https://developer.chrome.com/blog/page-lifecycle-api/\n    document.addEventListener('visibilitychange', recalcTimeout);\n\n    return () => {\n      window.clearTimeout(timeout);\n      document.removeEventListener('visibilitychange', recalcTimeout);\n    };\n  }, [document, listenDayChangesForUpdate, todayDate, window]);\n\n  return todayDate;\n}\n"],"names":["useTodayDate","listenDayChangesForUpdate","useDOM","document","window","React","useState","Date","todayDate","setTodayDate","useEffect","timeout","undefined","recalcTimeout","visibilityState","now","timeToDayChange","getMillisecondsToTomorrow","clearTimeout","setTimeout","isSameDay","addEventListener","removeEventListener"],"mappings":";;;;+BAagBA;;;eAAAA;;;;;0DAbE;oBACmC;mBAC9B;AAWhB,SAASA,eAAgD;QAAnCC,4BAAAA,iEAA4B,KAAK;IAC5D,IAA6BC,UAAAA,IAAAA,WAAM,KAA3BC,WAAqBD,QAArBC,UAAUC,SAAWF,QAAXE;IAClB,IAAkCC,iCAAAA,cAAK,CAACC,QAAQ,CAAC;eAAM,IAAIC;YAApDC,YAA2BH,oBAAhBI,eAAgBJ;IAElCA,cAAK,CAACK,SAAS,CAAC,WAAM;QACpB,IAAI,CAACT,6BAA6B,CAACE,YAAY,CAACC,QAAQ;YACtD;QACF,CAAC;QAED,IAAIO,UAA8BC;QAElC,IAAMC,gBAAgB,WAAM;YAC1B,IAAIV,SAASW,eAAe,KAAK,WAAW;gBAC1C,IAAMC,MAAM,IAAIR;gBAEhB,IAAMS,kBAAkBC,IAAAA,+BAAyB,EAACF;gBAElD,yBAAyB;gBACzBX,OAAOc,YAAY,CAACP;gBAEpB,wBAAwB;gBACxBA,UAAUP,OAAOe,UAAU,CAAC,WAAM;oBAChCV,aAAaM;gBACf,GAAGC;gBAEH,yEAAyE;gBACzE,IAAI,CAACI,IAAAA,eAAS,EAACZ,WAAWO,MAAM;oBAC9BN,aAAaM;gBACf,CAAC;YACH,CAAC;QACH;QAEAF;QAEA,4GAA4G;QAC5G,iEAAiE;QACjE,wDAAwD;QACxDV,SAASkB,gBAAgB,CAAC,oBAAoBR;QAE9C,OAAO,WAAM;YACXT,OAAOc,YAAY,CAACP;YACpBR,SAASmB,mBAAmB,CAAC,oBAAoBT;QACnD;IACF,GAAG;QAACV;QAAUF;QAA2BO;QAAWJ;KAAO;IAE3D,OAAOI;AACT"}

package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js

@@ -5,7 +5,7 @@ export var ActionSheetDefaultIosCloseItem = function(props) {
     return /*#__PURE__*/ React.createElement(ActionSheetItem, _object_spread({
         autoClose: true,
         mode: "cancel"
-    }, props), "Отменить");
+    }, props), "Отмена");
 };
 
 //# sourceMappingURL=ActionSheetDefaultIosCloseItem.js.map

package/dist/components/ActionSheet/ActionSheetDefaultIosCloseItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отменить\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,IAAMC,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,oBAACF;QAAgBG,WAAAA,IAAS;QAACC,MAAK;OAAaF,QAAO;AAIxD,EAAE"}
+{"version":3,"sources":["../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,IAAMC,iCAAiC,SAACC,OAAgC;IAC7E,qBACE,oBAACF;QAAgBG,WAAAA,IAAS;QAACC,MAAK;OAAaF,QAAO;AAIxD,EAAE"}

package/dist/components/ActionSheetItem/ActionSheetItem.js

@@ -12,6 +12,7 @@ import { ActionSheetContext } from "../ActionSheet/ActionSheetContext";
 import { Tappable } from "../Tappable/Tappable";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Text } from "../Typography/Text/Text";
+import { Title } from "../Typography/Title/Title";
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */ var ActionSheetItem = function(_param) {
@@ -51,15 +52,18 @@ import { Text } from "../Typography/Text/Text";
     }, restProps), {
         onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
         activeMode: platform === Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
-        className: classNames("vkuiActionSheetItem", platform === Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", className)
+        className: classNames("vkuiActionSheetItem", platform === Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", selectable && "vkuiActionSheetItem--selectable", className)
     }), before && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiActionSheetItem__before"
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiActionSheetItem__container", !multiline && "vkuiActionSheetItem--ellipsis")
     }, /*#__PURE__*/ React.createElement("div", {
         className: classNames("vkuiActionSheetItem__content", isCentered && "vkuiActionSheetItem--centered")
-    }, /*#__PURE__*/ React.createElement(Text, {
-        weight: mode === "cancel" ? "2" : undefined,
+    }, platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Title, {
+        className: "vkuiActionSheetItem__children",
+        weight: mode === "cancel" ? "2" : "3",
+        level: isCentered ? "2" : "3"
+    }, children) : /*#__PURE__*/ React.createElement(Text, {
         className: "vkuiActionSheetItem__children"
     }, children), meta && /*#__PURE__*/ React.createElement(Text, {
         className: "vkuiActionSheetItem__meta"

package/dist/components/ActionSheetItem/ActionSheetItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          <Text\n            weight={mode === 'cancel' ? '2' : undefined}\n            className={styles['ActionSheetItem__children']}\n          >\n            {children}\n          </Text>\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","useContext","onItemClick","isDesktop","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","input","type","disabled"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,kBAAkB,QAAqC,oCAAoC;AACpG,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AA+B/C;;CAEC,GACD,IAAMC,kBAAkB,iBAmBI;QAlB1BC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,KAAK,qBACjBC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAW3B;IACjB,IACEN,oBAAAA,MAAMkC,UAAU,CAAsCzB,qDAAtDT,kBADMmC,aAAAA,yDAAc;eAAM/B;uCAAMgC,YAChCpC,kBADgCoC;IAElC,IAAM,AAAEC,QAAUhC,kCAAVgC;IAER,IAAMR,cACJC,mBACCO,CAAAA,UAAU9B,SAAS+B,OAAO,iBAAG,oBAACrC,2CAAyB,oBAACC,0BAAsB,AAAD;IAEhF,IAAIqC,YAA+BP,UAAUQ,IAAI,GAAG,MAAM,KAAK;IAE/D,IAAIpB,YAAY;QACdmB,YAAY;IACd,CAAC;IAED,IAAME,SAASvB,YAAYD,QAAQG;IACnC,IAAMsB,aAAa,CAACD,UAAU,CAACtB,UAAUc,aAAazB,SAASmC,GAAG;IAElE,qBACE,oBAACjC;QACC6B,WAAWA;OACPP;QACJN,SAASN,aAAaM,UAAUS,YAAYT,SAASC,kBAAkBiB,QAAQ7B,WAAW;QAC1F8B,YAAYZ,aAAazB,SAASmC,GAAG,mCAAuCG,SAAS;QACrFf,WAAW5B,kCAET8B,aAAazB,SAASmC,GAAG,gCACzB3B,SAAS,gDACTA,SAAS,0DACTqB,UAAU9B,SAAS+B,OAAO,0CAC1BG,uCACAL,6CACAL;QAGDZ,wBAAU,oBAAC4B;QAAIhB,SAAS;OAAsCZ,uBAC/D,oBAAC4B;QACChB,WAAW5B,6CAET,CAACyB;qBAGH,oBAACmB;QACChB,WAAW5B,2CAETuC;qBAGF,oBAAC9B;QACCoC,QAAQhC,SAAS,WAAW,MAAM8B,SAAS;QAC3Cf,SAAS;OAERjB,WAEFG,sBAAQ,oBAACL;QAAKmB,SAAS;OAAoCd,QAE7DC,0BAAY,oBAACP;QAAQoB,SAAS;OAAwCb,YAExEE,4BACC,oBAAC2B;QAAIhB,SAAS;qBACZ,oBAACkB;QACCC,MAAK;QACLnB,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASS,YAAY/B,MAAMA,MAAMwC,QAAQ7B;QACzCS,gBAAgBA;QAChBD,SAASA;QACT4B,UAAUnB,UAAUmB,QAAQ;sBAE9B,oBAACJ;QAAIhB,SAAS;OAAsCF;AAK9D;AAEA,SAAShB,eAAe,GAAG"}
+{"version":3,"sources":["../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","useContext","onItemClick","isDesktop","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"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"}

package/dist/components/Banner/Banner.js

@@ -44,14 +44,14 @@ import { Title } from "../Typography/Title/Title";
     }, before), /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__content"
     }, hasReactNode(header) && /*#__PURE__*/ React.createElement(HeaderTypography, {
-        Component: "span",
-        className: "vkuiBanner__header",
+        Component: "p",
         weight: "2",
         level: size === "m" ? "2" : "1"
     }, header), hasReactNode(subheader) && /*#__PURE__*/ React.createElement(SubheaderTypography, {
-        Component: "span",
+        Component: "p",
         className: "vkuiBanner__subheader"
     }, subheader), hasReactNode(text) && /*#__PURE__*/ React.createElement(Text, {
+        Component: "p",
         className: "vkuiBanner__text"
     }, text), hasReactNode(actions) && React.Children.count(actions) > 0 && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiBanner__actions"