@vkontakte/vkui 5.4.0 → 5.4.2

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;
@@ -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 && 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\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/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":";;;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;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AA+BlD;;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,WAAW5B;IACjB,IACEN,oBAAAA,MAAMmC,UAAU,CAAsC1B,qDAAtDT,kBADMoC,aAAAA,yDAAc;eAAMhC;uCAAMiC,YAChCrC,kBADgCqC;IAElC,IAAM,AAAEC,QAAUjC,kCAAViC;IAER,IAAMR,cACJC,mBACCO,CAAAA,UAAU/B,SAASgC,OAAO,iBAAG,oBAACtC,2CAAyB,oBAACC,0BAAsB,AAAD;IAEhF,IAAIsC,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,aAAa1B,SAASoC,GAAG;IAElE,qBACE,oBAAClC;QACC8B,WAAWA;OACPP;QACJN,SAASN,aAAaM,UAAUS,YAAYT,SAASC,kBAAkBiB,QAAQ7B,WAAW;QAC1F8B,YAAYZ,aAAa1B,SAASoC,GAAG,mCAAuCG,SAAS;QACrFf,WAAW7B,kCAET+B,aAAa1B,SAASoC,GAAG,gCACzB3B,SAAS,gDACTA,SAAS,0DACTqB,UAAU/B,SAASgC,OAAO,0CAC1BG,uCACAL,6CACAhB,iDACAW;QAGDZ,wBAAU,oBAAC4B;QAAIhB,SAAS;OAAsCZ,uBAC/D,oBAAC4B;QACChB,WAAW7B,6CAET,CAAC0B;qBAGH,oBAACmB;QACChB,WAAW7B,2CAETwC;OAGDT,aAAa1B,SAASoC,GAAG,iBACxB,oBAAC/B;QACCmB,SAAS;QACTiB,QAAQhC,SAAS,WAAW,MAAM,GAAG;QACrCiC,OAAOP,aAAa,MAAM,GAAG;OAE5B5B,0BAGH,oBAACH;QAAKoB,SAAS;OAAwCjB,SACxD,EACAG,sBAAQ,oBAACN;QAAKoB,SAAS;OAAoCd,QAE7DC,0BAAY,oBAACR;QAAQqB,SAAS;OAAwCb,YAExEE,4BACC,oBAAC2B;QAAIhB,SAAS;qBACZ,oBAACmB;QACCC,MAAK;QACLpB,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASS,YAAYhC,MAAMA,MAAMyC,QAAQ7B;QACzCS,gBAAgBA;QAChBD,SAASA;QACT6B,UAAUpB,UAAUoB,QAAQ;sBAE9B,oBAACL;QAAIhB,SAAS;OAAsCF;AAK9D;AAEA,SAAShB,eAAe,GAAG"}

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"

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <React.Fragment>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography\n            Component=\"span\"\n            className={styles['Banner__header']}\n            weight=\"2\"\n            level={size === 'm' ? '2' : '1'}\n          >\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"span\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && <Text className={styles['Banner__text']}>{text}</Text>}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </React.Fragment>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","Fragment","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAyElD;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH,QAAQ;IACxD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD,OAAO;IAEzD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC,sBAAsB;IAEpF,IAAMgC,wBACJ,oBAACpC,MAAMqC,QAAQ,QACZrB,SAAS,WAAWS,4BACnB,oBAACa;QAAIC,eAAAA,IAAW;QAACV,SAAS;OACvBJ,aAIJN,wBAAU,oBAACmB;QAAIT,SAAS;OAA6BV,uBAEtD,oBAACmB;QAAIT,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QACCO,WAAU;QACVX,SAAS;QACTY,QAAO;QACPC,OAAOxB,SAAS,MAAM,MAAM,GAAG;OAE9BG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBM,WAAU;QAAOX,SAAS;OAC5CP,YAGJhB,aAAaiB,uBAAS,oBAACV;QAAKgB,SAAS;OAA2BN,OAChEjB,aAAaoB,YAAY1B,MAAM2C,QAAQ,CAACC,KAAK,CAAClB,WAAW,mBACxD,oBAACY;QAAIT,SAAS;OAA8BH;IAMpD,qBACE,oBAACmB,mDACKd;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASsC,GAAG,uBACzB9B,SAAS,qCACT;YACE+B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC9B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFoB,KAAKnB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACTqB,YAAYlB,aAAaxB,SAASsC,GAAG,GAAG,YAAY,YAAY;QAChEK,MAAK;OAEJf,uBAED,oBAACE;QAAIT,SAAS;qBACZ,oBAAC3B,uCAIL,oBAACoC;QAAIT,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACkB;QAAIT,SAAS;qBACZ,oBAACpB;QACC2C,cAAYxB;QACZC,SAAS;QACTwB,SAAS1B;QACT2B,WAAU;QACVC,WAAW,KAAK;OAEfvB,aAAaxB,SAASsC,GAAG,iBAAG,oBAACX,sCAAoB,oBAAClC,mBAAe,GAK3E;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon24Cancel,\n  Icon24Chevron,\n  Icon24DismissDark,\n  Icon24DismissSubstract,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { HasRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Banner.module.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button).\n   *\n   * - В режиме `tint` или `image` со светлым фоном используйте только с параметрами:\n   *    - `mode=\"primary\"`\n   *    - `mode=\"secondary\"`\n   * - В режиме `image` с тёмным фоном используйте с параметрами:\n   *    - `appearance=\"overlay\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"m\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Banner\n */\nexport const Banner = ({\n  mode = 'tint',\n  imageTheme = 'dark',\n  size = 's',\n  before,\n  asideMode,\n  header,\n  subheader,\n  text,\n  children,\n  background,\n  actions,\n  onDismiss,\n  dismissLabel = 'Скрыть',\n  className,\n  getRootRef,\n  ...restProps\n}: BannerProps) => {\n  const platform = usePlatform();\n\n  const HeaderTypography = size === 'm' ? Title : Headline;\n  const SubheaderTypography = size === 'm' ? Text : Subhead;\n\n  const IconDismissIOS = mode === 'image' ? Icon24DismissDark : Icon24DismissSubstract;\n\n  const content = (\n    <>\n      {mode === 'image' && background && (\n        <div aria-hidden className={styles['Banner__bg']}>\n          {background}\n        </div>\n      )}\n\n      {before && <div className={styles['Banner__before']}>{before}</div>}\n\n      <div className={styles['Banner__content']}>\n        {hasReactNode(header) && (\n          <HeaderTypography Component=\"p\" weight=\"2\" level={size === 'm' ? '2' : '1'}>\n            {header}\n          </HeaderTypography>\n        )}\n        {hasReactNode(subheader) && (\n          <SubheaderTypography Component=\"p\" className={styles['Banner__subheader']}>\n            {subheader}\n          </SubheaderTypography>\n        )}\n        {hasReactNode(text) && (\n          <Text Component=\"p\" className={styles['Banner__text']}>\n            {text}\n          </Text>\n        )}\n        {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n          <div className={styles['Banner__actions']}>{actions}</div>\n        )}\n      </div>\n    </>\n  );\n\n  return (\n    <section\n      {...restProps}\n      className={classNames(\n        styles['Banner'],\n        platform === Platform.IOS && styles['Banner--ios'],\n        mode === 'image' && styles['Banner--mode-image'],\n        {\n          s: styles['Banner--size-s'],\n          m: styles['Banner--size-m'],\n        }[size],\n        mode === 'image' && imageTheme === 'dark' && styles['Banner--inverted'],\n        className,\n      )}\n      ref={getRootRef}\n    >\n      {asideMode === 'expand' ? (\n        <Tappable\n          className={styles['Banner__in']}\n          activeMode={platform === Platform.IOS ? 'opacity' : 'background'}\n          role=\"button\"\n        >\n          {content}\n\n          <div className={styles['Banner__aside']}>\n            <Icon24Chevron />\n          </div>\n        </Tappable>\n      ) : (\n        <div className={styles['Banner__in']}>\n          {content}\n\n          {asideMode === 'dismiss' && (\n            <div className={styles['Banner__aside']}>\n              <IconButton\n                aria-label={dismissLabel}\n                className={styles['Banner__dismiss']}\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {platform === Platform.IOS ? <IconDismissIOS /> : <Icon24Cancel />}\n              </IconButton>\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n"],"names":["React","Icon24Cancel","Icon24Chevron","Icon24DismissDark","Icon24DismissSubstract","classNames","hasReactNode","usePlatform","Platform","IconButton","Tappable","Headline","Subhead","Text","Title","Banner","mode","imageTheme","size","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","className","getRootRef","restProps","platform","HeaderTypography","SubheaderTypography","IconDismissIOS","content","div","aria-hidden","Component","weight","level","Children","count","section","IOS","s","m","ref","activeMode","role","aria-label","onClick","hoverMode","hasActive"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,YAAY,EACZC,aAAa,EACbC,iBAAiB,EACjBC,sBAAsB,QACjB,mBAAmB;AAC1B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,UAAU,QAAQ,2BAA2B;AACtD,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,KAAK,QAAQ,4BAA4B;AAyElD;;CAEC,GACD,OAAO,IAAMC,SAAS,iBAiBH;6BAhBjBC,MAAAA,gCAAO,iDACPC,YAAAA,4CAAa,iDACbC,MAAAA,gCAAO,mBACPC,gBAAAA,QACAC,mBAAAA,WACAC,gBAAAA,QACAC,mBAAAA,WACAC,cAAAA,MACAC,kBAAAA,UACAC,oBAAAA,YACAC,iBAAAA,SACAC,mBAAAA,wCACAC,cAAAA,gDAAe,gCACfC,mBAAAA,WACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWzB;IAEjB,IAAM0B,mBAAmBf,SAAS,MAAMJ,QAAQH,QAAQ;IACxD,IAAMuB,sBAAsBhB,SAAS,MAAML,OAAOD,OAAO;IAEzD,IAAMuB,iBAAiBnB,SAAS,UAAUb,oBAAoBC,sBAAsB;IAEpF,IAAMgC,wBACJ,0CACGpB,SAAS,WAAWS,4BACnB,oBAACY;QAAIC,eAAAA,IAAW;QAACT,SAAS;OACvBJ,aAIJN,wBAAU,oBAACkB;QAAIR,SAAS;OAA6BV,uBAEtD,oBAACkB;QAAIR,SAAS;OACXvB,aAAae,yBACZ,oBAACY;QAAiBM,WAAU;QAAIC,QAAO;QAAIC,OAAOvB,SAAS,MAAM,MAAM,GAAG;OACvEG,SAGJf,aAAagB,4BACZ,oBAACY;QAAoBK,WAAU;QAAIV,SAAS;OACzCP,YAGJhB,aAAaiB,uBACZ,oBAACV;QAAK0B,WAAU;QAAIV,SAAS;OAC1BN,OAGJjB,aAAaoB,YAAY1B,MAAM0C,QAAQ,CAACC,KAAK,CAACjB,WAAW,mBACxD,oBAACW;QAAIR,SAAS;OAA8BH;IAMpD,qBACE,oBAACkB,mDACKb;QACJF,WAAWxB,yBAET2B,aAAaxB,SAASqC,GAAG,uBACzB7B,SAAS,qCACT;YACE8B,CAAC;YACDC,CAAC;QACH,CAAC,CAAC7B,KAAK,EACPF,SAAS,WAAWC,eAAe,kCACnCY;QAEFmB,KAAKlB;QAEJV,cAAc,yBACb,oBAACV;QACCmB,SAAS;QACToB,YAAYjB,aAAaxB,SAASqC,GAAG,GAAG,YAAY,YAAY;QAChEK,MAAK;OAEJd,uBAED,oBAACC;QAAIR,SAAS;qBACZ,oBAAC3B,uCAIL,oBAACmC;QAAIR,SAAS;OACXO,SAEAhB,cAAc,2BACb,oBAACiB;QAAIR,SAAS;qBACZ,oBAACpB;QACC0C,cAAYvB;QACZC,SAAS;QACTuB,SAASzB;QACT0B,WAAU;QACVC,WAAW,KAAK;OAEftB,aAAaxB,SAASqC,GAAG,iBAAG,oBAACV,sCAAoB,oBAAClC,mBAAe,GAK3E;AAGP,EAAE"}

package/dist/components/Cell/CellDragger/CellDragger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { DraggableProps } from '../useDraggable';
-type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
-export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, className, ...restProps }: CellDraggerProps) => JSX.Element;
+type CellDraggerProps = DraggableProps & Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;
+export declare const CellDragger: ({ onDragStart, onDragMove, onDragEnd, onClick, className, ...restProps }: CellDraggerProps) => JSX.Element;
 export {};

package/dist/components/Cell/CellDragger/CellDragger.js

@@ -7,22 +7,26 @@ import { usePlatform } from "../../../hooks/usePlatform";
 import { Platform } from "../../../lib/platform";
 import { Touch } from "../../Touch/Touch";
 export var CellDragger = function(_param) {
-    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, className = _param.className, restProps = _object_without_properties(_param, [
+    var onDragStart = _param.onDragStart, onDragMove = _param.onDragMove, onDragEnd = _param.onDragEnd, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties(_param, [
         "onDragStart",
         "onDragMove",
         "onDragEnd",
+        "onClick",
         "className"
     ]);
     var platform = usePlatform();
-    var onClick = React.useCallback(function(e) {
-        e.preventDefault();
-    }, []);
+    var handleClick = function(event) {
+        event.preventDefault();
+        if (onClick) {
+            onClick(event);
+        }
+    };
     return /*#__PURE__*/ React.createElement(Touch, _object_spread({
         className: classNames("vkuiCellDragger", className),
         onStart: onDragStart,
         onMoveY: onDragMove,
         onEnd: onDragEnd,
-        onClick: onClick
+        onClick: handleClick
     }, restProps), platform === Platform.IOS ? /*#__PURE__*/ React.createElement(Icon24ReorderIos, null) : /*#__PURE__*/ React.createElement(Icon24Reorder, null));
 };
 

package/dist/components/Cell/CellDragger/CellDragger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const onClick = React.useCallback((e: React.MouseEvent) => {\n    e.preventDefault();\n  }, []);\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={onClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","className","restProps","platform","onClick","useCallback","e","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAM1C,OAAO,IAAMC,cAAc,iBAMH;QALtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,mBAAAA,WACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWT;IAEjB,IAAMU,UAAUd,MAAMe,WAAW,CAAC,SAACC,GAAwB;QACzDA,EAAEC,cAAc;IAClB,GAAG,EAAE;IAEL,qBACE,oBAACX;QACCK,WAAWR,8BAAkCQ;QAC7CO,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPI,SAASA;OACLF,YAEHC,aAAaR,SAASgB,GAAG,iBAAG,oBAACnB,wCAAsB,oBAACD,oBAAgB;AAG3E,EAAE"}
+{"version":3,"sources":["../../../../src/components/Cell/CellDragger/CellDragger.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon24Reorder, Icon24ReorderIos } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../../hooks/usePlatform';\nimport { Platform } from '../../../lib/platform';\nimport { Touch } from '../../Touch/Touch';\nimport { DraggableProps } from '../useDraggable';\nimport styles from './CellDragger.module.css';\n\ntype CellDraggerProps = DraggableProps &\n  Omit<React.HTMLAttributes<HTMLElement>, keyof DraggableProps>;\n\nexport const CellDragger = ({\n  onDragStart,\n  onDragMove,\n  onDragEnd,\n  onClick,\n  className,\n  ...restProps\n}: CellDraggerProps) => {\n  const platform = usePlatform();\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    if (onClick) {\n      onClick(event);\n    }\n  };\n\n  return (\n    <Touch\n      className={classNames(styles['CellDragger'], className)}\n      onStart={onDragStart}\n      onMoveY={onDragMove}\n      onEnd={onDragEnd}\n      onClick={handleClick}\n      {...restProps}\n    >\n      {platform === Platform.IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}\n    </Touch>\n  );\n};\n"],"names":["React","Icon24Reorder","Icon24ReorderIos","classNames","usePlatform","Platform","Touch","CellDragger","onDragStart","onDragMove","onDragEnd","onClick","className","restProps","platform","handleClick","event","preventDefault","onStart","onMoveY","onEnd","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,EAAEC,gBAAgB,QAAQ,mBAAmB;AACnE,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,wBAAwB;AACjD,SAASC,KAAK,QAAQ,oBAAoB;AAO1C,OAAO,IAAMC,cAAc,iBAOH;QANtBC,qBAAAA,aACAC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,mBAAAA,WACGC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWV;IAEjB,IAAMW,cAAc,SAACC,OAAyC;QAC5DA,MAAMC,cAAc;QACpB,IAAIN,SAAS;YACXA,QAAQK;QACV,CAAC;IACH;IAEA,qBACE,oBAACV;QACCM,WAAWT,8BAAkCS;QAC7CM,SAASV;QACTW,SAASV;QACTW,OAAOV;QACPC,SAASI;OACLF,YAEHC,aAAaT,SAASgB,GAAG,iBAAG,oBAACnB,wCAAsB,oBAACD,oBAAgB;AAG3E,EAAE"}

package/dist/components/Cell/useDraggable.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 import { TouchEvent } from '../Touch/Touch';
 import { CellProps } from './Cell';
 export interface DraggableProps {
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    onDragMove: (e: TouchEvent) => void;
+    onDragStart(event: TouchEvent): void;
+    onDragEnd(event: TouchEvent): void;
+    onDragMove(event: TouchEvent): void;
 }
 interface UseDraggableProps extends DraggableProps {
     dragging: boolean;

package/dist/components/Cell/useDraggable.js

@@ -8,12 +8,14 @@ export var useDraggable = function(param) {
     var _React_useState3 = _sliced_to_array(React.useState(0), 2), dragEndIndex = _React_useState3[0], setDragEndIndex = _React_useState3[1];
     var _React_useState4 = _sliced_to_array(React.useState(0), 2), dragShift = _React_useState4[0], setDragShift = _React_useState4[1];
     var _React_useState5 = _sliced_to_array(React.useState(undefined), 2), dragDirection = _React_useState5[0], setDragDirection = _React_useState5[1];
-    var onDragStart = function() {
+    var onDragStart = function(event) {
         var _rootEl_parentElement;
         var rootEl = rootElRef.current;
         if (!rootEl) {
             return;
         }
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         setDragging(true);
         var _siblings = [];
         if ((_rootEl_parentElement = rootEl.parentElement) === null || _rootEl_parentElement === void 0 ? void 0 : _rootEl_parentElement.childNodes) {
@@ -25,14 +27,15 @@ export var useDraggable = function(param) {
         setSiblings(_siblings);
         setDragShift(0);
     };
-    var onDragMove = function(e) {
-        e.originalEvent.preventDefault();
+    var onDragMove = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var rootEl = rootElRef.current;
         if (rootEl) {
-            rootEl.style.transform = "translateY(".concat(e.shiftY, "px)");
+            rootEl.style.transform = "translateY(".concat(event.shiftY, "px)");
             var rootGesture = rootEl.getBoundingClientRect();
-            setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-            setDragShift(e.shiftY);
+            setDragDirection(dragShift - event.shiftY < 0 ? "down" : "up");
+            setDragShift(event.shiftY);
             setDragEndIndex(dragStartIndex);
             siblings.forEach(function(sibling, siblingIndex) {
                 var siblingGesture = sibling.getBoundingClientRect();
@@ -67,7 +70,9 @@ export var useDraggable = function(param) {
             });
         }
     };
-    var onDragEnd = function() {
+    var onDragEnd = function(event) {
+        event.originalEvent.stopPropagation();
+        event.originalEvent.preventDefault();
         var _ref = [
             dragStartIndex,
             dragEndIndex