@vkontakte/vkui 5.3.1 → 5.4.0

package/dist/cssm/components/Header/Header.js

@@ -4,8 +4,8 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Headline } from '../Typography/Headline/Headline';
+import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import { Text } from '../Typography/Text/Text';
 import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 const HeaderContent = ({ mode , size , ...restProps })=>{
@@ -23,18 +23,18 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                     level: "3",
                     ...restProps
                 });
+            case 'secondary':
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    weight: "1",
+                    caps: true,
+                    ...restProps
+                });
             case 'tertiary':
                 return /*#__PURE__*/ React.createElement(Title, {
                     weight: "1",
                     level: "3",
                     ...restProps
                 });
-            case 'secondary':
-                return /*#__PURE__*/ React.createElement(Footnote, {
-                    weight: "2",
-                    caps: true,
-                    ...restProps
-                });
         }
     }
     if (platform === Platform.VKCOM) {
@@ -45,10 +45,16 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                     weight: "1",
                     ...restProps
                 }) : /*#__PURE__*/ React.createElement(Headline, {
-                    weight: "3",
+                    level: "1",
+                    weight: "2",
                     ...restProps
                 });
             case 'secondary':
+                return /*#__PURE__*/ React.createElement(Footnote, {
+                    caps: true,
+                    weight: "1",
+                    ...restProps
+                });
             case 'tertiary':
                 return /*#__PURE__*/ React.createElement(Footnote, restProps);
         }
@@ -63,17 +69,17 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
                 weight: "2",
                 ...restProps
             });
-        case 'tertiary':
-            return /*#__PURE__*/ React.createElement(Headline, {
-                weight: "2",
-                ...restProps
-            });
         case 'secondary':
             return /*#__PURE__*/ React.createElement(Footnote, {
                 weight: "1",
                 caps: true,
                 ...restProps
             });
+        case 'tertiary':
+            return /*#__PURE__*/ React.createElement(Headline, {
+                weight: "2",
+                ...restProps
+            });
     }
     return null;
 };
