@vkontakte/vkui 4.24.0 → 4.26.0

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

@@ -7,6 +7,7 @@ import { easeInOutSine } from "../../lib/fx";
 import { useEventListener } from "../../hooks/useEventListener";
 import { useExternRef } from "../../hooks/useExternRef";
 import { HasRef } from "../../types";
+import { classNames } from "../../lib/classNames";
 import "./HorizontalScroll.css";
 
 interface ScrollContext {
@@ -38,7 +39,7 @@ export interface HorizontalScrollProps
    * Функция для расчета величины прокрутки при клике на правую стрелку.
    */
   getScrollToRight?: ScrollPositionHandler;
-  showArrows?: boolean;
+  showArrows?: boolean | "always";
   scrollAnimationDuration?: number;
 }
 
@@ -119,7 +120,7 @@ const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
   getScrollToLeft,
   getScrollToRight,
   showArrows = true,
-  scrollAnimationDuration,
+  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
   hasMouse,
   getRef,
   ...restProps
@@ -170,24 +171,41 @@ 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)}>
+    <div
+      {...restProps}
+      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
+        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
+      })}
+    >
       {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 (getScrollToRight) {
+              scrollTo(getScrollToRight);
+            }
+          }}
         />
       )}
       <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
@@ -197,6 +215,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.css

@@ -22,7 +22,9 @@
 }
 
 .HorizontalScroll:hover .HorizontalScrollArrow:hover,
-.Gallery:hover .HorizontalScrollArrow:hover {
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
   opacity: 1;
 }
 

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

@@ -5,6 +5,7 @@ import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { withAdaptivity } from "../../hoc/withAdaptivity";
 import { IOS } from "../../lib/platform";
+import { warnOnce } from "../../lib/warnOnce";
 import "./IconButton.css";
 
 export interface IconButtonProps extends TappableProps {
@@ -14,6 +15,7 @@ export interface IconButtonProps extends TappableProps {
   icon?: React.ReactNode;
 }
 
+const warn = warnOnce("IconButton");
 const IconButton: React.FC<IconButtonProps> = ({
   icon,
   sizeY,
@@ -23,6 +25,12 @@ const IconButton: React.FC<IconButtonProps> = ({
 }: IconButtonProps) => {
   const platform = usePlatform();
 
+  if (icon && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство icon устарело и будет удалено в 5.0.0. Используйте children"
+    );
+  }
+
   return (
     <Tappable
       {...restProps}
@@ -43,6 +51,7 @@ IconButton.defaultProps = {
   Component: "button",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(IconButton, {
   sizeY: true,
 });

package/src/components/InfoRow/InfoRow.tsx

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

package/src/components/InitialsAvatar/InitialsAvatar.tsx

@@ -72,7 +72,7 @@ export const InitialsAvatar: React.FC<InitialsAvatarProps> = ({
   const gradientName =
     typeof gradientColor === "string"
       ? gradientColor
-      : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+      : gradientColor && COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
 
   return (
     <Avatar

package/src/components/Input/Input.tsx

@@ -48,6 +48,7 @@ Input.defaultProps = {
   type: "text",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Input, {
   sizeY: true,
 });

package/src/components/Link/Link.tsx

@@ -23,4 +23,5 @@ const Link: React.FC<LinkProps> = ({ children, ...restProps }: LinkProps) => {
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Link;

package/src/components/List/List.tsx

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

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -62,7 +62,7 @@ export const MiniInfoCell: React.FC<MiniInfoCellProps> = (
     <Tappable
       Component="div"
       disabled={!isClickable}
-      role={isClickable ? "button" : null}
+      role={isClickable ? "button" : undefined}
       {...restProps}
       vkuiClass={classNames(
         getClassName("MiniInfoCell", platform),

package/src/components/ModalCard/ModalCard.tsx

@@ -5,7 +5,6 @@ import { withPlatform } from "../../hoc/withPlatform";
 import { HasPlatform } from "../../types";
 import {
   withAdaptivity,
-  AdaptivityProps,
   ViewHeight,
   ViewWidth,
 } from "../../hoc/withAdaptivity";
@@ -19,6 +18,10 @@ import {
   ModalCardBase,
   ModalCardBaseProps,
 } from "../ModalCardBase/ModalCardBase";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./ModalCard.css";
 
 export interface ModalCardProps
@@ -29,7 +32,9 @@ export interface ModalCardProps
 
 const warn = warnOnce("ModalCard");
 
-const ModalCard: React.FC<ModalCardProps> = (props: ModalCardProps) => {
+const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
+  props
+) => {
   const {
     icon,
     header,
@@ -80,6 +85,7 @@ ModalCard.defaultProps = {
   actionsLayout: "horizontal",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(withPlatform(ModalCard), {
   viewWidth: true,
   viewHeight: true,