@vkontakte/vkui 4.27.1 → 4.28.1

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

@@ -1,3 +1,9 @@
+/*
+ * В следующей версии библиотеки Caption 1 должен превратиться в Footnote, Caption 2 — в Caption 1 и так далее.
+ * В токенах это обновление уже есть.
+ * TODO переехать на новый нейминг в 5.0.0. Заменить Caption 1 на Footnote, а остальные Caption поднять на один уровень наверх.
+ */
+
 .Caption {
   display: block;
   margin: 0;
@@ -8,48 +14,84 @@
 }
 
 .Caption--l-1 {
-  font-size: 13px;
-  line-height: 16px;
+  font-size: var(--vkui--font_footnote--font_size--regular);
+  line-height: var(--vkui--font_footnote--line_height--regular);
+  font-weight: var(--vkui--font_footnote--font_weight--regular);
+}
+
+.Caption--l-1.Caption--caps {
+  font-size: var(--vkui--font_footnote_caps--font_size--regular);
+  line-height: var(--vkui--font_footnote_caps--line_height--regular);
+  font-weight: var(--vkui--font_footnote_caps--font_weight--regular);
 }
 
 .Caption--l-2 {
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--vkui--font_caption1--font_size--regular);
+  line-height: var(--vkui--font_caption1--line_height--regular);
+  font-weight: var(--vkui--font_caption1--font_weight--regular);
+}
+
+.Caption--l-2.Caption--caps {
+  font-size: var(--vkui--font_caption1_caps--font_size--regular);
+  line-height: var(--vkui--font_caption1_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption1_caps--font_weight--regular);
 }
 
 .Caption--l-3 {
-  font-size: 11px;
-  line-height: 14px;
+  font-size: var(--vkui--font_caption2--font_size--regular);
+  line-height: var(--vkui--font_caption2--line_height--regular);
+  font-weight: var(--vkui--font_caption2--font_weight--regular);
+}
+
+.Caption--l-3.Caption--caps {
+  font-size: var(--vkui--font_caption2_caps--font_size--regular);
+  line-height: var(--vkui--font_caption2_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption2_caps--font_weight--regular);
 }
 
 .Caption--l-4 {
-  font-size: 9px;
-  line-height: 12px;
+  font-size: var(--vkui--font_caption3--font_size--regular);
+  line-height: var(--vkui--font_caption3--line_height--regular);
+  font-weight: var(--vkui--font_caption3--font_weight--regular);
+}
+
+.Caption--l-4.Caption--caps {
+  font-size: var(--vkui--font_caption3_caps--font_size--regular);
+  line-height: var(--vkui--font_caption3_caps--line_height--regular);
+  font-weight: var(--vkui--font_caption3_caps--font_weight--regular);
+}
+
+.Caption.Caption--w-1 {
+  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Caption.Caption--w-2 {
+  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent2);
 }
 
+.Caption.Caption--w-3 {
+  /* Мы утяжеляем селеткор, чтобы перебить селекторы .Caption--caps */
+  font-weight: var(--vkui--font_weight_accent3);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-semibold {
   font-weight: 600;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Caption--w-bold {
   font-weight: 700;
 }
-
-.Caption--w-heavy {
-  font-weight: 800;
-}
-
-/**
- * ANDROID
- */
-.Caption--android.Caption--w-semibold {
-  font-weight: 500;
-}

package/src/components/Typography/Caption/Caption.tsx

@@ -1,44 +1,53 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
-import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
+import { warnOnce } from "../../../lib/warnOnce";
 import "./Caption.css";
 
 export interface CaptionProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold" | "bold";
-  level: "1" | "2" | "3" | "4";
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"bold"`, `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  weight?: "regular" | "medium" | "semibold" | "bold" | "1" | "2" | "3";
+  level?: "1" | "2" | "3" | "4";
   caps?: boolean;
 }
 
-const Caption: React.FC<CaptionProps> = ({
+const warn = warnOnce("Caption");
+
+export const Caption: React.FC<CaptionProps> = ({
   children,
-  weight = "regular",
+  weight,
   level = "1",
   caps,
   Component = "span",
   ...restProps
 }: CaptionProps) => {
-  const platform = usePlatform();
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
+  }
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Caption", platform),
-        `Caption--w-${weight}`,
+        "Caption",
         `Caption--l-${level}`,
-        {
-          "Caption--caps": caps,
-        }
+        caps && "Caption--caps",
+        weight && `Caption--w-${weight}`
       )}
     >
       {children}
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Caption;

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/Subhead/Readme.md

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

package/src/components/Typography/Subhead/Subhead.css

@@ -1,28 +1,43 @@
 .Subhead {
   margin: 0;
-  font-size: 14px;
-  line-height: 18px;
+  font-size: var(--vkui--font_subhead--font_size--regular);
+  line-height: var(--vkui--font_subhead--line_height--regular);
+  font-weight: var(--vkui--font_subhead--font_weight--regular);
 }
 
+.Subhead--sizeY-compact {
+  font-size: var(--vkui--font_subhead--font_size--compact);
+  line-height: var(--vkui--font_subhead--line_height--compact);
+}
+
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-regular {
   font-weight: 400;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-medium {
   font-weight: 500;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-semibold {
   font-weight: 600;
 }
 
+/* TODO Удалить перед релизом 5.0.0 */
 .Subhead--w-bold {
   font-weight: 700;
 }
 
-/**
- * ANDROID
- */
-.Subhead--android.Subhead--w-semibold {
-  font-weight: 500;
+.Subhead--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Subhead--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Subhead--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }

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

@@ -1,29 +1,47 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
-import { usePlatform } from "../../../hooks/usePlatform";
 import { classNames } from "../../../lib/classNames";
-import { getClassName } from "../../../helpers/getClassName";
+import { warnOnce } from "../../../lib/warnOnce";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import "./Subhead.css";
 
 export interface SubheadProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold" | "bold";
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"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> = ({
   children,
-  weight = "regular",
-  Component = "h4",
+  weight,
+  Component = "h5",
   ...restProps
 }: SubheadProps) => {
-  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+
+  if (process.env.NODE_ENV === "development") {
+    if (
+      weight &&
+      ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
+    )
+      warn(
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+      );
+  }
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Subhead", platform),
+        "Subhead",
+        `Subhead--sizeY-${sizeY}`,
         `Subhead--w-${weight}`
       )}
     >

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

