@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/Select/Select.tsx

@@ -1,11 +1,15 @@
 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,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 
 export interface SelectProps extends CustomSelectProps, AdaptivityProps {}
 
-const Select: React.FunctionComponent<SelectProps> = ({
+const Select: React.FC<SelectProps & AdaptivityContextInterface> = ({
   hasMouse,
   ...props
 }: SelectProps) => {
@@ -29,6 +33,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;

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,17 +5,17 @@ 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,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
 import "./Snackbar.css";
 
 export interface SnackbarProps
@@ -54,7 +54,9 @@ export interface SnackbarProps
   onClose: () => void;
 }
 
-const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
+const SnackbarComponent: React.FC<
+  SnackbarProps & AdaptivityContextInterface
+> = (props) => {
   const {
     children,
     layout,
@@ -62,7 +64,7 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
     before,
     after,
     viewWidth,
-    duration,
+    duration = 0,
     onActionClick,
     onClose,
     ...restProps
@@ -111,7 +113,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 +133,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 +187,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

@@ -7,6 +7,7 @@ import { hasReactNode } from "../../lib/utils";
 import Tappable from "../Tappable/Tappable";
 import { Platform } from "../../lib/platform";
 import { HasComponent, HasRootRef } from "../../types";
+import { warnOnce } from "../../lib/warnOnce";
 import "./TabbarItem.css";
 
 export interface TabbarItemProps
@@ -28,6 +29,7 @@ export interface TabbarItemProps
   label?: React.ReactNode;
 }
 
+const warn = warnOnce("TabbarItem");
 const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   children,
   selected,
@@ -41,7 +43,12 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
 }: TabbarItemProps) => {
   const platform = usePlatform();
 
-  // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
+  if (label && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство label устарело и будет удалено в 5.0.0. Используйте indicator."
+    );
+  }
+
   return (
     <Component
       {...restProps}
@@ -83,4 +90,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;