@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/Epic/Epic.tsx

@@ -1,19 +1,16 @@
 import * as React from "react";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
-import {
-  withAdaptivity,
-  ViewWidth,
-  AdaptivityProps,
-} from "../../hoc/withAdaptivity";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
 import { ScrollSaver } from "./ScrollSaver";
 import { getNavId } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
+import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
 import "./Epic.css";
 
 export interface EpicProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps {
+    AdaptivityContextInterface {
   tabbar?: React.ReactNode;
   activeStory: string;
 }
@@ -33,9 +30,11 @@ export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
     warn("Using Epic without tabbar is not recommended on mobile");
   }
   const story =
-    (React.Children.toArray(children) as React.ReactElement[]).find(
-      (story) => getNavId(story.props, warn) === activeStory
-    ) || null;
+    (React.Children.toArray(children).find(
+      (story) =>
+        React.isValidElement(story) &&
+        getNavId(story.props, warn) === activeStory
+    ) as React.ReactElement | undefined) ?? null;
 
   return (
     <div {...restProps} vkuiClass={getClassName("Epic", platform)}>
@@ -51,6 +50,7 @@ export const Epic: React.FC<EpicProps> = (props: EpicProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Epic, {
   viewWidth: true,
 });

package/src/components/Epic/ScrollSaver.tsx

@@ -3,7 +3,6 @@ import { ScrollContext } from "../AppRoot/ScrollContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 
 export interface ScrollSaverProps {
-  children: React.ReactElement;
   initialScroll?: number;
   saveScroll: (scroll: number) => any;
 }
@@ -20,5 +19,5 @@ export const ScrollSaver: React.FC<ScrollSaverProps> = ({
     }
     return () => saveScroll(getScroll().y);
   }, []);
-  return children;
+  return <React.Fragment>{children}</React.Fragment>;
 };

package/src/components/File/File.tsx

@@ -50,7 +50,7 @@ const File: React.FunctionComponent<FileProps> = (props: FileProps) => {
       disabled={restProps.disabled}
       type="button"
       onClick={(e) => {
-        inputRef.current.click();
+        inputRef.current?.click();
         onClick && onClick(e);
       }}
     >
@@ -70,4 +70,5 @@ File.defaultProps = {
   align: "left",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default File;

package/src/components/FixedLayout/FixedLayout.tsx

@@ -38,12 +38,12 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
   ...restProps
 }: FixedLayoutProps) => {
   const platform = usePlatform();
-  const [width, setWidth] = React.useState<string>(null);
+  const [width, setWidth] = React.useState<string | undefined>(undefined);
   const { window } = useDOM();
   const { colRef } = React.useContext(SplitColContext);
   const doResize = () =>
-    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : null);
-  React.useEffect(doResize, []);
+    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);
+  React.useEffect(doResize, [colRef]);
   useGlobalEventListener(window, "resize", doResize);
 
   return (
@@ -67,4 +67,5 @@ const FixedLayout: React.FC<FixedLayoutProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default FixedLayout;

package/src/components/FocusTrap/FocusTrap.tsx

@@ -37,9 +37,11 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
 
   const { document, window } = useDOM();
 
-  const [focusableNodes, setFocusableNodes] =
-    React.useState<HTMLElement[]>(null);
-  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);
+  const [focusableNodes, setFocusableNodes] = React.useState<
+    HTMLElement[] | null
+  >(null);
+  const [restoreFocusTo, setRestoreFocusTo] =
+    React.useState<HTMLElement | null>(null);
 
   // HANDLE TRAP MOUNT
 
