@vkontakte/vkui 4.22.2 → 4.25.1

package/src/components/View/utils.ts

@@ -1,6 +1,7 @@
-import { TouchEvent } from '../Touch/Touch';
+import { TouchEvent } from "../Touch/Touch";
 
-const swipeBackExcludedSelector = 'input, textarea, [data-vkui-swipe-back=false]';
+const swipeBackExcludedSelector =
+  "input, textarea, [data-vkui-swipe-back=false]";
 
 export function swipeBackExcluded(e: TouchEvent) {
   const target = e.originalEvent.target as HTMLElement;

package/src/components/WriteBar/Readme.md

@@ -5,19 +5,19 @@
 Все остальные свойства кроме `className` прокидываются элементу `<textarea />`.
 
 ```jsx
-import { useState, useEffect, useRef, Fragment } from 'react';
+import { useState, useEffect, useRef, Fragment } from "react";
 
 const WriteBarExample = (props) => {
-  const [text1, setText1] = useState('');
-  const [text2, setText2] = useState('');
-  const [text3, setText3] = useState('Завтра в 7?');
-  const [text4, setText4] = useState('Да.');
+  const [text1, setText1] = useState("");
+  const [text2, setText2] = useState("");
+  const [text3, setText3] = useState("Завтра в 7?");
+  const [text4, setText4] = useState("Да.");
 
   const attachmentsCount = 5;
   const fixedLayoutInnerElRef = useRef();
   const [bottomPadding, setBottomPadding] = useState(0);
   const [isAttachmentsShown, setIsAttachmentsShown] = useState(false);
-  const [text, setText] = useState('');
+  const [text, setText] = useState("");
 
   const updateBottomPadding = () => {
     const el = fixedLayoutInnerElRef.current;
@@ -36,17 +36,13 @@ const WriteBarExample = (props) => {
   return (
     <View activePanel="writebar">
       <Panel id="writebar">
-        <PanelHeader>
-          WriteBar
-        </PanelHeader>
+        <PanelHeader>WriteBar</PanelHeader>
 
         <Group>
           <WriteBar
             value={text1}
             onChange={(e) => setText1(e.target.value)}
-            before={
-              <WriteBarIcon mode="attach" />
-            }
+            before={<WriteBarIcon mode="attach" />}
             after={
               <Fragment>
                 <WriteBarIcon aria-label="Эмоджи и стикеры">
@@ -70,41 +66,37 @@ const WriteBarExample = (props) => {
           <WriteBar
             value={text2}
             onChange={(e) => setText2(e.target.value)}
-            before={
-              <WriteBarIcon mode="attach" />
-            }
+            before={<WriteBarIcon mode="attach" />}
             inlineAfter={
               <Fragment>
-                {text2.length === 0 &&
-                <WriteBarIcon aria-label="Открыть меню бота">
-                  <Icon28KeyboardBotsOutline />
-                </WriteBarIcon>
-                }
-                
-                {text2.length > 0 &&
-                <WriteBarIcon aria-label="Эмоджи и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text2.length === 0 && (
+                  <WriteBarIcon aria-label="Открыть меню бота">
+                    <Icon28KeyboardBotsOutline />
+                  </WriteBarIcon>
+                )}
+
+                {text2.length > 0 && (
+                  <WriteBarIcon aria-label="Эмоджи и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
               </Fragment>
             }
             after={
               <Fragment>
-                {text2.length === 0 &&
-                <WriteBarIcon aria-label="Эмоджи и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text2.length === 0 && (
+                  <WriteBarIcon aria-label="Эмоджи и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
 
-                {text2.length === 0 &&
-                <WriteBarIcon aria-label="Записать голосовое сообщение">
-                  <Icon28VoiceOutline />
-                </WriteBarIcon>
-                }
+                {text2.length === 0 && (
+                  <WriteBarIcon aria-label="Записать голосовое сообщение">
+                    <Icon28VoiceOutline />
+                  </WriteBarIcon>
+                )}
 
-                {text2.length > 0 &&
-                <WriteBarIcon mode="send" />
-                }
+                {text2.length > 0 && <WriteBarIcon mode="send" />}
               </Fragment>
             }
             placeholder="Сообщение"
@@ -115,30 +107,25 @@ const WriteBarExample = (props) => {
           <WriteBar
             value={text3}
             onChange={(e) => setText3(e.target.value)}
-            before={
-              <WriteBarIcon mode="attach" />
-            }
+            before={<WriteBarIcon mode="attach" />}
             inlineAfter={
               <Fragment>
-                {text3.length > 0 &&
-                <WriteBarIcon aria-label="Смайлы и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text3.length > 0 && (
+                  <WriteBarIcon aria-label="Смайлы и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
               </Fragment>
             }
             after={
               <Fragment>
-                {text3.length === 0 &&
-                <WriteBarIcon aria-label="Смайлы и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text3.length === 0 && (
+                  <WriteBarIcon aria-label="Смайлы и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
 
-                <WriteBarIcon
-                  mode="send"
-                  disabled={text3.length === 0}
-                />
+                <WriteBarIcon mode="send" disabled={text3.length === 0} />
               </Fragment>
             }
             placeholder="Сообщение"
@@ -149,30 +136,25 @@ const WriteBarExample = (props) => {
           <WriteBar
             value={text4}
             onChange={(e) => setText4(e.target.value)}
-            before={
-              <WriteBarIcon mode="attach" />
-            }
+            before={<WriteBarIcon mode="attach" />}
             inlineAfter={
               <Fragment>
-                {text4.length > 0 &&
-                <WriteBarIcon aria-label="Смайлы и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text4.length > 0 && (
+                  <WriteBarIcon aria-label="Смайлы и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
               </Fragment>
             }
             after={
               <Fragment>
-                {text4.length === 0 &&
-                <WriteBarIcon aria-label="Смайлы и стикеры">
-                  <Icon28SmileOutline />
-                </WriteBarIcon>
-                }
+                {text4.length === 0 && (
+                  <WriteBarIcon aria-label="Смайлы и стикеры">
+                    <Icon28SmileOutline />
+                  </WriteBarIcon>
+                )}
 
-                <WriteBarIcon
-                  mode="done"
-                  disabled={text4.length === 0}
-                />
+                <WriteBarIcon mode="done" disabled={text4.length === 0} />
               </Fragment>
             }
             placeholder="Сообщение"
@@ -185,12 +167,12 @@ const WriteBarExample = (props) => {
           <div ref={fixedLayoutInnerElRef}>
             <Separator wide />
 
-            {isAttachmentsShown &&
-            <div>
-              <Div>Интерфейс прикрепления</Div>
-              <Separator wide />
-            </div>
-            }
+            {isAttachmentsShown && (
+              <div>
+                <Div>Интерфейс прикрепления</Div>
+                <Separator wide />
+              </div>
+            )}
 
             <WriteBar
               before={
@@ -202,34 +184,32 @@ const WriteBarExample = (props) => {
               }
               inlineAfter={
                 <Fragment>
-                  {text.length > 0 &&
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                  }
+                  {text.length > 0 && (
+                    <WriteBarIcon aria-label="Смайлы и стикеры">
+                      <Icon28SmileOutline />
+                    </WriteBarIcon>
+                  )}
                 </Fragment>
               }
               after={
                 <Fragment>
-                  {text.length === 0 &&
-                  <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
-                  </WriteBarIcon>
-                  }
-
-                  {text.length === 0 &&
-                  <WriteBarIcon aria-label="Записать голосовое сообщение">
-                    <Icon28VoiceOutline />
-                  </WriteBarIcon>
-                  }
-
-                  {text.length > 0 &&
-                  <WriteBarIcon mode="send" />
-                  }
+                  {text.length === 0 && (
+                    <WriteBarIcon aria-label="Смайлы и стикеры">
+                      <Icon28SmileOutline />
+                    </WriteBarIcon>
+                  )}
+
+                  {text.length === 0 && (
+                    <WriteBarIcon aria-label="Записать голосовое сообщение">
+                      <Icon28VoiceOutline />
+                    </WriteBarIcon>
+                  )}
+
+                  {text.length > 0 && <WriteBarIcon mode="send" />}
                 </Fragment>
               }
               value={text}
-              onChange={(e) => setText((e.target.value))}
+              onChange={(e) => setText(e.target.value)}
               onHeightChange={() => updateBottomPadding()}
               placeholder="Сообщение"
             />
@@ -240,5 +220,5 @@ const WriteBarExample = (props) => {
   );
 };
 
-<WriteBarExample />
+<WriteBarExample />;
 ```

package/src/components/WriteBar/WriteBar.tsx

@@ -1,15 +1,18 @@
-import * as React from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useExternRef } from '../../hooks/useExternRef';
-import { hasReactNode, isFunction } from '../../lib/utils';
-import { useDOM } from '../../lib/dom';
-import { getClassName } from '../../helpers/getClassName';
-import { HasRef, HasRootRef } from '../../types';
-import './WriteBar.css';
-
-export interface WriteBarProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLTextAreaElement> {
+import * as React from "react";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useExternRef } from "../../hooks/useExternRef";
+import { hasReactNode, isFunction } from "../../lib/utils";
+import { useDOM } from "../../lib/dom";
+import { getClassName } from "../../helpers/getClassName";
+import { HasRef, HasRootRef } from "../../types";
+import "./WriteBar.css";
+
+export interface WriteBarProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLTextAreaElement> {
   /**
-   * Содержимое, отображаемое слево от поля ввода.
+   * Содержимое, отображаемое слева от поля ввода.
    */
   before?: React.ReactNode;
   /**
@@ -53,14 +56,14 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
   const textareaRef = useExternRef(getRef);
   const textareaMinHeightRef = React.useRef<number | null>(null);
 
-  const resize = () => {
+  const resize = React.useCallback(() => {
     const textareaEl = textareaRef.current;
     if (!textareaEl) {
       return;
     }
 
     const { offsetHeight, scrollHeight } = textareaEl;
-    const style = window.getComputedStyle(textareaEl);
+    const style = window!.getComputedStyle(textareaEl);
     const paddingTop = parseInt(style.paddingTop);
     const paddingBottom = parseInt(style.paddingBottom);
 
@@ -74,17 +77,20 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
       diff = 0;
     }
 
-    textareaEl.style.height = '0px';
+    textareaEl.style.height = "0px";
 
     const height = textareaEl.scrollHeight - diff / 4;
-    textareaEl.style.height = String(Math.max(height, textareaMinHeightRef.current)) + 'px';
+    textareaEl.style.height =
+      String(Math.max(height, textareaMinHeightRef.current)) + "px";
 
     if (isFunction(onHeightChange)) {
       onHeightChange();
     }
-  };
+  }, [onHeightChange, textareaRef, window]);
 
-  const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (event) => {
+  const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
+    event
+  ) => {
     if (isFunction(onChange)) {
       onChange(event);
     }
@@ -96,21 +102,19 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
 
   React.useEffect(() => {
     resize();
-  }, [value]);
+  }, [resize, value]);
 
   return (
     <div
       ref={getRootRef}
-      vkuiClass={getClassName('WriteBar', platform)}
+      vkuiClass={getClassName("WriteBar", platform)}
       className={className}
       style={style}
     >
       <form vkuiClass="WriteBar__form" onSubmit={(e) => e.preventDefault()}>
-        {hasReactNode(before) &&
-        <div vkuiClass="WriteBar__before">
-          {before}
-        </div>
-        }
+        {hasReactNode(before) && (
+          <div vkuiClass="WriteBar__before">{before}</div>
+        )}
 
         <div vkuiClass="WriteBar__formIn">
           <textarea
@@ -121,18 +125,12 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
             value={value}
           />
 
-          {hasReactNode(inlineAfter) &&
-          <div vkuiClass="WriteBar__inlineAfter">
-            {inlineAfter}
-          </div>
-          }
+          {hasReactNode(inlineAfter) && (
+            <div vkuiClass="WriteBar__inlineAfter">{inlineAfter}</div>
+          )}
         </div>
 
-        {hasReactNode(after) &&
-        <div vkuiClass="WriteBar__after">
-          {after}
-        </div>
-        }
+        {hasReactNode(after) && <div vkuiClass="WriteBar__after">{after}</div>}
       </form>
     </div>
   );

package/src/components/WriteBarIcon/WriteBarIcon.css

@@ -18,12 +18,12 @@
 }
 
 .WriteBarIcon:disabled {
-  opacity: .4;
+  opacity: 0.4;
   pointer-events: none;
 }
 
 .WriteBarIcon__active {
-  opacity: .6;
+  opacity: 0.6;
 }
 
 .WriteBarIcon__counter {

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   Icon24Send,
   Icon28AddCircleOutline,
@@ -6,18 +6,19 @@ import {
   Icon28CheckCircleOutline,
   Icon48WritebarDone,
   Icon48WritebarSend,
-} from '@vkontakte/icons';
-import { usePlatform } from '../../hooks/usePlatform';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { IOS } from '../../lib/platform';
-import Counter from '../Counter/Counter';
-import Tappable from '../Tappable/Tappable';
-import { warnOnce } from '../../lib/warnOnce';
-import { hasReactNode } from '../../lib/utils';
-import './WriteBarIcon.css';
+} from "@vkontakte/icons";
+import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { IOS } from "../../lib/platform";
+import Counter from "../Counter/Counter";
+import Tappable from "../Tappable/Tappable";
+import { warnOnce } from "../../lib/warnOnce";
+import { hasReactNode } from "../../lib/utils";
+import "./WriteBarIcon.css";
 
-export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface WriteBarIconProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Предустановленные типы кнопок в WriteBar для отрисовки иконки в зависимости от платформы.
    * Если передать валидное значение для этого свойства, `children` игнорируется.
@@ -26,15 +27,15 @@ export interface WriteBarIconProps extends React.ButtonHTMLAttributes<HTMLButton
    * - `send` – иконка отправки.
    * - `done` – иконка отправки в режиме редактирования.
    */
-  mode?: 'attach' | 'send' | 'done';
+  mode?: "attach" | "send" | "done";
   /**
    * Значение счётчика для кнопки. Например, для количества прикреплённых файлов.
    */
   count?: number;
 }
 
