@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Switch/Switch.css

@@ -2,6 +2,24 @@
   position: relative;
   display: block;
   cursor: pointer;
+
+  /* Добавляем отступы, если пин больше трека */
+  padding: calc(
+    (
+        var(--vkui--size_switch_pin--regular) -
+          var(--vkui--size_switch_height--regular)
+      ) / 2
+  );
+}
+
+/* TODO: v5 новая адаптивность */
+.Switch--sizeY-compact {
+  padding: calc(
+    (
+        var(--vkui--size_switch_pin--compact) -
+          var(--vkui--size_switch_height--compact)
+      ) / 2
+  );
 }
 
 .Switch--disabled {
@@ -16,152 +34,125 @@
   -webkit-tap-highlight-color: transparent;
 }
 
+/**
+ * Пин
+ */
 .Switch__pseudo::before {
   position: absolute;
   content: "";
-  top: -3px;
-  left: -3px;
   border-radius: 50%;
   box-sizing: border-box;
+  background: var(--vkui--color_icon_contrast_secondary);
+  box-shadow: 0 0 2px 0 rgb(0 0 0 / 12%), 0 2px 2px 0 rgb(0 0 0 / 24%);
+
+  /* Делаем пин по центру */
+  top: calc(
+    (
+        var(--vkui--size_switch_height--regular) -
+          var(--vkui--size_switch_pin--regular)
+      ) / 2
+  );
+  left: calc(
+    (
+        var(--vkui--size_switch_height--regular) -
+          var(--vkui--size_switch_pin--regular)
+      ) / 2
+  );
+  width: var(--vkui--size_switch_pin--regular);
+  height: var(--vkui--size_switch_pin--regular);
+}
+
+/* TODO: v5 новая адаптивность */
+.Switch--sizeY-compact .Switch__pseudo::before {
+  top: calc(
+    (
+        var(--vkui--size_switch_height--compact) -
+          var(--vkui--size_switch_pin--compact)
+      ) / 2
+  );
+  left: calc(
+    (
+        var(--vkui--size_switch_height--compact) -
+          var(--vkui--size_switch_pin--compact)
+      ) / 2
+  );
+  width: var(--vkui--size_switch_pin--compact);
+  height: var(--vkui--size_switch_pin--compact);
 }
 
 .Switch__self:checked + .Switch__pseudo::before {
-  transform: translateX(20px);
-}
-
-.Switch__self[disabled] + .Switch__pseudo {
-  opacity: 0.4;
-}
-
-/**
- * iOS
- */
-.Switch--ios .Switch__pseudo {
-  width: 51px;
-  height: 31px;
-  border: 2px solid transparent;
-  background: var(--placeholder_icon_background);
-  border-radius: 15px;
-}
-
-.Switch--ios.Switch--sizeY-compact .Switch__pseudo {
-  width: 47px;
-  height: 27px;
-  border-radius: 13px;
-}
-
-.Switch--ios .Switch__self:checked + .Switch__pseudo {
-  background: var(--accent);
-}
-
-.Switch--ios .Switch__pseudo::before {
-  top: 0;
-  left: 0;
-  width: 27px;
-  height: 27px;
-  background: var(--white);
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
-}
-
-.Switch--ios.Switch--sizeY-compact .Switch__pseudo::before {
-  width: 23px;
-  height: 23px;
+  background: var(--accent, var(--vkui--color_icon_accent));
+  transform: translateX(
+    calc(
+      var(--vkui--size_switch_width--regular) -
+        var(--vkui--size_switch_height--regular)
+    )
+  );
 }
 
 /**
- * Android & VKCOM
+ * Трек
  */
