@vkontakte/vkui 4.27.2 → 4.29.0

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

@@ -1,51 +1,29 @@
-Упрощения в Android-версии (происходят автоматически):
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Caption level="1" style={{ marginBottom: 16 }}>
+    Caption 1
+  </Caption>
+  <Caption level="2" style={{ marginBottom: 16 }}>
+    Caption 2
+  </Caption>
+  <Caption level="3">Caption 3</Caption>
+</div>
+```
+
+## Кастомизация
 
-- `semibold` превращается в `medium`
+Есть возможность переопределить жирность.
 
-```jsx
-<View activePanel="test">
-  <Panel id="test">
-    <PanelHeader>Caption</PanelHeader>
-    <Group>
-      <Div>
-        <Caption level="1" weight="regular" style={{ marginBottom: 16 }}>
-          Caption 1 regular
-        </Caption>
-        <Caption level="1" weight="medium" style={{ marginBottom: 16 }}>
-          Caption 1 medium
-        </Caption>
-        <Caption level="1" weight="semibold" style={{ marginBottom: 16 }}>
-          Caption 1 semibold
-        </Caption>
-        <Caption level="1" weight="semibold" caps style={{ marginBottom: 16 }}>
-          Caption CAPS 1 semibold
-        </Caption>
-        <Caption level="2" weight="regular" style={{ marginBottom: 16 }}>
-          Caption 2 regular
-        </Caption>
-        <Caption level="2" weight="medium" style={{ marginBottom: 16 }}>
-          Caption 2 medium
-        </Caption>
-        <Caption level="2" weight="semibold" style={{ marginBottom: 16 }}>
-          Caption 2 semibold
-        </Caption>
-        <Caption level="2" weight="semibold" caps style={{ marginBottom: 16 }}>
-          Caption CAPS 2 semibold
-        </Caption>
-        <Caption level="3" weight="regular" style={{ marginBottom: 16 }}>
-          Caption 3 regular
-        </Caption>
-        <Caption level="3" weight="semibold" caps style={{ marginBottom: 16 }}>
-          Caption CAPS 3 semibold
-        </Caption>
-        <Caption level="4" weight="regular" style={{ marginBottom: 16 }}>
-          Caption 4 regular
-        </Caption>
-        <Caption level="4" weight="bold" caps>
-          Caption CAPS 4 bold
-        </Caption>
-      </Div>
-    </Group>
-  </Panel>
-</View>
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ padding: 20 }}>
+  <Caption level="1" weight="1" style={{ marginBottom: 16 }}>
+    Caption 1 weight 1
+  </Caption>
+  <Caption level="1" weight="2" style={{ marginBottom: 16 }}>
+    Caption 1 weight 2
+  </Caption>
+  <Caption level="1" weight="3">
+    Caption 1 weight 3
+  </Caption>
+</div>
 ```

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

@@ -9,19 +9,20 @@ export interface SubheadProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
   /**
-   * Начертания "regular", "medium", "semibold" и "bold" устарели и будут удалены в 5.0.0.
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
    */
   weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
 }
 
 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") {
@@ -40,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

@@ -8,7 +8,9 @@ export interface TitleProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
   /**
-   * Начертания "heavy", "bold", "semibold", "medium" и "regular" устарели и будут удалены в 5.0.0.
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"heavy"`, `"bold"`, `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
    */
   weight?:
     | "heavy"
@@ -23,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;
   }
@@ -48,14 +49,13 @@ const Title: React.FC<TitleProps> = ({
   return (
     <Component
       {...restProps}
-      vkuiClass={classNames("Title", `Title--l-${level}`, {
-        [`Title--w-${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

@@ -4,8 +4,8 @@ import { usePlatform } from "../../hooks/usePlatform";
 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 { Caption } from "../Typography/Caption/Caption";
+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}`,
@@ -74,8 +75,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
 
         {canShowOthers && (
           <Caption
-            weight="medium"
-            level="1"
+            weight="1"
             vkuiClass="UsersStack__photo UsersStack__photo--others"
             aria-hidden="true"
           >

package/src/components/View/Readme.md

@@ -48,8 +48,8 @@ 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>`.
-- На первой панели должен включаться свайпбек нативного клиента, чтобы пользователь смог выйти из приложения — для этого используют `vk-bridge`. **Если вы не из ВК,** при переходах отправляйте [событие `VKWebAppSetSwipeSettings`](https://vk.com/dev.php?method=vk_bridge_events_10&f=Включение%20swipe%20как%20в%20браузере) с `history: true` на первой панели или `history: false` на других. **Если вы из ВК,** при переходе на первую панель отправляйте событие `VKWebAppEnableSwipeBack`, на любую другую — `VKWebAppDisableSwipeBack`.
+- Обернуть ваше приложение в `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}`
 
 ```jsx

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

@@ -100,7 +100,7 @@ export interface ViewInfiniteState {
   browserSwipe: boolean;
 }
 
-class ViewInfinite extends React.Component<
+class ViewInfiniteComponent extends React.Component<
   ViewInfiniteProps & DOMProps,
   ViewInfiniteState
 > {
@@ -154,6 +154,9 @@ class ViewInfinite extends React.Component<
     if (id) {
       scrollsCache[id] = this.scrolls;
     }
+    if (this.animationFinishTimeout) {
+      clearTimeout(this.animationFinishTimeout);
+    }
   }
 
   componentDidUpdate(
@@ -669,6 +672,7 @@ class ViewInfinite 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,
@@ -716,11 +720,10 @@ class ViewInfinite extends React.Component<
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withContext(
+export const ViewInfinite = withContext(
   withContext(
     withContext(
-      withPlatform(withDOM<ViewInfiniteProps>(ViewInfinite)),
+      withPlatform(withDOM<ViewInfiniteProps>(ViewInfiniteComponent)),
       SplitColContext,
       "splitCol"
     ),

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/useBooleanState.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export const useBooleanState = (defaultValue = false) => {
+  const [value, setValue] = React.useState(defaultValue);
+
+  const setTrue = React.useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = React.useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setValue(!value);
+  }, [value]);
+
+  return { value, setTrue, setFalse, toggle };
+};

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  subMonths,
+  addMonths,
+  isSameDay,
+  isBefore,
+  endOfDay,
+  isAfter,
+  startOfDay,
+} from "../lib/date";
+
+export interface UseCalendarDependencies {
+  value?: Array<Date | null> | Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  shouldDisableDate?(value: Date): boolean;
+}
+
+export function useCalendar({
+  value,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+}: UseCalendarDependencies) {
+  const [viewDate, setViewDate] = React.useState(
+    (Array.isArray(value) ? value[0] : value) ?? new Date()
+  );
+  const [focusedDay, setFocusedDay] = React.useState<Date>();
+
+  const setPrevMonth = React.useCallback(
+    () => setViewDate(subMonths(viewDate, 1)),
+    [viewDate]
+  );
+  const setNextMonth = React.useCallback(
+    () => setViewDate(addMonths(viewDate, 1)),
+    [viewDate]
+  );
+
+  const isDayFocused = React.useCallback(
+    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),
+    [focusedDay]
+  );
+
+  const isDayDisabled = React.useCallback(
+    (day: Date) => {
+      const now = new Date();
+      let disabled = false;
+      if (disablePast) {
+        disabled = isBefore(endOfDay(day), now);
+      }
+      if (disableFuture) {
+        disabled = isAfter(startOfDay(day), now);
+      }
+      if (shouldDisableDate) {
+        disabled = shouldDisableDate(day);
+      }
+
+      return disabled;
+    },
+    [disableFuture, disablePast, shouldDisableDate]
+  );
+
+  const resetSelectedDay = React.useCallback(() => {
+    setFocusedDay(undefined);
+  }, [setFocusedDay]);
+
+  return {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  };
+}