@@ -81,8 +87,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
  * @see https://vkcom.github.io/VKUI/#/Header
  */ export const Header = ({ mode ='primary' , size ='regular' , children , subtitle , indicator , aside , getRootRef , multiline , className , ...restProps })=>{
     const platform = usePlatform();
-    const AsideTypography = platform === Platform.VKCOM ? Subhead : Text;
-    const SubtitleTypography = mode === 'secondary' ? Subhead : Footnote;
+    const AsideTypography = platform === Platform.VKCOM ? Subhead : Paragraph;
     return /*#__PURE__*/ React.createElement("header", {
         ...restProps,
         ref: getRootRef,
@@ -90,7 +95,7 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
             primary: styles['Header--mode-primary'],
             secondary: styles['Header--mode-secondary'],
             tertiary: styles['Header--mode-tertiary']
-        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], className)
+        }[mode], isPrimitiveReactNode(indicator) && styles['Header--pi'], hasReactNode(subtitle) && styles['Header--with-subtitle'], className)
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['Header__main']
     }, /*#__PURE__*/ React.createElement(HeaderContent, {
@@ -102,8 +107,8 @@ const HeaderContent = ({ mode , size , ...restProps })=>{
         className: classNames(styles['Header__content-in'], multiline && styles['Header__content-in--multiline'])
     }, children), hasReactNode(indicator) && /*#__PURE__*/ React.createElement(Footnote, {
         className: styles['Header__indicator'],
-        weight: mode === 'primary' || mode === 'secondary' ? '1' : undefined
-    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(SubtitleTypography, {
+        weight: "2"
+    }, indicator)), hasReactNode(subtitle) && /*#__PURE__*/ React.createElement(Subhead, {
         className: styles['Header__subtitle'],
         Component: "span"
     }, subtitle)), hasReactNode(aside) && /*#__PURE__*/ React.createElement(AsideTypography, {

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

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

package/dist/cssm/components/Header/Header.module.css

@@ -1 +1,207 @@
-.vkuiHeader{align-items:baseline;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);justify-content:space-between;padding:0 0 0 16px;padding-left:var(--vkui--size_base_padding_horizontal--regular);padding-right:16px;padding-right:var(--vkui--size_base_padding_horizontal--regular);-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary);min-width:0;overflow:hidden;text-overflow:ellipsis}.vkuiHeader__content{align-items:baseline;display:flex}.vkuiHeader__content-in{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vkuiHeader__content-in--multiline{white-space:normal;word-break:break-word}.vkuiHeader--multiline{white-space:normal}.vkuiHeader__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:-1px}.vkuiHeader--mode-secondary:not(.vkuiHeader--pi) .vkuiHeader__main,.vkuiHeader--mode-tertiary .vkuiHeader__main,.vkuiHeader__indicator{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHeader__indicator{flex-shrink:0;margin-left:6px}.vkuiHeader--mode-primary .vkuiHeader__indicator{color:#6d7885;color:var(--vkui--color_text_subhead)}.vkuiHeader:not(.vkuiHeader--pi) .vkuiHeader__indicator{align-self:center}.vkuiHeader--mode-secondary .vkuiHeader__indicator{margin-left:8px}.vkuiHeader__aside{margin-left:12px;white-space:nowrap}.vkuiHeader__aside>.vkuiIcon{color:#99a2ad;color:var(--vkui--color_icon_secondary);position:relative}.vkuiHeader__aside>.vkuiIcon--24{top:3px}.vkuiHeader__aside>.vkuiIcon--16{top:1px}.vkuiHeader--android .vkuiHeader__main{margin:15px 0 9px}.vkuiHeader--android.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:11px}.vkuiHeader--ios .vkuiHeader__main{margin:13px 0 9px}.vkuiHeader--ios.vkuiHeader--mode-secondary .vkuiHeader__main{margin:14px 0 10px}.vkuiHeader--ios.vkuiHeader--mode-tertiary .vkuiHeader__main{margin-top:9px}.vkuiHeader--vkcom{align-items:center;height:64px}.vkuiHeader--vkcom .vkuiHeader__main{color:#000;color:var(--vkui--color_text_primary)}.vkuiHeader--vkcom.vkuiHeader--mode-primary .vkuiHeader__content:not(:last-child){margin-top:0}.vkuiHeader--vkcom.vkuiHeader--mode-secondary{height:56px}.vkuiHeader--vkcom.vkuiHeader--mode-tertiary{height:40px}.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternalGroup--mode-plain:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}@media (max-width:767.9px){.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiHeader:first-child,.vkuiInternal.Group--mode-none:not(:first-of-type)>.vkuiInternalTappable:first-child>.vkuiHeader{margin-top:-16px}}.vkuiInternal.Group--mode-card>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-card>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}@media (min-width:768px){.vkuiInternal.Group--mode-none>.vkuiHeader:not(.vkuiHeader--mode-tertiary):first-child,.vkuiInternal.Group--mode-none>.vkuiInternalTappable:first-child>.vkuiHeader:not(.vkuiHeader--mode-tertiary){margin-top:-4px}}
+.Header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  padding: 0;
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+  font-family: var(--vkui--font_family_base);
+}
+
+.Header__main {
+  min-width: 0;
+  color: var(--vkui--color_text_primary);
+}
+
+.Header__content {
+  display: flex;
+  align-items: center;
+}
+
+.Header__content-in,
+.Header__subtitle {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.Header__content-in--multiline {
+  white-space: initial;
+  word-break: break-word;
+}
+
+.Header--multiline {
+  white-space: normal;
+}
+
+.Header__subtitle {
+  display: block;
+  color: var(--vkui--color_text_secondary);
+}
+
+.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: -1px;
+}
+
+.Header--mode-secondary:not(.Header--pi):not(.Header--with-subtitle) .Header__main,
+.Header--mode-tertiary .Header__main {
+  color: var(--vkui--color_text_secondary);
+}
+
+.Header__indicator {
+  color: var(--vkui--color_text_secondary);
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+
+.Header--mode-primary .Header__indicator {
+  color: var(--vkui--color_text_subhead);
+}
+
+.Header:not(.Header--pi) .Header__indicator {
+  align-self: center;
+}
+
+.Header--mode-secondary .Header__indicator {
+  margin-left: 8px;
+}
+
+.Header__aside {
+  white-space: nowrap;
+  margin-left: 12px;
+}
+
+.Header__aside > :global(.vkuiIcon) {
+  position: relative;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.Header__aside > :global(.vkuiIcon--24) {
+  top: 3px;
+}
+
+.Header__aside > :global(.vkuiIcon--16) {
+  top: 1px;
+}
+
+/**
+ * ANDROID
+ */
+
+.Header--android .Header__main {
+  margin: 15px 0 9px;
+}
+
+.Header--android.Header--mode-primary .Header__main {
+  margin-bottom: 7px;
+}
+
+.Header--android.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: 0;
+}
+
+.Header--android.Header--mode-primary .Header__content:last-child {
+  margin-bottom: 2px;
+}
+
+.Header--android.Header--mode-tertiary .Header__main {
+  margin-top: 11px;
+}
+
+/**
+ * iOS
+ */
+
+.Header--ios .Header__main {
+  margin: 13px 0 9px;
+}
+
+.Header--ios.Header--mode-primary .Header__main {
+  margin: 16px 0 7px;
+}
+
+.Header--ios.Header--mode-secondary .Header__main {
+  margin: 14px 0 10px;
+}
+
+.Header--ios.Header--mode-tertiary .Header__main {
+  margin-top: 12px;
+  margin-bottom: 8px;
+}
+
+/**
+ * VKCOM
+ */
+
+.Header--vkcom {
+  height: 64px;
+  align-items: center;
+}
+
+.Header--vkcom .Header__main {
+  color: var(--vkui--color_text_primary);
+}
+
+.Header--vkcom.Header--mode-primary .Header__content:not(:last-child) {
+  margin-top: 0;
+}
+
+.Header--vkcom.Header--mode-secondary {
+  height: 56px;
+}
+
+.Header--vkcom.Header--mode-tertiary {
+  height: 40px;
+}
+
+/**
+ * CMP:
+ * Group
+ *
+ * TODO: Переделать отрицательные отступы https://github.com/VKCOM/VKUI/issues/3508
+ */
+
+:global(.vkuiInternalGroup--mode-plain):not(:first-of-type) > .Header:first-child,
+:global(.vkuiInternalGroup--mode-plain):not(:first-of-type)
+  > :global(.vkuiInternalTappable):first-child
+  > .Header {
+  margin-top: -16px;
+}
+
+@media (max-width: 767.9px) {
+  :global(.vkuiInternalGroup--mode-none):not(:first-of-type) > .Header:first-child,
+  :global(.vkuiInternalGroup--mode-none):not(:first-of-type)
+    > :global(.vkuiInternalTappable):first-child
+    > .Header {
+    margin-top: -16px;
+  }
+}
+
+:global(.vkuiInternalGroup--mode-card) > .Header:not(.Header--mode-tertiary):first-child,
+:global(.vkuiInternalGroup--mode-card)
+  > :global(.vkuiInternalTappable):first-child
+  > .Header:not(.Header--mode-tertiary) {
+  margin-top: -4px;
+}
+
+@media (min-width: 768px) {
+  :global(.vkuiInternalGroup--mode-none) > .Header:not(.Header--mode-tertiary):first-child,
+  :global(.vkuiInternalGroup--mode-none)
+    > :global(.vkuiInternalTappable):first-child
+    > .Header:not(.Header--mode-tertiary) {
+    margin-top: -4px;
+  }
+}
+
+/**
+ * Impact:
+ * Link
+ */
+
+.Header__aside {
+  --vkui_internal--link-color: var(--vkui--color_text_accent);
+}

package/dist/cssm/components/HorizontalCell/HorizontalCell.module.css

@@ -1 +1,79 @@
-.vkuiHorizontalCell{display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base)}.vkuiHorizontalCell__image{display:flex;justify-content:center}.vkuiHorizontalCell__body{font-family:inherit;text-decoration:none}.vkuiHorizontalCell__content{color:#000;color:var(--vkui--color_text_primary);text-overflow:ellipsis;word-break:break-all}.vkuiHorizontalCell__subtitle{color:#818c99;color:var(--vkui--color_text_secondary)}.vkuiHorizontalCell__content .vkuiHorizontalCell__subtitle{margin-top:2px}.vkuiHorizontalCell--size-s{max-width:80px}.vkuiHorizontalCell__image{padding:4px 6px}.vkuiHorizontalCell__content{padding:2px 6px 8px;text-align:left}.vkuiHorizontalCell--size-s .vkuiHorizontalCell__image{padding:4px 8px}.vkuiHorizontalCell--size-s .vkuiHorizontalCell__content{padding:2px 4px 8px;text-align:center}.vkuiHorizontalCell--size-m{width:100px}.vkuiHorizontalCell--size-l{width:auto}.vkuiHorizontalCell:first-child:before,.vkuiHorizontalCell:last-child:after{content:"";min-width:10px}.vkuiHorizontalCell--size-s:first-child:before,.vkuiHorizontalCell--size-s:last-child:after{min-width:8px}.vkuiHorizontalCell--size-s:first-child,.vkuiHorizontalCell--size-s:last-child{max-width:88px}.vkuiHorizontalCell--size-m:first-child,.vkuiHorizontalCell--size-m:last-child{width:110px}
+.HorizontalCell {
+  display: flex;
+  font-family: var(--vkui--font_family_base);
+}
+
+.HorizontalCell__image {
+  display: flex;
+  justify-content: center;
+}
+
+.HorizontalCell__body {
+  text-decoration: none;
+  font-family: inherit;
+}
+
+.HorizontalCell__content {
+  color: var(--vkui--color_text_primary);
+  word-break: break-all;
+  text-overflow: ellipsis;
+}
+
+.HorizontalCell__subtitle {
+  color: var(--vkui--color_text_secondary);
+}
+
+.HorizontalCell__content .HorizontalCell__subtitle {
+  margin-top: 2px;
+}
+
+.HorizontalCell--size-s {
+  max-width: 80px;
+}
+
+.HorizontalCell__image {
+  padding: 4px 6px;
+}
+
+.HorizontalCell__content {
+  padding: 2px 6px 8px;
+  text-align: left;
+}
+
+.HorizontalCell--size-s .HorizontalCell__image {
+  padding: 4px 8px;
+}
+
+.HorizontalCell--size-s .HorizontalCell__content {
+  padding: 2px 4px 8px;
+  text-align: center;
+}
+
+.HorizontalCell--size-m {
+  width: 100px;
+}
+
+.HorizontalCell--size-l {
+  width: auto;
+}
+
+.HorizontalCell:first-child::before,
+.HorizontalCell:last-child::after {
+  content: '';
+  min-width: 10px;
+}
+
+.HorizontalCell--size-s:first-child::before,
+.HorizontalCell--size-s:last-child::after {
+  min-width: 8px;
+}
+
+.HorizontalCell--size-s:first-child,
+.HorizontalCell--size-s:last-child {
+  max-width: 88px;
+}
+
+.HorizontalCell--size-m:first-child,
+.HorizontalCell--size-m:last-child {
+  width: 110px;
+}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -11,6 +11,10 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
      */
     getScrollToRight?: ScrollPositionHandler;
     arrowSize?: 'm' | 'l';
+    /**
+     * Смещает иконки кнопок навигации по вертикали.
+     */
+    arrowOffsetY?: number | string;
     showArrows?: boolean | 'always';
     scrollAnimationDuration?: number;
     /**
@@ -22,4 +26,4 @@ export interface HorizontalScrollProps extends React.HTMLAttributes<HTMLDivEleme
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
  */
-export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;
+export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, className, scrollOnAnyWheel, ...restProps }: HorizontalScrollProps) => JSX.Element;

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js

@@ -58,7 +58,7 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
- */ export const HorizontalScroll = ({ children , getScrollToLeft , getScrollToRight , showArrows =true , arrowSize ='l' , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME , getRef , className , scrollOnAnyWheel =false , ...restProps })=>{
+ */ export const HorizontalScroll = ({ children , getScrollToLeft , getScrollToRight , showArrows =true , arrowSize ='l' , arrowOffsetY , scrollAnimationDuration =SCROLL_ONE_FRAME_TIME , getRef , className , scrollOnAnyWheel =false , ...restProps })=>{
     const [canScrollLeft, setCanScrollLeft] = React.useState(false);
     const [canScrollRight, setCanScrollRight] = React.useState(false);
     const isCustomScrollingRef = React.useRef(false);
@@ -158,11 +158,13 @@ function doScroll({ scrollElement , getScrollPosition , animationQueue , onScrol
         className: styles['HorizontalScroll__in-wrapper']
     }, children)), showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "left",
         className: styles['HorizontalScroll__arrowLeft'],
         onClick: scrollToLeft
     }), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ React.createElement(HorizontalScrollArrow, {
         size: arrowSize,
+        offsetY: arrowOffsetY,
         direction: "right",
         className: styles['HorizontalScroll__arrowRight'],
         onClick: scrollToRight

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","direction","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef } from '../../types';\nimport { HorizontalScrollArrow } from './HorizontalScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n  scrollElement: HTMLElement | null;\n  scrollAnimationDuration: number;\n  animationQueue: VoidFunction[];\n  getScrollPosition: (currentPosition: number) => number;\n  onScrollToRightBorder: VoidFunction;\n  onScrollEnd: VoidFunction;\n  onScrollStart: VoidFunction;\n  /**\n   * Начальная ширина прокрутки.\n   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n   */\n  initialScrollWidth: number;\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Функция для расчета величины прокрутки при клике на левую стрелку.\n   */\n  getScrollToLeft?: ScrollPositionHandler;\n  /**\n   * Функция для расчета величины прокрутки при клике на правую стрелку.\n   */\n  getScrollToRight?: ScrollPositionHandler;\n  arrowSize?: 'm' | 'l';\n  /**\n   * Смещает иконки кнопок навигации по вертикали.\n   */\n  arrowOffsetY?: number | string;\n  showArrows?: boolean | 'always';\n  scrollAnimationDuration?: number;\n  /**\n   * Добавляет возможность прокручивать контент на любое колесо мыши.\n   * По умолчанию прокручивается как любой горизонтальный контент через shift.\n   */\n  scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n  return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n  scrollElement,\n  getScrollPosition,\n  animationQueue,\n  onScrollToRightBorder,\n  onScrollEnd,\n  onScrollStart,\n  initialScrollWidth,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n}: ScrollContext) {\n  if (!scrollElement || !getScrollPosition) {\n    return;\n  }\n\n  /**\n   * максимальное значение сдвига влево\n   */\n  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;\n\n  let startLeft = roundUpElementScrollLeft(scrollElement);\n  let endLeft = getScrollPosition(startLeft);\n\n  onScrollStart();\n\n  if (endLeft >= maxLeft) {\n    onScrollToRightBorder();\n    endLeft = maxLeft;\n  }\n\n  const startTime = now();\n\n  (function scroll() {\n    if (!scrollElement) {\n      onScrollEnd();\n      return;\n    }\n\n    const time = now();\n    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n    const value = easeInOutSine(elapsed);\n\n    const currentLeft = startLeft + (endLeft - startLeft) * value;\n    scrollElement.scrollLeft = Math.ceil(currentLeft);\n\n    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {\n      requestAnimationFrame(scroll);\n      return;\n    }\n\n    onScrollEnd();\n    animationQueue.shift();\n    if (animationQueue.length > 0) {\n      animationQueue[0]();\n    }\n  })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n  children,\n  getScrollToLeft,\n  getScrollToRight,\n  showArrows = true,\n  arrowSize = 'l',\n  arrowOffsetY,\n  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n  getRef,\n  className,\n  scrollOnAnyWheel = false,\n  ...restProps\n}: HorizontalScrollProps) => {\n  const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n  const [canScrollRight, setCanScrollRight] = React.useState(false);\n\n  const isCustomScrollingRef = React.useRef(false);\n\n  const scrollerRef = useExternRef(getRef);\n\n  const animationQueue = React.useRef<VoidFunction[]>([]);\n\n  const hasPointer = useAdaptivityHasPointer();\n\n  const scrollTo = React.useCallback(\n    (getScrollPosition: ScrollPositionHandler) => {\n      const scrollElement = scrollerRef.current;\n\n      animationQueue.current.push(() =>\n        doScroll({\n          scrollElement,\n          getScrollPosition,\n          animationQueue: animationQueue.current,\n          onScrollToRightBorder: () => setCanScrollRight(false),\n          onScrollEnd: () => (isCustomScrollingRef.current = false),\n          onScrollStart: () => (isCustomScrollingRef.current = true),\n          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n          scrollAnimationDuration,\n        }),\n      );\n      if (animationQueue.current.length === 1) {\n        animationQueue.current[0]();\n      }\n    },\n    [scrollAnimationDuration, scrollerRef],\n  );\n\n  const scrollToLeft = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n  const scrollToRight = React.useCallback(() => {\n    const getScrollPosition =\n      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n    scrollTo(getScrollPosition);\n  }, [getScrollToRight, scrollTo, scrollerRef]);\n\n  const onscroll = React.useCallback(() => {\n    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n      const scrollElement = scrollerRef.current;\n\n      setCanScrollLeft(scrollElement.scrollLeft > 0);\n      setCanScrollRight(\n        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <\n          scrollElement.scrollWidth,\n      );\n    }\n  }, [hasPointer, scrollerRef, showArrows]);\n\n  const scrollEvent = useEventListener('scroll', onscroll);\n  React.useEffect(() => {\n    if (scrollerRef.current) {\n      scrollEvent.add(scrollerRef.current);\n    }\n  }, [scrollEvent, scrollerRef]);\n  React.useEffect(onscroll, [scrollerRef, children, onscroll]);\n\n  /**\n   * Прокрутка с помощью любого колеса мыши\n   */\n  const onwheel = React.useCallback(\n    (e: WheelEvent) => {\n      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n      e.preventDefault();\n    },\n    [scrollerRef],\n  );\n\n  const wheelEvent = useEventListener('wheel', onwheel);\n  React.useEffect(() => {\n    if (!scrollerRef.current || !scrollOnAnyWheel) {\n      return noop;\n    }\n\n    wheelEvent.add(scrollerRef.current);\n\n    return wheelEvent.remove;\n  }, [wheelEvent, scrollerRef, scrollOnAnyWheel]);\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['HorizontalScroll'],\n        'vkuiInternalHorizontalScroll',\n        showArrows === 'always' && 'vkuiInternalHorizontalScroll--withConstArrows',\n        className,\n      )}\n    >\n      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n      </div>\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"left\"\n          className={styles['HorizontalScroll__arrowLeft']}\n          onClick={scrollToLeft}\n        />\n      )}\n      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n        <HorizontalScrollArrow\n          size={arrowSize}\n          offsetY={arrowOffsetY}\n          direction=\"right\"\n          className={styles['HorizontalScroll__arrowRight']}\n          onClick={scrollToRight}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useEventListener","useExternRef","easeInOutSine","HorizontalScrollArrow","styles","now","performance","Date","roundUpElementScrollLeft","el","Math","ceil","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToRightBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","maxLeft","offsetWidth","startLeft","endLeft","startTime","scroll","time","elapsed","min","value","currentLeft","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","className","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","onscroll","scrollEvent","useEffect","add","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","remove","div","ref","undefined","size","offsetY","direction","onClick"],"mappings":"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"}

package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css

@@ -1 +1,59 @@
-.vkuiHorizontalScroll{overflow-x:hidden;position:relative}.vkuiHorizontalScroll__in{-webkit-overflow-scrolling:touch;overflow-x:auto;scrollbar-width:none}.vkuiHorizontalScroll__in::-webkit-scrollbar{display:none}.vkuiHorizontalScroll__in-wrapper{transition:transform .2s}.vkuiHorizontalScroll__arrowLeft:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(8px)}.vkuiHorizontalScroll__arrowRight:hover~.vkuiHorizontalScroll__in .vkuiHorizontalScroll__in-wrapper{transform:translateX(-8px)}.vkuiInternalTabs .vkuiHorizontalScroll{min-width:100%}.vkuiInternalTabs .vkuiHorizontalScroll__in-wrapper{align-items:stretch;display:flex}.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:after,.vkuiInternalTabs--withGaps .vkuiHorizontalScroll__in-wrapper:before{content:"";display:block;flex-shrink:0;height:1px;width:16px;width:var(--vkui--size_base_padding_horizontal--regular)}
+.HorizontalScroll {
+  position: relative;
+
+  /**
+   * ⚠️ WARNING ⚠️
+   * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
+   */
+  overflow-x: hidden;
+}
+
+.HorizontalScroll__in {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
+}
+
+.HorizontalScroll__in::-webkit-scrollbar {
+  display: none;
+}
+
+.HorizontalScroll__in-wrapper {
+  transition: transform 0.2s;
+}
+
+.HorizontalScroll__arrowLeft:hover ~ .HorizontalScroll__in .HorizontalScroll__in-wrapper {
+  transform: translateX(8px);
+}
+
+.HorizontalScroll__arrowRight:hover ~ .HorizontalScroll__in .HorizontalScroll__in-wrapper {
+  transform: translateX(-8px);
+}
+
+/**
+ * CMP:
+ * Tabs
+ */
+
+:global(.vkuiInternalTabs) .HorizontalScroll {
+  min-width: 100%;
+}
+
+:global(.vkuiInternalTabs) .HorizontalScroll__in-wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+:global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::after,
+:global(.vkuiInternalTabs--withGaps) .HorizontalScroll__in-wrapper::before {
+  display: block;
+  width: var(--vkui--size_base_padding_horizontal--regular);
+  flex-shrink: 0;
+  height: 1px;
+  content: '';
+}

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 export interface HorizontalScrollArrowProps {
     direction: 'left' | 'right';
     size?: 'm' | 'l';
+    offsetY?: number | string;
     onClick(event: React.MouseEvent): void;
     className?: string;
 }
