@vkontakte/vkui 4.31.0 → 4.32.0

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 = "",

package/src/components/Tooltip/Readme.md

@@ -75,14 +75,14 @@ class Example extends React.Component {
 
         <Panel id="tooltip2">
           <PanelHeader
-            left={
+            before={
               <Tooltip
                 isShown={this.state.tooltip2}
                 onClose={() =>
                   this.setState({ tooltip2: false, tooltip3: true })
                 }
                 text="Нажмите на кнопку, если хотите вернуться"
-                header="Возвратиться"
+                header="Назад"
               >
                 <PanelHeaderBack
                   onClick={() => this.setState({ activePanel: "tooltip" })}

package/src/components/Tooltip/Tooltip.tsx

@@ -152,6 +152,9 @@ function isVerticalPlacement(placement: Placement) {
   return placement.startsWith("top") || placement.startsWith("bottom");
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Tooltip
+ */
 const Tooltip: React.FC<TooltipProps> = ({
   children,
   isShown: _isShown,

package/src/components/Touch/Touch.tsx

@@ -63,6 +63,9 @@ export type TouchEventHandler = (e: TouchEvent) => void;
 export type ClickHandler = (e: React.MouseEvent<HTMLElement>) => void;
 export type DragHandler = (e: React.DragEvent<HTMLElement>) => void;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Touch
+ */
 export const Touch: React.FC<TouchProps> = ({
   onStart,
   onStartX,

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

@@ -19,6 +19,9 @@ export interface CaptionProps
 
 const warn = warnOnce("Caption");
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Caption
+ */
 export const Caption: React.FC<CaptionProps> = ({
   children,
   weight,

package/src/components/Typography/Footnote/Footnote.css

@@ -0,0 +1,26 @@
+.Footnote {
+  display: block;
+  margin: 0;
+  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);
+}
+
+.Footnote--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);
+  text-transform: uppercase;
+}
+
+.Footnote--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Footnote--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Footnote--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Footnote/Footnote.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { HasComponent } from "../../../types";
+import { classNames } from "../../../lib/classNames";
+import "./Footnote.css";
+
+export interface FootnoteProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    HasComponent {
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   */
+  weight?: "1" | "2" | "3";
+  caps?: boolean;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Footnote
+ */
+export const Footnote = ({
+  children,
+  weight,
+  caps,
+  Component = "span",
+  ...restProps
+}: FootnoteProps) => {
+  return (
+    <Component
+      {...restProps}
+      vkuiClass={classNames(
+        "Footnote",
+        caps && "Footnote--caps",
+        weight && `Footnote--w-${weight}`
+      )}
+    >
+      {children}
+    </Component>
+  );
+};

package/src/components/Typography/Footnote/Readme.md

@@ -0,0 +1,18 @@
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20 }}>
+  <Footnote>Footnote</Footnote>
+  <Footnote caps>Footnote CAPS</Footnote>
+</div>
+```
+
+## Кастомизация
+
+Есть возможность переопределить жирность.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", flexDirection: "column", gap: 16, padding: 20 }}>
+  <Footnote weight="1">Footnote weight 1</Footnote>
+  <Footnote weight="2">Footnote weight 2</Footnote>
+  <Footnote weight="3">Footnote weight 3</Footnote>
+</div>
+```

package/src/components/Typography/Headline/Headline.css

@@ -1,25 +1,62 @@
 .Headline {
   display: block;
   margin: 0;
-  font-size: 16px;
-  line-height: 20px;
 }
 
+.Headline--l-1 {
+  font-size: var(--vkui--font_headline1--font_size--regular);
+  line-height: var(--vkui--font_headline1--line_height--regular);
+  font-weight: var(--vkui--font_headline1--font_weight--regular);
+}
+
+.Headline--l-2 {
+  font-size: var(--vkui--font_headline2--font_size--regular);
+  line-height: var(--vkui--font_headline2--line_height--regular);
+  font-weight: var(--vkui--font_headline2--font_weight--regular);
+}
+
+/* TODO: новая адаптивность */
+.Headline--sizeY-compact.Headline--l-1 {
+  font-size: var(--vkui--font_headline1--font_size--compact);
+  line-height: var(--vkui--font_headline1--line_height--compact);
+}
+
+.Headline--sizeY-compact.Headline--l-2 {
+  font-size: var(--vkui--font_headline2--font_size--compact);
+  line-height: var(--vkui--font_headline2--line_height--compact);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Headline--w-semibold {
   font-weight: 600;
 }
 
 /**
  * ANDROID
+ * TODO удалить перед релизом 5.0.0
  */
 .Headline--android.Headline--w-semibold {
   font-weight: 500;
 }
+
+.Headline--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Headline--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Headline--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
+}

package/src/components/Typography/Headline/Headline.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { HasComponent } from "../../../types";
 import { usePlatform } from "../../../hooks/usePlatform";
+import { useAdaptivity } from "../../../hooks/useAdaptivity";
 import { classNames } from "../../../lib/classNames";
 import { getClassName } from "../../../helpers/getClassName";
 import "./Headline.css";
@@ -8,22 +9,35 @@ import "./Headline.css";
 export interface HeadlineProps
   extends React.AllHTMLAttributes<HTMLElement>,
     HasComponent {
-  weight: "regular" | "medium" | "semibold";
+  /**
+   * Задаёт начертание шрифта отличное от стандартного.
+   *
+   * > ⚠️ Начертания `"semibold"`, `medium` и `"regular"` устарели и будут удалены в 5.0.0. Используйте значения `"1"`, `"2"` и `"3"`.
+   */
+  weight?: "regular" | "medium" | "semibold" | "1" | "2" | "3";
+  level?: "1" | "2";
 }
 
-const Headline: React.FC<HeadlineProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Headline
+ */
+export const Headline: React.FC<HeadlineProps> = ({
   children,
-  weight = "regular",
-  Component = "h3",
+  weight = "3",
+  level = "1",
+  Component = "h3", // TODO: v5 h4
   ...restProps
 }: HeadlineProps) => {
   const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
 
   return (
     <Component
       {...restProps}
       vkuiClass={classNames(
-        getClassName("Headline", platform),
+        getClassName("Headline", platform), // TODO: v5 remove
+        `Headline--sizeY-${sizeY}`, // TODO: новая адаптивность
+        `Headline--l-${level}`,
         `Headline--w-${weight}`
       )}
     >
@@ -31,6 +45,3 @@ const Headline: React.FC<HeadlineProps> = ({
     </Component>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Headline;

package/src/components/Typography/Headline/Readme.md

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

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -15,6 +15,10 @@ export interface ParagraphProps
 }
 
 const warn = warnOnce("Paragraph");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Paragraph
+ */
 export const Paragraph: React.FC<ParagraphProps> = ({
   Component = "span",
   getRootRef,

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

@@ -17,6 +17,10 @@ export interface SubheadProps
 }
 
 const warn = warnOnce("Subhead");
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Subhead
+ */
 export const Subhead: React.FC<SubheadProps> = ({
   children,
   weight,

package/src/components/Typography/Text/Readme.md

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

package/src/components/Typography/Text/Text.css

@@ -1,25 +1,40 @@
 .Text {
   display: block;
   margin: 0;
-  font-size: 15px;
-  line-height: 20px;
+  font-size: var(--vkui--font_text--font_size--regular);
+  line-height: var(--vkui--font_text--line_height--regular);
+  font-weight: var(--vkui--font_text--font_weight--regular);
 }
 
+/* TODO v5.0.0 перевести на новую адаптивность */
+.Text--sizeY-compact {
+  font-size: var(--vkui--font_text--font_size--compact);
+  line-height: var(--vkui--font_text--line_height--compact);
+}
+
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-regular {
   font-weight: 400;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-medium {
   font-weight: 500;
 }
 
+/* TODO удалить перед релизом 5.0.0 */
 .Text--w-semibold {
   font-weight: 600;
 }
 
-/**
- * ANDROID
- */
-.Text--android.Text--w-semibold {
-  font-weight: 500;
+.Text--w-1 {
+  font-weight: var(--vkui--font_weight_accent1);
+}
+
+.Text--w-2 {
+  font-weight: var(--vkui--font_weight_accent2);
+}
+
+.Text--w-3 {
+  font-weight: var(--vkui--font_weight_accent3);
 }