@@ -47,7 +49,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
   const focusOnTrapMount = useTimeout(() => {
     if (
       keyboardInput &&
-      !ref.current?.contains(document.activeElement) &&
+      !ref.current?.contains(document!.activeElement) &&
       focusableNodes?.length
     ) {
       focusableNodes[0].focus();
@@ -69,7 +71,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
       // eslint-disable-next-line no-restricted-properties
       ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),
       (focusableEl: Element) => {
-        const { display, visibility } = window.getComputedStyle(focusableEl);
+        const { display, visibility } = window!.getComputedStyle(focusableEl);
 
         if (display !== "none" && visibility !== "hidden") {
           nodes.push(focusableEl as HTMLElement);
@@ -92,8 +94,8 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
     }
   }, timeout);
   useIsomorphicLayoutEffect(() => {
-    if (restoreFocus && document.activeElement) {
-      setRestoreFocusTo(document.activeElement as HTMLElement);
+    if (restoreFocus && document!.activeElement) {
+      setRestoreFocusTo(document!.activeElement as HTMLElement);
 
       return () => {
         focusOnTrapUnmount.set();
@@ -116,7 +118,7 @@ export const FocusTrap: React.FC<FocusTrapProps> = ({
 
         const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];
 
-        if (node !== document.activeElement) {
+        if (node !== document!.activeElement) {
           node.focus();
         }
 

package/src/components/FormItem/FormItem.tsx

@@ -74,7 +74,11 @@ export const FormItem: React.FC<FormItemProps> = ({
       {removable ? (
         <Removable
           align="start"
-          onRemove={(e) => onRemove(e, rootEl?.current)}
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
           removePlaceholder={removePlaceholder}
         >
           <div vkuiClass="FormItem__removable">{wrappedChildren}</div>

package/src/components/FormLayout/FormLayout.tsx

@@ -10,10 +10,14 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
   HasRef<HTMLElement> &
   HasComponent;
 
-const FormLayout: React.FunctionComponent<FormLayoutProps> = (
-  props: FormLayoutProps
-) => {
-  const { children, Component, getRef, onSubmit, ...restProps } = props;
+const FormLayout: React.FC<FormLayoutProps> = (props: FormLayoutProps) => {
+  const {
+    children,
+    Component = "form",
+    getRef,
+    onSubmit = preventDefault,
+    ...restProps
+  } = props;
 
   const platform = usePlatform();
   return (
@@ -31,9 +35,5 @@ const FormLayout: React.FunctionComponent<FormLayoutProps> = (
   );
 };
 
-FormLayout.defaultProps = {
-  Component: "form",
-  onSubmit: preventDefault,
-};
-
+// eslint-disable-next-line import/no-default-export
 export default FormLayout;

package/src/components/FormLayoutGroup/FormLayoutGroup.tsx

@@ -52,7 +52,11 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
           vkuiClass="FormLayoutGroup__removable"
           align="start"
           removePlaceholder={removePlaceholder}
-          onRemove={(e) => onRemove(e, rootEl?.current)}
+          onRemove={(e) => {
+            if (rootEl?.current) {
+              onRemove(e, rootEl.current);
+            }
+          }}
         >
           {children}
         </Removable>
@@ -63,4 +67,5 @@ const FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default FormLayoutGroup;

package/src/components/Gallery/Gallery.tsx

@@ -76,11 +76,11 @@ class BaseGallery extends React.Component<
     this.slidesStore = {};
   }
 
-  container: HTMLDivElement;
+  container: HTMLDivElement | null = null;
   slidesStore: {
-    [index: string]: HTMLElement;
+    [index: string]: HTMLElement | null;
   };
-  viewport: HTMLElement;
+  viewport: HTMLElement | null = null;
 
   static defaultProps: Partial<BaseGalleryProps> = {
     slideWidth: "100%",
@@ -95,18 +95,19 @@ class BaseGallery extends React.Component<
   }
 
   initializeSlides(options: { animation?: boolean } = {}) {
-    const slides: GallerySlidesState[] = React.Children.map(
-      this.props.children,
-      (_item: React.ReactElement, i: number): GallerySlidesState => {
-        const elem = this.slidesStore[`slide-${i}`];
-        return {
-          coordX: elem.offsetLeft,
-          width: elem.offsetWidth,
-        };
-      }
-    );
+    const slides =
+      React.Children.map(
+        this.props.children,
+        (_item: React.ReactNode, i: number): GallerySlidesState => {
+          const elem = this.slidesStore[`slide-${i}`];
+          return {
+            coordX: elem?.offsetLeft ?? 0,
+            width: elem?.offsetWidth ?? 0,
+          };
+        }
+      ) ?? [];
 
-    const containerWidth = this.container.offsetWidth;
+    const containerWidth = this.container?.offsetWidth ?? 0;
     const layerWidth = slides.reduce(
       (val: number, slide: GallerySlidesState) => slide.width + val,
       0
@@ -116,29 +117,31 @@ class BaseGallery extends React.Component<
     const max = this.calcMax({ slides });
 
     this.setState({ min, max, layerWidth, containerWidth, slides }, () => {
-      const shiftX = this.calculateIndent(this.props.slideIndex);
-      if (this.state.shiftX === shiftX) {
-        return;
-      }
-      const isValidShift =
-        this.state.shiftX === this.validateIndent(this.state.shiftX);
-      const { animation = isValidShift } = options;
-      this.setState({ shiftX, animation }, () => {
-        if (!this.state.animation) {
-          this.props.window.requestAnimationFrame(() =>
-            this.setState({ animation: true })
-          );
+      if (this.props.slideIndex !== undefined) {
+        const shiftX = this.calculateIndent(this.props.slideIndex);
+        if (this.state.shiftX === shiftX) {
+          return;
         }
-      });
+        const isValidShift =
+          this.state.shiftX === this.validateIndent(this.state.shiftX);
+        const { animation = isValidShift } = options;
+        this.setState({ shiftX, animation }, () => {
+          if (!this.state.animation) {
+            this.props.window?.requestAnimationFrame(() =>
+              this.setState({ animation: true })
+            );
+          }
+        });
+      }
     });
   }
 
   calcMin({
     containerWidth,
-    layerWidth,
+    layerWidth = 0,
     slides,
   }: Pick<GalleryState, "containerWidth" | "layerWidth" | "slides">) {
-    const viewportWidth = this.viewport.offsetWidth;
+    const viewportWidth = this.viewport?.offsetWidth ?? 0;
     switch (this.props.align) {
       case "left":
         return containerWidth - layerWidth;
@@ -154,10 +157,11 @@ class BaseGallery extends React.Component<
           );
         }
     }
+    return undefined;
   }
 
   calcMax({ slides }: Pick<GalleryState, "slides">) {
-    const viewportWidth = this.viewport.offsetWidth;
+    const viewportWidth = this.viewport?.offsetWidth ?? 0;
     if (this.isCenterWithCustomWidth && slides.length) {
       const { width, coordX } = slides[0];
       return viewportWidth / 2 - coordX - width / 2;
@@ -182,7 +186,7 @@ class BaseGallery extends React.Component<
       const { coordX, width } = targetSlide;
 
       if (this.isCenterWithCustomWidth) {
-        const viewportWidth = this.viewport.offsetWidth;
+        const viewportWidth = this.viewport?.offsetWidth ?? 0;
         return viewportWidth / 2 - coordX - width / 2;
       }
 
@@ -196,7 +200,7 @@ class BaseGallery extends React.Component<
    * Считает отступ слоя галереи во время драга
    */
   calculateDragIndent() {
-    const { shiftX, deltaX, min, max } = this.state;
+    const { shiftX, deltaX, min = 0, max = 0 } = this.state;
     const indent = shiftX + deltaX;
 
     if (indent > max) {
@@ -209,7 +213,7 @@ class BaseGallery extends React.Component<
   }
 
   validateIndent(value: number) {
-    const { min, max } = this.state;
+    const { min = 0, max = 0 } = this.state;
 
     if (value < min) {
       return min;
@@ -221,15 +225,15 @@ class BaseGallery extends React.Component<
   }
 
   get isFullyVisible() {
-    return this.state.layerWidth <= this.state.containerWidth;
+    return (this.state.layerWidth ?? 0) <= this.state.containerWidth;
   }
 
   /*
    * Получает индекс слайда, к которому будет осуществлен переход
    */
   getTarget(e: TouchEvent) {
-    const { slides, deltaX, shiftX, max } = this.state;
-    const { slideIndex } = this.props;
+    const { slides, deltaX, shiftX, max = 0 } = this.state;
+    const { slideIndex = 0 } = this.props;
     const expectDeltaX = (deltaX / e.duration) * 240 * 0.6;
     const shift = shiftX + deltaX + expectDeltaX - max;
     const direction = deltaX < 0 ? 1 : -1;
@@ -285,10 +289,12 @@ class BaseGallery extends React.Component<
   };
 
   onEnd: TouchEventHandler = (e: TouchEvent) => {
-    const targetIndex = e.isSlide ? this.getTarget(e) : this.props.slideIndex;
+    const targetIndex = e.isSlide
+      ? this.getTarget(e)
+      : this.props.slideIndex ?? 0;
     this.props.onDragEnd && this.props.onDragEnd(e);
     this.setState({ deltaX: 0, animation: true }, () =>
-      this.props.onChange(targetIndex)
+      this.props.onChange?.(targetIndex)
     );
 
     if (this.props.onEnd) {
@@ -304,8 +310,8 @@ class BaseGallery extends React.Component<
   }
 
   get canSlideRight() {
-    const { containerWidth, layerWidth, shiftX, slides } = this.state;
-    const { align, slideIndex } = this.props;
+    const { containerWidth, layerWidth = 0, shiftX, slides } = this.state;
+    const { align, slideIndex = 0 } = this.props;
     return (
       !this.isFullyVisible &&
       // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
@@ -316,19 +322,19 @@ class BaseGallery extends React.Component<
   }
 
   slideLeft = () => {
-    const { slideIndex, onChange } = this.props;
+    const { slideIndex = 0, onChange } = this.props;
     if (this.canSlideLeft) {
       this.setState({ deltaX: 0, animation: true }, () =>
-        onChange(slideIndex - 1)
+        onChange?.(slideIndex - 1)
       );
     }
   };
 
   slideRight = () => {
-    const { slideIndex, onChange } = this.props;
+    const { slideIndex = 0, onChange } = this.props;
     if (this.canSlideRight) {
       this.setState({ deltaX: 0, animation: true }, () =>
-        onChange(slideIndex + 1)
+        onChange?.(slideIndex + 1)
       );
     }
   };
@@ -339,17 +345,21 @@ class BaseGallery extends React.Component<
 
   getViewportRef: React.RefCallback<HTMLElement> = (viewport) => {
     this.viewport = viewport;
-    setRef(viewport, this.props.getRef);
+    if (this.props.getRef) {
+      setRef(viewport, this.props.getRef);
+    }
   };
 
   getRootRef: React.RefCallback<HTMLDivElement> = (container) => {
     this.container = container;
-    setRef(container, this.props.getRootRef);
+    if (this.props.getRootRef) {
+      setRef(container, this.props.getRootRef);
+    }
   };
 
   componentDidMount() {
     this.initializeSlides({ animation: false });
-    this.props.window.addEventListener("resize", this.onResize);
+    this.props.window!.addEventListener("resize", this.onResize);
   }
 
   componentDidUpdate(prevProps: GalleryProps) {
@@ -367,13 +377,13 @@ class BaseGallery extends React.Component<
       this.setState({
         animation: true,
         deltaX: 0,
-        shiftX: this.calculateIndent(this.props.slideIndex),
+        shiftX: this.calculateIndent(this.props.slideIndex ?? 0),
       });
     }
   }
 
   componentWillUnmount() {
-    this.props.window.removeEventListener("resize", this.onResize);
+    this.props.window!.removeEventListener("resize", this.onResize);
   }
 
   render() {
@@ -381,7 +391,7 @@ class BaseGallery extends React.Component<
     const {
       children,
       slideWidth,
-      slideIndex,
+      slideIndex = 0,
       isDraggable,
       onDragStart,
       onDragEnd,
@@ -439,7 +449,7 @@ class BaseGallery extends React.Component<
           <div vkuiClass="Gallery__layer" style={layerStyle}>
             {React.Children.map(
               children,
-              (item: React.ReactElement, i: number) => (
+              (item: React.ReactNode, i: number) => (
                 <div
                   vkuiClass="Gallery__slide"
                   key={`slide-${i}`}
@@ -462,7 +472,7 @@ class BaseGallery extends React.Component<
           >
             {React.Children.map(
               children,
-              (_item: React.ReactElement, index: number) => (
+              (_item: React.ReactNode, index: number) => (
                 <div
                   vkuiClass={classNames("Gallery__bullet", {
                     "Gallery__bullet--active": index === slideIndex,
@@ -485,23 +495,20 @@ class BaseGallery extends React.Component<
   }
 }
 
-const BaseGalleryAdaptive = withAdaptivity(
-  withDOM<BaseGalleryProps>(BaseGallery),
-  {
-    hasMouse: true,
-  }
-);
+const BaseGalleryAdaptive = withAdaptivity(withDOM(BaseGallery), {
+  hasMouse: true,
+});
 
 const Gallery: React.FC<GalleryProps> = ({
   initialSlideIndex = 0,
   children,
-  timeout,
+  timeout = 0,
   onChange,
   ...props
 }: GalleryProps) => {
   const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);
   const isControlled = typeof props.slideIndex === "number";
-  const slideIndex = isControlled ? props.slideIndex : localSlideIndex;
+  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;
   const isDraggable = !isControlled || Boolean(onChange);
   const slides = React.Children.toArray(children).filter((item) =>
     Boolean(item)
@@ -516,7 +523,7 @@ const Gallery: React.FC<GalleryProps> = ({
       !isControlled && setSlideIndex(current);
       onChange && onChange(current);
     },
-    [onChange, slideIndex]
+    [isControlled, onChange, slideIndex]
   );
 
   const autoplay = useTimeout(
@@ -525,7 +532,7 @@ const Gallery: React.FC<GalleryProps> = ({
   );
   React.useEffect(
     () => (timeout ? autoplay.set() : autoplay.clear()),
-    [timeout, slideIndex]
+    [timeout, slideIndex, autoplay]
   );
 
   // prevent invalid slideIndex
@@ -537,7 +544,7 @@ const Gallery: React.FC<GalleryProps> = ({
     if (onChange && safeSlideIndex !== slideIndex) {
       onChange(safeSlideIndex);
     }
-  }, [safeSlideIndex]);
+  }, [onChange, safeSlideIndex, slideIndex]);
 
   return (
     <BaseGalleryAdaptive
@@ -551,4 +558,5 @@ const Gallery: React.FC<GalleryProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withPlatform(Gallery);

package/src/components/Gradient/Gradient.tsx

@@ -33,4 +33,5 @@ Gradient.defaultProps = {
   to: "top",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Gradient;

package/src/components/Group/Group.tsx

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

package/src/components/Header/Header.tsx

@@ -64,6 +64,8 @@ const HeaderContent: React.FC<HeaderContentProps> = ({
     case "secondary":
       return <Caption level="1" weight="medium" caps {...restProps} />;
   }
+
+  return null;
 };
 
 type HeaderAsideProps = Pick<HeaderProps, "aside"> & HasPlatform & HasComponent;
@@ -168,4 +170,5 @@ Header.defaultProps = {
   mode: "primary",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Header;

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -119,7 +119,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   getScrollToLeft,
   getScrollToRight,
   showArrows = true,
-  scrollAnimationDuration,
+  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   hasMouse,
   getRef,
   ...restProps
@@ -170,24 +170,36 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
           scrollElement.scrollWidth
       );
     }
-  }, [hasMouse]);
+  }, [hasMouse, scrollerRef, showArrows]);
 
   const scrollEvent = useEventListener("scroll", onscroll);
-  React.useEffect(() => scrollEvent.add(scrollerRef.current), []);
-  React.useEffect(onscroll, [scrollerRef, children]);
+  React.useEffect(() => {
+    if (scrollerRef.current) {
+      scrollEvent.add(scrollerRef.current);
+    }
+  }, [scrollEvent, scrollerRef]);
+  React.useEffect(onscroll, [scrollerRef, children, onscroll]);
 
   return (
     <div {...restProps} vkuiClass={getClassName("HorizontalScroll", platform)}>
       {showArrows && hasMouse && canScrollLeft && (
         <HorizontalScrollArrow
           direction="left"
-          onClick={() => scrollTo(getScrollToLeft)}
+          onClick={() => {
+            if (getScrollToLeft) {
+              scrollTo(getScrollToLeft);
+            }
+          }}
         />
       )}
       {showArrows && hasMouse && canScrollRight && (
         <HorizontalScrollArrow
           direction="right"
-          onClick={() => scrollTo(getScrollToRight)}
+          onClick={() => {
+            if (getScrollToLeft) {
+              scrollTo(getScrollToLeft);
+            }
+          }}
         />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
@@ -197,6 +209,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(HorizontalScroll, {
   hasMouse: true,
 });

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

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

package/src/components/HoverPopper/HoverPopper.tsx

@@ -11,7 +11,7 @@ export interface HoverPopperProps extends PopperCommonProps {
    */
   content?: React.ReactNode;
   /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
    */
   shown?: boolean;
   /**
@@ -38,7 +38,7 @@ export const HoverPopper: React.FC<HoverPopperProps> = ({
   children,
   onShownChange,
   shown: _shown,
-  showDelay,
+  showDelay = 150,
   hideDelay = 150,
   ...restProps
 }: HoverPopperProps) => {
@@ -77,8 +77,10 @@ export const HoverPopper: React.FC<HoverPopperProps> = ({
   const targetLeaveListener = useEventListener("pointerleave", onTargetLeave);
 
   useIsomorphicLayoutEffect(() => {
-    targetEnterListener.add(childRef.current);
-    targetLeaveListener.add(childRef.current);
+    if (childRef.current) {
+      targetEnterListener.add(childRef.current);
+      targetLeaveListener.add(childRef.current);
+    }
   }, []);
 
   return (

package/src/components/IconButton/IconButton.tsx

@@ -43,6 +43,7 @@ IconButton.defaultProps = {
   Component: "button",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(IconButton, {
   sizeY: true,
 });