@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/Popper/Popper.tsx

@@ -26,8 +26,8 @@ export type Placement =
   | "right";
 
 export interface PopperCommonProps
-  extends React.HTMLAttributes<HTMLElement>,
-    HasRef<HTMLElement> {
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
    */
@@ -51,7 +51,7 @@ export interface PopperCommonProps
 }
 
 export interface PopperProps extends PopperCommonProps {
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef: React.RefObject<HTMLElement>;
 }
 
 const ARROW_PADDING = 8;
@@ -73,12 +73,14 @@ export const Popper: React.FC<PopperProps> = ({
   style: compStyles,
   ...restProps
 }: PopperProps) => {
-  const [popperNode, setPopperNode] = React.useState(null);
+  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
+    null
+  );
   const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =
     React.useState(0);
   const platform = usePlatform();
 
-  const setExternalRef = useExternRef(getRef, setPopperNode);
+  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);
 
   const modifiers = React.useMemo(() => {
     const modifiers: Array<Modifier<string>> = [
@@ -134,8 +136,6 @@ export const Popper: React.FC<PopperProps> = ({
     smallTargetOffsetSkidding,
     offsetSkidding,
     offsetDistance,
-    ARROW_HEIGHT,
-    ARROW_PADDING,
   ]);
 
   const { styles, state, attributes } = usePopper(
@@ -156,17 +156,17 @@ export const Popper: React.FC<PopperProps> = ({
   useIsomorphicLayoutEffect(() => {
     if (arrow && isEdgePlacement) {
       const placementDirection =
-        resolvedPlacement.startsWith("bottom") ||
-        resolvedPlacement.startsWith("top")
+        resolvedPlacement?.startsWith("bottom") ||
+        resolvedPlacement?.startsWith("top")
           ? "vertical"
           : "horizontal";
 
       const arrowSize =
         placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
       const targetSize =
-        placementDirection === "vertical"
-          ? targetRef.current.offsetWidth
-          : targetRef.current.offsetHeight;
+        (placementDirection === "vertical"
+          ? targetRef.current?.offsetWidth
+          : targetRef.current?.offsetHeight) ?? 0;
 
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
@@ -180,7 +180,7 @@ export const Popper: React.FC<PopperProps> = ({
     if (resolvedPlacement) {
       onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
     }
-  }, [resolvedPlacement]);
+  }, [onPlacementChange, resolvedPlacement]);
 
   const dropdown = (
     <div
@@ -188,7 +188,11 @@ export const Popper: React.FC<PopperProps> = ({
       {...attributes.popper}
       vkuiClass={getClassName("Popper", platform)}
       ref={setExternalRef}
-      style={{ ...compStyles, ...styles.popper }}
+      style={{
+        ...compStyles,
+        ...styles.popper,
+        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,
+      }}
     >
       {arrow && (
         <div

package/src/components/Progress/Progress.tsx

@@ -14,7 +14,7 @@ const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
 const Progress: React.FC<ProgressProps> = ({
-  value,
+  value = 0,
   getRootRef,
   ...restProps
 }: ProgressProps) => {
@@ -45,8 +45,5 @@ const Progress: React.FC<ProgressProps> = ({
   );
 };
 
-Progress.defaultProps = {
-  value: 0,
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Progress;

package/src/components/PromoBanner/PromoBanner.tsx

@@ -6,6 +6,7 @@ import Avatar from "../Avatar/Avatar";
 import Caption from "../Typography/Caption/Caption";
 import { usePlatform } from "../../hooks/usePlatform";
 import { getClassName } from "../../helpers/getClassName";
+import { warnOnce } from "../../lib/warnOnce";
 import "./PromoBanner.css";
 
 type StatsType =
@@ -46,6 +47,7 @@ export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
 }
 
+const warn = warnOnce("PromoBanner");
 const PromoBanner = (props: PromoBannerProps) => {
   const platform = usePlatform();
   const { bannerData = {}, onClose, ...restProps } = props;
@@ -55,6 +57,12 @@ const PromoBanner = (props: PromoBannerProps) => {
       ? parseInt(bannerData.ageRestrictions)
       : bannerData.ageRestriction;
 
+  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions"
+    );
+  }
+
   const [currentPixel, setCurrentPixel] = React.useState("");
 
   const statsPixels = React.useMemo(
@@ -125,4 +133,5 @@ const PromoBanner = (props: PromoBannerProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default PromoBanner;

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -105,7 +105,7 @@ class PullToRefresh extends React.PureComponent<
 
   params: PullToRefreshParams;
   contentRef: React.RefObject<HTMLDivElement>;
-  waitFetchingTimeout: ReturnType<typeof setTimeout>;
+  waitFetchingTimeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -113,7 +113,7 @@ class PullToRefresh extends React.PureComponent<
 
   componentDidMount() {
     if (canUseDOM) {
-      this.document.addEventListener("touchmove", this.onWindowTouchMove, {
+      this.document!.addEventListener("touchmove", this.onWindowTouchMove, {
         // @ts-ignore
         cancelable: true,
         passive: false,
@@ -126,13 +126,15 @@ class PullToRefresh extends React.PureComponent<
     // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
     // https://github.com/VKCOM/VKUI/issues/444
     if (canUseDOM) {
-      this.document.removeEventListener("touchmove", this.onWindowTouchMove, {
+      this.document!.removeEventListener("touchmove", this.onWindowTouchMove, {
         // @ts-ignore
         cancelable: true,
         passive: false,
       });
     }
-    clearTimeout(this.waitFetchingTimeout);
+    if (this.waitFetchingTimeout) {
+      clearTimeout(this.waitFetchingTimeout);
+    }
   }
 
   componentDidUpdate(
@@ -142,7 +144,11 @@ class PullToRefresh extends React.PureComponent<
     if (prevProps.isFetching && !this.props.isFetching) {
       this.onRefreshingFinish();
     }
-    if (!prevProps.isFetching && this.props.isFetching) {
+    if (
+      !prevProps.isFetching &&
+      this.props.isFetching &&
+      this.waitFetchingTimeout
+    ) {
       clearTimeout(this.waitFetchingTimeout);
     }
 
@@ -182,7 +188,7 @@ class PullToRefresh extends React.PureComponent<
   onTouchMove: TouchEventHandler = (e: TouchEvent) => {
     const { isY, shiftY } = e;
     const { start, max } = this.params;
-    const pageYOffset = this.props.scroll.getScroll().y;
+    const pageYOffset = this.props.scroll?.getScroll().y;
 
     const { refreshing, watching, touchDown } = this.state;
 
@@ -319,7 +325,7 @@ class PullToRefresh extends React.PureComponent<
                 opacity: watching || refreshing || canRefresh ? 1 : 0,
               }}
               on={refreshing}
-              progress={refreshing ? null : spinnerProgress}
+              progress={refreshing ? undefined : spinnerProgress}
             />
           </FixedLayout>
 
@@ -339,6 +345,7 @@ class PullToRefresh extends React.PureComponent<
   }
 }
 
+// eslint-disable-next-line import/no-default-export
 export default withContext(
   withPlatform(withDOM<PullToRefreshProps>(PullToRefresh)),
   ScrollContext,

package/src/components/PullToRefresh/PullToRefreshSpinner.tsx

@@ -19,12 +19,12 @@ export interface PullToRefreshSpinnerProps
 const PullToRefreshSpinner: React.FunctionComponent<
   PullToRefreshSpinnerProps
 > = ({
-  on,
-  progress,
-  size,
-  strokeWidth,
+  on = true,
+  size = 24,
+  strokeWidth = 2.5,
   style,
-  ...restProps
+  progress = 0,
+  "aria-label": ariaLabel = "Пожалуйста, подождите...",
 }: PullToRefreshSpinnerProps) => {
   const radius = 0.5 * size - 0.5 * strokeWidth;
   const dasharray = 2 * Math.PI * radius;
@@ -38,7 +38,7 @@ const PullToRefreshSpinner: React.FunctionComponent<
         "PullToRefresh__spinner--on": on,
       })}
       style={style}
-      aria-label={on ? restProps["aria-label"] : undefined}
+      aria-label={on ? ariaLabel : undefined}
     >
       <svg
         role="presentation"
@@ -74,12 +74,5 @@ const PullToRefreshSpinner: React.FunctionComponent<
   );
 };
 
-PullToRefreshSpinner.defaultProps = {
-  size: 24,
-  strokeWidth: 2.5,
-  on: true,
-  progress: null,
-  "aria-label": "Пожалуйста, подождите...",
-};
-
+// eslint-disable-next-line import/no-default-export
 export default React.memo(PullToRefreshSpinner);

package/src/components/Radio/Radio.tsx

@@ -83,6 +83,7 @@ const Radio: React.FC<RadioProps> = (props: RadioProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Radio, {
   sizeY: true,
 });

package/src/components/RangeSlider/RangeSlider.tsx

@@ -8,18 +8,21 @@ export type RangeSliderProps = UniversalSliderProps<Value>;
 const RangeSlider: React.FC<RangeSliderProps> = ({
   onChange,
   defaultValue,
+  min = 0,
+  max = 100,
+  step = 0,
   ...props
 }: RangeSliderProps) => {
   const isControlled = Boolean(props.value);
 
   const [localValue, setValue] = React.useState(
-    defaultValue || ([props.min, props.max] as Value)
+    defaultValue || ([min, max] as Value)
   );
   const [start, end] = props.value || localValue;
-  const value = [
-    clamp(start, props.min, props.max),
-    clamp(end, props.min, props.max),
-  ] as Value;
+  const value = React.useMemo(
+    () => [clamp(start, min, max), clamp(end, min, max)] as Value,
+    [end, max, min, start]
+  );
 
   const handleChange: RangeSliderProps["onChange"] = React.useCallback(
     (nextValue, event) => {
@@ -32,16 +35,20 @@ const RangeSlider: React.FC<RangeSliderProps> = ({
       !isControlled && setValue(nextValue);
       onChange && onChange(nextValue, event);
     },
-    [onChange, isControlled, value]
+    [props.disabled, value, isControlled, onChange]
   );
 
-  return <UniversalSlider {...props} value={value} onChange={handleChange} />;
-};
-
-RangeSlider.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 0,
+  return (
+    <UniversalSlider
+      {...props}
+      value={value}
+      onChange={handleChange}
+      min={min}
+      max={max}
+      step={step}
+    />
+  );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default RangeSlider;

package/src/components/RangeSlider/UniversalSlider.tsx

@@ -28,10 +28,10 @@ export interface UniversalSliderProps<Value>
 }
 
 const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
-  min,
-  max,
+  min = 0,
+  max = 100,
   step,
-  value,
+  value = [0, 0],
   defaultValue,
   onChange,
   getRootRef,
@@ -48,8 +48,8 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
     containerWidth: 0,
   }).current;
   const container = useExternRef(getRootRef);
-  const thumbStart = React.useRef<HTMLDivElement>();
-  const thumbEnd = React.useRef<HTMLDivElement>();
+  const thumbStart = React.useRef<HTMLDivElement>(null);
+  const thumbEnd = React.useRef<HTMLDivElement>(null);
 
   const offsetToValue = (absolute: number) => {
     return rescale(absolute, [0, gesture.containerWidth], [min, max], { step });
@@ -81,31 +81,33 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
     return value;
   };
 
-  const snapDirection = (pos: number, target: EventTarget) => {
+  const snapDirection = (pos: number, target: EventTarget | null) => {
     if (target === thumbStart.current) {
       return "start";
     }
     if (target === thumbEnd.current) {
       return "end";
     }
-    return Math.abs(start - pos) <= Math.abs(end - pos) ? "start" : "end";
+    return Math.abs((start ?? 0) - pos) <= Math.abs(end - pos)
+      ? "start"
+      : "end";
   };
 
   const onStart: TouchEventHandler = (e: TouchEvent) => {
-    const boundingRect = container.current.getBoundingClientRect();
-    gesture.containerWidth = boundingRect.width;
+    const boundingRect = container.current?.getBoundingClientRect();
+    gesture.containerWidth = boundingRect?.width ?? 0;
 
-    const absolutePosition = e.startX - boundingRect.left;
+    const absolutePosition = e.startX - (boundingRect?.left ?? 0);
     const pos = offsetToValue(absolutePosition);
     gesture.dragging = snapDirection(pos, e.originalEvent.target);
     gesture.startX = absolutePosition;
 
-    onChange(updateRange(pos), e);
+    onChange?.(updateRange(pos), e);
     e.originalEvent.stopPropagation();
   };
 
   const onMove: TouchEventHandler = (e: TouchEvent) => {
-    onChange(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
+    onChange?.(updateRange(offsetToValue(gesture.startX + (e.shiftX || 0))), e);
 
     e.originalEvent.stopPropagation();
     e.originalEvent.preventDefault();
@@ -119,8 +121,8 @@ const UniversalSliderDumb: React.FC<UniversalSliderProps<UniversalValue>> = ({
   const toPercent = (v: number) => ((v - min) / (max - min)) * 100;
   const draggerStyle = isRange
     ? {
-        width: `${toPercent(end) - toPercent(start)}%`,
-        left: `${toPercent(start)}%`,
+        width: `${toPercent(end) - toPercent(start ?? 0)}%`,
+        left: `${toPercent(start ?? 0)}%`,
       }
     : {
         width: `${toPercent(end)}%`,

package/src/components/Removable/Removable.tsx

@@ -39,14 +39,19 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
 }) => {
   const { window } = useDOM();
 
-  const removeButtonRef = React.useRef(null);
+  const removeButtonRef = React.useRef<HTMLElement>(null);
   const [removeOffset, updateRemoveOffset] = React.useState(0);
 
-  useGlobalEventListener(window, "click", () => {
-    if (removeOffset > 0) {
-      updateRemoveOffset(0);
-    }
-  });
+  useGlobalEventListener(
+    window,
+    "click",
+    () => {
+      if (removeOffset > 0) {
+        updateRemoveOffset(0);
+      }
+    },
+    { capture: true }
+  );
 
   const onRemoveTransitionEnd = () => {
     if (removeOffset > 0) {
@@ -56,8 +61,10 @@ const RemovableIos: React.FC<RemovableIosOwnProps> = ({
 
   const onRemoveActivateClick = (e: React.MouseEvent) => {
     e.stopPropagation();
-
-    const { offsetWidth = 0 } = removeButtonRef?.current;
+    if (!removeButtonRef.current) {
+      return;
+    }
+    const { offsetWidth } = removeButtonRef.current;
     updateRemoveOffset(offsetWidth);
   };
 

package/src/components/RichCell/RichCell.tsx

@@ -103,4 +103,5 @@ const RichCell: React.FC<RichCellProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(RichCell, { sizeY: true });

package/src/components/RichTooltip/RichTooltip.tsx

@@ -1,55 +1,13 @@
 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 { useAppearance } from "../../hooks/useAppearance";
 import { classNames } from "../../lib/classNames";
 import { prefixClass } from "../../lib/prefixClass";
-import { Placement } from "../Popper/Popper";
 import "./RichTooltip.css";
 
-// Приходится избегать экстендов от HoverPopperProps и PopperProps, потому что react-docgen не умеет в Omit.
-// Ждём либо фикса react-docgen (что вряд ли), либо переезда на react-docgen-typescript, где такой проблемы нет.
-export interface RichTooltipProps {
-  /**
-   * Содержимое тултипа
-   */
-  content?: React.ReactNode;
-  /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
-   */
-  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;
-  arrow?: boolean;
-}
+export type RichTooltipProps = Omit<HoverPopperProps, "arrowClassName">;
 
 export const RichTooltip: React.FC<RichTooltipProps> = ({
   children,

package/src/components/Root/Root.tsx

@@ -15,8 +15,6 @@ import { useTimeout } from "../../hooks/useTimeout";
 import { usePlatform } from "../../hooks/usePlatform";
 import "./Root.css";
 
-const warn = warnOnce("Root");
-
 export interface RootProps
   extends React.HTMLAttributes<HTMLDivElement>,
     NavIdProps {
@@ -43,6 +41,7 @@ export interface RootState {
   prevView?: string;
 }
 
+const warn = warnOnce("Root");
 const Root: React.FC<RootProps> = ({
   popout = null,
   modal,
@@ -56,7 +55,9 @@ const Root: React.FC<RootProps> = ({
   const platform = usePlatform();
   const { document } = useDOM();
   const scrolls = React.useRef<Record<string, number>>({}).current;
-  const viewNodes = React.useRef<Record<string, HTMLElement>>({}).current;
+  const viewNodes = React.useRef<Record<string, HTMLElement | null>>(
+    {}
+  ).current;
 
   const { transitionMotionEnabled = true } = React.useContext(
     ConfigProviderContext
@@ -84,11 +85,13 @@ const Root: React.FC<RootProps> = ({
       });
     }
   };
-  const finishTransition = () =>
-    _setState({ activeView, prevView, isBack, transition: false });
+  const finishTransition = React.useCallback(
+    () => _setState({ activeView, prevView, isBack, transition: false }),
+    [activeView, isBack, prevView]
+  );
 
   useIsomorphicLayoutEffect(() => {
-    (document.activeElement as HTMLElement)?.blur();
+    (document!.activeElement as HTMLElement).blur();
   }, [!!popout, activeView]);
 
   // Нужен переход
@@ -97,7 +100,12 @@ const Root: React.FC<RootProps> = ({
     if (!transition && prevView) {
       // Закончился переход
       scroll.scrollTo(0, isBack ? scrolls[activeView] : 0);
-      onTransition && onTransition({ isBack, from: prevView, to: activeView });
+      onTransition &&
+        onTransition({
+          isBack: Boolean(isBack),
+          from: prevView,
+          to: activeView,
+        });
     }
   }, [transition]);
 
@@ -111,7 +119,7 @@ const Root: React.FC<RootProps> = ({
       return;
     }
     disableAnimation ? finishTransition() : fallbackTransition.set();
-  }, [transition]);
+  }, [disableAnimation, fallbackTransition, finishTransition, transition]);
 
   const onAnimationEnd = (e: React.AnimationEvent) => {
     if (
@@ -126,6 +134,17 @@ const Root: React.FC<RootProps> = ({
     }
   };
 
+  if (process.env.NODE_ENV === "development") {
+    popout &&
+      warn(
+        "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+    modal &&
+      warn(
+        "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
+      );
+  }
+
   return (
     <div
       {...restProps}
@@ -147,8 +166,8 @@ const Root: React.FC<RootProps> = ({
         return (
           <div
             key={viewId}
-            ref={(e) => (viewNodes[viewId] = e)}
-            onAnimationEnd={isTransitionTarget ? onAnimationEnd : null}
+            ref={(e) => viewId && (viewNodes[viewId] = e)}
+            onAnimationEnd={isTransitionTarget ? onAnimationEnd : undefined}
             vkuiClass={classNames("Root__view", {
               "Root__view--hide-back":
                 transition && viewId === prevView && isBack,
@@ -167,7 +186,9 @@ const Root: React.FC<RootProps> = ({
               <div
                 vkuiClass="Root__scrollCompensation"
                 style={{
-                  marginTop: compensateScroll ? -scrolls[viewId] : null,
+                  marginTop: compensateScroll
+                    ? viewId && -(scrolls[viewId] ?? 0)
+                    : undefined,
                 }}
               >
                 {view}
@@ -184,4 +205,5 @@ const Root: React.FC<RootProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Root;

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -33,4 +33,5 @@ ScreenSpinner.defaultProps = {
   "aria-label": "Пожалуйста, подождите...",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ScreenSpinner;

package/src/components/Search/Search.tsx

@@ -62,17 +62,17 @@ const Search: React.FC<SearchProps> = ({
     inputProps.onBlur && inputProps.onBlur(e);
   };
 
-  const onCancel = () => {
+  const onCancel = React.useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/unbound-method
     const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
       HTMLInputElement.prototype,
       "value"
-    ).set;
-    nativeInputValueSetter.call(inputRef.current, "");
+    )?.set;
+    nativeInputValueSetter?.call(inputRef.current, "");
 
     const ev2 = new Event("input", { bubbles: true });
-    inputRef.current.dispatchEvent(ev2);
-  };
+    inputRef.current?.dispatchEvent(ev2);
+  }, [inputRef]);
 
   const onIconClickStart = React.useCallback(
     (e: TouchEvent) => onIconClick(e.originalEvent),
@@ -82,10 +82,10 @@ const Search: React.FC<SearchProps> = ({
   const onIconCancelClickStart = React.useCallback(
     (e: TouchEvent) => {
       e.originalEvent.preventDefault();
-      inputRef.current.focus();
+      inputRef.current?.focus();
       onCancel();
     },
-    [onCancel]
+    [inputRef, onCancel]
   );
 
   return (
@@ -168,4 +168,5 @@ Search.defaultProps = {
   before: <Icon16SearchOutline />,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withPlatform(Search);