@vkontakte/vkui 4.36.1 → 4.37.1

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,17 +1,17 @@
 import * as React from "react";
 import { HasComponent, HasChildren } from "../../types";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
+import { getTitleFromChildren } from "../../lib/utils";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { TappableProps, Tappable } from "../Tappable/Tappable";
 import { Icon16Dropdown } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
 import { Caption } from "../Typography/Caption/Caption";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import "./SubnavigationButton.css";
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
-  size?: "m" | "l";
+  mode?: "primary" | "outline" | "tertiary";
+  size?: "s" | "m" | "l";
   selected?: boolean;
   /**
    * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
@@ -28,25 +28,29 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
   expandable?: boolean;
 }
 
-type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, "textLevel"> &
+type SubnavigationButtonTypographyProps = Pick<
+  SubnavigationButtonProps,
+  "textLevel"
+> &
   HasComponent &
   HasChildren;
 
 const SubnavigationButtonTypography = ({
   textLevel,
   ...restProps
-}: SubnavButtonTypographyProps) => {
+}: SubnavigationButtonTypographyProps) => {
   if (textLevel === 1) {
     return <Subhead {...restProps} />;
   }
 
-  return <Caption level={textLevel === 2 ? "1" : "2"} {...restProps} />;
+  return <Caption level={textLevel === 2 ? "2" : "3"} {...restProps} />;
 };
 
 /**
  * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
  */
 export const SubnavigationButton = ({
+  mode = "primary",
   size = "m",
   selected,
   textLevel = 1,
@@ -56,7 +60,7 @@ export const SubnavigationButton = ({
   children,
   ...restProps
 }: SubnavigationButtonProps) => {
-  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
 
   return (
     <Tappable
@@ -64,14 +68,16 @@ export const SubnavigationButton = ({
       hasActive={false}
       focusVisibleMode="outside"
       vkuiClass={classNames(
-        getClassName("SubnavigationButton", platform),
+        "SubnavigationButton",
         `SubnavigationButton--${size}`,
-        selected && "SubnavigationButton--selected"
+        `SubnavigationButton--mode-${mode}`,
+        selected && "SubnavigationButton--selected",
+        `SubnavigationButton--sizeY-${sizeY}`
       )}
       aria-label={getTitleFromChildren(children)}
     >
       <span vkuiClass="SubnavigationButton__in">
-        {hasReactNode(before) && (
+        {before && (
           <span vkuiClass="SubnavigationButton__before">{before}</span>
         )}
         <SubnavigationButtonTypography
@@ -81,11 +87,12 @@ export const SubnavigationButton = ({
         >
           {children}
         </SubnavigationButtonTypography>
-        {hasReactNode(after) && (
-          <span vkuiClass="SubnavigationButton__after">{after}</span>
-        )}
+        {after && <span vkuiClass="SubnavigationButton__after">{after}</span>}
         {expandable && (
-          <Icon16Dropdown vkuiClass="SubnavigationButton__expandableIcon" />
+          <Icon16Dropdown
+            vkuiClass="SubnavigationButton__expandableIcon"
+            aria-hidden
+          />
         )}
       </span>
     </Tappable>

package/src/components/TabsItem/TabsItem.css

@@ -106,7 +106,10 @@
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__before {
-  color: var(--header_tint_alternate, var(--vkui--color_icon_accent_themed));
+  color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_icon_accent_themed)
+  );
 }
 
 .TabsItem--selected.TabsItem--secondary .TabsItem__before {
@@ -129,7 +132,10 @@
 }
 
 .TabsItem--selected.TabsItem--accent .TabsItem__label {
-  color: var(--header_tint_alternate, var(--vkui--color_text_accent_themed));
+  color: var(
+    --button_secondary_foreground,
+    var(--vkui--color_text_accent_themed)
+  );
 }
 
 .TabsItem--selected.TabsItem--secondary .TabsItem__label {

package/src/components/Tappable/Tappable.tsx

@@ -22,18 +22,20 @@ import "./Tappable.css";
 
 const WAVE_LIVE = 225;
 
+export type TappableElementProps = Omit<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "onTouchStart"
+  | "onTouchMove"
+  | "onTouchEnd"
+  | "onTouchCancel"
+  | "onMouseDown"
+  | "onMouseMove"
+  | "onMouseUp"
+  | "onMouseLeave"
+>;
+
 export interface TappableProps
-  extends Omit<
-      React.AllHTMLAttributes<HTMLElement>,
-      | "onTouchStart"
-      | "onTouchMove"
-      | "onTouchEnd"
-      | "onTouchCancel"
-      | "onMouseDown"
-      | "onMouseMove"
-      | "onMouseUp"
-      | "onMouseLeave"
-    >,
+  extends TappableElementProps,
     HasRootRef<HTMLElement>,
     AdaptivityProps,
     HasComponent,

package/src/components/Tooltip/Readme.md

@@ -97,26 +97,26 @@ const Example = () => {
                   <Avatar />
                 </Tooltip>
               }
-              description="Веб-сайт"
+              subtitle="Веб-сайт"
             >
               Команда ВКонтакте
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Музыкант">
+            <SimpleCell before={<Avatar />} subtitle="Музыкант">
               Robbie Williams
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
-            <SimpleCell before={<Avatar />} description="Издательский дом">
+            <SimpleCell before={<Avatar />} subtitle="Издательский дом">
               ПостНаука
             </SimpleCell>
           </List>

package/src/components/UsersStack/UsersStack.tsx

@@ -23,6 +23,12 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
    * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов
    */
   visibleCount?: number;
+  /**
+   * Число, которое будет указано в счетчике.
+   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.
+   * Если число больше 99, то счетчик скроется.
+   */
+  count?: number;
 }
 
 interface PathElementProps extends React.SVGAttributes<SVGElement> {
@@ -90,13 +96,13 @@ function PathElement({ photoSize, direction, ...props }: PathElementProps) {
 export const UsersStack = ({
   photos = [],
   visibleCount = 3,
+  count = Math.max(0, photos.length - visibleCount),
   size = "s",
   layout = "horizontal",
   children,
   ...restProps
 }: UsersStackProps) => {
-  const othersCount = Math.max(0, photos.length - visibleCount);
-  const canShowOthers = othersCount > 0 && size !== "xs";
+  const canShowOthers = count > 0 && size !== "xs";
   const CounterTypography = size === "m" ? Footnote : Caption;
 
   const photoSize = {
@@ -156,7 +162,7 @@ export const UsersStack = ({
             vkuiClass="UsersStack__photo UsersStack__photo--others"
             aria-hidden
           >
-            <span>+{othersCount}</span>
+            <span>+{count}</span>
           </CounterTypography>
         )}
       </div>

package/src/components/View/View.tsx

@@ -301,6 +301,8 @@ export const View = ({
 
       if (e.startX <= 70 && !swipingBack && history && history.length > 1) {
         if (activePanel !== null) {
+          // Note: вызываем закрытие клавиатуры. В iOS это нативное поведение при свайпе.
+          blurActiveElement(document);
           scrolls.current[activePanel] = scroll?.getScroll().y;
         }
 

package/src/components/VisuallyHiddenInput/VisuallyHiddenInput.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
 import { HasRef } from "../../types";
 import "./VisuallyHiddenInput.css";
 
@@ -17,9 +16,5 @@ export const VisuallyHiddenInput = ({
   getRef,
   ...restProps
 }: VisuallyHiddenInputProps) => {
-  const inputRef = useExternRef(getRef);
-
-  return (
-    <input {...restProps} vkuiClass="VisuallyHiddenInput" ref={inputRef} />
-  );
+  return <input {...restProps} vkuiClass="VisuallyHiddenInput" ref={getRef} />;
 };

package/src/components/WriteBar/Readme.md

@@ -46,15 +46,15 @@ const WriteBarExample = (props) => {
             after={
               <Fragment>
                 <WriteBarIcon aria-label="Эмоджи и стикеры">
-                  <Icon28SmileOutline />
+                  <Icon28SmileOutline aria-hidden />
                 </WriteBarIcon>
 
                 <WriteBarIcon aria-label="Записать видео-сообщение">
-                  <Icon28CameraOutline />
+                  <Icon28CameraOutline aria-hidden />
                 </WriteBarIcon>
 
                 <WriteBarIcon aria-label="Записать голосовое сообщение">
-                  <Icon28VoiceOutline />
+                  <Icon28VoiceOutline aria-hidden />
                 </WriteBarIcon>
               </Fragment>
             }
@@ -71,13 +71,13 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Открыть меню бота">
-                    <Icon28KeyboardBotsOutline />
+                    <Icon28KeyboardBotsOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
                 {text2.length > 0 && (
                   <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -86,13 +86,13 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Эмоджи и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
                 {text2.length === 0 && (
                   <WriteBarIcon aria-label="Записать голосовое сообщение">
-                    <Icon28VoiceOutline />
+                    <Icon28VoiceOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -112,7 +112,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text3.length > 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -121,7 +121,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text3.length === 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -141,7 +141,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text4.length > 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
               </Fragment>
@@ -150,7 +150,7 @@ const WriteBarExample = (props) => {
               <Fragment>
                 {text4.length === 0 && (
                   <WriteBarIcon aria-label="Смайлы и стикеры">
-                    <Icon28SmileOutline />
+                    <Icon28SmileOutline aria-hidden />
                   </WriteBarIcon>
                 )}
 
@@ -186,7 +186,7 @@ const WriteBarExample = (props) => {
                 <Fragment>
                   {text.length > 0 && (
                     <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
+                      <Icon28SmileOutline aria-hidden />
                     </WriteBarIcon>
                   )}
                 </Fragment>
@@ -195,13 +195,13 @@ const WriteBarExample = (props) => {
                 <Fragment>
                   {text.length === 0 && (
                     <WriteBarIcon aria-label="Смайлы и стикеры">
-                      <Icon28SmileOutline />
+                      <Icon28SmileOutline aria-hidden />
                     </WriteBarIcon>
                   )}
 
                   {text.length === 0 && (
                     <WriteBarIcon aria-label="Записать голосовое сообщение">
-                      <Icon28VoiceOutline />
+                      <Icon28VoiceOutline aria-hidden />
                     </WriteBarIcon>
                   )}
 

package/src/components/WriteBar/WriteBar.tsx

@@ -107,7 +107,7 @@ export const WriteBar = ({
       className={className}
       style={style}
     >
-      <form vkuiClass="WriteBar__form" onSubmit={(e) => e.preventDefault()}>
+      <div vkuiClass="WriteBar__form">
         {hasReactNode(before) && (
           <div vkuiClass="WriteBar__before">{before}</div>
         )}
@@ -127,7 +127,7 @@ export const WriteBar = ({
         </div>
 
         {hasReactNode(after) && <div vkuiClass="WriteBar__after">{after}</div>}
-      </form>
+      </div>
     </div>
   );
 };

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -53,21 +53,30 @@ export const WriteBarIcon = ({
   switch (mode) {
     case "attach":
       icon =
-        platform === IOS ? <Icon28AddCircleOutline /> : <Icon28AttachOutline />;
+        platform === IOS ? (
+          <Icon28AddCircleOutline aria-hidden />
+        ) : (
+          <Icon28AttachOutline aria-hidden />
+        );
       ariaLabel = "Прикрепить файл";
       break;
 
     case "send":
-      icon = platform === IOS ? <Icon48WritebarSend /> : <Icon24Send />;
+      icon =
+        platform === IOS ? (
+          <Icon48WritebarSend aria-hidden />
+        ) : (
+          <Icon24Send aria-hidden />
+        );
       ariaLabel = "Отправить";
       break;
 
     case "done":
       icon =
         platform === IOS ? (
-          <Icon48WritebarDone />
+          <Icon48WritebarDone aria-hidden />
         ) : (
-          <Icon28CheckCircleOutline />
+          <Icon28CheckCircleOutline aria-hidden />
         );
       ariaLabel = "Готово";
       break;

package/src/index.ts

@@ -255,6 +255,8 @@ export { PanelHeaderEdit } from "./components/PanelHeaderEdit/PanelHeaderEdit";
 export type { PanelHeaderEditProps } from "./components/PanelHeaderEdit/PanelHeaderEdit";
 export { ModalCardBase } from "./components/ModalCardBase/ModalCardBase";
 export type { ModalCardBaseProps } from "./components/ModalCardBase/ModalCardBase";
+export { VisuallyHiddenInput } from "./components/VisuallyHiddenInput/VisuallyHiddenInput";
+export type { VisuallyHiddenInputProps } from "./components/VisuallyHiddenInput/VisuallyHiddenInput";
 
 /**
  * Wrappers

package/src/testing/utils.tsx

@@ -8,7 +8,7 @@ import { act } from "react-dom/test-utils";
 import { HasChildren } from "../types";
 
 export function fakeTimers() {
-  beforeEach(() => jest.useFakeTimers());
+  beforeEach(() => jest.useFakeTimers("modern"));
   afterEach(() => jest.useRealTimers());
 }
 

package/src/tokenized/index.ts

@@ -305,6 +305,9 @@ export type { SearchProps } from "../components/Search/Search";
 export { Header } from "../components/Header/Header";
 export type { HeaderProps } from "../components/Header/Header";
 
+export { SubnavigationButton } from "../components/SubnavigationButton/SubnavigationButton";
+export type { SubnavigationButtonProps } from "../components/SubnavigationButton/SubnavigationButton";
+
 export { Panel } from "../components/Panel/Panel";
 export type { PanelProps } from "../components/Panel/Panel";