-.Switch--android,
-.Switch--vkcom {
-  padding: 3px;
-}
-
-.Switch--android .Switch__pseudo::after,
-.Switch--vkcom .Switch__pseudo::after {
+.Switch__pseudo::after {
   content: "";
   display: block;
-  width: 100%;
-  height: 100%;
+  background: var(--vkui--color_icon_tertiary_alpha);
+  border-radius: calc(var(--vkui--size_switch_width--regular) / 2);
+  width: var(--vkui--size_switch_width--regular);
+  height: var(--vkui--size_switch_height--regular);
 }
 
-.Switch--android .Switch__self:checked + .Switch__pseudo::after,
-.Switch--vkcom .Switch__self:checked + .Switch__pseudo::after {
-  background: var(--accent);
-  opacity: 0.48;
+/* TODO: v5 новая адаптивность */
+.Switch--sizeY-compact .Switch__pseudo::after {
+  border-radius: calc(var(--vkui--size_switch_width--compact) / 2);
+  width: var(--vkui--size_switch_width--compact);
+  height: var(--vkui--size_switch_height--compact);
 }
 
-/**
- * Android
- */
-.Switch--android .Switch__pseudo {
-  width: 34px;
-  height: 14px;
-}
-
-.Switch--android .Switch__pseudo::after {
-  background: #c6c5c5; /* todo: 1077 replace w/ a variable */
-  border-radius: 7px;
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo {
-  width: 32px;
-  height: 12px;
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo::after {
-  border-radius: 6px;
-}
-
-.Switch--android .Switch__pseudo::before {
-  width: 20px;
-  height: 20px;
-  background: #f1f1f1; /* todo: 1077 replace w/ a proper variable */
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
-}
-
-.Switch--android.Switch--sizeY-compact .Switch__pseudo::before {
-  width: 18px;
-  height: 18px;
+.Switch__self:checked + .Switch__pseudo::after {
+  opacity: 0.48;
+  background: var(--accent, var(--vkui--color_icon_accent));
 }
 
-.Switch--android .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--accent);
+/* TODO: v5 новая адаптивность */
+.Switch--sizeY-compact .Switch__self:checked + .Switch__pseudo::before {
+  transform: translateX(
+    calc(
+      var(--vkui--size_switch_width--compact) -
+        var(--vkui--size_switch_height--compact)
+    )
+  );
 }
 
-.Switch--android.Switch--sizeY-compact
-  .Switch__self:checked
-  + .Switch__pseudo::before {
-  transform: translateX(19px);
+.Switch__self[disabled] + .Switch__pseudo {
+  opacity: var(--vkui--opacity_disable);
 }
 
 /**
- * VKCOM
+ * Пин
  */
-.Switch--vkcom .Switch__pseudo {
-  width: 28px;
-  height: 10px;
+.Switch--ios .Switch__pseudo::before {
+  background: var(--white);
+  box-shadow: 0 3px 8px rgb(0 0 0 / 15%), 0 3px 1px rgb(0 0 0 / 6%),
+    inset 0 0 0 0.5px rgb(0 0 0 / 4%);
 }
 
-.Switch--vkcom .Switch__pseudo::after {
-  border-radius: 45px;
-  background: var(--icon_tertiary);
-  opacity: 0.48;
+.Switch--ios .Switch__self:checked + .Switch__pseudo::before {
+  background: var(--white);
 }
 
-.Switch--vkcom .Switch__pseudo::before {
-  left: -2px;
-  width: 16px;
-  height: 16px;
-  background: var(--background_light);
-  border: 1px solid var(--icon_tertiary);
-  z-index: 1;
+/**
+ * Трек
+ */
+.Switch--ios .Switch__pseudo::after {
+  background: var(
+    --placeholder_icon_background,
+    var(--vkui--color_track_background)
+  );
 }
 
-.Switch--vkcom .Switch__self:checked + .Switch__pseudo::before {
-  background: var(--accent);
-  border: none;
-  transform: translateX(16px);
+.Switch--ios .Switch__self:checked + .Switch__pseudo::after {
+  opacity: 1;
 }
 
 /**
@@ -171,22 +162,21 @@
  * navigating accessible vkui apps via keyboard
  */
 @media (prefers-reduced-motion: no-preference) {
+  .Switch__pseudo::after {
+    transition: background-color 0.1s ease;
+  }
+
   .Switch__pseudo::before {
     transition: transform 0.1s ease;
   }
 
-  .Switch--ios .Switch__pseudo {
-    transition: background-color 0.2s ease, border-color 0.2s ease;
+  .Switch--ios .Switch__pseudo::after {
+    transition: background-color 0.2s ease;
   }
 
   .Switch--ios .Switch__pseudo::before {
     transition: transform 0.2s cubic-bezier(0.36, -0.24, 0.26, 1.32);
   }
-
-  .Switch--android .Switch__pseudo::after,
-  .Switch--vkcom .Switch__pseudo::after {
-    transition: background-color 0.1s ease;
-  }
 }
 
 /**

package/src/components/Switch/Switch.tsx

@@ -17,6 +17,9 @@ export interface SwitchProps
   extends VisuallyHiddenInputProps,
     HasRootRef<HTMLLabelElement> {}
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Switch
+ */
 export const Switch: React.FC<SwitchProps> = ({
   style,
   className,
@@ -29,14 +32,11 @@ export const Switch: React.FC<SwitchProps> = ({
 
   return (
     <label
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("Switch", platform),
         `Switch--sizeY-${sizeY}`,
-        {
-          "Switch--disabled": restProps.disabled,
-          "Switch--focus-visible": focusVisible,
-        }
+        restProps.disabled && "Switch--disabled",
+        focusVisible && "Switch--focus-visible"
       )}
       className={className}
       style={style}

package/src/components/Tabbar/Tabbar.tsx

@@ -12,6 +12,9 @@ export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
   itemsLayout?: "vertical" | "horizontal" | "auto";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tabbar
+ */
 const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
   const { children, shadow, itemsLayout, ...restProps } = props;
   const platform = usePlatform();

package/src/components/TabbarItem/TabbarItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
-import Counter from "../Counter/Counter";
+import { Counter } from "../Counter/Counter";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
@@ -30,6 +30,10 @@ export interface TabbarItemProps
 }
 
 const warn = warnOnce("TabbarItem");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/TabbarItem
+ */
 const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   children,
   selected,

package/src/components/Tabs/Readme.md

@@ -27,12 +27,12 @@ class Example extends React.Component {
       <View activePanel={this.state.activePanel}>
         <Panel id="panel1">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderButton>
                 <Icon28CameraOutline />
               </PanelHeaderButton>
             }
-            right={
+            after={
               <PanelHeaderButton>
                 <Icon28AddOutline />
               </PanelHeaderButton>
@@ -116,7 +116,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel2">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel1" })}
               />
@@ -149,7 +149,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel3">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel2" })}
               />
@@ -204,7 +204,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel4">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel2" })}
               />
@@ -236,7 +236,7 @@ class Example extends React.Component {
         </Panel>
         <Panel id="panel5">
           <PanelHeader
-            left={
+            before={
               <PanelHeaderBack
                 onClick={() => this.setState({ activePanel: "panel4" })}
               />

package/src/components/Tabs/Tabs.tsx

@@ -17,6 +17,9 @@ export interface TabsProps
 export const TabsModeContext =
   React.createContext<TabsProps["mode"]>("default");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tabs
+ */
 const Tabs: React.FunctionComponent<TabsProps> = ({
   children,
   mode,

package/src/components/TabsItem/TabsItem.tsx

@@ -6,9 +6,9 @@ import { VKCOM } from "../../lib/platform";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
 import { TabsProps, TabsModeContext } from "../Tabs/Tabs";
-import Headline from "../Typography/Headline/Headline";
+import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
-import Text from "../Typography/Text/Text";
+import { Text } from "../Typography/Text/Text";
 import "./TabsItem.css";
 
 export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
@@ -16,6 +16,9 @@ export interface TabsItemProps extends React.HTMLAttributes<HTMLElement> {
   selected?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/TabsItem
+ */
 const TabsItem: React.FC<TabsItemProps> = ({
   children,
   selected,
@@ -25,11 +28,11 @@ const TabsItem: React.FC<TabsItemProps> = ({
   const platform = usePlatform();
   const mode: TabsProps["mode"] = React.useContext(TabsModeContext);
 
-  let TypographyComponent =
+  let ItemTypography =
     mode === "buttons" || mode === "segmented" ? Subhead : Headline;
 
   if (platform === VKCOM) {
-    TypographyComponent = Text;
+    ItemTypography = Text;
   }
 
   return (
@@ -43,13 +46,9 @@ const TabsItem: React.FC<TabsItemProps> = ({
       activeMode="TabsItem--active"
       focusVisibleMode={mode === "segmented" ? "outside" : "inside"}
     >
-      <TypographyComponent
-        Component="span"
-        vkuiClass="TabsItem__in"
-        weight="medium"
-      >
+      <ItemTypography Component="span" vkuiClass="TabsItem__in" weight="2">
         {children}
-      </TypographyComponent>
+      </ItemTypography>
       {hasReactNode(after) && <div vkuiClass="TabsItem__after">{after}</div>}
     </Tappable>
   );

package/src/components/Tappable/Tappable.tsx

@@ -21,6 +21,8 @@ import { callMultiple } from "../../lib/callMultiple";
 import { useBooleanState } from "../../hooks/useBooleanState";
 import "./Tappable.css";
 
+const WAVE_LIVE = 225;
+
 export interface TappableProps
   extends Omit<
       React.AllHTMLAttributes<HTMLElement>,
@@ -69,7 +71,7 @@ export interface TappableProps
 interface Wave {
   x: number;
   y: number;
-  id: string;
+  id: number;
 }
 
 export interface RootComponentProps extends TouchProps {
@@ -184,7 +186,10 @@ const Tappable: React.FC<TappableProps> = ({
   const hasActive = _hasActive && !childHover && !props.disabled;
   const hasHover = deviceHasHover && _hasHover && !childHover;
   const isCustomElement =
-    Component !== "a" && Component !== "button" && !props.contentEditable;
+    Component !== "a" &&
+    Component !== "button" &&
+    Component !== "label" &&
+    !props.contentEditable;
   const isPresetHoverMode = ["opacity", "background"].includes(hoverMode);
   const isPresetActiveMode = ["opacity", "background"].includes(activeMode);
   const isPresetFocusVisibleMode = ["inside", "outside"].includes(
@@ -223,6 +228,24 @@ const Tappable: React.FC<TappableProps> = ({
     }
   }
 
+  const needWaves =
+    platform === ANDROID &&
+    !hasMouse &&
+    hasActive &&
+    activeMode === "background";
+
+  const clearClicks = useTimeout(() => setClicks([]), WAVE_LIVE);
+
+  function addClick(x: number, y: number) {
+    const dateNow = Date.now();
+    const filteredClicks = clicks.filter(
+      (click) => click.id + WAVE_LIVE > dateNow
+    );
+
+    setClicks([...filteredClicks, { x, y, id: dateNow }]);
+    clearClicks.set();
+  }
+
   function onStart({ originalEvent }: TouchEvent) {
     if (hasActive) {
       if (originalEvent.touches && originalEvent.touches.length > 1) {
@@ -230,11 +253,11 @@ const Tappable: React.FC<TappableProps> = ({
         return stop();
       }
 
-      if (platform === ANDROID) {
+      if (needWaves) {
         const { top, left } = getOffsetRect(containerRef.current);
         const x = coordX(originalEvent) - (left ?? 0);
         const y = coordY(originalEvent) - (top ?? 0);
-        setClicks([...clicks, { x, y, id: Date.now().toString() }]);
+        addClick(x, y);
       }
 
       delayStart();
@@ -312,22 +335,17 @@ const Tappable: React.FC<TappableProps> = ({
       <TappableContext.Provider value={childContext}>
         {children}
       </TappableContext.Provider>
-      {platform === ANDROID &&
-        !hasMouse &&
-        hasActive &&
-        activeMode === "background" && (
-          <span aria-hidden="true" vkuiClass="Tappable__waves">
-            {clicks.map((wave) => (
-              <Wave
-                {...wave}
-                key={wave.id}
-                onClear={() =>
-                  setClicks(clicks.filter((c) => c.id !== wave.id))
-                }
-              />
-            ))}
-          </span>
-        )}
+      {needWaves && (
+        <span aria-hidden="true" vkuiClass="Tappable__waves">
+          {clicks.map((wave) => (
+            <span
+              key={wave.id}
+              vkuiClass="Tappable__wave"
+              style={{ top: wave.y, left: wave.x }}
+            />
+          ))}
+        </span>
+      )}
       {hasHover && hoverMode === "background" && (
         <span aria-hidden="true" vkuiClass="Tappable__hoverShadow" />
       )}
@@ -344,9 +362,3 @@ export default withAdaptivity(Tappable, {
   hasMouse: true,
   deviceHasHover: true,
 });
-
-function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
-  const timeout = useTimeout(onClear, 225);
-  React.useEffect(() => timeout.set(), [timeout]);
-  return <span vkuiClass="Tappable__wave" style={{ top: y, left: x }} />;
-}

package/src/components/TextTooltip/TextTooltip.tsx

@@ -19,6 +19,9 @@ export interface TextTooltipProps
   header?: React.ReactNode;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/TextTooltip
+ */
 export const TextTooltip: React.FC<TextTooltipProps> = ({
   children,
   text,

package/src/components/Textarea/Textarea.tsx

@@ -19,6 +19,9 @@ export interface TextareaProps
   defaultValue?: string;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Textarea
+ */
 const Textarea: React.FC<TextareaProps> = React.memo(
   ({
     defaultValue = "",