@vkontakte/vkui 4.33.2 → 4.34.0

package/src/components/Header/Header.tsx

@@ -32,11 +32,11 @@ type HeaderContentProps = Pick<HeaderProps, "children" | "mode"> &
   HasPlatform &
   HasComponent;
 
-const HeaderContent: React.FC<HeaderContentProps> = ({
+const HeaderContent = ({
   platform,
   mode,
   ...restProps
-}) => {
+}: HeaderContentProps) => {
   if (platform === Platform.IOS) {
     switch (mode) {
       case "primary":
@@ -71,7 +71,7 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export const Header: React.FC<HeaderProps> = ({
+export const Header = ({
   mode = "primary",
   children,
   subtitle,

package/src/components/HorizontalCell/HorizontalCell.css

@@ -31,7 +31,7 @@
 }
 
 .HorizontalCell--s .HorizontalCell__content {
-  padding: 2px 4px 8px 4px;
+  padding: 2px 4px 8px;
   text-align: center;
 }
 
@@ -50,7 +50,7 @@
 
 .HorizontalCell--m .HorizontalCell__content,
 .HorizontalCell--l .HorizontalCell__content {
-  padding: 2px 6px 8px 6px;
+  padding: 2px 6px 8px;
   text-align: left;
 }
 

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -14,7 +14,7 @@ interface CellTypographyProps extends React.HTMLAttributes<HTMLDivElement> {
   size: HorizontalCellProps["size"];
 }
 
-const CellTypography: React.FC<CellTypographyProps> = ({
+const CellTypography = ({
   size,
   children,
   ...restProps
@@ -42,7 +42,7 @@ export interface HorizontalCellProps
 /**
  * @see https://vkcom.github.io/VKUI/#/HorizontalCell
  */
-export const HorizontalCell: React.FC<HorizontalCellProps> = ({
+export const HorizontalCell = ({
   className,
   header,
   style,

package/src/components/HorizontalScroll/HorizontalScroll.css

@@ -1,13 +1,22 @@
 .HorizontalScroll {
   position: relative;
-  overflow: hidden;
+
+  /**
+   * ⚠️ WARNING ⚠️
+   * `overflow-y` мы не трогаем, т.к. из-за `hidden` могут обрезаться тени у потомков.
+   */
+  overflow-x: hidden;
 }
 
 .HorizontalScroll__in {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  padding-bottom: 20px;
-  margin-bottom: -20px;
+
+  /**
+   * Для удаление скролла в Firefox.
+   * В версии ниже 64 будет виден скролл, но это не ломает функциональность.
+   */
+  scrollbar-width: none;
 }
 
 .HorizontalScroll__in::-webkit-scrollbar {
@@ -18,13 +27,13 @@
   transition: transform 0.2s;
 }
 
-.HorizontalScrollArrow--left:hover
+.HorizontalScroll__arrowLeft:hover
   ~ .HorizontalScroll__in
   .HorizontalScroll__in-wrapper {
   transform: translateX(8px);
 }
 
-.HorizontalScrollArrow--right:hover
+.HorizontalScroll__arrowRight:hover
   ~ .HorizontalScroll__in
   .HorizontalScroll__in-wrapper {
   transform: translateX(-8px);

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
-import HorizontalScrollArrow from "./HorizontalScrollArrow";
+import { HorizontalScrollArrow } from "./HorizontalScrollArrow";
 import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
@@ -37,6 +37,7 @@ export interface HorizontalScrollProps
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
+  arrowSize?: "m" | "l";
   showArrows?: boolean | "always";
   scrollAnimationDuration?: number;
 }
@@ -122,16 +123,17 @@ function doScroll({
   })();
 }
 
-const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
+const HorizontalScrollComponent = ({
   children,
   getScrollToLeft,
   getScrollToRight,
   showArrows = true,
+  arrowSize = "l",
   scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   hasMouse,
   getRef,
   ...restProps
-}) => {
+}: HorizontalScrollProps) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
 
@@ -205,16 +207,26 @@ const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("HorizontalScroll", {
-        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
-      })}
+      vkuiClass={classNames(
+        "HorizontalScroll",
+        showArrows === "always" && "HorizontalScroll--withConstArrows"
+      )}
     >
       {showArrows && hasMouse && canScrollLeft && (
-        <HorizontalScrollArrow direction="left" onClick={scrollToLeft} />
+        <HorizontalScrollArrow
+          size={arrowSize}
+          direction="left"
+          vkuiClass="HorizontalScroll__arrowLeft"
+          onClick={scrollToLeft}
+        />
       )}
       {showArrows && hasMouse && canScrollRight && (
-        <HorizontalScrollArrow direction="right" onClick={scrollToRight} />
+        <HorizontalScrollArrow
+          size={arrowSize}
+          direction="right"
+          vkuiClass="HorizontalScroll__arrowRight"
+          onClick={scrollToRight}
+        />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
         <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -16,46 +16,35 @@
   justify-content: center;
 }
 
-.HorizontalScroll:hover .HorizontalScrollArrow,
-.Gallery:hover .HorizontalScrollArrow {
-  opacity: 0.72;
-}
-
-.HorizontalScroll:hover .HorizontalScrollArrow:hover,
-.Gallery:hover .HorizontalScrollArrow:hover,
-.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
-.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
-  opacity: 1;
-}
-
 .HorizontalScrollArrow__icon {
   background-color: var(
     --modal_card_background,
     var(--vkui--color_background_modal)
   );
   color: var(--icon_secondary, var(--vkui--color_icon_secondary));
-  width: 40px;
-  height: 40px;
-  border-radius: 24px;
-  box-shadow: var(
-    --vkui--elevation3,
-    0 0 2px rgba(0, 0, 0, 0.08),
-    0 0 16px rgba(0, 0, 0, 0.12)
-  );
+  box-shadow: var(--vkui--elevation3);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.HorizontalScrollArrow--m .HorizontalScrollArrow__icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 14px;
+}
+
+.HorizontalScrollArrow--l .HorizontalScrollArrow__icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+}
+
 .HorizontalScrollArrow--left {
   padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
   left: 0;
 }
 
-.HorizontalScrollArrow--left .HorizontalScrollArrow__icon {
-  transform: rotate(180deg);
-}
-
 .HorizontalScrollArrow--right {
   padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
   right: 0;
@@ -67,3 +56,18 @@
 .HorizontalScrollArrow--ios .HorizontalScrollArrow {
   transition-timing-function: var(--ios-easing);
 }
+
+/**
+ * CMP: Gallery, HorizontalScroll
+ */
+.Gallery:hover .HorizontalScrollArrow,
+.HorizontalScroll:hover .HorizontalScrollArrow {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
+  opacity: 1;
+}

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,35 +1,54 @@
 import * as React from "react";
-import { Icon24Chevron } from "@vkontakte/icons";
+import {
+  Icon24Chevron,
+  Icon24ChevronLeft,
+  Icon16Chevron,
+  Icon16ChevronLeft,
+} from "@vkontakte/icons";
 import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { IOS } from "../../lib/platform";
 import { Tappable } from "../Tappable/Tappable";
 import "./HorizontalScrollArrow.css";
 
 export interface HorizontalScrollArrowProps {
-  onClick: () => void;
   direction: "left" | "right";
+  size?: "m" | "l";
+  onClick(): void;
 }
 
-const HorizontalScrollArrow: React.FC<HorizontalScrollArrowProps> = ({
-  onClick,
+export const HorizontalScrollArrow = ({
+  size = "l",
   direction,
+  onClick,
+  ...restProps
 }: HorizontalScrollArrowProps) => {
+  const platform = usePlatform();
+  let ArrowIcon: React.ComponentType<unknown>;
+
+  if (size === "m") {
+    ArrowIcon = direction === "left" ? Icon16ChevronLeft : Icon16Chevron;
+  } else {
+    ArrowIcon = direction === "left" ? Icon24ChevronLeft : Icon24Chevron;
+  }
+
   return (
     <Tappable
+      {...restProps}
       Component="button"
       hasHover={false}
       hasActive={false}
       vkuiClass={classNames(
         "HorizontalScrollArrow",
-        `HorizontalScrollArrow--${direction}`
+        `HorizontalScrollArrow--${size}`,
+        `HorizontalScrollArrow--${direction}`,
+        platform === IOS && "HorizontalScrollArrow--ios"
       )}
       onClick={onClick}
     >
       <span vkuiClass="HorizontalScrollArrow__icon">
-        <Icon24Chevron />
+        <ArrowIcon />
       </span>
     </Tappable>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default HorizontalScrollArrow;

package/src/components/HorizontalScroll/Readme.md

@@ -39,6 +39,7 @@ const HorizontalScrollExample = () => {
         <Group header={<Header mode="secondary">Общие друзья</Header>}>
           <HorizontalScroll
             showArrows
+            arrowSize="m"
             getScrollToLeft={(i) => i - 120}
             getScrollToRight={(i) => i + 120}
           >

package/src/components/HoverPopper/HoverPopper.tsx

@@ -32,7 +32,7 @@ export interface HoverPopperProps extends PopperCommonProps {
   children?: React.ReactElement;
 }
 
-export const HoverPopper: React.FC<HoverPopperProps> = ({
+export const HoverPopper = ({
   getRef,
   content,
   children,

package/src/components/InfoRow/InfoRow.tsx

@@ -11,11 +11,7 @@ export interface InfoRowProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/InfoRow
  */
-export const InfoRow: React.FunctionComponent<InfoRowProps> = ({
-  header,
-  children,
-  ...restProps
-}: InfoRowProps) => (
+export const InfoRow = ({ header, children, ...restProps }: InfoRowProps) => (
   <Headline {...restProps} vkuiClass="InfoRow" weight="3">
     {hasReactNode(header) && (
       <Subhead Component="span" vkuiClass="InfoRow__header">

package/src/components/InitialsAvatar/Readme.md

@@ -1,7 +1,7 @@
 Компонент для отображения текстовых аватаров на фоне градиента (например, когда у пользователя нет установленного изображения).
 Для лучшего отображения, рекомендуется использовать длину текста <b>не более 2 символов</b>.
 
-ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](#/Utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
+ВКонтакте использует формулу `user_id % 6 + 1` (см. функцию [`calcInitialsAvatarColor`](https://vkcom.github.io/VKUI/#/Utils)) для определения градиента пользователя. Например, у пользователя c id 106 будет 5-й (`l-blue`) цвет градиента.
 
 ```jsx { "props": { "layout": false, "iframe": false } }
 <div style={{ display: "flex", padding: 12, gap: 8, flexFlow: "row wrap" }}>

package/src/components/Input/Input.tsx

@@ -15,7 +15,7 @@ export interface InputProps
     AdaptivityProps,
     FormFieldProps {}
 
-const InputComponent: React.FunctionComponent<InputProps> = ({
+const InputComponent = ({
   type = "text",
   align,
   getRef,

package/src/components/InputLike/InputLike.tsx

@@ -28,7 +28,7 @@ function getMaskElements(length: number) {
   return result;
 }
 
-export const InputLike: React.FC<InputLikeProps> = ({
+export const InputLike = ({
   value,
   length,
   index,
@@ -37,7 +37,7 @@ export const InputLike: React.FC<InputLikeProps> = ({
   onFocus,
   getRootRef,
   ...props
-}) => {
+}: InputLikeProps) => {
   const handleElementSelect = React.useCallback(
     (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
       stopPropagation(event);

package/src/components/InputLike/InputLikeDivider.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import "./InputLikeDivider.css";
 
-export const InputLikeDivider: React.FC<
-  React.InputHTMLAttributes<HTMLSpanElement>
-> = ({ children, ...props }) => {
+export const InputLikeDivider = ({
+  children,
+  ...props
+}: React.InputHTMLAttributes<HTMLSpanElement>) => {
   return (
     <span vkuiClass="InputLikeDivider" {...props}>
       {children}

package/src/components/Link/Link.css

@@ -1,5 +1,5 @@
 .Link {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_text_link));
   text-decoration: none;
   border: 0;
   background: none;
@@ -11,6 +11,26 @@
   border-radius: 0;
 }
 
+@media (hover: hover) {
+  .Link:hover {
+    text-decoration: underline;
+  }
+}
+
+.Link--focus-visible {
+  /**
+   * На момент v4.33.0, реализация <FocusVisible /> не подошла, т.к. текст может быть многострочным.
+   * Поэтому используем свой класс и применяем `outline`.
+   *
+   * `!important` – чтобы перебить глобальное обнуление `outline` на `:focus`.
+   */
+  outline: 2px solid var(--accent, var(--vkui--color_stroke_accent)) !important;
+}
+
+.Link--has-visited:visited {
+  color: var(--vkui--color_text_link_visited);
+}
+
 .Link .Icon {
   margin-left: 4px;
   display: inline-block;

package/src/components/Link/Link.tsx

@@ -1,28 +1,26 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
 import "./Link.css";
 
-export type LinkProps = TappableProps;
+export interface LinkProps extends TappableProps {
+  /**
+   * Включает состояние `visited`, которое позволяет пользователю понять посещал ли он ссылку или нет
+   */
+  hasVisited?: boolean;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Link
  */
-export const Link: React.FC<LinkProps> = ({
-  children,
-  ...restProps
-}: LinkProps) => {
-  const platform = usePlatform();
-
+export const Link = ({ hasVisited, children, ...restProps }: LinkProps) => {
   return (
     <Tappable
       Component={restProps.href ? "a" : "button"}
       {...restProps}
-      vkuiClass={getClassName("Link", platform)}
-      hasActive={false}
-      hoverMode="opacity"
-      focusVisibleMode="outside"
+      vkuiClass={classNames("Link", hasVisited && "Link--has-visited")}
+      hasHover={false}
+      activeMode="opacity"
+      focusVisibleMode="Link--focus-visible"
     >
       {children}
     </Tappable>

package/src/components/Link/Readme.md

@@ -1,8 +1,40 @@
 Надстройка над `<a />`. Компонент принимает все валидные для этого элемента свойства.
 
-```jsx static
-import { Link } from '@vkontakte/vkui';
+Все типографические свойства наследуются от родителя, а именно:
 
-<Link href="https://google.com" target="_blank">Google</Link>
-<Link href="/profile">Profile</Link>
+- семейство шрифта
+- размер шрифта
+- межстрочное расстояние
+- межбуквенное расстояние
+- вес шрифта
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div
+  style={{
+    padding: 24,
+  }}
+>
+  <Link href="#/About">О VKUI</Link>
+
+  <Spacing size={24} />
+
+  <Link href="https://google.com" target="_blank">
+    https://google.com <Icon24ExternalLinkOutline width={16} height={16} />
+  </Link>
+
+  <Spacing size={24} />
+
+  <div style={{ width: 304 }}>
+    Нажимая «Продолжить», вы принимаете{" "}
+    <Link href="#">пользовательское соглашение</Link> и{" "}
+    <Link href="#">политику конфиденциальности</Link>.
+  </div>
+
+  <Spacing size={24} />
+
+  <Link href="#/Link" hasVisited>
+    Если посетить эту ссылку, то она будет использовать состояние
+    <code>visited</code>
+  </Link>
+</div>
 ```

package/src/components/List/List.tsx

@@ -1,27 +1,22 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
 import { ListContext } from "./ListContext";
 import "./List.css";
 
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export const List: React.FunctionComponent<
-  React.HTMLAttributes<HTMLDivElement>
-> = ({ children, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => {
-  const platform = usePlatform();
+export const List = ({
+  children,
+  ...restProps
+}: React.HTMLAttributes<HTMLDivElement>) => {
   const [isDragging, toggleDrag] = React.useState(false);
 
   return (
     <div
       role="list"
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("List", platform), {
-        "List--dragging": isDragging,
-      })}
+      vkuiClass={classNames("List", isDragging && "List--dragging")}
     >
       <ListContext.Provider value={React.useMemo(() => ({ toggleDrag }), [])}>
         {children}

package/src/components/MiniInfoCell/MiniInfoCell.css

@@ -1,19 +1,19 @@
 .MiniInfoCell {
   display: flex;
-  padding: 6px 12px;
+  padding: 6px var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .MiniInfoCell--lvl-primary {
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .MiniInfoCell--lvl-secondary {
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
 }
 
 .MiniInfoCell__icon {
   margin-right: 12px;
-  color: var(--icon_outline_secondary);
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
 }
 
 .MiniInfoCell__content {
@@ -45,23 +45,15 @@
 
 .MiniInfoCell--md-add,
 .MiniInfoCell--md-add .MiniInfoCell__icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .MiniInfoCell--md-more,
 .MiniInfoCell--md-more .MiniInfoCell__icon {
-  color: var(--link_alternate);
+  color: var(--link_alternate, var(--vkui--color_icon_accent));
 }
 
 .MiniInfoCell--md-more {
   padding-top: 10px;
   padding-bottom: 10px;
 }
-
-/**
- * ANDROID
- */
-.MiniInfoCell--android {
-  padding-left: 16px;
-  padding-right: 16px;
-}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -1,9 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import { Text } from "../Typography/Text/Text";
-import { Tappable } from "../../components/Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { hasReactNode } from "../../lib/utils";
 import "./MiniInfoCell.css";
 
@@ -52,13 +50,15 @@ export interface MiniInfoCellProps
 /**
  * @see https://vkcom.github.io/VKUI/#/MiniInfoCell
  */
-export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
-  props: MiniInfoCellProps
-) => {
-  const platform = usePlatform();
-  const { before, after, mode, textWrap, textLevel, children, ...restProps } =
-    props;
-
+export const MiniInfoCell = ({
+  before,
+  after,
+  mode = "base",
+  textWrap = "nowrap",
+  textLevel = "secondary",
+  children,
+  ...restProps
+}: MiniInfoCellProps) => {
   const isClickable = !!restProps.onClick;
 
   return (
@@ -67,13 +67,10 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
       disabled={!isClickable}
       role={isClickable ? "button" : undefined}
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("MiniInfoCell", platform),
-        {
-          [`MiniInfoCell--md-${mode}`]: mode !== "base",
-          [`MiniInfoCell--wr-${textWrap}`]: textWrap !== "nowrap",
-        },
+        "MiniInfoCell",
+        mode !== "base" && `MiniInfoCell--md-${mode}`,
+        textWrap !== "nowrap" && `MiniInfoCell--wr-${textWrap}`,
         `MiniInfoCell--lvl-${textLevel}`
       )}
     >
@@ -90,9 +87,3 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
     </Tappable>
   );
 };
-
-MiniInfoCell.defaultProps = {
-  mode: "base",
-  textWrap: "nowrap",
-  textLevel: "secondary",
-};