-export declare const HorizontalScrollArrow: ({ size, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;
+export declare const HorizontalScrollArrow: ({ size, offsetY, direction, onClick, className, ...restProps }: HorizontalScrollArrowProps) => JSX.Element;

package/dist/cssm/components/HorizontalScroll/HorizontalScrollArrow.js

@@ -3,7 +3,7 @@ import { Icon16Chevron, Icon16ChevronLeft, Icon24Chevron, Icon24ChevronCompactLe
 import { classNames } from '@vkontakte/vkjs';
 import { Tappable } from '../Tappable/Tappable';
 import styles from './HorizontalScrollArrow.module.css';
-export const HorizontalScrollArrow = ({ size ='l' , direction , onClick , className , ...restProps })=>{
+export const HorizontalScrollArrow = ({ size ='l' , offsetY , direction , onClick , className , ...restProps })=>{
     let ArrowIcon;
     if (size === 'm') {
         ArrowIcon = direction === 'left' ? Icon16ChevronLeft : Icon16Chevron;
@@ -24,7 +24,10 @@ export const HorizontalScrollArrow = ({ size ='l' , direction , onClick , classN
         }[direction], className),
         onClick: onClick
     }, /*#__PURE__*/ React.createElement("span", {
-        className: styles['HorizontalScrollArrow__icon']
+        className: styles['HorizontalScrollArrow__icon'],
+        style: offsetY ? {
+            top: offsetY
+        } : undefined
     }, /*#__PURE__*/ React.createElement(ArrowIcon, null)));
 };