@@ -2,13 +2,16 @@ 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
   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"
@@ -41,7 +44,7 @@ const Title: React.FC<TitleProps> = ({
       ["heavy", "bold", "semibold", "medium", "regular"].includes(weight)
     )
       warn(
-        `Начертание "${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
+        `Начертание weight="${weight}" устарело и будет удалено в 5.0.0. Используйте значения "1", "2" и "3"`
       );
   }
 
@@ -49,7 +52,7 @@ const Title: React.FC<TitleProps> = ({
     <Component
       {...restProps}
       vkuiClass={classNames("Title", `Title--l-${level}`, {
-        [`Title--w-${weight}`]: !!weight,
+        [`Title--w-${resolveWeight(weight)}`]: !!weight,
       })}
     >
       {children}

package/src/components/UsersStack/Readme.md

@@ -82,7 +82,7 @@
               getAvatarUrl("user_va"),
               getAvatarUrl("user_tc"),
             ]}
-            style={{ color: "#fff", padding: "8px 0" }}
+            style={{ color: "#fff", padding: "8px 16px" }}
           >
             Проголосовали 2 176 человек
           </UsersStack>

package/src/components/UsersStack/UsersStack.tsx

@@ -4,7 +4,7 @@ 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 { Caption } from "../Typography/Caption/Caption";
 import Subhead from "../Typography/Subhead/Subhead";
 import { createMasks } from "./masks";
 import { useDOM } from "../../lib/dom";
@@ -74,8 +74,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"
           >
@@ -84,7 +83,7 @@ const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
         )}
       </div>
       {hasReactNode(children) && (
-        <Subhead Component="span" weight="regular" vkuiClass="UsersStack__text">
+        <Subhead Component="span" vkuiClass="UsersStack__text">
           {children}
         </Subhead>
       )}

package/src/components/View/Readme.md

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

@@ -100,7 +100,7 @@ export interface ViewInfiniteState {
   browserSwipe: boolean;
 }
 
-class ViewInfinite extends React.Component<
+class ViewInfiniteComponent extends React.Component<
   ViewInfiniteProps & DOMProps,
   ViewInfiniteState
 > {
@@ -716,11 +716,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/helpers/typography.ts

@@ -0,0 +1,24 @@
+export function resolveWeight(
+  weight?:
+    | "regular"
+    | "medium"
+    | "semibold"
+    | "bold"
+    | "heavy"
+    | "1"
+    | "2"
+    | "3"
+): "1" | "2" | "3" | undefined {
+  switch (weight) {
+    case "regular":
+      return "3";
+    case "semibold":
+      return "2";
+    case "medium":
+    case "bold":
+    case "heavy":
+      return "1";
+    default:
+      return weight;
+  }
+}

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  subMonths,
+  addMonths,
+  isSameDay,
+  isBefore,
+  endOfDay,
+  isAfter,
+  startOfDay,
+} from "date-fns";
+
+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,
+  };
+}