@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -26,6 +26,7 @@ interface SliderSwitchState {
   hoveredOptionId: number;
 }
 
+// eslint-disable-next-line import/no-default-export
 export default class SliderSwitch extends React.Component<
   SliderSwitchProps,
   SliderSwitchState
@@ -109,14 +110,16 @@ export default class SliderSwitch extends React.Component<
 
     const { options } = this.props;
     const { activeValue } = this.state;
-    const { value } = options.find((option) => option.value !== activeValue);
+    const value = options.find((option) => option.value !== activeValue)?.value;
 
-    this.onSwitch(value);
+    if (value !== undefined) {
+      this.onSwitch(value);
+    }
 
     if (options[0].value === value) {
-      this.firstButton.current.focus();
+      this.firstButton.current?.focus();
     } else {
-      this.secondButton.current.focus();
+      this.secondButton.current?.focus();
     }
   };
 

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -49,4 +49,5 @@ const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default SliderSwitchButton;

package/src/components/Snackbar/Readme.md

@@ -19,6 +19,7 @@ class SnackBarExample extends React.Component {
     this.openBaseWithAction = this.openBaseWithAction.bind(this);
     this.openVertical = this.openVertical.bind(this);
     this.openWithAvatar = this.openWithAvatar.bind(this);
+    this.openDark = this.openDark.bind(this);
   }
 
   componentDidMount() {
@@ -85,6 +86,28 @@ class SnackBarExample extends React.Component {
     });
   }
 
