@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Snackbar/Snackbar.tsx

@@ -1,20 +1,24 @@
-import * as React from 'react';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import { classNames } from '../../lib/classNames';
-import { HasPlatform } from '../../types';
-import { getClassName } from '../../helpers/getClassName';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { rubber } from '../../lib/touch';
-import { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';
-import Text from '../Typography/Text/Text';
-import Button from '../Button/Button';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import './Snackbar.css';
-
-export interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {
+import * as React from "react";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { classNames } from "../../lib/classNames";
+import { HasPlatform } from "../../types";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { rubber } from "../../lib/touch";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import Text from "../Typography/Text/Text";
+import Button from "../Button/Button";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
+import "./Snackbar.css";
+
+export interface SnackbarProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    AdaptivityContextInterface {
   /**
    * Название кнопки действия в уведомлении
    */
@@ -36,7 +40,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPla
   /**
    * Варианты расположения кнопки
    */
-  layout?: 'vertical' | 'horizontal';
+  layout?: "vertical" | "horizontal";
   /**
    * Время в миллисекундах, через которое плашка скроется
    */
@@ -55,7 +59,7 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
     before,
     after,
     viewWidth,
-    duration,
+    duration = 0,
     onActionClick,
     onClose,
     ...restProps
@@ -74,22 +78,29 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
   const bodyElRef = React.useRef<HTMLDivElement | null>(null);
   const innerElRef = React.useRef<HTMLDivElement | null>(null);
 
-  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
+  const animationFrameRef = React.useRef<ReturnType<
+    typeof requestAnimationFrame
+  > | null>(null);
 
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  const transitionFinishDurationFallback = platform === ANDROID || platform === VKCOM ? 400 : 320;
+  const transitionFinishDurationFallback =
+    platform === ANDROID || platform === VKCOM ? 400 : 320;
 
   const close = () => {
     setClosing(true);
-    waitTransitionFinish(innerElRef.current, () => {
-      onClose();
-    }, transitionFinishDurationFallback);
+    waitTransitionFinish(
+      innerElRef.current,
+      () => {
+        onClose();
+      },
+      transitionFinishDurationFallback
+    );
   };
 
   const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {
     close();
 
-    if (action && typeof onActionClick === 'function') {
+    if (action && typeof onActionClick === "function") {
       onActionClick(e);
     }
   };
@@ -97,7 +108,9 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
   const closeTimeout = useTimeout(close, duration);
 
   const setBodyTransform = (percent: number) => {
-    cancelAnimationFrame(animationFrameRef.current);
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
     animationFrameRef.current = requestAnimationFrame(() => {
       if (bodyElRef.current) {
         bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;
@@ -115,8 +128,14 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
       setTouched(true);
     }
 
-    shiftXPercentRef.current = shiftX / bodyElRef.current.offsetWidth * 100;
-    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform === ANDROID || platform === VKCOM);
+    shiftXPercentRef.current =
+      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;
+    shiftXCurrentRef.current = rubber(
+      shiftXPercentRef.current,
+      72,
+      1.2,
+      platform === ANDROID || platform === VKCOM
+    );
 
     setBodyTransform(shiftXCurrentRef.current);
   };
@@ -126,20 +145,28 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
 
     if (touched) {
       let shiftXCurrent = shiftXCurrentRef.current;
-      const expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
+      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;
       shiftXCurrent = shiftXCurrent + expectTranslateY;
 
       if (isDesktop && shiftXCurrent <= -50) {
         closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, () => {
-          onClose();
-        }, transitionFinishDurationFallback);
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
         setBodyTransform(-120);
       } else if (!isDesktop && shiftXCurrent >= 50) {
         closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, () => {
-          onClose();
-        }, transitionFinishDurationFallback);
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
         setBodyTransform(120);
       } else {
         callback = () => {
@@ -155,19 +182,23 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
     callback && requestAnimationFrame(callback);
   };
 
-  React.useEffect(closeTimeout.set, []);
+  React.useEffect(() => closeTimeout.set(), [closeTimeout]);
 
-  const resolvedLayout = after || isDesktop ? 'vertical' : layout;
+  const resolvedLayout = after || isDesktop ? "vertical" : layout;
 
   return (
     <AppRootPortal>
       <div
         {...restProps}
-        vkuiClass={classNames(getClassName('Snackbar', platform), `Snackbar--l-${resolvedLayout}`, {
-          'Snackbar--closing': closing,
-          'Snackbar--touched': touched,
-          'Snackbar--desktop': isDesktop,
-        })}
+        vkuiClass={classNames(
+          getClassName("Snackbar", platform),
+          `Snackbar--l-${resolvedLayout}`,
+          {
+            "Snackbar--closing": closing,
+            "Snackbar--touched": touched,
+            "Snackbar--desktop": isDesktop,
+          }
+        )}
       >
         <Touch
           vkuiClass="Snackbar__in"
@@ -177,24 +208,28 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
           onEnd={onTouchEnd}
         >
           <div vkuiClass="Snackbar__body" ref={bodyElRef}>
-            {before &&
-            <div vkuiClass="Snackbar__before">
-              {before}
-            </div>}
+            {before && <div vkuiClass="Snackbar__before">{before}</div>}
 
             <div vkuiClass="Snackbar__content">
-              <Text weight="regular" vkuiClass="Snackbar__content-text">{children}</Text>
-
-              {action &&
-              <Button align="left" hasHover={false} mode="tertiary" size="s" vkuiClass="Snackbar__action" onClick={handleActionClick}>
-                {action}
-              </Button>}
+              <Text weight="regular" vkuiClass="Snackbar__content-text">
+                {children}
+              </Text>
+
+              {action && (
+                <Button
+                  align="left"
+                  hasHover={false}
+                  mode="tertiary"
+                  size="s"
+                  vkuiClass="Snackbar__action"
+                  onClick={handleActionClick}
+                >
+                  {action}
+                </Button>
+              )}
             </div>
 
-            {after &&
-            <div vkuiClass="Snackbar__after">
-              {after}
-            </div>}
+            {after && <div vkuiClass="Snackbar__after">{after}</div>}
           </div>
         </Touch>
       </div>
@@ -202,11 +237,11 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
   );
 };
 
-SnackbarComponent.displayName = 'Snackbar';
+SnackbarComponent.displayName = "Snackbar";
 
 SnackbarComponent.defaultProps = {
   duration: 4000,
-  layout: 'horizontal',
+  layout: "horizontal",
 };
 
 export const Snackbar = withAdaptivity(SnackbarComponent, {

package/src/components/Spacing/Readme.md

@@ -1,6 +1,7 @@
 Компонент для разделения контента
 
 Для большинства случаев будет достаточно дефолтного поведения компонента
+
 ```jsx static
 <Spacing /> // - пустой отступ высотой 8px
 
@@ -12,21 +13,20 @@
 Для более гибкой настройки положения линии и отступов, можно комбинировать два отступа вместе
 
 Например - нужен сепаратор с отступом сверху 12px и снизу 20px:
+
 ```jsx static
 <Spacing separator="bottom" size={12} />
 <Spacing size={20} />
 ```
 
-
-
 ```jsx
 <View activePanel="separator">
   <Panel id="separator">
-    <PanelHeader>
-      Spacing
-    </PanelHeader>
+    <PanelHeader>Spacing</PanelHeader>
 
-    <Group header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}>
+    <Group
+      header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}
+    >
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -46,7 +46,11 @@
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
 
-    <Group header={<Header mode="secondary">Spacing with centered separator 16px</Header>}>
+    <Group
+      header={
+        <Header mode="secondary">Spacing with centered separator 16px</Header>
+      }
+    >
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -56,7 +60,13 @@
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
 
-    <Group header={<Header mode="secondary">Combined Spacings with bottom separator</Header>}>
+    <Group
+      header={
+        <Header mode="secondary">
+          Combined Spacings with bottom separator
+        </Header>
+      }
+    >
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -67,7 +77,13 @@
       <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
     </Group>
 
-    <Group header={<Header mode="secondary">Combined Spacings with bottom separator and custom size</Header>}>
+    <Group
+      header={
+        <Header mode="secondary">
+          Combined Spacings with bottom separator and custom size
+        </Header>
+      }
+    >
       <Cell before={<Icon28Notifications />}>Уведомления</Cell>
       <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
 
@@ -79,4 +95,4 @@
     </Group>
   </Panel>
 </View>
-```
+```

package/src/components/Spacing/Spacing.css

@@ -24,13 +24,13 @@
 
 @media (min-resolution: 2dppx) {
   .Spacing--separator::after {
-    transform: scaleY(.5);
+    transform: scaleY(0.5);
   }
 }
 
 @media (min-resolution: 3dppx) {
   .Spacing--separator::after {
-    transform: scaleY(.32);
+    transform: scaleY(0.32);
   }
 }
 

package/src/components/Spacing/Spacing.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import './Spacing.css';
+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> {
   /**
@@ -17,10 +17,15 @@ export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
    * - separator='top'
    * - separator='bottom'
    */
-  separator?: boolean | 'top' | 'bottom' | 'center';
+  separator?: boolean | "top" | "bottom" | "center";
 }
 
-export const Spacing: React.FC<SpacingProps> = ({ size, separator, style, ...restProps }: SpacingProps) => {
+export const Spacing: React.FC<SpacingProps> = ({
+  size,
+  separator,
+  style,
+  ...restProps
+}: SpacingProps) => {
   const platfrom = usePlatform();
   const styles = {
     height: size,
@@ -31,11 +36,12 @@ export const Spacing: React.FC<SpacingProps> = ({ size, separator, style, ...res
     <div
       {...restProps}
       aria-hidden="true"
-      vkuiClass={classNames(getClassName('Spacing', platfrom), {
-        'Spacing--separator': !!separator,
-        'Spacing--separator-center': separator === true || separator === 'center',
-        'Spacing--separator-top': separator === 'top',
-        'Spacing--separator-bottom': separator === 'bottom',
+      vkuiClass={classNames(getClassName("Spacing", platfrom), {
+        "Spacing--separator": !!separator,
+        "Spacing--separator-center":
+          separator === true || separator === "center",
+        "Spacing--separator-top": separator === "top",
+        "Spacing--separator-bottom": separator === "bottom",
       })}
       style={styles}
     />

package/src/components/Spinner/Readme.md

@@ -2,10 +2,10 @@
 заблокировать интерфейс, то можно использовать надстройку над `Spinner` – [ScreenSpinner](#!/ScreenSpinner).
 
 ```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
-  <Spinner size="large" style={{ margin: '20px 0' }} />
-  <Spinner size="medium" style={{ margin: '20px 0' }} />
-  <Spinner size="regular" style={{ margin: '20px 0' }} />
-  <Spinner size="small" style={{ margin: '20px 0' }} />
+<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
+  <Spinner size="large" style={{ margin: "20px 0" }} />
+  <Spinner size="medium" style={{ margin: "20px 0" }} />
+  <Spinner size="regular" style={{ margin: "20px 0" }} />
+  <Spinner size="small" style={{ margin: "20px 0" }} />
 </div>
 ```

package/src/components/Spinner/Spinner.tsx

@@ -1,40 +1,53 @@
-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';
+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" | "large" | "medium";
 }
 
-const Spinner: React.FC<SpinnerProps> = ({ size, ...restProps }: SpinnerProps) => {
+const Spinner: React.FC<SpinnerProps> = ({
+  size,
+  ...restProps
+}: SpinnerProps) => {
   const platform = usePlatform();
 
   let SpinnerIcon = Icon24Spinner;
 
-  if (size === 'large') {
+  if (size === "large") {
     SpinnerIcon = Icon44Spinner;
   }
 
-  if (size === 'medium') {
+  if (size === "medium") {
     SpinnerIcon = Icon32Spinner;
   }
 
-  if (size === 'small') {
+  if (size === "small") {
     SpinnerIcon = Icon16Spinner;
   }
 
   return (
-    <span role="status" {...restProps} vkuiClass={getClassName('Spinner', platform)}>
+    <span
+      role="status"
+      {...restProps}
+      vkuiClass={getClassName("Spinner", platform)}
+    >
       <SpinnerIcon aria-hidden="true" vkuiClass="Spinner__self" />
     </span>
   );
 };
 
 Spinner.defaultProps = {
-  'size': 'regular',
-  'aria-label': 'Загружается...',
+  size: "regular",
+  "aria-label": "Загружается...",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(Spinner);

package/src/components/SplitCol/SplitCol.tsx

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import './SplitCol.css';
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./SplitCol.css";
 
 export interface SplitColContextProps {
-  colRef: React.RefObject<HTMLDivElement>;
+  colRef: React.RefObject<HTMLDivElement> | null;
   animate: boolean;
 }
 
@@ -28,8 +28,18 @@ export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
-  const { children, width, maxWidth, minWidth, spaced, animate = false, fixed, style, ...restProps } = props;
-  const baseRef = React.useRef<HTMLDivElement>();
+  const {
+    children,
+    width,
+    maxWidth,
+    minWidth,
+    spaced,
+    animate = false,
+    fixed,
+    style,
+    ...restProps
+  } = props;
+  const baseRef = React.useRef<HTMLDivElement>(null);
 
   const contextValue = React.useMemo(() => {
     return {
@@ -48,13 +58,17 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
         minWidth: minWidth,
       }}
       ref={baseRef}
-      vkuiClass={classNames('SplitCol', {
-        'SplitCol--spaced': spaced,
-        'SplitCol--fixed': fixed,
+      vkuiClass={classNames("SplitCol", {
+        "SplitCol--spaced": spaced,
+        "SplitCol--fixed": fixed,
       })}
     >
       <SplitColContext.Provider value={contextValue}>
-        {fixed ? <div vkuiClass="SplitCol__fixedInner">{children}</div> : children}
+        {fixed ? (
+          <div vkuiClass="SplitCol__fixedInner">{children}</div>
+        ) : (
+          children
+        )}
       </SplitColContext.Provider>
     </div>
   );

package/src/components/SplitLayout/Readme.md

@@ -1,7 +1,6 @@
 Компонент-контейнер для реализации интерфейса с [многоколоночной структурой](#!/Adaptivity). Тесно связан со [SplitCol](#!/SplitCol).
 
 ```jsx
-
 const panels = ["panel 1", "panel 2", "panel 3"];
 const modals = ["modal 1", "modal 2"];
 
@@ -54,10 +53,15 @@ const Example = withAdaptivity(
                   <Cell
                     key={i}
                     disabled={i === panel}
-                    style={i === panel ? {
-                      backgroundColor: "var(--button_secondary_background)",
-                      borderRadius: 8
-                    } : {}}
+                    style={
+                      i === panel
+                        ? {
+                            backgroundColor:
+                              "var(--button_secondary_background)",
+                            borderRadius: 8,
+                          }
+                        : {}
+                    }
                     onClick={() => setPanel(i)}
                   >
                     {i}
@@ -66,7 +70,15 @@ const Example = withAdaptivity(
                 <Separator />
                 <Cell onClick={() => setModal(modals[0])}>modal 1</Cell>
                 <Cell onClick={() => setModal(modals[1])}>modal 2</Cell>
-                <Cell onClick={() => setPopout(<Alert header="Alert!" onClose={() => setPopout(null)} />)}>alert</Cell>
+                <Cell
+                  onClick={() =>
+                    setPopout(
+                      <Alert header="Alert!" onClose={() => setPopout(null)} />
+                    )
+                  }
+                >
+                  alert
+                </Cell>
               </Group>
             </Panel>
           </SplitCol>
@@ -75,8 +87,8 @@ const Example = withAdaptivity(
         <SplitCol
           animate={!isDesktop}
           spaced={isDesktop}
-          width={isDesktop ? '560px' : '100%'}
-          maxWidth={isDesktop ? '560px' : '100%'}
+          width={isDesktop ? "560px" : "100%"}
+          maxWidth={isDesktop ? "560px" : "100%"}
         >
           <View activePanel={panel}>
             <Panel id={panels[0]}>
@@ -87,12 +99,11 @@ const Example = withAdaptivity(
                   header="Уведомления от сообществ"
                   action={<Button size="m">Подключить сообщества</Button>}
                 >
-                  Подключите сообщества, от которых Вы хотите получать уведомления
+                  Подключите сообщества, от которых Вы хотите получать
+                  уведомления
                 </Placeholder>
                 <Separator />
-                <Placeholder
-                  icon={<Icon56MentionOutline />}
-                >
+                <Placeholder icon={<Icon56MentionOutline />}>
                   Введите адрес страницы в поле поиска
                 </Placeholder>
               </Group>
@@ -101,9 +112,7 @@ const Example = withAdaptivity(
             <Panel id={panels[1]}>
               <PanelHeader right={<Avatar size={36} />}>Panel 2</PanelHeader>
               <Group>
-                <Placeholder>
-                  Доступ запрещён
-                </Placeholder>
+                <Placeholder>Доступ запрещён</Placeholder>
                 <Separator />
                 <Placeholder
                   header="Находите друзей"
@@ -119,9 +128,15 @@ const Example = withAdaptivity(
               <Group>
                 <Placeholder
                   icon={<Icon56MessageReadOutline />}
-                  action={<Button size="m" mode="tertiary">Показать все сообщения</Button>}
+                  action={
+                    <Button size="m" mode="tertiary">
+                      Показать все сообщения
+                    </Button>
+                  }
                 >
-                  Нет непрочитанных<br />сообщений
+                  Нет непрочитанных
+                  <br />
+                  сообщений
                 </Placeholder>
               </Group>
             </Panel>
@@ -135,6 +150,5 @@ const Example = withAdaptivity(
   }
 );
 
-<Example />
-
+<Example />;
 ```

package/src/components/SplitLayout/SplitLayout.css

@@ -19,7 +19,9 @@
 }
 
 .SplitLayout--ios .SplitLayout__inner--header {
-  margin-top: calc(-1 * calc(var(--panelheader_height_ios) + var(--safe-area-inset-top)));
+  margin-top: calc(
+    -1 * calc(var(--panelheader_height_ios) + var(--safe-area-inset-top))
+  );
 }
 
 .SplitLayout--android .SplitLayout__inner--header,