@vkontakte/vkui 4.23.0 → 4.25.2

package/src/components/Placeholder/Readme.md

@@ -11,7 +11,7 @@ class PlaceholderExample extends React.Component {
     super(props);
 
     this.state = {
-      activePanel: 'example-1',
+      activePanel: "example-1",
     };
 
     this.onNavClick = this.onNavClick.bind(this);
@@ -36,25 +36,27 @@ class PlaceholderExample extends React.Component {
               Подключите сообщества, от которых Вы хотите получать уведомления
             </Placeholder>
             <Separator />
-            <Placeholder
-              icon={<Icon56MentionOutline />}
-            >
+            <Placeholder icon={<Icon56MentionOutline />}>
               Введите адрес страницы в поле поиска
             </Placeholder>
           </Group>
           <Group>
-            <CellButton onClick={this.onNavClick} data-to="example-2">Ещё примеры</CellButton>
+            <CellButton onClick={this.onNavClick} data-to="example-2">
+              Ещё примеры
+            </CellButton>
           </Group>
         </Panel>
 
         <Panel id="example-2">
           <PanelHeader
-            left={<PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />}
-          >Плейсхолдеры</PanelHeader>
+            left={
+              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
+            }
+          >
+            Плейсхолдеры
+          </PanelHeader>
           <Group>
-            <Placeholder>
-              Доступ запрещён
-            </Placeholder>
+            <Placeholder>Доступ запрещён</Placeholder>
             <Separator />
             <Placeholder
               header="Находите друзей"
@@ -64,21 +66,33 @@ class PlaceholderExample extends React.Component {
             </Placeholder>
           </Group>
           <Group>
-            <CellButton onClick={this.onNavClick} data-to="example-3">Полноэкранный плейсхолдер</CellButton>
+            <CellButton onClick={this.onNavClick} data-to="example-3">
+              Полноэкранный плейсхолдер
+            </CellButton>
           </Group>
         </Panel>
 
         <Panel id="example-3">
           <PanelHeader
-            left={<PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />}
-          >Плейсхолдеры</PanelHeader>
+            left={
+              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
+            }
+          >
+            Плейсхолдеры
+          </PanelHeader>
 
           <Placeholder
             icon={<Icon56MessageReadOutline />}
-            action={<Button size="m" mode="tertiary">Показать все сообщения</Button>}
+            action={
+              <Button size="m" mode="tertiary">
+                Показать все сообщения
+              </Button>
+            }
             stretched
           >
-            Нет непрочитанных<br />сообщений
+            Нет непрочитанных
+            <br />
+            сообщений
           </Placeholder>
         </Panel>
       </View>
@@ -86,5 +100,5 @@ class PlaceholderExample extends React.Component {
   }
 }
 
-<PlaceholderExample />
+<PlaceholderExample />;
 ```

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -1,41 +1,69 @@
-import * as React from 'react';
-import { HasRootRef } from '../../types';
-import { withAdaptivity, ViewWidth, ViewHeight, AdaptivityProps } from '../../hoc/withAdaptivity';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { blurActiveElement, useDOM } from '../../lib/dom';
-import './PopoutRoot.css';
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import {
+  withAdaptivity,
+  ViewWidth,
+  ViewHeight,
+} from "../../hoc/withAdaptivity";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { blurActiveElement, useDOM } from "../../lib/dom";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./PopoutRoot.css";
 
-export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, AdaptivityProps, HasRootRef<HTMLDivElement> {
+export interface PopoutRootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps,
+    HasRootRef<HTMLDivElement> {
   popout?: React.ReactNode;
   modal?: React.ReactNode;
 }
 
-export const PopoutRootComponent: React.FC<PopoutRootProps> = (props: PopoutRootProps) => {
-  const { popout, modal, viewWidth, viewHeight, hasMouse, children, getRootRef, ...restProps } = props;
+export const PopoutRootComponent: React.FC<
+  PopoutRootProps & AdaptivityContextInterface
+> = (props) => {
+  const {
+    popout,
+    modal,
+    viewWidth,
+    viewHeight,
+    hasMouse,
+    children,
+    getRootRef,
+    ...restProps
+  } = props;
   const { document } = useDOM();
 
-  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
   React.useEffect(() => {
     popout && blurActiveElement(document);
-  }, [!!popout]);
+  }, [document, popout]);
 
   return (
-    <div
-      {...restProps}
-      vkuiClass="PopoutRoot"
-      ref={getRootRef}
-    >
+    <div {...restProps} vkuiClass="PopoutRoot" ref={getRootRef}>
       {children}
       <AppRootPortal>
-        {!!popout && <div vkuiClass={isDesktop ? 'PopoutRoot--absolute' : 'PopoutRoot__popout'}>{popout}</div>}
+        {!!popout && (
+          <div
+            vkuiClass={
+              isDesktop ? "PopoutRoot--absolute" : "PopoutRoot__popout"
+            }
+          >
+            {popout}
+          </div>
+        )}
         {!!modal && <div vkuiClass="PopoutRoot__modal">{modal}</div>}
       </AppRootPortal>
     </div>
   );
 };
 
-PopoutRootComponent.displayName = 'PopoutRoot';
+PopoutRootComponent.displayName = "PopoutRoot";
 
 export const PopoutRoot = withAdaptivity(PopoutRootComponent, {
   viewWidth: true,

package/src/components/PopoutRoot/Readme.md

@@ -10,8 +10,8 @@ class Example extends React.Component {
     super(props);
 
     this.state = {
-      activeView: 'view1'
-    }
+      activeView: "view1",
+    };
   }
 
   render() {
@@ -21,7 +21,9 @@ class Example extends React.Component {
           <Panel id="panel1.1">
             <PanelHeader>View 1</PanelHeader>
             <Group>
-              <CellButton onClick={ () => this.setState({ activeView: 'view2' }) }>
+              <CellButton
+                onClick={() => this.setState({ activeView: "view2" })}
+              >
                 Open View 2
               </CellButton>
             </Group>
@@ -31,16 +33,18 @@ class Example extends React.Component {
           <Panel id="panel2.1">
             <PanelHeader>View 2</PanelHeader>
             <Group>
-              <CellButton onClick={ () => this.setState({ activeView: 'view1' }) }>
+              <CellButton
+                onClick={() => this.setState({ activeView: "view1" })}
+              >
                 Back to View 1
               </CellButton>
             </Group>
           </Panel>
         </View>
       </Root>
-    )
+    );
   }
 }
 
-<Example />
+<Example />;
 ```

package/src/components/PopoutWrapper/PopoutWrapper.css

@@ -26,16 +26,16 @@
   width: 100%;
   height: 100%;
   opacity: 1;
-  animation: vkui-animation-full-fade-in .2s ease;
+  animation: vkui-animation-full-fade-in 0.2s ease;
 }
 
 .PopoutWrapper--closing .PopoutWrapper__overlay {
   opacity: 0;
-  transition: opacity .2s var(--android-easing);
+  transition: opacity 0.2s var(--android-easing);
 }
 
 .PopoutWrapper--masked .PopoutWrapper__overlay {
-  background: rgba(0, 0, 0, .4);
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .PopoutWrapper--fixed .PopoutWrapper__overlay {
@@ -91,11 +91,11 @@
  */
 
 .PopoutWrapper--ios .PopoutWrapper__overlay {
-  animation-duration: .3s;
+  animation-duration: 0.3s;
 }
 
 .PopoutWrapper--ios.PopoutWrapper--closing .PopoutWrapper__overlay {
-  transition: opacity .3s var(--ios-easing);
+  transition: opacity 0.3s var(--ios-easing);
 }
 
 @keyframes vkui-animation-full-fade-in {

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,24 +1,25 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { IOS } from '../../lib/platform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { useDOM } from '../../lib/dom';
-import './PopoutWrapper.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { IOS } from "../../lib/platform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useDOM } from "../../lib/dom";
+import "./PopoutWrapper.css";
 
-export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface PopoutWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
   hasMask?: boolean;
   fixed?: boolean;
-  alignY?: 'top' | 'center' | 'bottom';
-  alignX?: 'left' | 'center' | 'right';
+  alignY?: "top" | "center" | "bottom";
+  alignX?: "left" | "center" | "right";
   closing?: boolean;
 }
 
 export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
-  alignY = 'center',
-  alignX = 'center',
+  alignY = "center",
+  alignX = "center",
   closing = false,
   hasMask = true,
   fixed = true,
@@ -28,42 +29,48 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
 }: PopoutWrapperProps) => {
   const platform = usePlatform();
   const [opened, setOpened] = React.useState(!hasMask);
-  const elRef = React.useRef<HTMLDivElement>();
+  const elRef = React.useRef<HTMLDivElement>(null);
 
   const onFadeInEnd = (e?: React.AnimationEvent) => {
-    if (!e || e.animationName === 'vkui-animation-full-fade-in') {
+    if (!e || e.animationName === "vkui-animation-full-fade-in") {
       setOpened(true);
     }
   };
-  const animationFinishFallback = useTimeout(onFadeInEnd, platform === IOS ? 300 : 200);
+  const animationFinishFallback = useTimeout(
+    onFadeInEnd,
+    platform === IOS ? 300 : 200
+  );
   React.useEffect(() => {
     !opened && animationFinishFallback.set();
-  }, []);
+  }, [animationFinishFallback, opened]);
 
   const { window } = useDOM();
-  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), { passive: false });
+  useGlobalEventListener(window, "touchmove", (e) => e.preventDefault(), {
+    passive: false,
+  });
 
