@vkontakte/vkui 4.31.0 → 4.32.0

package/src/components/Spacing/Spacing.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
 import "./Spacing.css";
 
 export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,6 +8,7 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   size?: number;
   /**
+   * @deprecated Это свойство устарело и будет удалено в 5.0.0. Используйте [`Separator`](#/Separator) вместе с Spacing.
    * Настройка положения сепаратора:
    *
    * - separator=false (default) - без сепаратора
@@ -20,13 +19,15 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
   separator?: boolean | "top" | "bottom" | "center";
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/Spacing
+ */
 export const Spacing: React.FC<SpacingProps> = ({
-  size,
+  size = 8,
   separator,
   style,
   ...restProps
 }: SpacingProps) => {
-  const platform = usePlatform();
   const styles = {
     height: size,
     ...style,
@@ -36,19 +37,15 @@ export const Spacing: React.FC<SpacingProps> = ({
     <div
       {...restProps}
       aria-hidden="true"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("Spacing", platform), {
-        "Spacing--separator": !!separator,
-        "Spacing--separator-center":
-          separator === true || separator === "center",
-        "Spacing--separator-top": separator === "top",
-        "Spacing--separator-bottom": separator === "bottom",
-      })}
+      vkuiClass={classNames(
+        "Spacing",
+        !!separator && "Spacing--separator",
+        (separator === true || separator === "center") &&
+          "Spacing--separator-center",
+        separator === "top" && "Spacing--separator-top",
+        separator === "bottom" && "Spacing--separator-bottom"
+      )}
       style={styles}
     />
   );
 };
-
-Spacing.defaultProps = {
-  size: 8,
-};

package/src/components/Spinner/Spinner.css

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--icon_outline_secondary);
+  color: var(--icon_outline_secondary, var(--vkui--color_icon_medium));
 }
 
 .Spinner__self {

package/src/components/Spinner/Spinner.tsx

@@ -1,53 +1,43 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import {
   Icon24Spinner,
   Icon32Spinner,
   Icon44Spinner,
   Icon16Spinner,
 } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
 import "./Spinner.css";
 
 export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
-  size?: "small" | "regular" | "large" | "medium";
+  size?: "small" | "regular" | "medium" | "large";
 }
 
