@vkontakte/vkui 4.23.0 → 4.24.0

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,
@@ -31,39 +32,45 @@ export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
   const elRef = React.useRef<HTMLDivElement>();
 
   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();
   }, []);
 
   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,
-      })}
+      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}
       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<HTMLElement>,
+    HasRef<HTMLElement> {
   /**
    * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
    */
@@ -33,6 +42,11 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLElement>, Ha
   offsetDistance?: number;
   arrow?: boolean;
   arrowClassName?: string;
+  /**
+   * Выставлять ширину равной target элементу
+   */
+  sameWidth?: boolean;
+  forcePortal?: boolean;
   onPlacementChange?: (data: { placement?: Placement }) => void;
 }
 
@@ -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 [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 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,
+    ARROW_HEIGHT,
+    ARROW_PADDING,
+  ]);
+
+  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;
 
       if (targetSize < arrowSize + 2 * ARROW_PADDING) {
         setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
@@ -121,7 +186,7 @@ export const Popper: React.FC<PopperProps> = ({
     <div
       {...restProps}
       {...attributes.popper}
-      vkuiClass={getClassName('Popper', platform)}
+      vkuiClass={getClassName("Popper", platform)}
       ref={setExternalRef}
       style={{ ...compStyles, ...styles.popper }}
     >
@@ -132,16 +197,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>
+  );
 };

package/src/components/Popper/Readme.md

@@ -1,6 +1,6 @@
->**Важно**
+> **Важно**
 >
->Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
 Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позициионироваться
 рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
@@ -12,12 +12,22 @@ const buttonRef = React.useRef();
 
 return (
   <React.Fragment>
-    <Button getRootRef={buttonRef} onClick={() => setShown(!shown)} style={{ margin: 50 }}>{shown ? 'Закрыть' : 'Открыть'}</Button>
-    {shown &&
-      <Popper offsetDistance={8} style={{ padding: '9px 12px' }} targetRef={buttonRef}>
+    <Button
+      getRootRef={buttonRef}
+      onClick={() => setShown(!shown)}
+      style={{ margin: 50 }}
+    >
+      {shown ? "Закрыть" : "Открыть"}
+    </Button>
+    {shown && (
+      <Popper
+        offsetDistance={8}
+        style={{ padding: "9px 12px" }}
+        targetRef={buttonRef}
+      >
         Привет
-      </Popper> 
-    }
+      </Popper>
+    )}
   </React.Fragment>
-)
+);
 ```

package/src/components/Progress/Progress.css

@@ -7,6 +7,6 @@
 .Progress__in {
   height: 100%;
   border-radius: inherit;
-  transition: width .2s ease;
+  transition: width 0.2s ease;
   background: var(--accent);
 }

package/src/components/Progress/Progress.tsx

@@ -1,20 +1,29 @@
-import * as React from 'react';
-import { getClassName } from '../../helpers/getClassName';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import './Progress.css';
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Progress.css";
 
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
   value?: number;
 }
 
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
-const Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {
+const Progress: React.FC<ProgressProps> = ({
+  value,
+  getRootRef,
+  ...restProps
+}: ProgressProps) => {
   const platform = usePlatform();
 
-  const progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));
+  const progress = Math.max(
+    PROGRESS_MIN_VALUE,
+    Math.min(value, PROGRESS_MAX_VALUE)
+  );
 
   return (
     <div
@@ -24,10 +33,14 @@ const Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }:
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
       ref={getRootRef}
-      vkuiClass={getClassName('Progress', platform)}
+      vkuiClass={getClassName("Progress", platform)}
     >
       <div vkuiClass="Progress__bg" aria-hidden="true" />
-      <div vkuiClass="Progress__in" style={{ width: `${progress}%` }} aria-hidden="true" />
+      <div
+        vkuiClass="Progress__in"
+        style={{ width: `${progress}%` }}
+        aria-hidden="true"
+      />
     </div>
   );
 };

package/src/components/PromoBanner/PromoBanner.css

@@ -32,7 +32,7 @@
 }
 
 .PromoBanner__close:active {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .PromoBanner__pixels {

package/src/components/PromoBanner/PromoBanner.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
-import { Icon24Dismiss } from '@vkontakte/icons';
-import Button from '../Button/Button';
-import SimpleCell from '../SimpleCell/SimpleCell';
-import Avatar from '../Avatar/Avatar';
-import Caption from '../Typography/Caption/Caption';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getClassName } from '../../helpers/getClassName';
-import './PromoBanner.css';
+import * as React from "react";
+import { Icon24Dismiss } from "@vkontakte/icons";
+import Button from "../Button/Button";
+import SimpleCell from "../SimpleCell/SimpleCell";
+import Avatar from "../Avatar/Avatar";
+import Caption from "../Typography/Caption/Caption";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import "./PromoBanner.css";
 
 type StatsType =
-  | 'playbackStarted' // Начало показа
-  | 'click'; // Клик по баннеру
+  | "playbackStarted" // Начало показа
+  | "click"; // Клик по баннеру
 
 type BannerData = {
   title?: string;
@@ -55,17 +55,23 @@ const PromoBanner = (props: PromoBannerProps) => {
       ? parseInt(bannerData.ageRestrictions)
       : bannerData.ageRestriction;
 
-  const [currentPixel, setCurrentPixel] = React.useState('');
+  const [currentPixel, setCurrentPixel] = React.useState("");
 
   const statsPixels = React.useMemo(
     () =>
       (bannerData.statistics
-        ? bannerData.statistics.reduce((acc, item) => ({ ...acc, [item.type]: item.url }), {})
+        ? bannerData.statistics.reduce(
+            (acc, item) => ({ ...acc, [item.type]: item.url }),
+            {}
+          )
         : {}) as Record<StatsType, string | void>,
-    [bannerData.statistics],
+    [bannerData.statistics]
   );
 
-  const onClick = React.useCallback(() => setCurrentPixel(statsPixels.click || ''), [statsPixels.click]);
+  const onClick = React.useCallback(
+    () => setCurrentPixel(statsPixels.click || ""),
+    [statsPixels.click]
+  );
 
   React.useEffect(() => {
     if (statsPixels.playbackStarted) {
@@ -74,16 +80,22 @@ const PromoBanner = (props: PromoBannerProps) => {
   }, [statsPixels.playbackStarted]);
 
   return (
-    <div vkuiClass={getClassName('PromoBanner', platform)} {...restProps}>
+    <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
       <div vkuiClass="PromoBanner__head">
-        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">{bannerData.advertisingLabel || 'Advertisement'}</Caption>
-        {ageRestrictions != null && <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>}
+        <Caption weight="regular" level="1" vkuiClass="PromoBanner__label">
+          {bannerData.advertisingLabel || "Advertisement"}
+        </Caption>
+        {ageRestrictions != null && (
+          <Caption weight="regular" level="1" vkuiClass="PromoBanner__age">
+            {ageRestrictions}+
+          </Caption>
+        )}
 
-        {!props.isCloseButtonHidden &&
+        {!props.isCloseButtonHidden && (
           <div vkuiClass="PromoBanner__close" onClick={props.onClose}>
             <Icon24Dismiss />
           </div>
-        }
+        )}
       </div>
       <SimpleCell
         href={bannerData.trackingLink}
@@ -91,7 +103,12 @@ const PromoBanner = (props: PromoBannerProps) => {
         rel="nofollow noopener noreferrer"
         target="_blank"
         before={
-          <Avatar mode="image" size={48} src={bannerData.iconLink} alt={bannerData.title} />
+          <Avatar
+            mode="image"
+            size={48}
+            src={bannerData.iconLink}
+            alt={bannerData.title}
+          />
         }
         after={<Button mode="outline">{bannerData.ctaText}</Button>}
         description={bannerData.domain}
@@ -99,11 +116,11 @@ const PromoBanner = (props: PromoBannerProps) => {
         {bannerData.title}
       </SimpleCell>
 
-      {currentPixel.length > 0 &&
+      {currentPixel.length > 0 && (
         <div vkuiClass="PromoBanner__pixels">
           <img src={currentPixel} alt="" />
         </div>
-      }
+      )}
     </div>
   );
 };

package/src/components/PromoBanner/Readme.md

@@ -1,17 +1,18 @@
 ```jsx
 const promoBannerProps = {
-  title: 'Заголовок',
-  domain: 'vk.com',
-  trackingLink: 'https://vk.com',
-  ctaText: 'Перейти',
-  advertisingLabel: 'Реклама',
-  iconLink: 'https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg',
-  description: 'Описание рекламы',
+  title: "Заголовок",
+  domain: "vk.com",
+  trackingLink: "https://vk.com",
+  ctaText: "Перейти",
+  advertisingLabel: "Реклама",
+  iconLink:
+    "https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg",
+  description: "Описание рекламы",
   ageRestrictions: "14+",
   statistics: [
-    { url: '', type: 'playbackStarted' },
-    { url: '', type: 'click' }
-  ]
+    { url: "", type: "playbackStarted" },
+    { url: "", type: "click" },
+  ],
 };
 
 <View activePanel="promo">
@@ -20,5 +21,5 @@ const promoBannerProps = {
       <PromoBanner bannerData={promoBannerProps} />
     </FixedLayout>
   </Panel>
-</View>
+</View>;
 ```