-  const baseClassNames = getClassName('PopoutWrapper', platform);
+  const baseClassNames = getClassName("PopoutWrapper", platform);
 
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(baseClassNames, `PopoutWrapper--v-${alignY}`, `PopoutWrapper--h-${alignX}`, {
-        'PopoutWrapper--closing': closing,
-        'PopoutWrapper--opened': opened,
-        'PopoutWrapper--fixed': fixed,
-        'PopoutWrapper--masked': hasMask,
-      })}
-      onAnimationEnd={opened ? null : onFadeInEnd}
+      vkuiClass={classNames(
+        baseClassNames,
+        `PopoutWrapper--v-${alignY}`,
+        `PopoutWrapper--h-${alignX}`,
+        {
+          "PopoutWrapper--closing": closing,
+          "PopoutWrapper--opened": opened,
+          "PopoutWrapper--fixed": fixed,
+          "PopoutWrapper--masked": hasMask,
+        }
+      )}
+      onAnimationEnd={opened ? undefined : onFadeInEnd}
       ref={elRef}
     >
       <div vkuiClass="PopoutWrapper__container">
-        <div
-          vkuiClass="PopoutWrapper__overlay"
-          onClick={onClick} />
-        <div vkuiClass="PopoutWrapper__content">
-          {children}
-        </div>
+        <div vkuiClass="PopoutWrapper__overlay" onClick={onClick} />
+        <div vkuiClass="PopoutWrapper__content">{children}</div>
       </div>
     </div>
   );