-const Spinner: React.FC<SpinnerProps> = ({
-  size,
-  ...restProps
-}: SpinnerProps) => {
-  const platform = usePlatform();
-
-  let SpinnerIcon = Icon24Spinner;
-
-  if (size === "large") {
-    SpinnerIcon = Icon44Spinner;
-  }
-
-  if (size === "medium") {
-    SpinnerIcon = Icon32Spinner;
+/**
+ * @see https://vkcom.github.io/VKUI/#/Spinner
+ */
+export const Spinner = React.memo(
+  ({
+    size = "regular",
+    "aria-label": ariaLabel = "Загружается...",
+    ...restProps
+  }: SpinnerProps) => {
+    const SpinnerIcon = {
+      small: Icon16Spinner,
+      regular: Icon24Spinner,
+      medium: Icon32Spinner,
+      large: Icon44Spinner,
+    }[size];
+
+    return (
+      <span
+        role="status"
+        aria-label={ariaLabel}
+        {...restProps}
+        vkuiClass="Spinner"
+      >
+        <SpinnerIcon aria-hidden="true" vkuiClass="Spinner__self" />
+      </span>
+    );
   }
+);
 
-  if (size === "small") {
-    SpinnerIcon = Icon16Spinner;
-  }
-
-  return (
-    <span
-      role="status"
-      {...restProps}
-      vkuiClass={getClassName("Spinner", platform)}
-    >
-      <SpinnerIcon aria-hidden="true" vkuiClass="Spinner__self" />
-    </span>
-  );
-};
-
-Spinner.defaultProps = {
-  size: "regular",
-  "aria-label": "Загружается...",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default React.memo(Spinner);
+Spinner.displayName = "Spinner";

package/src/components/SplitCol/SplitCol.css

@@ -7,7 +7,7 @@
 }
 
 .SplitCol--spaced {
-  margin: 0 16px;
+  padding: 0 var(--vkui--size_split_col_padding_horizontal--regular);
 }
 
 .SplitCol--fixed {

package/src/components/SplitCol/SplitCol.tsx

@@ -1,5 +1,7 @@
 import * as React from "react";
+import { useScrollLockEffect } from "../AppRoot/ScrollContext";
 import { classNames } from "../../lib/classNames";
+import { noop } from "../../lib/utils";
 import "./SplitCol.css";
 
 export interface SplitColContextProps {
@@ -27,6 +29,9 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
   fixed?: boolean;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SplitCol
+ */
 export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
   const {
     children,
@@ -41,6 +46,8 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
   } = props;
   const baseRef = React.useRef<HTMLDivElement>(null);
 
+  const fixedInnerRef = React.useRef<HTMLDivElement>(null);
+
   const contextValue = React.useMemo(() => {
     return {
       colRef: baseRef,
@@ -48,6 +55,19 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
     };
   }, [baseRef, animate]);
 
+  useScrollLockEffect(() => {
+    const fixedInner = fixedInnerRef.current;
+    if (!fixedInner) {
+      return noop;
+    }
+
+    fixedInner.style.top = `${fixedInner.offsetTop}px`;
+
+    return () => {
+      fixedInner.style.top = "";
+    };
+  }, [fixedInnerRef.current]);
+
   return (
     <div
       {...restProps}
@@ -58,15 +78,17 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
         minWidth: minWidth,
       }}
       ref={baseRef}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames("SplitCol", {
-        "SplitCol--spaced": spaced,
-        "SplitCol--fixed": fixed,
-      })}
+      vkuiClass={classNames(
+        "SplitCol",
+        spaced && "SplitCol--spaced",
+        fixed && "SplitCol--fixed"
+      )}
     >
       <SplitColContext.Provider value={contextValue}>
         {fixed ? (
-          <div vkuiClass="SplitCol__fixedInner">{children}</div>
+          <div ref={fixedInnerRef} vkuiClass="SplitCol__fixedInner">
+            {children}
+          </div>
         ) : (
           children
         )}

package/src/components/SplitLayout/Readme.md

@@ -92,7 +92,7 @@ const Example = withAdaptivity(
         >
           <View activePanel={panel}>
             <Panel id={panels[0]}>
-              <PanelHeader right={<Avatar size={36} />}>Panel 1</PanelHeader>
+              <PanelHeader after={<Avatar size={36} />}>Panel 1</PanelHeader>
               <Group>
                 <Placeholder
                   icon={<Icon56UsersOutline />}
@@ -110,7 +110,7 @@ const Example = withAdaptivity(
             </Panel>
 
             <Panel id={panels[1]}>
-              <PanelHeader right={<Avatar size={36} />}>Panel 2</PanelHeader>
+              <PanelHeader after={<Avatar size={36} />}>Panel 2</PanelHeader>
               <Group>
                 <Placeholder>Доступ запрещён</Placeholder>
                 <Separator />
@@ -124,7 +124,7 @@ const Example = withAdaptivity(
             </Panel>
 
             <Panel id={panels[2]}>
-              <PanelHeader right={<Avatar size={36} />}>Panel 3</PanelHeader>
+              <PanelHeader after={<Avatar size={36} />}>Panel 3</PanelHeader>
               <Group>
                 <Placeholder
                   icon={<Icon56MessageReadOutline />}

package/src/components/SplitLayout/SplitLayout.css

@@ -20,14 +20,14 @@
 
 .SplitLayout--ios .SplitLayout__inner--header {
   margin-top: calc(
-    -1 * calc(var(--panelheader_height_ios) + var(--safe-area-inset-top))
+    -1 * (var(--panelheader_height_ios) + var(--safe-area-inset-top))
   );
 }
 
 .SplitLayout--android .SplitLayout__inner--header,
 .SplitLayout--vkcom .SplitLayout__inner--header {
   margin-top: calc(
-    -1 * calc(var(--panelheader_height_android) + var(--safe-area-inset-top))
+    -1 * (var(--panelheader_height) + var(--safe-area-inset-top))
   );
 }
 

package/src/components/SplitLayout/SplitLayout.tsx

@@ -21,6 +21,9 @@ export interface SplitLayoutProps
   header?: React.ReactNode;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SplitLayout
+ */
 export const SplitLayout: React.FC<SplitLayoutProps> = ({
   popout,
   modal,

package/src/components/SubnavigationBar/Readme.md

@@ -81,8 +81,10 @@ const SubnavigationBarExample = () => {
         id={MODAL_NAME}
         header={
           <ModalPageHeader
-            left={platform !== IOS && <PanelHeaderClose onClick={closeModal} />}
-            right={
+            before={
+              platform !== IOS && <PanelHeaderClose onClick={closeModal} />
+            }
+            after={
               platform === IOS && (
                 <PanelHeaderButton onClick={closeModal}>
                   <Icon24Dismiss />
@@ -229,7 +231,7 @@ const SubnavigationBarExample = () => {
           </Panel>
           <Panel id="add_friend">
             <PanelHeader
-              left={
+              before={
                 <PanelHeaderBack onClick={() => setActivePanel("example")} />
               }
             >

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -25,6 +25,9 @@ const defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;
 
 const defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SubnavigationBar
+ */
 export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
   mode = "overflow",
   children,

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -42,6 +42,9 @@ const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
   return <Caption level={textLevel === 2 ? "1" : "2"} {...restProps} />;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/SubnavigationButton
+ */
 export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
   props: SubnavigationButtonProps
 ) => {

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,