@vkontakte/vkui 4.36.1 → 4.37.0

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/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/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";