@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/Tooltip/Tooltip.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import Subhead from '../Typography/Subhead/Subhead';
-import { useNavTransition } from '../NavTransitionContext/NavTransitionContext';
-import { Modifier, usePopper } from 'react-popper';
-import { Placement } from '@popperjs/core';
-import { tooltipContainerAttr } from './TooltipContainer';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useDOM } from '../../lib/dom';
-import { warnOnce } from '../../lib/warnOnce';
-import { hasReactNode } from '../../lib/utils';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import './Tooltip.css';
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import Subhead from "../Typography/Subhead/Subhead";
+import { useNavTransition } from "../NavTransitionContext/NavTransitionContext";
+import { Modifier, usePopper } from "react-popper";
+import { Placement } from "@popperjs/core";
+import { tooltipContainerAttr } from "./TooltipContainer";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useDOM } from "../../lib/dom";
+import { warnOnce } from "../../lib/warnOnce";
+import { hasReactNode } from "../../lib/utils";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import "./Tooltip.css";
 
 interface SimpleTooltipProps extends Partial<TooltipProps> {
   target?: HTMLDivElement;
@@ -22,40 +22,57 @@ 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;
   };
 }
 
-const isDOMTypeElement = (element: React.ReactElement): element is React.DOMElement<any, any> => {
-  return React.isValidElement(element) && typeof element.type === 'string';
+const isDOMTypeElement = (
+  element: React.ReactElement
+): element is React.DOMElement<any, any> => {
+  return React.isValidElement(element) && typeof element.type === "string";
 };
 
-const baseClassName = getClassName('Tooltip');
-const warn = warnOnce('Tooltip');
-const IS_DEV = process.env.NODE_ENV === 'development';
+const baseClassName = getClassName("Tooltip");
+const warn = warnOnce("Tooltip");
+const IS_DEV = process.env.NODE_ENV === "development";
 
 const SimpleTooltip = React.forwardRef<HTMLDivElement, SimpleTooltipProps>(
   function SimpleTooltip(
-    { mode = 'accent', header, text, arrowRef, style = {}, attributes },
-    ref,
+    { mode = "accent", header, text, arrowRef, style = {}, attributes },
+    ref
   ) {
     return (
-      <div vkuiClass={
-        classNames(
-          baseClassName,
-          `Tooltip--${mode}`,
-        )}>
-        <div vkuiClass="Tooltip__container" ref={ref} style={style.container} {...attributes.container}>
-          <div vkuiClass="Tooltip__corner" style={style.arrow} {...attributes.arrow} ref={arrowRef} />
+      <div vkuiClass={classNames(baseClassName, `Tooltip--${mode}`)}>
+        <div
+          vkuiClass="Tooltip__container"
+          ref={ref}
+          style={style.container}
+          {...attributes?.container}
+        >
+          <div
+            vkuiClass="Tooltip__corner"
+            style={style.arrow}
+            {...attributes?.arrow}
+            ref={arrowRef}
+          />
           <div vkuiClass="Tooltip__content">
-            {header && <Subhead weight="semibold" vkuiClass="Tooltip__title">{header}</Subhead>}
-            {text && <Subhead weight="regular" vkuiClass="Tooltip__text">{text}</Subhead>}
+            {header && (
+              <Subhead weight="semibold" vkuiClass="Tooltip__title">
+                {header}
+              </Subhead>
+            )}
+            {text && (
+              <Subhead weight="regular" vkuiClass="Tooltip__text">
+                {text}
+              </Subhead>
+            )}
           </div>
         </div>
       </div>
     );
-  });
+  }
+);
 
 export interface TooltipProps {
   /**
@@ -64,7 +81,7 @@ export interface TooltipProps {
    * иначе тултип показан не будет. Если передан React-element, то такой проблемы нет.
    */
   children: React.ReactElement;
-  mode?: 'accent' | 'light';
+  mode?: "accent" | "light";
   /**
    * Если передан `false`, то рисуется просто `children`.
    */
@@ -81,12 +98,12 @@ export interface TooltipProps {
    * Положение по горизонтали (прижатие к левому или правому краю `children`).
    * Если не задано, позиция по горизонтали определятся автоматически
    */
-  alignX?: 'center' | 'left' | 'right';
+  alignX?: "center" | "left" | "right";
   /**
    * Положение по вертикали (расположение над или под `children`).
    * Если не задано, позиция по вертикали определятся автоматически
    */
-  alignY?: 'top' | 'bottom';
+  alignY?: "top" | "bottom";
   /**
    * Сдвиг по горизонтали (относительно портала, в котором рисуется тултип).
    */
@@ -112,72 +129,112 @@ export interface TooltipProps {
 declare type ArrowOffsetModifierOptions = {
   offset: number;
 };
-declare type ArrowOffsetModifier = Modifier<'arrowOffset', ArrowOffsetModifierOptions>;
+declare type ArrowOffsetModifier = Modifier<
+  "arrowOffset",
+  ArrowOffsetModifierOptions
+>;
 
-function mapAlignX(x: TooltipProps['alignX']) {
+function mapAlignX(x: TooltipProps["alignX"]) {
   switch (x) {
-    case 'left': return 'start';
-    case 'right': return 'end';
-    default: return '';
+    case "left":
+      return "start";
+    case "right":
+      return "end";
+    default:
+      return "";
   }
 }
-function getPlacement(alignX: TooltipProps['alignX'], alignY: TooltipProps['alignY']): Placement {
-  return [alignY || 'bottom', mapAlignX(alignX || 'left')].filter((p) => !!p).join('-') as Placement;
+function getPlacement(
+  alignX: TooltipProps["alignX"],
+  alignY: TooltipProps["alignY"]
+): Placement {
+  return [alignY || "bottom", mapAlignX(alignX || "left")]
+    .filter((p) => !!p)
+    .join("-") as Placement;
 }
 function isVerticalPlacement(placement: Placement) {
-  return placement.startsWith('top') || placement.startsWith('bottom');
+  return placement.startsWith("top") || placement.startsWith("bottom");
 }
 
 const Tooltip: React.FC<TooltipProps> = ({
-  children, isShown: _isShown, offsetX = 0, offsetY = 15,
-  alignX, alignY, onClose, cornerOffset, cornerAbsoluteOffset,
+  children,
+  isShown: _isShown,
+  offsetX = 0,
+  offsetY = 15,
+  alignX,
+  alignY,
+  onClose,
+  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) {
     const multiChildren = React.Children.count(children) > 1;
     // Empty children is a noop
-    const primitiveChild = hasReactNode(children) && typeof children !== 'object';
-    (multiChildren || primitiveChild) && warn([
-      'children must be a single React element, got',
-      multiChildren && 'multiple',
-      primitiveChild && JSON.stringify(children),
-    ].filter(Boolean).join(' '));
+    const primitiveChild =
+      hasReactNode(children) && typeof children !== "object";
+    (multiChildren || primitiveChild) &&
+      warn(
+        [
+          "children must be a single React element, got",
+          multiChildren && "multiple",
+          primitiveChild && JSON.stringify(children),
+        ]
+          .filter(Boolean)
+          .join(" ")
+      );
   }
 
   /* eslint-disable no-restricted-properties */
   /* eslint-disable @typescript-eslint/no-unnecessary-type-assertion*/
-  const tooltipContainer = React.useMemo(() => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement, [target]);
-  const strategy = React.useMemo(() => target?.style.position === 'fixed' ? 'fixed' : 'absolute', [target]);
+  const tooltipContainer = React.useMemo(
+    () => target?.closest(`[${tooltipContainerAttr}]`) as HTMLDivElement,
+    [target]
+  );
+  const strategy = React.useMemo(
+    () => (target?.style.position === "fixed" ? "fixed" : "absolute"),
+    [target]
+  );
   /* eslint-enable @typescript-eslint/no-unnecessary-type-assertion*/
   /* eslint-enable no-restricted-properties */
 
   if (IS_DEV && target && !tooltipContainer) {
-    throw new Error('Use TooltipContainer for Tooltip outside Panel (see docs)');
+    throw new Error(
+      "Use TooltipContainer for Tooltip outside Panel (see docs)"
+    );
   }
 
   const arrowOffsetModiifer = React.useMemo<ArrowOffsetModifier>(() => {
     return {
-      name: 'arrowOffset',
+      name: "arrowOffset",
       enabled: true,
-      phase: 'main',
+      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;
+            }
           }
         }
       },
@@ -190,53 +247,62 @@ const Tooltip: React.FC<TooltipProps> = ({
     placement,
     modifiers: [
       {
-        name: 'offset', options: {
-          offset: [
-            offsetX,
-            offsetY,
-          ],
+        name: "offset",
+        options: {
+          offset: [offsetX, offsetY],
         },
       },
       {
-        name: 'arrow', options: {
+        name: "arrow",
+        options: {
           element: tooltipArrowRef,
           padding: 14,
         },
       },
       {
-        name: 'preventOverflow',
+        name: "preventOverflow",
       },
       {
-        name: 'flip',
+        name: "flip",
       },
       arrowOffsetModiifer,
     ],
   });
 
   const { document } = useDOM();
-  useGlobalEventListener(document, 'click', isShown && onClose, { passive: true });
+  useGlobalEventListener(document, "click", isShown && onClose, {
+    passive: true,
+  });
   // NOTE: setting isShown to true used to trigger usePopper().forceUpdate()
 
-  const childRef = React.isValidElement(children) &&
+  const childRef =
+    React.isValidElement(children) &&
     (isDOMTypeElement(children) ? children.ref : children.props.getRootRef);
   const patchedRef = useExternRef(setTarget, childRef);
-  const child = React.isValidElement(children) ? React.cloneElement(children, {
-    [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,
-  }) : children;
+  const child = React.isValidElement(children)
+    ? React.cloneElement(children, {
+        [isDOMTypeElement(children) ? "ref" : "getRootRef"]: patchedRef,
+      })
+    : children;
 
   return (
     <React.Fragment>
       {child}
-      {isShown && target != null && ReactDOM.createPortal(
-        <SimpleTooltip
-          {...restProps}
-          ref={(el) => setTooltipRef(el)}
-          arrowRef={(el) => setTooltipArrowRef(el)}
-          style={{ arrow: styles.arrow, container: styles.popper }}
-          attributes={{ arrow: attributes.arrow, container: attributes.popper }}
-        />,
-        tooltipContainer,
-      )}
+      {isShown &&
+        target != null &&
+        ReactDOM.createPortal(
+          <SimpleTooltip
+            {...restProps}
+            ref={(el) => setTooltipRef(el)}
+            arrowRef={(el) => setTooltipArrowRef(el)}
+            style={{ arrow: styles.arrow, container: styles.popper }}
+            attributes={{
+              arrow: attributes.arrow ?? null,
+              container: attributes.popper ?? null,
+            }}
+          />,
+          tooltipContainer
+        )}
     </React.Fragment>
   );
 };
@@ -246,6 +312,7 @@ Tooltip.defaultProps = {
   offsetY: 15,
   cornerOffset: 0,
   isShown: true,
-  mode: 'accent',
+  mode: "accent",
 };
+// eslint-disable-next-line import/no-default-export
 export default Tooltip;

package/src/components/Tooltip/TooltipContainer.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 
-export const tooltipContainerAttr = 'data-tooltip-container';
+export const tooltipContainerAttr = "data-tooltip-container";
 export const TooltipContainer = React.forwardRef<
-HTMLDivElement,
-React.HtmlHTMLAttributes<HTMLDivElement> & { fixed?: boolean }
+  HTMLDivElement,
+  React.HtmlHTMLAttributes<HTMLDivElement> & { fixed?: boolean }
 >(function TooltipContainer({ fixed = false, ...props }, ref) {
-  (props as any)[tooltipContainerAttr] = fixed ? 'fixed' : 'true';
+  (props as any)[tooltipContainerAttr] = fixed ? "fixed" : "true";
   return <div {...props} ref={ref} />;
 });

package/src/components/Touch/Readme.md

@@ -5,95 +5,112 @@ Touch – это компонент для удобной работы с pointe
 Компонент используется во многих других компонентах библиотеки (Cell, Slider, Gallery, Tappable).
 
 ```jsx
-  const circleStyle = {
-    width: 40,
-    height: 40,
-    borderRadius: '50%',
-    background: 'var(--accent)',
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    marginLeft: -20,
-    marginTop: -20
+const circleStyle = {
+  width: 40,
+  height: 40,
+  borderRadius: "50%",
+  background: "var(--accent)",
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  marginLeft: -20,
+  marginTop: -20,
+};
+
+const containerStyle = {
+  height: 200,
+  border: "8px solid var(--icon_secondary)",
+  position: "relative",
+};
+
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      shiftX: 0,
+      shiftY: 0,
+    };
+
+    this.startX = 0;
+    this.startY = 0;
+
+    this.onMove = this.onMove.bind(this);
+    this.onEnd = this.onEnd.bind(this);
+    this.getCircleRef = this.getCircleRef.bind(this);
   }
 
-  const containerStyle = {
-    height: 200,
-    border: '8px solid var(--icon_secondary)',
-    position: 'relative'
+  componentDidMount() {
+    this.limitX = this.circleRef.offsetLeft;
+    this.limitY = this.circleRef.offsetTop;
   }
 
-  class Example extends React.Component {
-
-    constructor (props) {
-
-      super(props);
-
-      this.state = {
-        shiftX: 0,
-        shiftY: 0
-      }
-
-      this.startX = 0;
-      this.startY = 0;
-
-      this.onMove = this.onMove.bind(this);
-      this.onEnd = this.onEnd.bind(this);
-      this.getCircleRef = this.getCircleRef.bind(this);
-    }
-
-    componentDidMount () {
-      this.limitX = this.circleRef.offsetLeft;
-      this.limitY = this.circleRef.offsetTop;
-    }
-
-    onMove (e) {
-      let shiftX = this.startX + e.shiftX;
-      let shiftY = this.startY + e.shiftY;
-
-      this.setState({
-        shiftX: shiftX > this.limitX ? this.limitX : shiftX < -this.limitX ? -this.limitX : shiftX,
-        shiftY: shiftY > this.limitY ? this.limitY : shiftY < -this.limitY ? -this.limitY : shiftY,
-      });
-    }
+  onMove(e) {
+    let shiftX = this.startX + e.shiftX;
+    let shiftY = this.startY + e.shiftY;
+
+    this.setState({
+      shiftX:
+        shiftX > this.limitX
+          ? this.limitX
+          : shiftX < -this.limitX
+          ? -this.limitX
+          : shiftX,
+      shiftY:
+        shiftY > this.limitY
+          ? this.limitY
+          : shiftY < -this.limitY
+          ? -this.limitY
+          : shiftY,
+    });
+  }
 
-    onEnd (e) {
-      this.startX += e.shiftX;
-      this.startY += e.shiftY;
-    }
+  onEnd(e) {
+    this.startX += e.shiftX;
+    this.startY += e.shiftY;
+  }
 
-    getCircleRef (el) { this.circleRef = el };
+  getCircleRef(el) {
+    this.circleRef = el;
+  }
 
-    get limitExceeded () {
-      const { shiftX, shiftY } = this.state;
-      return Math.abs(shiftX) >= this.limitX || Math.abs(shiftY) >= this.limitY
-    }
+  get limitExceeded() {
+    const { shiftX, shiftY } = this.state;
+    return Math.abs(shiftX) >= this.limitX || Math.abs(shiftY) >= this.limitY;
+  }
 
-    render () {
-      const { shiftX, shiftY, limitExceeded } = this.state;
+  render() {
+    const { shiftX, shiftY, limitExceeded } = this.state;
 
-      return (
-        <View activePanel="gallery">
-          <Panel id="gallery">
-            <PanelHeader>Touch</PanelHeader>
-            <Group header={<Header mode="secondary">Перетащите кружок</Header>}>
-              <div style={{
+    return (
+      <View activePanel="gallery">
+        <Panel id="gallery">
+          <PanelHeader>Touch</PanelHeader>
+          <Group header={<Header mode="secondary">Перетащите кружок</Header>}>
+            <div
+              style={{
                 ...containerStyle,
-                borderColor: this.limitExceeded ? 'var(--destructive)' : 'var(--icon_secondary)' }}
-              >
-                <Touch
-                  getRootRef={this.getCircleRef}
-                  onMove={this.onMove}
-                  onEnd={this.onEnd}
-                  style={{ ...circleStyle, transform: `translate(${shiftX}px, ${shiftY}px)` }}
-                />
-              </div>
-            </Group>
-          </Panel>
-        </View>
-      )
-    }
+                borderColor: this.limitExceeded
+                  ? "var(--destructive)"
+                  : "var(--icon_secondary)",
+              }}
+            >
+              <Touch
+                getRootRef={this.getCircleRef}
+                onMove={this.onMove}
+                onEnd={this.onEnd}
+                style={{
+                  ...circleStyle,
+                  transform: `translate(${shiftX}px, ${shiftY}px)`,
+                }}
+              />
+            </div>
+          </Group>
+        </Panel>
+      </View>
+    );
   }
+}
 
-  <Example />
+<Example />;
 ```