+  openDark() {
+    if (this.state.snackbar) return;
+    this.setState({
+      snackbar: (
+        <AppearanceProvider appearance="dark">
+          <Snackbar
+            onClose={() => this.setState({ snackbar: null })}
+            action="Поделиться"
+            onActionClick={() => this.setState({ text: "Добавляем метку." })}
+            before={
+              <Avatar size={24} style={{ background: "var(--accent)" }}>
+                <Icon16Done fill="#fff" width={14} height={14} />
+              </Avatar>
+            }
+          >
+            Ссылка скопирована
+          </Snackbar>
+        </AppearanceProvider>
+      ),
+    });
+  }
+
   render() {
     return (
       <View activePanel="example">
@@ -100,6 +123,9 @@ class SnackBarExample extends React.Component {
             <CellButton onClick={this.openWithAvatar}>
               Уведомление с аватаркой
             </CellButton>
+            <CellButton onClick={this.openDark}>
+              Уведомление с темной темой
+            </CellButton>
           </Group>
 
           {this.state.text && (

package/src/components/Snackbar/Snackbar.tsx

@@ -5,23 +5,20 @@ 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 { 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,
-    AdaptivityProps {
+    AdaptivityContextInterface {
   /**
    * Название кнопки действия в уведомлении
    */
@@ -62,7 +59,7 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
     before,
     after,
     viewWidth,
-    duration,
+    duration = 0,
     onActionClick,
     onClose,
     ...restProps
@@ -111,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)`;
@@ -129,7 +128,8 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
       setTouched(true);
     }
 
-    shiftXPercentRef.current = (shiftX / bodyElRef.current.offsetWidth) * 100;
+    shiftXPercentRef.current =
+      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;
     shiftXCurrentRef.current = rubber(
       shiftXPercentRef.current,
       72,
@@ -182,7 +182,7 @@ 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;
 

package/src/components/Spinner/Spinner.tsx

@@ -49,4 +49,5 @@ Spinner.defaultProps = {
   "aria-label": "Загружается...",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(Spinner);

package/src/components/SplitCol/SplitCol.tsx

@@ -3,7 +3,7 @@ import { classNames } from "../../lib/classNames";
 import "./SplitCol.css";
 
 export interface SplitColContextProps {
-  colRef: React.RefObject<HTMLDivElement>;
+  colRef: React.RefObject<HTMLDivElement> | null;
   animate: boolean;
 }
 
@@ -39,7 +39,7 @@ export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
     style,
     ...restProps
   } = props;
-  const baseRef = React.useRef<HTMLDivElement>();
+  const baseRef = React.useRef<HTMLDivElement>(null);
 
   const contextValue = React.useMemo(() => {
     return {

package/src/components/Tabbar/Tabbar.tsx

@@ -46,4 +46,5 @@ Tabbar.defaultProps = {
   shadow: true,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Tabbar;

package/src/components/TabbarItem/TabbarItem.tsx

@@ -83,4 +83,5 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default TabbarItem;

package/src/components/Tabs/Tabs.tsx

@@ -53,4 +53,5 @@ Tabs.defaultProps = {
   mode: "default",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Tabs, { sizeX: true });

package/src/components/TabsItem/TabsItem.tsx

@@ -58,4 +58,5 @@ TabsItem.defaultProps = {
   selected: false,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default TabsItem;

package/src/components/Tappable/Tappable.tsx

@@ -210,7 +210,7 @@ const Tappable: React.FC<TappableProps> = ({
   function onKeyDown(e: React.KeyboardEvent<HTMLElement>) {
     if (isCustomElement && shouldTriggerClickOnEnterOrSpace(e)) {
       e.preventDefault();
-      containerRef.current.click();
+      containerRef.current?.click();
     }
   }
 
@@ -223,8 +223,8 @@ const Tappable: React.FC<TappableProps> = ({
 
       if (platform === ANDROID) {
         const { top, left } = getOffsetRect(containerRef.current);
-        const x = coordX(originalEvent) - left;
-        const y = coordY(originalEvent) - top;
+        const x = coordX(originalEvent) - (left ?? 0);
+        const y = coordY(originalEvent) - (top ?? 0);
         setClicks([...clicks, { x, y, id: Date.now().toString() }]);
       }
 
@@ -285,7 +285,7 @@ const Tappable: React.FC<TappableProps> = ({
       type={Component === "button" ? "button" : undefined}
       tabIndex={isCustomElement && !props.disabled ? 0 : undefined}
       role={isCustomElement ? role : undefined}
-      aria-disabled={isCustomElement ? props.disabled : null}
+      aria-disabled={isCustomElement ? props.disabled : undefined}
       stopPropagation={stopPropagation && !insideTouchRoot && !props.disabled}
       {...props}
       slideThreshold={20}
@@ -326,6 +326,7 @@ const Tappable: React.FC<TappableProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Tappable, {
   sizeX: true,
   hasMouse: true,
@@ -334,6 +335,6 @@ export default withAdaptivity(Tappable, {
 
 function Wave({ x, y, onClear }: Wave & { onClear: VoidFunction }) {
   const timeout = useTimeout(onClear, 225);
-  React.useEffect(() => timeout.set(), []);
+  React.useEffect(() => timeout.set(), [timeout]);
   return <span vkuiClass="Tappable__wave" style={{ top: y, left: x }} />;
 }

package/src/components/TextTooltip/TextTooltip.tsx

@@ -1,49 +1,14 @@
 import * as React from "react";
-import { HoverPopper } from "../HoverPopper/HoverPopper";
+import { HoverPopper, HoverPopperProps } from "../HoverPopper/HoverPopper";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import { hasReactNode } from "../../lib/utils";
-import { Placement } from "../Popper/Popper";
 import Subhead from "../Typography/Subhead/Subhead";
 import { prefixClass } from "../../lib/prefixClass";
 import "./TextTooltip.css";
 
-// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
-// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
-export interface TextTooltipProps {
-  /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
-   */
-  shown?: boolean;
-  /**
-   * Вызывается при каждом изменении видимости тултипа
-   */
-  onShownChange?: (shown: boolean) => void;
-  /**
-   * Количество миллисекунд, после которых произойдет показ дропдауна
-   */
-  showDelay?: number;
-  /**
-   * Количество миллисекунд, после которых произойдет скрытие дропдауна
-   */
-  hideDelay?: number;
-  /**
-   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
-   */
-  children?: React.ReactElement;
-  /**
-   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
-   */
-  placement?: Placement;
-  /**
-   * Отступ по вспомогательной оси
-   */
-  offsetSkidding?: number;
-  /**
-   * Отступ по главной оси
-   */
-  offsetDistance?: number;
-  onPlacementChange?: (data: { placement?: Placement }) => void;
+export interface TextTooltipProps
+  extends Omit<HoverPopperProps, "arrow" | "arrowClassName" | "content"> {
   /**
    * Текст тултипа
    */

package/src/components/Textarea/Textarea.tsx

@@ -41,8 +41,8 @@ const Textarea: React.FC<TextareaProps> = React.memo(
     React.useEffect(() => {
       const el = elementRef.current;
 
-      if (grow && el.offsetParent) {
-        el.style.height = null;
+      if (grow && el?.offsetParent) {
+        el.style.height = "";
         el.style.height = `${el.scrollHeight}px`;
 
         if (el.scrollHeight !== currentScrollHeight.current && onResize) {
@@ -50,7 +50,7 @@ const Textarea: React.FC<TextareaProps> = React.memo(
           currentScrollHeight.current = el.scrollHeight;
         }
       }
-    }, [grow, value, sizeY]);
+    }, [grow, value, sizeY, elementRef, onResize]);
 
     return (
       <FormField
@@ -76,4 +76,5 @@ const Textarea: React.FC<TextareaProps> = React.memo(
   }
 );
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Textarea, { sizeY: true });

package/src/components/Tooltip/Tooltip.tsx

@@ -22,8 +22,8 @@ interface SimpleTooltipProps extends Partial<TooltipProps> {
     container: React.CSSProperties;
   };
   attributes?: {
-    arrow: React.HTMLAttributes<HTMLDivElement>;
-    container: React.HTMLAttributes<HTMLDivElement>;
+    arrow: React.HTMLAttributes<HTMLDivElement> | null;
+    container: React.HTMLAttributes<HTMLDivElement> | null;
   };
 }
 
@@ -48,12 +48,12 @@ const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
           vkuiClass="Tooltip__container"
           ref={ref}
           style={style.container}
-          {...attributes.container}
+          {...attributes?.container}
         >
           <div
             vkuiClass="Tooltip__corner"
             style={style.arrow}
-            {...attributes.arrow}
+            {...attributes?.arrow}
             ref={arrowRef}
           />
           <div vkuiClass="Tooltip__content">
@@ -164,14 +164,15 @@ const Tooltip: React.FC<TooltipProps> = ({
   alignX,
   alignY,
   onClose,
-  cornerOffset,
+  cornerOffset = 0,
   cornerAbsoluteOffset,
   ...restProps
 }) => {
   const { entering } = useNavTransition();
   const isShown = _isShown && !entering;
-  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement>();
-  const [tooltipArrowRef, setTooltipArrowRef] = React.useState<HTMLElement>();
+  const [tooltipRef, setTooltipRef] = React.useState<HTMLElement | null>(null);
+  const [tooltipArrowRef, setTooltipArrowRef] =
+    React.useState<HTMLElement | null>(null);
   const [target, setTarget] = React.useState<HTMLElement>();
 
   if (IS_DEV) {
@@ -216,17 +217,24 @@ const Tooltip: React.FC<TooltipProps> = ({
       enabled: true,
       phase: "main",
       fn({ state }) {
+        if (!state.modifiersData.arrow) {
+          return;
+        }
         if (isVerticalPlacement(state.placement)) {
           if (cornerAbsoluteOffset !== undefined) {
             state.modifiersData.arrow.x = cornerAbsoluteOffset;
           } else {
-            state.modifiersData.arrow.x += cornerOffset;
+            if (state.modifiersData.arrow?.x !== undefined) {
+              state.modifiersData.arrow.x += cornerOffset;
+            }
           }
         } else {
           if (cornerAbsoluteOffset !== undefined) {
             state.modifiersData.arrow.y = cornerAbsoluteOffset;
           } else {
-            state.modifiersData.arrow.y += cornerOffset;
+            if (state.modifiersData.arrow?.y !== undefined) {
+              state.modifiersData.arrow.y += cornerOffset;
+            }
           }
         }
       },
@@ -289,8 +297,8 @@ const Tooltip: React.FC<TooltipProps> = ({
             arrowRef={(el) => setTooltipArrowRef(el)}
             style={{ arrow: styles.arrow, container: styles.popper }}
             attributes={{
-              arrow: attributes.arrow,
-              container: attributes.popper,
+              arrow: attributes.arrow ?? null,
+              container: attributes.popper ?? null,
             }}
           />,
           tooltipContainer
@@ -306,4 +314,5 @@ Tooltip.defaultProps = {
   isShown: true,
   mode: "accent",
 };
+// eslint-disable-next-line import/no-default-export
 export default Tooltip;

package/src/components/Touch/Touch.tsx

@@ -88,11 +88,14 @@ export const Touch: React.FC<TouchProps> = ({
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);
-  const gesture = React.useRef<Partial<Gesture>>(null);
-  const handle = (e: VKUITouchEvent, handers: TouchEventHandler[]) => {
+  const gesture = React.useRef<Partial<Gesture> | null>(null);
+  const handle = (
+    e: VKUITouchEvent,
+    handers: Array<TouchEventHandler | undefined | false>
+  ) => {
     stopPropagation && e.stopPropagation();
     handers.forEach((cb) => {
-      const duration = Date.now() - gesture.current.startT.getTime();
+      const duration = Date.now() - (gesture.current?.startT?.getTime() ?? 0);
       cb && cb({ ...(gesture.current as Gesture), duration, originalEvent: e });
     });
   };
@@ -129,13 +132,21 @@ export const Touch: React.FC<TouchProps> = ({
 
   useIsomorphicLayoutEffect(() => {
     const el = containerRef.current;
-    enterHandler.add(el);
-    leaveHandler.add(el);
-    startHandler.add(el);
+    if (el) {
+      enterHandler.add(el);
+      leaveHandler.add(el);
+      startHandler.add(el);
+    }
   }, [Component]);
 
   function onMove(e: VKUITouchEvent) {
-    const { isPressed, isX, isY, startX, startY } = gesture.current;
+    const {
+      isPressed,
+      isX,
+      isY,
+      startX = 0,
+      startY = 0,
+    } = gesture.current ?? {};
 
     if (isPressed) {
       // смещения
@@ -167,7 +178,7 @@ export const Touch: React.FC<TouchProps> = ({
         });
       }
 
-      if (gesture.current.isSlide) {
+      if (gesture.current?.isSlide) {
         Object.assign(gesture.current, {
           shiftX,
           shiftY,
@@ -185,13 +196,13 @@ export const Touch: React.FC<TouchProps> = ({
   }
 
   function onEnd(e: VKUITouchEvent) {
-    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current;
+    const { isPressed, isSlide, isSlideX, isSlideY } = gesture.current ?? {};
 
     if (isPressed) {
       handle(e, [_onEnd, isSlideY && onEndY, isSlideX && onEndX]);
     }
 
-    didSlide.current = isSlide;
+    didSlide.current = Boolean(isSlide);
     gesture.current = {};
 
     // Если это был тач-евент, симулируем отмену hover
@@ -207,8 +218,10 @@ export const Touch: React.FC<TouchProps> = ({
     useEventListener(events[2], onEnd, listenerParams),
     useEventListener(events[3], onEnd, listenerParams),
   ];
-  function subscribe(el: HTMLElement | Document | null) {
-    listeners.forEach((l) => l.add(el));
+  function subscribe(el: HTMLElement | Document | null | undefined) {
+    if (el) {
+      listeners.forEach((l) => l.add(el));
+    }
   }
 
   /**

package/src/components/Touch/TouchContext.ts

@@ -7,4 +7,5 @@ import * as React from "react";
 const TouchRootContext: React.Context<boolean> =
   React.createContext<boolean>(false);
 
+// eslint-disable-next-line import/no-default-export
 export default TouchRootContext;

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

@@ -40,4 +40,5 @@ const Caption: React.FC<CaptionProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Caption;

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

@@ -32,4 +32,5 @@ const Headline: React.FC<HeadlineProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Headline;

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

@@ -32,4 +32,5 @@ const Subhead: React.FC<SubheadProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Subhead;

package/src/components/Typography/Text/Text.tsx

@@ -45,4 +45,5 @@ const Text: React.FC<TextProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Text;

package/src/components/Typography/Title/Title.tsx

@@ -52,4 +52,5 @@ const Title: React.FC<TitleProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Title;

package/src/components/UsersStack/UsersStack.tsx

@@ -32,7 +32,14 @@ export interface UsersStackProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const UsersStack: React.FC<UsersStackProps> = (props: UsersStackProps) => {
   const platform = usePlatform();
-  const { photos, visibleCount, size, layout, children, ...restProps } = props;
+  const {
+    photos = [],
+    visibleCount = 0,
+    size,
+    layout,
+    children,
+    ...restProps
+  } = props;
   const { document } = useDOM();
 
   useIsomorphicLayoutEffect(() => {
@@ -92,4 +99,5 @@ UsersStack.defaultProps = {
   layout: "horizontal",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default React.memo(UsersStack);

package/src/components/UsersStack/masks.tsx

@@ -2,8 +2,8 @@ import { canUseDOM } from "../../lib/dom";
 
 const masksCreated: Document[] = [];
 
-export function createMasks(document: Document): void {
-  if (!canUseDOM || masksCreated.includes(document)) {
+export function createMasks(document?: Document): void {
+  if (!canUseDOM || !document || masksCreated.includes(document)) {
     return;
   }