@vkontakte/vkui 4.28.1 → 4.29.0

package/src/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
 import { Modifier, usePopper } from "react-popper";
 import { Placement } from "@popperjs/core";
@@ -184,7 +184,8 @@ const Tooltip: React.FC<TooltipProps> = ({
           primitiveChild && JSON.stringify(children),
         ]
           .filter(Boolean)
-          .join(" ")
+          .join(" "),
+        "error"
       );
   }
 
@@ -207,7 +208,7 @@ const Tooltip: React.FC<TooltipProps> = ({
     );
   }
 
-  const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {
+  const arrowOffsetModifier = React.useMemo<ArrowOffsetModifier>(() => {
     return {
       name: "arrowOffset",
       enabled: true,
@@ -261,7 +262,7 @@ const Tooltip: React.FC<TooltipProps> = ({
       {
         name: "flip",
       },
-      arrowOffsetModiifer,
+      arrowOffsetModifier,
     ],
   });
 

package/src/components/Touch/Touch.tsx

@@ -91,10 +91,10 @@ export const Touch: React.FC<TouchProps> = ({
   const gesture = React.useRef<Partial<Gesture> | null>(null);
   const handle = (
     e: VKUITouchEvent,
-    handers: Array<TouchEventHandler | undefined | false>
+    handlers: Array<TouchEventHandler | undefined | false>
   ) => {
     stopPropagation && e.stopPropagation();
-    handers.forEach((cb) => {
+    handlers.forEach((cb) => {
       const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
       cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
@@ -209,7 +209,7 @@ export const Touch: React.FC<TouchProps> = ({
     if (touchEnabled()) {
       onLeave && onLeave(e);
     }
-    subscribe(null);
+    unsubscribe();
   }
 
   const listenerParams = { capture: useCapture, passive: false };
@@ -223,6 +223,9 @@ export const Touch: React.FC<TouchProps> = ({
       listeners.forEach((l) => l.add(el));
     }
   }
+  function unsubscribe() {
+    listeners.forEach((l) => l.remove());
+  }
 
   /**
    * Обработчик событий dragstart

package/src/components/Touch/TouchContext.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 
 /**
  * Контекст для компонентов, использующих Touch в качестве корневой обёртки,
- * и для которых важно не предотвращать вспылие тач-событий от дочерних компонентов
+ * и для которых важно не предотвращать всплытие тач-событий от дочерних компонентов
  */
 const TouchRootContext: React.Context<boolean> =
   React.createContext<boolean>(false);

package/src/components/Typography/Caption/Caption.css

@@ -62,17 +62,17 @@
 }
 
 .Caption.Caption--w-1 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent1);
 }
 
 .Caption.Caption--w-2 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent2);
 }
 
 .Caption.Caption--w-3 {
-  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  /* Мы утяжеляем селектор, чтобы перебить селекторы .Caption--caps */
   font-weight: var(--vkui--font_weight_accent3);
 }
 

package/src/components/Typography/Paragraph/Paragraph.css

@@ -0,0 +1,17 @@
+.Paragraph {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_paragraph--font_weight--regular);
+}
+
+.Paragraph--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Paragraph--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Paragraph--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { classNames } from "../../../lib/classNames";
+import { warnOnce } from "../../../lib/warnOnce";
+import { HasComponent, HasRootRef } from "../../../types";
+import "./Paragraph.css";
+
+export interface ParagraphProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement>,
+    HasComponent {
+  /**
+   * Задаёт начертание шрифта, отличное от стандартного.
+   */
+  weight?: "1" | "2" | "3";
+}
+
+const warn = warnOnce("Paragraph");
+export const Paragraph: React.FC<ParagraphProps> = ({
+  Component = "span",
+  getRootRef,
+  weight,
+  children,
+  ...restProps
+}) => {
+  if (
+    process.env.NODE_ENV === "development" &&
+    typeof Component !== "string" &&
+    getRootRef
+  ) {
+    warn("getRootRef может использоваться только с элементами DOM", "error");
+  }
+
+  return (
+    <Component
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={classNames("Paragraph", weight && `Paragraph--w-${weight}`)}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Paragraph/Readme.md

@@ -0,0 +1,19 @@
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Paragraph>Paragraph</Paragraph>
+</div>
+```
+
+## Кастомизация
+
+Есть возможность переопределить жирность.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Paragraph weight="1">Paragraph weight 1</Paragraph>
+  <Spacing size={16} />
+  <Paragraph weight="2">Paragraph weight 2</Paragraph>
+  <Spacing size={16} />
+  <Paragraph weight="3">Paragraph weight 3</Paragraph>
+</div>
+```

package/src/components/Typography/Subhead/Subhead.tsx

@@ -17,13 +17,12 @@ export interface SubheadProps
 }
 
 const warn = warnOnce("Subhead");
-
-const Subhead: React.FC<SubheadProps> = ({
+export const Subhead: React.FC<SubheadProps> = ({
   children,
   weight,
   Component = "h5",
   ...restProps
-}: SubheadProps) => {
+}) => {
   const { sizeY } = useAdaptivity();
 
   if (process.env.NODE_ENV === "development") {
@@ -42,13 +41,10 @@ const Subhead: React.FC<SubheadProps> = ({
       vkuiClass={classNames(
         "Subhead",
         `Subhead--sizeY-${sizeY}`,
-        `Subhead--w-${weight}`
+        weight && `Subhead--w-${weight}`
       )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Subhead;

package/src/components/Typography/Text/Text.tsx

@@ -28,7 +28,7 @@ const Text: React.FC<TextProps> = ({
     typeof Component !== "string" &&
     getRootRef
   ) {
-    warn("getRootRef can only be used with DOM components");
+    warn("getRootRef can only be used with DOM components", "error");
   }
 
   return (

package/src/components/Typography/Title/Title.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { HasComponent } from "../../../types";
 import { classNames } from "../../../lib/classNames";
 import { warnOnce } from "../../../lib/warnOnce";
-import { resolveWeight } from "../../../helpers/typography";
 import "./Title.css";
 
 export interface TitleProps
@@ -26,14 +25,13 @@ export interface TitleProps
 }
 
 const warn = warnOnce("Title");
-
-const Title: React.FC<TitleProps> = ({
+export const Title: React.FC<TitleProps> = ({
   children,
   weight,
   level = "1",
   Component,
   ...restProps
-}: TitleProps) => {
+}) => {
   if (!Component) {
     Component = ("h" + level) as React.ElementType;
   }
@@ -51,14 +49,13 @@ const Title: React.FC<TitleProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames("Title", `Title--l-${level}`, {
-        [`Title--w-${resolveWeight(weight)}`]: !!weight,
-      })}
+      vkuiClass={classNames(
+        "Title",
+        `Title--l-${level}`,
+        weight && `Title--w-${weight}`
+      )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Title;

package/src/components/UsersStack/UsersStack.tsx

@@ -5,7 +5,7 @@ import { hasReactNode } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { Caption } from "../Typography/Caption/Caption";
-import Subhead from "../Typography/Subhead/Subhead";
+import { Subhead } from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
 import "./UsersStack.css";
@@ -54,6 +54,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("UsersStack", platform),
         `UsersStack--size-${size}`,

package/src/components/View/Readme.md

@@ -48,7 +48,7 @@ const [activePanel, setActivePanel] = useState("panel1");
 
 - Передать во `View` коллбек `onSwipeBack` — он сработает при завершении анимации свайпа. Поменяйте в нем `activePanel` и обновите `history`.
 - Передать во `View` проп `history` — массив из id панелей в порядке открытия. Например, если пользователь из `main` перешел в `profile`, а оттуда попал в `education`, то `history=['main', 'profile', 'education']`.
-- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<СonfigProvider isWebView>`.
+- Обернуть ваше приложение в `ConfigProvider` — он определит, открыто приложение в webview клиента VK или в браузере (там есть свой swipe back, который будет конфликтовать с нашим). Для проверки в браузере форсируйте определение webview: `<ConfigProvider isWebView>`.
 - На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы не из ВК,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true` на первой панели или `history: false` на других. **Если вы из ВК,** при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
 - Компоненты, которые сами обрабатывают жесты (например, карта), могут конфликтовать со свайпбеком — повесьте на них свойство `data-vkui-swipe-back={false}`
 

package/src/components/View/View.css

@@ -89,7 +89,7 @@
  * Panel transition
  */
 .View__panel--next ~ .View__panel--prev {
-  animation: vkui-animation-view-prev-back 0.3s var(--android-easing);
+  animation: vkui-animation-view-prev-back 0.3s var(--android-easing) forwards;
 }
 
 .View__panel--prev ~ .View__panel--next {

package/src/components/View/View.tsx

@@ -171,6 +171,9 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
     if (id) {
       scrollsCache[id] = this.scrolls;
     }
+    if (this.animationFinishTimeout) {
+      clearTimeout(this.animationFinishTimeout);
+    }
   }
 
   componentDidUpdate(prevProps: ViewProps, prevState: ViewState) {
@@ -606,6 +609,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
             return (
               <div
+                // eslint-disable-next-line vkui/no-object-expression-in-arguments
                 vkuiClass={classNames("View__panel", {
                   "View__panel--active": panelId === activePanel,
                   "View__panel--prev": panelId === prevPanel,

package/src/components/View/ViewIOS.css

@@ -54,7 +54,7 @@
 }
 
 .View--ios .View__panel--next ~ .View__panel--prev {
-  animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing);
+  animation: vkui-animation-ios-prev-back 0.6s var(--ios-easing) forwards;
 }
 
 .View--ios .View__panel--prev .Panel__fade,
@@ -74,7 +74,7 @@
 }
 
 .View--ios .View__panel--next .Panel__fade {
-  animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing);
+  animation: vkui-animation-ios-fade-out 0.6s var(--ios-easing) forwards;
 }
 
 .View--ios .View__panel--prev ~ .View__panel--next .Panel__fade,

package/src/components/View/ViewInfinite.tsx

@@ -154,6 +154,9 @@ class ViewInfiniteComponent extends React.Component<
     if (id) {
       scrollsCache[id] = this.scrolls;
     }
+    if (this.animationFinishTimeout) {
+      clearTimeout(this.animationFinishTimeout);
+    }
   }
 
   componentDidUpdate(
@@ -669,6 +672,7 @@ class ViewInfiniteComponent extends React.Component<
 
             return (
               <div
+                // eslint-disable-next-line vkui/no-object-expression-in-arguments
                 vkuiClass={classNames("View__panel", {
                   "View__panel--active": panelId === activePanel,
                   "View__panel--prev": panelId === prevPanel,

package/src/components/View/utils.ts

@@ -5,5 +5,6 @@ const swipeBackExcludedSelector =
 
 export function swipeBackExcluded(e: TouchEvent) {
   const target = e.originalEvent.target as HTMLElement;
-  return Boolean(target?.closest(swipeBackExcludedSelector));
+  // eslint-disable-next-line no-restricted-properties
+  return Boolean(target?.closest?.(swipeBackExcludedSelector));
 }

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -76,7 +76,8 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
 
   if (IS_DEV && !restProps["aria-label"] && !ariaLabel) {
     warn(
-      "[WriteBarIcon/a11y] У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей."
+      "a11y: У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.",
+      "error"
     );
   }
 
@@ -87,6 +88,7 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
       Component="button"
       hasHover={false}
       activeMode="WriteBarIcon__active"
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(getClassName("WriteBarIcon", platform), {
         [`WriteBarIcon--${mode}`]: !!mode,
       })}

package/src/helpers/scheme.ts

@@ -61,7 +61,7 @@ export function normalizeScheme({
   if (scheme === Scheme.VKCOM) {
     process.env.NODE_ENV === "development" &&
       warn(
-        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
+        `Схема "${Scheme.VKCOM}" устарела и будет удалена в v5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
       );
     return Scheme.VKCOM_LIGHT;
   }
@@ -71,7 +71,8 @@ export function normalizeScheme({
   ) {
     process.env.NODE_ENV === "development" &&
       warn(
-        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
+        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`,
+        "error"
       );
     return Scheme.VKCOM_LIGHT;
   }

package/src/hooks/useBridgeAdaptivity.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import vkBridge from "@vkontakte/vk-bridge";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+
+export interface BridgeAdaptivity {
+  type: "" | "force_mobile" | "force_mobile_compact" | "adaptive";
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+interface BridgeEvent {
+  detail: {
+    type: string;
+    data: {
+      [index: string]: any;
+    };
+  };
+}
+
+let initialState: BridgeAdaptivity = {
+  type: "",
+  viewportWidth: 0,
+  viewportHeight: 0,
+};
+
+function resolveAdaptivity(e: BridgeEvent): BridgeAdaptivity | null {
+  const { type, data } = e.detail;
+
+  if (type !== "VKWebAppUpdateConfig" || !data) {
+    return null;
+  }
+
+  const {
+    adaptivity,
+    viewport_width: viewportWidth,
+    viewport_height: viewportHeight,
+  } = data;
+
+  const bridgeAdaptivity: BridgeAdaptivity = {
+    type: "",
+    viewportWidth: isFinite(viewportWidth) ? +viewportWidth : 0,
+    viewportHeight: isFinite(viewportHeight) ? +viewportHeight : 0,
+  };
+
+  switch (adaptivity) {
+    case "force_mobile":
+    case "force_mobile_compact":
+    case "adaptive":
+      bridgeAdaptivity.type = adaptivity;
+  }
+
+  return bridgeAdaptivity;
+}
+
+vkBridge.subscribe((e: BridgeEvent) => {
+  const bridgeAdaptivity = resolveAdaptivity(e);
+
+  if (bridgeAdaptivity) {
+    initialState = bridgeAdaptivity;
+  }
+});
+
+export function useBridgeAdaptivity(): BridgeAdaptivity {
+  const [bridgeAdaptivity, setBridgeAdaptivity] =
+    React.useState<BridgeAdaptivity>(initialState);
+
+  useIsomorphicLayoutEffect(() => {
+    function bridgeListener(e: BridgeEvent) {
+      const newBridgeAdaptivity = resolveAdaptivity(e);
+
+      if (newBridgeAdaptivity) {
+        setBridgeAdaptivity(newBridgeAdaptivity);
+      }
+    }
+
+    vkBridge.subscribe(bridgeListener);
+    return () => {
+      vkBridge.unsubscribe(bridgeListener);
+    };
+  }, []);
+
+  return bridgeAdaptivity;
+}

package/src/hooks/useCalendar.ts

@@ -7,7 +7,7 @@ import {
   endOfDay,
   isAfter,
   startOfDay,
-} from "date-fns";
+} from "../lib/date";
 
 export interface UseCalendarDependencies {
   value?: Array<Date | null> | Date;

package/src/hooks/useKeyboard.ts

@@ -8,7 +8,7 @@ interface SoftwareKeyboardState {
 }
 
 /**
- Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большиству устройств
+ Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большинству устройств
  Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
  */
 export function getPreciseKeyboardState(window: any): boolean {

package/src/hooks/usePagination.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-interface UsePagintaionProps {
+interface UsePaginationProps {
   /**
    * Текущая страница.
    */
@@ -24,7 +24,7 @@ export type PaginationPageType = "start-ellipsis" | "end-ellipsis" | number;
 export type UsePaginationResult = PaginationPageType[];
 
 /**
- * Хук взаимствован у @mui с некоторыми изменениями.
+ * Хук позаимствован у @mui с некоторыми изменениями.
  *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
  *
  * Примеры вывода:
@@ -40,7 +40,7 @@ export const usePagination = ({
   siblingCount = 1,
   boundaryCount = 1,
   totalPages: endPage = 1,
-}: UsePagintaionProps = {}): UsePaginationResult =>
+}: UsePaginationProps = {}): UsePaginationResult =>
   React.useMemo(() => {
     const range = (from: number, to: number, step = 1) => {
       const range = [];
@@ -67,10 +67,10 @@ export const usePagination = ({
       boundaryCount + 2
     );
 
-    const upperBounadryWhenCurrentPageLow =
+    const upperBoundaryWhenCurrentPageLow =
       boundaryCount + 2 + 2 * siblingCount;
     const siblingsEnd = Math.min(
-      Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow),
+      Math.max(currentPage + siblingCount, upperBoundaryWhenCurrentPageLow),
       endPages.length > 0 ? endPages[0] - 2 : endPage - 1
     );
 

package/src/hooks/usePatchChildrenRef.ts

@@ -23,8 +23,8 @@ export const usePatchChildrenRef = <T = HTMLElement>(
   React.useEffect(() => {
     if (!patchedRef.current && process.env.NODE_ENV === "development") {
       warn(
-        "Кажется, в `children` передан компонент, который не поддерживает свойство `getRootRef`. Мы не можем" +
-          "получить ссылку на корневой dom-элемент этого компонента"
+        "Кажется, в children передан компонент, который не поддерживает свойство getRootRef. Мы не можем получить ссылку на корневой dom-элемент этого компонента",
+        "error"
       );
     }
   }, [children?.type, patchedRef]);

package/src/hooks/useWaitTransitionFinish.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
+import { useDOM } from "../lib/dom";
 import { transitionEvent } from "../lib/supportEvents";
 
 export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const { document } = useDOM();
 
   const waitTransitionFinish = (
     element: HTMLElement | null,
@@ -10,7 +12,11 @@ export const useWaitTransitionFinish = () => {
     durationFallback: number
   ) => {
     if (element) {
-      if (transitionEvent.supported && transitionEvent.name) {
+      if (
+        !document?.hidden &&
+        transitionEvent.supported &&
+        transitionEvent.name
+      ) {
         element.removeEventListener(transitionEvent.name, eventHandler);
         element.addEventListener(transitionEvent.name, eventHandler);
       } else {