@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/Header/Header.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+import { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+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 { Title } from '../Typography/Title/Title';
+import styles from './Header.module.css';
+
+export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
+  mode?: 'primary' | 'secondary' | 'tertiary';
+  size?: 'regular' | 'large';
+  subtitle?: React.ReactNode;
+  /**
+   * Допускаются иконки, текст, Link
+   */
+  aside?: React.ReactNode;
+  /**
+   * Допускаются текст, Indicator
+   */
+  indicator?: React.ReactNode;
+  multiline?: boolean;
+}
+
+type HeaderContentProps = Pick<HeaderProps, 'children' | 'mode' | 'size' | 'className'> &
+  HasComponent;
+
+const HeaderContent = ({ mode, size, ...restProps }: HeaderContentProps) => {
+  const isLarge = size === 'large';
+
+  const platform = usePlatform();
+  if (platform === Platform.IOS) {
+    switch (mode) {
+      case 'primary':
+        return isLarge ? (
+          <Title level="2" weight="2" {...restProps} />
+        ) : (
+          <Title weight="1" level="3" {...restProps} />
+        );
+      case 'secondary':
+        return <Footnote weight="1" caps {...restProps} />;
+      case 'tertiary':
+        return <Title weight="1" level="3" {...restProps} />;
+    }
+  }
+
+  switch (mode) {
+    case 'primary':
+      return isLarge ? (
+        <Title level="2" weight="2" {...restProps} />
+      ) : (
+        <Headline weight="2" {...restProps} />
+      );
+    case 'secondary':
+      return <Footnote weight="1" caps {...restProps} />;
+    case 'tertiary':
+      return <Headline weight="2" {...restProps} />;
+  }
+
+  return null;
+};
+
+const stylesMode = {
+  primary: styles['Header--mode-primary'],
+  secondary: styles['Header--mode-secondary'],
+  tertiary: styles['Header--mode-tertiary'],
+};
+/**
+ * @see https://vkcom.github.io/VKUI/#/Header
+ */
+export const Header = ({
+  mode = 'primary',
+  size = 'regular',
+  children,
+  subtitle,
+  indicator,
+  aside,
+  multiline,
+  ...restProps
+}: HeaderProps) => {
+  return (
+    <RootComponent
+      Component="header"
+      {...restProps}
+      baseClassName={classNames(
+        styles['Header'],
+        stylesMode[mode],
+        size === 'large' && styles['Header--large'],
+        isPrimitiveReactNode(indicator) && styles['Header--pi'],
+        hasReactNode(subtitle) && styles['Header--with-subtitle'],
+      )}
+    >
+      <div className={styles['Header__main']}>
+        <HeaderContent
+          className={styles['Header__content']}
+          Component="span"
+          mode={mode}
+          size={size}
+        >
+          <span
+            className={classNames(
+              styles['Header__content-in'],
+              multiline && styles['Header__content--multiline'],
+            )}
+          >
+            {children}
+          </span>
+          {hasReactNode(indicator) && (
+            <Footnote className={styles['Header__indicator']} weight="2">
+              {indicator}
+            </Footnote>
+          )}
+        </HeaderContent>
+
+        {hasReactNode(subtitle) && (
+          <Subhead
+            className={classNames(
+              styles['Header__subtitle'],
+              multiline && styles['Header__content--multiline'],
+            )}
+            Component="span"
+          >
+            {subtitle}
+          </Subhead>
+        )}
+      </div>
+
+      {hasReactNode(aside) && (
+        <Paragraph className={styles['Header__aside']} Component="span">
+          {aside}
+        </Paragraph>
+      )}
+    </RootComponent>
+  );
+};

package/src/components/HorizontalCell/HorizontalCell.module.css