package/src/components/PopoutWrapper/Readme.md

@@ -2,11 +2,11 @@
 и `ScreenSpinner`. Свойства `alignY` и `alignX` служат для удобного позиционирования контента. Пример:
 
 ```jsx static
-import { PopoutWrapper } from '@vkontakte/vkui';
+import { PopoutWrapper } from "@vkontakte/vkui";
 
 <PopoutWrapper alignY="center" alignX="center">
   Some content
-</PopoutWrapper>
+</PopoutWrapper>;
 ```
 
 Все всплывающие окна передаются в свойство `popout` компонентов `View` или `Root`.

package/src/components/Popper/Popper.css

@@ -1,10 +1,10 @@
 .PopperPortal {
   position: relative;
-  z-index: 1;
+  z-index: 100;
 }
 
 .Popper__arrow-in {
-  content: '';
+  content: "";
   display: block;
   width: 20px;
   height: 8px;

package/src/components/Popper/Popper.tsx

@@ -1,24 +1,33 @@
-import * as React from 'react';
-import { usePopper } from 'react-popper';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { HasRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import './Popper.css';
-
-export type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' |
-'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
-
-type Modifier = {
-  name: string;
-  options?: {
-    [index: string]: any;
-  };
-};
-
-export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, HasRef<HTMLElement> {
+import * as React from "react";
+import { usePopper, Modifier } from "react-popper";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { HasRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import "./Popper.css";
+
+export type Placement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "right-start"
+  | "right-end"
+  | "left-start"
+  | "left-end"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right";
+
+export interface PopperCommonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
    */
@@ -33,11 +42,16 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, Ha
   offsetDistance?: number;
   arrow?: boolean;
   arrowClassName?: string;
+  /**
+   * Выставлять ширину равной target элементу
+   */
+  sameWidth?: boolean;
+  forcePortal?: boolean;
   onPlacementChange?: (data: { placement?: Placement }) => void;
 }
 
 export interface PopperProps extends PopperCommonProps {
-  targetRef?: React.RefObject<HTMLElement>;
+  targetRef: React.RefObject<HTMLElement>;
 }
 
 const ARROW_PADDING = 8;
@@ -48,60 +62,111 @@ export const Popper: React.FC<PopperProps> = ({
   targetRef,
   children,
   getRef,
-  placement = 'bottom-start',
+  placement = "bottom-start",
   onPlacementChange,
   arrow,
   arrowClassName,
+  sameWidth,
   offsetDistance = 8,
   offsetSkidding = 0,
+  forcePortal = true,
   style: compStyles,
   ...restProps
 }: PopperProps) => {
-  const [popperNode, setPopperNode] = React.useState(null);
-  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] = React.useState(0);
+  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
+    null
+  );
+  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =
+    React.useState(0);
   const platform = usePlatform();
 
-  const setExternalRef = useExternRef(getRef, setPopperNode);
-
-  const modifiers: Modifier[] = [{
-    name: 'preventOverflow',
-  }, {
-    name: 'offset',
-    options: {
-      offset: [
-        arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,
-        arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,
-      ],
-    },
-  }, {
-    name: 'flip',
-  }];
-
-  if (arrow) {
-    modifiers.push({
-      name: 'arrow',
-      options: {
-        padding: ARROW_PADDING,
+  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);
+
+  const modifiers = React.useMemo(() => {
+    const modifiers: Array<Modifier<string>> = [
+      {
+        name: "preventOverflow",
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [
+            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,
+            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,
+          ],
+        },
+      },
+      {
+        name: "flip",
       },
-    });
-  }
+    ];
+
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: ARROW_PADDING,
+        },
+      });
+    }
 