-const warn = warnOnce('WriteBarIcon');
-const IS_DEV = process.env.NODE_ENV === 'development';
+const warn = warnOnce("WriteBarIcon");
+const IS_DEV = process.env.NODE_ENV === "development";
 
 export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   mode,
@@ -45,30 +46,38 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   const platform = usePlatform();
 
   let icon: React.ReactNode;
-  let ariaLabel: string;
+  let ariaLabel: string | undefined = undefined;
 
   switch (mode) {
-    case 'attach':
-      icon = platform === IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;
-      ariaLabel = 'Прикрепить файл';
+    case "attach":
+      icon =
+        platform === IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;
+      ariaLabel = "Прикрепить файл";
       break;
 
-    case 'send':
+    case "send":
       icon = platform === IOS ? <Icon48WritebarSend /> : <Icon24Send />;
-      ariaLabel = 'Отправить';
+      ariaLabel = "Отправить";
       break;
 
-    case 'done':
-      icon = platform === IOS ? <Icon48WritebarDone /> : <Icon28CheckCircleOutline />;
-      ariaLabel = 'Готово';
+    case "done":
+      icon =
+        platform === IOS ? (
+          <Icon48WritebarDone />
+        ) : (
+          <Icon28CheckCircleOutline />
+        );
+      ariaLabel = "Готово";
       break;
 
     default:
       break;
   }
 
