@vkontakte/vkui 4.28.1 → 4.30.0

package/src/components/Gradient/Gradient.css

@@ -40,7 +40,8 @@
   );
 }
 
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top,
+body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-top {
   background: linear-gradient(
     to top,
     #232324,
@@ -61,7 +62,8 @@ body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-top {
   );
 }
 
-body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom {
+body[scheme="space_gray"] .Gradient--md-tint.Gradient--to-bottom,
+body[scheme="vkcom_dark"] .Gradient--md-tint.Gradient--to-bottom {
   background: linear-gradient(
     to bottom,
     #232324,

package/src/components/GridAvatar/GridAvatar.css

@@ -11,27 +11,24 @@
 
 .GridAvatar__item {
   width: calc(50% - var(--grid-avatar-image-offset) / 2);
-  height: 100%;
+  height: calc(50% - var(--grid-avatar-image-offset) / 2);
+  margin-right: var(--grid-avatar-image-offset);
   background-size: cover;
   background-position: center;
 }
 
-.GridAvatar--images-1 .GridAvatar__item {
+.GridAvatar__item:only-child {
   width: 100%;
 }
 
-.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-4 .GridAvatar__item {
-  height: calc(50% - var(--grid-avatar-image-offset) / 2);
-}
-
-.GridAvatar--images-2 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-3 .GridAvatar__item:nth-child(1n + 2),
-.GridAvatar--images-4 .GridAvatar__item:nth-child(1n + 3) {
-  margin-left: var(--grid-avatar-image-offset);
+.GridAvatar__item:first-child:not(:nth-last-child(4)),
+.GridAvatar__item:nth-child(2):last-child {
+  height: 100%;
 }
 
-.GridAvatar--images-3 .GridAvatar__item:nth-child(2),
-.GridAvatar--images-4 .GridAvatar__item:nth-child(odd) {
+/* если есть минимум три элемента — выбираем второй с конца */
+.GridAvatar__item:nth-last-child(n + 3) ~ .GridAvatar__item:nth-last-child(2),
+/* четвертый с конца */
+.GridAvatar__item:nth-last-child(4) {
   margin-bottom: var(--grid-avatar-image-offset);
 }

package/src/components/GridAvatar/GridAvatar.tsx

@@ -12,41 +12,29 @@ export interface GridAvatarProps
   src?: string[];
 }
 
-const MIN_GRID_LENGTH = 1;
-const MAX_GRID_LENGTH = 4;
+export const MAX_GRID_LENGTH = 4;
 
 const warn = warnOnce("GridAvatar");
-
 export const GridAvatar: React.FC<GridAvatarProps> = ({
   src = [],
   ...restProps
-}: GridAvatarProps) => {
+}) => {
   if (process.env.NODE_ENV === "development" && src.length > MAX_GRID_LENGTH) {
     warn(
-      `Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`
+      `Длина массива src (${src.length}) больше максимальной (${MAX_GRID_LENGTH})`
     );
   }
 
-  const count = Math.max(
-    MIN_GRID_LENGTH,
-    Math.min(MAX_GRID_LENGTH, src.length)
-  );
-
   return (
-    <Avatar
-      {...restProps}
-      vkuiClass={classNames("GridAvatar", `GridAvatar--images-${count}`)}
-    >
-      <div vkuiClass="GridAvatar__in">
-        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {
-          return (
-            <div
-              key={i}
-              vkuiClass="GridAvatar__item"
-              style={{ backgroundImage: `url(${src})` }}
-            ></div>
-          );
-        })}
+    <Avatar {...restProps} vkuiClass={classNames("GridAvatar")}>
+      <div vkuiClass="GridAvatar__in" aria-hidden="true">
+        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => (
+          <div
+            key={i}
+            vkuiClass="GridAvatar__item"
+            style={{ backgroundImage: `url(${src})` }}
+          />
+        ))}
       </div>
     </Avatar>
   );

package/src/components/Group/Group.tsx

@@ -76,6 +76,7 @@ const Group: React.FC<GroupProps> = (props: GroupProps) => {
 
       {separator !== "hide" && (
         <Separator
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("Group__separator", {
             "Group__separator--force": separator === "show",
           })}

package/src/components/Header/Header.tsx

@@ -7,9 +7,9 @@ import { hasReactNode, isPrimitiveReactNode } from "../../lib/utils";
 import { Platform } from "../../lib/platform";
 import Headline from "../Typography/Headline/Headline";
 import { Caption } from "../Typography/Caption/Caption";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Text from "../Typography/Text/Text";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import "./Header.css";
 
 export interface HeaderProps
@@ -111,6 +111,7 @@ const Header: React.FC<HeaderProps> = ({
     <header
       {...restProps}
       ref={getRootRef}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Header", platform),
         `Header--mode-${mode}`,
@@ -125,6 +126,7 @@ const Header: React.FC<HeaderProps> = ({
           platform={platform}
         >
           <span
+            // eslint-disable-next-line vkui/no-object-expression-in-arguments
             vkuiClass={classNames("Header__content-in", {
               "Header__content-in--multiline": multiline,
             })}
@@ -144,7 +146,11 @@ const Header: React.FC<HeaderProps> = ({
         </HeaderContent>
 
         {hasReactNode(subtitle) && (
-          <HeaderSubtitle vkuiClass="Header__subtitle" Component="span">
+          <HeaderSubtitle
+            vkuiClass="Header__subtitle"
+            Component="span"
+            mode={mode}
+          >
             {subtitle}
           </HeaderSubtitle>
         )}

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -5,7 +5,7 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import Avatar from "../Avatar/Avatar";
 import { HasComponent, HasRef, HasRootRef } from "../../types";
 import "./HorizontalCell.css";

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -48,6 +48,12 @@ function now() {
   return performance && performance.now ? performance.now() : Date.now();
 }
 
+/**
+ * Округляем el.scrollLeft
+ * https://github.com/VKCOM/VKUI/pull/2445
+ */
+const roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);
+
 /**
  * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
  * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
@@ -74,7 +80,7 @@ function doScroll({
    */
   const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
 
-  let startLeft = scrollElement.scrollLeft;
+  let startLeft = roundUpElementScrollLeft(scrollElement);
   let endLeft = getScrollPosition(startLeft);
 
   onScrollStart();
@@ -100,7 +106,7 @@ function doScroll({
     const currentLeft = startLeft + (endLeft - startLeft) * value;
     scrollElement.scrollLeft = Math.ceil(currentLeft);
 
-    if (scrollElement.scrollLeft !== Math.max(0, endLeft)) {
+    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft)) {
       requestAnimationFrame(scroll);
       return;
     }
@@ -113,7 +119,7 @@ function doScroll({
   })();
 }
 
-const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
+const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
   children,
   getScrollToLeft,
   getScrollToRight,
@@ -122,7 +128,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   hasMouse,
   getRef,
   ...restProps
-}: HorizontalScrollProps) => {
+}) => {
   const [canScrollLeft, setCanScrollLeft] = React.useState(false);
   const [canScrollRight, setCanScrollRight] = React.useState(false);
 
@@ -132,25 +138,41 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
 
   const animationQueue = React.useRef<VoidFunction[]>([]);
 
-  function scrollTo(getScrollPosition: (offset: number) => number) {
-    const scrollElement = scrollerRef.current;
-
-    animationQueue.current.push(() =>
-      doScroll({
-        scrollElement,
-        getScrollPosition,
-        animationQueue: animationQueue.current,
-        onScrollToRightBorder: () => setCanScrollRight(false),
-        onScrollEnd: () => (isCustomScrollingRef.current = false),
-        onScrollStart: () => (isCustomScrollingRef.current = true),
-        initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
-        scrollAnimationDuration,
-      })
-    );
-    if (animationQueue.current.length === 1) {
-      animationQueue.current[0]();
-    }
-  }
+  const scrollTo = React.useCallback(
+    (getScrollPosition: ScrollPositionHandler) => {
+      const scrollElement = scrollerRef.current;
+
+      animationQueue.current.push(() =>
+        doScroll({
+          scrollElement,
+          getScrollPosition,
+          animationQueue: animationQueue.current,
+          onScrollToRightBorder: () => setCanScrollRight(false),
+          onScrollEnd: () => (isCustomScrollingRef.current = false),
+          onScrollStart: () => (isCustomScrollingRef.current = true),
+          initialScrollWidth:
+            scrollElement?.firstElementChild?.scrollWidth || 0,
+          scrollAnimationDuration,
+        })
+      );
+      if (animationQueue.current.length === 1) {
+        animationQueue.current[0]();
+      }
+    },
+    [scrollAnimationDuration, scrollerRef]
+  );
+
+  const scrollToLeft = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToLeft, scrollTo, scrollerRef]);
+
+  const scrollToRight = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToRight, scrollTo, scrollerRef]);
 
   const onscroll = React.useCallback(() => {
     if (
@@ -163,7 +185,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
 
       setCanScrollLeft(scrollElement.scrollLeft > 0);
       setCanScrollRight(
-        scrollElement.scrollLeft + scrollElement.offsetWidth <
+        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <
           scrollElement.scrollWidth
       );
     }
@@ -180,29 +202,16 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("HorizontalScroll", {
         ["HorizontalScroll--withConstArrows"]: showArrows === "always",
       })}
     >
       {showArrows && hasMouse && canScrollLeft && (
-        <HorizontalScrollArrow
-          direction="left"
-          onClick={() => {
-            if (getScrollToLeft) {
-              scrollTo(getScrollToLeft);
-            }
-          }}
-        />
+        <HorizontalScrollArrow direction="left" onClick={scrollToLeft} />
       )}
       {showArrows && hasMouse && canScrollRight && (
-        <HorizontalScrollArrow
-          direction="right"
-          onClick={() => {
-            if (getScrollToRight) {
-              scrollTo(getScrollToRight);
-            }
-          }}
-        />
+        <HorizontalScrollArrow direction="right" onClick={scrollToRight} />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
         <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>
@@ -211,7 +220,6 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   );
 };
 
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(HorizontalScroll, {
+export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
   hasMouse: true,
 });

package/src/components/InfoRow/InfoRow.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import Headline from "../Typography/Headline/Headline";

package/src/components/Input/Input.css

@@ -24,7 +24,7 @@
   height: 42px;
   line-height: 20px;
   font-size: 16px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   padding: 11px;
   position: relative;
   z-index: 2;
@@ -40,13 +40,13 @@
 }
 
 .Input__el:disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Input__el::placeholder {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .Input__el:disabled::placeholder {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }

package/src/components/Input/Input.tsx

@@ -15,13 +15,15 @@ export interface InputProps
     AdaptivityProps,
     FormFieldProps {}
 
-const Input: React.FunctionComponent<InputProps> = ({
+const InputComponent: React.FunctionComponent<InputProps> = ({
+  type = "text",
   align,
   getRef,
   className,
   getRootRef,
   sizeY,
   style,
+  before,
   after,
   ...restProps
 }: InputProps) => {
@@ -30,25 +32,21 @@ const Input: React.FunctionComponent<InputProps> = ({
     <FormField
       vkuiClass={classNames(
         getClassName("Input", platform),
-        { [`Input--${align}`]: !!align },
+        !!align && `Input--${align}`,
         `Input--sizeY-${sizeY}`
       )}
       style={style}
       className={className}
       getRootRef={getRootRef}
+      before={before}
       after={after}
       disabled={restProps.disabled}
     >
-      <input {...restProps} vkuiClass="Input__el" ref={getRef} />
+      <input {...restProps} type={type} vkuiClass="Input__el" ref={getRef} />
     </FormField>
   );
 };
 
-Input.defaultProps = {
-  type: "text",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(Input, {
+export const Input = withAdaptivity(InputComponent, {
   sizeY: true,
 });

package/src/components/InputLike/InputLike.css

@@ -17,7 +17,7 @@
 }
 
 .InputLike__last_character {
-  letter-spacing: 1px;
+  letter-spacing: 1px !important;
 }
 
 .InputLike--full + .InputLikeDivider {

package/src/components/InputLike/InputLikeDivider.css

@@ -1,4 +1,4 @@
 .InputLikeDivider {
   color: var(--vkui--color_text_secondary);
-  letter-spacing: 1px;
+  letter-spacing: 1px !important;
 }

package/src/components/List/List.tsx

@@ -16,6 +16,7 @@ const List: React.FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
     <div
       role="list"
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("List", platform), {
         "List--dragging": isDragging,
       })}

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -64,6 +64,7 @@ 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),
         {

package/src/components/ModalCard/ModalCard.css

@@ -2,6 +2,7 @@
   box-sizing: border-box;
   position: absolute;
   top: 0;
+  padding: 8px;
   left: 0;
   width: 100%;
   height: 100%;
@@ -14,20 +15,9 @@
   width: 100%;
   margin-left: auto;
   margin-right: auto;
-  padding: 8px;
   transform: translateY(100%);
 }
 
-.ModalCard__dismiss {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 48px;
-  height: 48px;
-  color: var(--placeholder_icon_foreground_primary);
-  justify-content: center;
-}
-
 /**
  * iOS
  */

package/src/components/ModalCard/ModalCard.tsx

@@ -61,6 +61,7 @@ const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalCard", platform), {
         "ModalCard--desktop": isDesktop,
       })}

package/src/components/ModalCardBase/ModalCardBase.css

@@ -65,6 +65,16 @@
   margin-right: 0;
 }
 
+.ModalCardBase__dismiss {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 48px;
+  height: 48px;
+  color: var(--placeholder_icon_foreground_primary);
+  justify-content: center;
+}
+
 /**
  * iOS
  */

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { hasReactNode } from "../../lib/utils";
-import Title from "../Typography/Title/Title";
+import { Title } from "../Typography/Title/Title";
 import Headline from "../Typography/Headline/Headline";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
@@ -51,6 +51,11 @@ export interface ModalCardBaseProps
    */
   actionsLayout?: "vertical" | "horizontal";
   onClose?: VoidFunction;
+
+  /**
+   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.
+   */
+  dismissLabel?: string;
 }
 
 export const ModalCardBase = withAdaptivity<
@@ -68,6 +73,7 @@ export const ModalCardBase = withAdaptivity<
     hasMouse,
     viewHeight,
     onClose,
+    dismissLabel = "Скрыть",
     ...restProps
   }) => {
     const platform = usePlatform();
@@ -82,12 +88,14 @@ export const ModalCardBase = withAdaptivity<
     return (
       <div
         {...restProps}
+        // eslint-disable-next-line vkui/no-object-expression-in-arguments
         vkuiClass={classNames(getClassName("ModalCardBase", platform), {
           "ModalCardBase--desktop": isDesktop,
         })}
         ref={getRootRef}
       >
         <div
+          // eslint-disable-next-line vkui/no-object-expression-in-arguments
           vkuiClass={classNames("ModalCardBase__container", {
             "ModalCardBase__container--softwareKeyboardOpened":
               isSoftwareKeyboardOpened,
@@ -115,6 +123,7 @@ export const ModalCardBase = withAdaptivity<
 
           {hasReactNode(actions) && (
             <div
+              // eslint-disable-next-line vkui/no-object-expression-in-arguments
               vkuiClass={classNames("ModalCardBase__actions", {
                 "ModalCardBase__actions--v": actionsLayout === "vertical",
               })}
@@ -125,7 +134,11 @@ export const ModalCardBase = withAdaptivity<
 
           {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}
           {canShowCloseBtnIos && (
-            <PanelHeaderButton vkuiClass="ModalCard__dismiss" onClick={onClose}>
+            <PanelHeaderButton
+              aria-label={dismissLabel}
+              vkuiClass="ModalCardBase__dismiss"
+              onClick={onClose}
+            >
               <Icon24Dismiss />
             </PanelHeaderButton>
           )}

package/src/components/ModalPage/ModalPage.tsx

@@ -31,7 +31,22 @@ export interface ModalPageProps
    * Шапка модальной страницы, `<ModalPageHeader />`
    */
   header?: React.ReactNode;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
   onClose?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
   /**
    * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
    */
@@ -56,7 +71,10 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
     viewHeight,
     sizeX,
     hasMouse,
+    onOpen,
+    onOpened,
     onClose,
+    onClosed,
     settlingHeight,
     dynamicContentHeight,
     getModalContentRef,
@@ -84,6 +102,7 @@ const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("ModalPage", platform),
         `ModalPage--sizeX-${sizeX}`,

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -30,6 +30,7 @@ const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
         "ModalPageHeader--desktop": isDesktop,
       })}

package/src/components/ModalRoot/ModalRoot.css

@@ -34,13 +34,14 @@
   pointer-events: none;
 }
 
-:not(.ModalRoot--desktop).ModalRoot--ios .ModalRoot__viewport {
+:not(.ModalRoot--desktop).ModalRoot--ios .ModalRoot__viewport,
+:not(.ModalRoot--desktop).ModalRoot--android .ModalRoot__viewport {
   top: var(--safe-area-inset-top);
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--android
   .ModalRoot__viewport {
-  top: var(--panelheader_height_android);
+  top: calc(var(--safe-area-inset-top) + var(--panelheader_height_android));
 }
 
 :not(.ModalRoot--desktop).ModalRoot--vkapps.ModalRoot--ios