-  const { styles, state, attributes } = usePopper(targetRef.current, popperNode, {
-    placement,
-    modifiers,
-  });
+    if (sameWidth) {
+      const sameWidth: Modifier<string> = {
+        name: "sameWidth",
+        enabled: true,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+        effect: ({ state }) => {
+          state.elements.popper.style.width = `${
+            (state.elements.reference as HTMLElement).offsetWidth
+          }px`;
+        },
+      };
+
+      modifiers.push(sameWidth);
+    }
+
+    return modifiers;
+  }, [
+    arrow,
+    sameWidth,
+    smallTargetOffsetSkidding,
+    offsetSkidding,
+    offsetDistance,
+  ]);
+
+  const { styles, state, attributes } = usePopper(
+    targetRef.current,
+    popperNode,
+    {
+      placement,
+      modifiers,
+    }
+  );
 
   const resolvedPlacement = state?.placement;
-  const isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован скраю
+  const isEdgePlacement =
+    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован скраю
 
   // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
   // таргета из-за маленьких размеров последнего
   useIsomorphicLayoutEffect(() => {
     if (arrow && isEdgePlacement) {
-      const placementDirection = resolvedPlacement.startsWith('bottom') || resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
-
-      const arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
-      const targetSize = placementDirection === 'vertical' ? targetRef.current.offsetWidth : targetRef.current.offsetHeight;
+      const placementDirection =
+        resolvedPlacement?.startsWith("bottom") ||
+        resolvedPlacement?.startsWith("top")
+          ? "vertical"
+          : "horizontal";
+
+      const arrowSize =
+        placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
+      const targetSize =
+        (placementDirection === "vertical"
+          ? targetRef.current?.offsetWidth
+          : targetRef.current?.offsetHeight) ?? 0;
 
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
@@ -115,15 +180,19 @@ export const Popper: React.FC<PopperProps> = ({
     if (resolvedPlacement) {
       onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
     }
-  }, [resolvedPlacement]);
+  }, [onPlacementChange, resolvedPlacement]);
 
   const dropdown = (
     <div
       {...restProps}
       {...attributes.popper}
-      vkuiClass={getClassName('Popper', platform)}
+      vkuiClass={getClassName("Popper", platform)}
       ref={setExternalRef}
-      style={{ ...compStyles, ...styles.popper }}
+      style={{
+        ...compStyles,
+        ...styles.popper,
+        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,
+      }}
     >
       {arrow && (
         <div
@@ -132,16 +201,31 @@ export const Popper: React.FC<PopperProps> = ({
           data-popper-arrow={true}
           style={styles.arrow}
         >
-          <svg vkuiClass="Popper__arrow-in" className={arrowClassName} width="20" height="8" viewBox="0 0 20 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fillRule="evenodd" clipRule="evenodd" d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z" fill="currentColor" />
+          <svg
+            vkuiClass="Popper__arrow-in"
+            className={arrowClassName}
+            width="20"
+            height="8"
+            viewBox="0 0 20 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z"
+              fill="currentColor"
+            />
           </svg>
         </div>
       )}
-      <div vkuiClass="Popper__content">
-        {children}
-      </div>
+      <div vkuiClass="Popper__content">{children}</div>
     </div>
   );
 
-  return <AppRootPortal forcePortal vkuiClass="PopperPortal">{dropdown}</AppRootPortal>;
+  return (
+    <AppRootPortal forcePortal={forcePortal} vkuiClass="PopperPortal">
+      {dropdown}
+    </AppRootPortal>
+  );
 };