@@ -0,0 +1,85 @@
+.HorizontalCell {
+  display: flex;
+}
+
+.HorizontalCell__image {
+  display: flex;
+  justify-content: center;
+}
+
+.HorizontalCell__body {
+  text-decoration: none;
+  font-family: inherit;
+}
+
+/* Перебиваем селектор в Tappable--sizeX-(compact|none) */
+.HorizontalCell .HorizontalCell__body {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.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 {
+  --vkui_internal--side_cell_gap: calc(
+    var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_m)
+  );
+  --vkui_internal--side_cell_width: calc(72px + var(--vkui_internal--side_cell_gap));
+
+  max-width: 72px;
+}
+
+.HorizontalCell__image {
+  padding: 4px var(--vkui--spacing_size_s);
+}
+
+.HorizontalCell__content {
+  padding: 2px 6px 8px;
+  text-align: left;
+}
+
+.HorizontalCell--size-s .HorizontalCell__image {
+  padding: 4px var(--vkui--spacing_size_m);
+}
+
+.HorizontalCell--size-s .HorizontalCell__content {
+  padding: 2px 4px 8px;
+  text-align: center;
+}
+
+.HorizontalCell--size-m {
+  --vkui_internal--side_cell_width: calc(100px + var(--vkui_internal--side_cell_gap));
+
+  width: 100px;
+}
+
+.HorizontalCell--size-l {
+  width: auto;
+}
+
+.HorizontalCell:first-child::before,
+.HorizontalCell:last-child::after {
+  content: '';
+  min-width: var(--vkui_internal--side_cell_gap);
+}
+
+.HorizontalCell--size-s:first-child,
+.HorizontalCell--size-s:last-child {
+  max-width: var(--vkui_internal--side_cell_width);
+}
+
+.HorizontalCell--size-m:first-child,
+.HorizontalCell--size-m:last-child {
+  width: var(--vkui_internal--side_cell_width);
+}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { HasComponent, HasRef, HasRootRef, HTMLAttributesWithRootRef } from '../../types';
+import { Avatar } from '../Avatar/Avatar';
+import { Tappable } from '../Tappable/Tappable';
+import { Caption } from '../Typography/Caption/Caption';
+import { Footnote } from '../Typography/Footnote/Footnote';
+import { Subhead } from '../Typography/Subhead/Subhead';
+import styles from './HorizontalCell.module.css';
+
+const stylesSize = {
+  s: styles['HorizontalCell--size-s'],
+  m: styles['HorizontalCell--size-m'],
+  l: styles['HorizontalCell--size-l'],
+};
+
+interface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  size: HorizontalCellProps['size'];
+}
+
+const CellTypography = ({ size, children, ...restProps }: CellTypographyProps) => {
+  return size === 's' ? (
+    <Caption {...restProps}>{children}</Caption>
+  ) : (
+    <Subhead {...restProps}>{children}</Subhead>
+  );
+};
+
+export interface HorizontalCellProps
+  extends React.AnchorHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLDivElement>,
+    HasComponent {
+  size?: 's' | 'm' | 'l';
+  /**
+   * Заголовок
+   */
+  header?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children`.
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Дополнительная строка текста под `children` и `subtitle`.
+   */
+  extraSubtitle?: React.ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalCell
+ */
+export const HorizontalCell = ({
+  className,
+  header,
+  style,
+  subtitle,
+  size = 's',
+  children = <Avatar size={56} />,
+  getRootRef,
+  getRef,
+  extraSubtitle,
+  ...restProps
+}: HorizontalCellProps) => {
+  return (
+    <div
+      ref={getRootRef}
+      style={style}
+      className={classNames(styles['HorizontalCell'], stylesSize[size], className)}
+    >
+      <Tappable className={styles['HorizontalCell__body']} getRootRef={getRef} {...restProps}>
+        {hasReactNode(children) && (
+          <div className={styles['HorizontalCell__image']}>{children}</div>
+        )}
+        {(header || subtitle || extraSubtitle) && (
+          <div className={styles['HorizontalCell__content']}>
+            {hasReactNode(header) && <CellTypography size={size}>{header}</CellTypography>}
+            {hasReactNode(subtitle) && (
+              <Footnote className={styles['HorizontalCell__subtitle']}>{subtitle}</Footnote>
+            )}
+            {hasReactNode(extraSubtitle) && (
+              <Footnote className={styles['HorizontalCell__subtitle']}>{extraSubtitle}</Footnote>
+            )}
+          </div>
+        )}
+      </Tappable>
+    </div>
+  );
+};

package/src/components/HorizontalCellShowMore/HorizontalCellShowMore.module.css

@@ -0,0 +1,46 @@
+.HorizontalCellShowMore {
+  display: flex;
+}
+
+.HorizontalCellShowMore--compensate-last-cell-indent {
+  /* Компенсация бокового отступа, заданного в последнем HorizontalCell:last-child::after */
+  margin-left: calc(-1 * var(--vkui_internal--side_cell_gap));
+}
+
+.HorizontalCellShowMore:last-child::after {
+  content: '';
+  min-width: var(--vkui_internal--side_cell_gap);
+}
+
+.HorizontalCellShowMore__body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 4px var(--vkui--spacing_size_s);
+}
+
+.HorizontalCellShowMore--size-s .HorizontalCellShowMore__body {
+  min-width: 64px;
+  padding: var(--vkui--spacing_size_xs);
+}
+
+.HorizontalCellShowMore--size-m .HorizontalCellShowMore__body,
+.HorizontalCellShowMore--size-l .HorizontalCellShowMore__body {
+  width: 128px;
+  margin-bottom: auto;
+}
+
+/* Перебиваем селектор в Tappable--sizeX-(compact|none) */
+.HorizontalCellShowMore .HorizontalCellShowMore__body {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.HorizontalCellShowMore__icon {
+  color: var(--vkui--color_icon_accent);
+}
+
+.HorizontalCellShowMore__text {
+  padding-top: 8px;
+  color: var(--vkui--color_text_accent);
+}

package/src/components/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { Icon28ChevronRightCircle } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { HasRef, HasRootRef, LiteralUnion } from '../../types';
+import type { ImageBaseSize } from '../ImageBase/ImageBase';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import { Subhead, SubheadProps } from '../Typography/Subhead/Subhead';
+import styles from './HorizontalCellShowMore.module.css';
+
+const sizeClassNames = {
+  s: styles['HorizontalCellShowMore--size-s'],
+  m: styles['HorizontalCellShowMore--size-m'],
+  l: styles['HorizontalCellShowMore--size-l'],
+};
+
+export interface HorizontalCellShowMoreProps
+  extends Omit<TappableProps, 'getRootRef' | 'size'>,
+    HasRef<HTMLElement>,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Задаёт высоту компонента. Должeн соответствовать размеру картинок
+   * внутри соседних `HorizontalCell` компонентов.
+   *
+   * Используйте размеры заданные дизайн-системой (см. типы).
+   *
+   * > ⚠️ Использование кастомного размера – это пограничный кейс.
+   *
+   * Игнорируется если `size='s'`.
+   */
+  height?: LiteralUnion<ImageBaseSize, number>;
+  /**
+   * Задаёт размер компонента. Аналогичен такому же пропу у [HorizontalCell](https://vkcom.github.io/VKUI/#/HorizontalCellShowMore?id=props).
+   * Должен соответствовать значению пропа `size` соседних `HorizontalCell`.
+   */
+  size?: 's' | 'm' | 'l';
+  /**
+   * Предназначен для отрисовки текста.
+   * По умолчанию для `size='s'` содержит текст `Все` для других размеров `Показать все`.
+   * */
+  children?: SubheadProps['children'];
+  /**
+   * Позволяет компенсировать особый правый отступ у предшевствующего элементa `HorizontalCell`,
+   * в том случае, если тот элемент последний в родителе.
+   * Если `HorizontalCellShowMore` находится на одном уровне с остальными `HorizontalCell`, то этот проп использовать не нужно.
+   */
+  compensateLastCellIndent?: boolean;
+}
+
+export const HorizontalCellShowMore = ({
+  className,
+  style,
+  getRef,
+  getRootRef,
+  compensateLastCellIndent,
+  height,
+  size = 's',
+  children = size === 's' ? 'Все' : 'Показать все',
+  ...restProps
+}: HorizontalCellShowMoreProps) => {
+  return (
+    <div
+      style={style}
+      className={classNames(
+        styles['HorizontalCellShowMore'],
+        compensateLastCellIndent && styles['HorizontalCellShowMore--compensate-last-cell-indent'],
+        sizeClassNames[size],
+        className,
+      )}
+      ref={getRootRef}
+    >
+      <Tappable
+        style={size === 's' ? undefined : { height }}
+        className={styles['HorizontalCellShowMore__body']}
+        getRootRef={getRef}
+        activeMode="opacity"
+        hoverMode="opacity"
+        {...restProps}
+      >
+        <Icon28ChevronRightCircle
+          className={styles['HorizontalCellShowMore__icon']}
+          fill="currentColor"
+        />
+
+        <Subhead className={styles['HorizontalCellShowMore__text']} weight="2">
+          {children}
+        </Subhead>
+      </Tappable>
+    </div>
+  );
+};

package/src/components/HorizontalScroll/HorizontalScroll.module.css

@@ -0,0 +1,76 @@
+.HorizontalScroll {
+  position: relative;
+
+  /**
+   * ⚠️ WARNING ⚠️
+   * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
+   */
+  overflow-x: hidden;
+  isolation: isolate;
+}
+
+.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__arrow {
+  z-index: var(--vkui_internal--z_index_horizontal_scroll_arrow);
+  position: absolute;
+  top: 0;
+  opacity: 0;
+}
+
+.HorizontalScroll:hover .HorizontalScroll__arrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.HorizontalScroll--withConstArrows .HorizontalScroll__arrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScroll__arrow,
+.HorizontalScroll .HorizontalScroll__arrow:hover {
+  opacity: 1;
+}
+
+.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: '';
+}