@vkontakte/vkui 4.29.1 → 4.32.0

package/src/components/Spacing/Spacing.css

@@ -4,6 +4,12 @@
   box-sizing: border-box;
   display: flex;
   flex-flow: column;
+  justify-content: center;
+}
+
+.Spacing--separator {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular);
+  padding-right: var(--vkui--size_base_padding_horizontal--regular);
 }
 
 .Spacing--separator-center {
@@ -33,14 +39,3 @@
     transform: scaleY(0.32);
   }
 }
-
-.Spacing--ios {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.Spacing--android,
-.Spacing--vkcom {
-  padding-left: 16px;
-  padding-right: 16px;
-}

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/Readme.md

@@ -5,51 +5,27 @@
   <Panel id="switch">
     <PanelHeader>Switch</PanelHeader>
     <Group>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch aria-label="Комментарии к записям" />}
-      >
+      <SimpleCell Component="label" after={<Switch />}>
         Комментарии к записям
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch defaultChecked aria-label="Ссылки" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" after={<Switch defaultChecked />}>
         Ссылки
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch disabled aria-label="Фотоальбомы" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" disabled after={<Switch disabled />}>
         Фотоальбомы
-      </Cell>
+      </SimpleCell>
     </Group>
     <Group header={<Header mode="secondary">Компактный вид</Header>}>
       <AdaptivityProvider sizeY="compact">
-        <Cell
-          role={null}
-          disabled
-          after={<Switch aria-label="Комментарии к записям" />}
-        >
+        <SimpleCell Component="label" after={<Switch />}>
           Комментарии к записям
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch defaultChecked aria-label="Ссылки" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" after={<Switch defaultChecked />}>
           Ссылки
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch disabled aria-label="Фотоальбомы" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" disabled after={<Switch disabled />}>
           Фотоальбомы
-        </Cell>
+        </SimpleCell>
       </AdaptivityProvider>
     </Group>
   </Panel>