-  if (IS_DEV && !restProps['aria-label'] && !ariaLabel) {
-    warn('[WriteBarIcon/a11y] У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей.');
+  if (IS_DEV && !restProps["aria-label"] && !ariaLabel) {
+    warn(
+      "[WriteBarIcon/a11y] У WriteBarIcon нет aria-label. Кнопка будет недоступной для части пользователей."
+    );
   }
 
   return (
@@ -78,13 +87,17 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
       Component="button"
       hasHover={false}
       activeMode="WriteBarIcon__active"
-      vkuiClass={classNames(getClassName('WriteBarIcon', platform), {
+      vkuiClass={classNames(getClassName("WriteBarIcon", platform), {
         [`WriteBarIcon--${mode}`]: !!mode,
       })}
     >
       <span vkuiClass="WriteBarIcon__in">
         {icon || children}
-        {hasReactNode(count) && <Counter vkuiClass="WriteBarIcon__counter" size="s">{count}</Counter>}
+        {hasReactNode(count) && (
+          <Counter vkuiClass="WriteBarIcon__counter" size="s">
+            {count}
+          </Counter>
+        )}
       </span>
     </Tappable>
   );

package/src/fonts/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: url("./VK_Sans_Display_Medium.woff2") format("woff2"),
+    url("./VK_Sans_Display_Medium.woff") format("woff");
+  font-weight: 500;
+  font-display: fallback;
+}

package/src/helpers/avatar.ts

@@ -0,0 +1,10 @@
+import { InitialsAvatarNumberGradients } from "../components/InitialsAvatar/InitialsAvatar";
+
+/**
+ * Вычисляет цвет InitialsAvatar на основании переданного идентификатора объекта
+ */
+export function calcInitialsAvatarColor(
+  objectId: number
+): InitialsAvatarNumberGradients {
+  return ((objectId % 6) + 1) as InitialsAvatarNumberGradients;
+}

package/src/helpers/getClassName.ts

@@ -1,5 +1,8 @@
-import { PlatformType, platform } from '../lib/platform';
+import { PlatformType, platform } from "../lib/platform";
 
-export function getClassName(base: string, osname: PlatformType = platform()): string {
+export function getClassName(
+  base: string,
+  osname: PlatformType = platform()
+): string {
   return `${base} ${base}--${osname}`;
 }

package/src/helpers/getScheme.ts

@@ -0,0 +1,27 @@
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { Scheme } from "./scheme";
+
+export interface GetSchemeProps {
+  platform?: PlatformType;
+  appearance: AppearanceType;
+}
+
+export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
+  switch (appearance) {
+    case "dark":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_DARK;
+        default:
+          return Scheme.SPACE_GRAY;
+      }
+    case "light":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_LIGHT;
+        default:
+          return Scheme.BRIGHT_LIGHT;
+      }
+  }
+}

package/src/helpers/math.ts

@@ -1,4 +1,5 @@
-export const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(value, max));
 
 export function precisionRound(number: number, precision = 1) {
   let factor = Math.pow(10, precision);
@@ -6,7 +7,7 @@ export function precisionRound(number: number, precision = 1) {
 }
 
 function precision(number: number) {
-  return (`${number}`.split('.')[1] || '').length;
+  return (`${number}`.split(".")[1] || "").length;
 }
 
 function decimatedClamp(val: number, min: number, max: number, step?: number) {
@@ -15,9 +16,15 @@ function decimatedClamp(val: number, min: number, max: number, step?: number) {
   }
   const prec = precision(step);
   // Round value to nearest min + k1 * step
-  const decimatedOffset = precisionRound(Math.round((val - min) / step) * step, prec);
+  const decimatedOffset = precisionRound(
+    Math.round((val - min) / step) * step,
+    prec
+  );
   // Round range length _down_ to nearest min + k2 * step
-  const decimatedRange = precisionRound(Math.floor((max - min) / step) * step, prec);
+  const decimatedRange = precisionRound(
+    Math.floor((max - min) / step) * step,
+    prec
+  );
   return min + clamp(decimatedOffset, 0, decimatedRange);
 }
 
@@ -25,8 +32,9 @@ export function rescale(
   value: number,
   from: [number, number],
   to: [number, number],
-  options: { step?: number } = {},
+  options: { step?: number } = {}
 ) {
-  const scaled = (value - from[0]) / (from[1] - from[0]) * (to[1] - to[0]) + to[0];
+  const scaled =
+    ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
   return decimatedClamp(scaled, to[0], to[1], options.step);
 }