@vkontakte/vkui 4.24.0 → 4.25.0

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

@@ -56,7 +56,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 +86,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 +101,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 +120,7 @@ const Root: React.FC<RootProps> = ({
       return;
     }
     disableAnimation ? finishTransition() : fallbackTransition.set();
-  }, [transition]);
+  }, [disableAnimation, fallbackTransition, finishTransition, transition]);
 
   const onAnimationEnd = (e: React.AnimationEvent) => {
     if (
@@ -147,8 +156,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 +176,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 +195,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);

package/src/components/Select/Select.tsx

@@ -1,9 +1,12 @@
 import * as React from "react";
 import NativeSelect from "../NativeSelect/NativeSelect";
 import CustomSelect, { CustomSelectProps } from "../CustomSelect/CustomSelect";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { withAdaptivity } from "../../hoc/withAdaptivity";
+import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
 
-export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
+export interface SelectProps
+  extends CustomSelectProps,
+    AdaptivityContextInterface {}
 
 const Select: React.FunctionComponent<SelectProps> = ({
   hasMouse,
@@ -29,6 +32,7 @@ const Select: React.FunctionComponent<SelectProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Select, {
   hasMouse: true,
 });

package/src/components/SelectMimicry/SelectMimicry.tsx

@@ -45,7 +45,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
   return (
     <FormField
       {...restProps}
-      tabIndex={disabled ? null : tabIndex}
+      tabIndex={disabled ? undefined : tabIndex}
       vkuiClass={classNames(
         getClassName("Select", platform),
         "Select--mimicry",
@@ -58,7 +58,7 @@ const SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({
         }
       )}
       getRootRef={getRootRef}
-      onClick={disabled ? null : onClick}
+      onClick={disabled ? undefined : onClick}
       disabled={disabled}
       after={<DropdownIcon />}
     >
@@ -77,6 +77,7 @@ SelectMimicry.defaultProps = {
   tabIndex: 0,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(SelectMimicry, {
   sizeX: true,
   sizeY: true,

package/src/components/Separator/Separator.tsx

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

package/src/components/SimpleCell/SimpleCell.tsx

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

package/src/components/SimpleCheckbox/SimpleCheckbox.tsx

@@ -54,25 +54,26 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
       indeterminate === undefined ? defaultIndeterminate : indeterminate;
 
     if (inputRef.current) {
-      inputRef.current.indeterminate = indeterminateValue;
+      inputRef.current.indeterminate = Boolean(indeterminateValue);
     }
-  }, [indeterminate]);
+  }, [defaultIndeterminate, indeterminate, inputRef]);
 
   const handleChange: SimpleCheckboxProps["onChange"] = React.useCallback(
     (event) => {
       if (
         defaultIndeterminate !== undefined &&
         indeterminate === undefined &&
-        restProps.checked === undefined
+        restProps.checked === undefined &&
+        inputRef.current
       ) {
         inputRef.current.indeterminate = false;
       }
-      if (indeterminate !== undefined) {
+      if (indeterminate !== undefined && inputRef.current) {
         inputRef.current.indeterminate = indeterminate;
       }
       onChange && onChange(event);
     },
-    [onChange, indeterminate, restProps.checked]
+    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]
   );
 
   if (IS_DEV) {
@@ -141,4 +142,5 @@ export const SimpleCheckbox: React.FC<SimpleCheckboxProps> = (
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default SimpleCheckbox;

package/src/components/Slider/Slider.tsx

@@ -8,43 +8,47 @@ import {
 
 export type SliderProps = UniversalSliderProps<number>;
 
-const Slider = ({ onChange, defaultValue, ...props }: SliderProps) => {
-  const isControlled = props.value != null;
+const Slider = ({
+  onChange,
+  defaultValue,
+  min = 0,
+  max = 100,
+  value = 0,
+  ...props
+}: SliderProps) => {
+  const isControlled = value != null;
 
   const [localValue, setValue] = React.useState(
-    defaultValue == null ? props.min : defaultValue
-  );
-  const value = clamp(
-    isControlled ? props.value : localValue,
-    props.min,
-    props.max
+    defaultValue == null ? min : defaultValue
   );
+  const _value = clamp(isControlled ? value : localValue, min, max);
 
   const handleChange: UniversalSliderProps<UniversalValue>["onChange"] =
     React.useCallback(
       (nextValue, event) => {
-        if (props.disabled || value === nextValue[1]) {
+        if (props.disabled || _value === nextValue[1]) {
           return;
         }
         !isControlled && setValue(nextValue[1]);
         onChange && onChange(nextValue[1], event);
       },
-      [onChange, isControlled, value]
+      [props.disabled, _value, isControlled, onChange]
     );
 
   const rangeValue: [null, number] = React.useMemo(
-    () => [null, value],
-    [value]
+    () => [null, _value],
+    [_value]
   );
   return (
-    <UniversalSlider {...props} value={rangeValue} onChange={handleChange} />
+    <UniversalSlider
+      {...props}
+      value={rangeValue}
+      onChange={handleChange}
+      min={min}
+      max={max}
+    />
   );
 };
 
-Slider.defaultProps = {
-  min: 0,
-  max: 100,
-  step: 0,
-};
-
+// eslint-disable-next-line import/no-default-export
 export default Slider;