@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/PopoutWrapper/PopoutWrapper.module.css

@@ -1,9 +1,9 @@
 .host {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
-  inset-inline-start: 0;
-  inset-block-start: 0;
   pointer-events: none;
 }
 
@@ -19,10 +19,14 @@
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .overlay {
   position: fixed;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
   opacity: 1;
@@ -42,24 +46,25 @@
   background: var(--vkui--color_overlay_primary);
 }
 
-.fixed .overlay {
+.fixed .overlay,
+.absolute .overlay {
   position: absolute;
 }
 
 .container {
-  inline-size: 100%;
-  block-size: 100%;
   position: relative;
-  display: flex;
   box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .content {
+  position: relative;
   display: flex;
   justify-content: center;
   inline-size: 100%;
   pointer-events: none;
-  position: relative;
 }
 
 /* stylelint-disable-next-line selector-max-universal */

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -18,17 +18,36 @@ const stylesAlignY = {
   bottom: styles.alignYBottom,
 };
 
+const stylesStrategy = {
+  fixed: styles.fixed,
+  absolute: styles.absolute,
+  none: undefined,
+};
+
 export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Позволяет сделать прозрачную подложку
    */
   noBackground?: boolean;
   /**
+   * @deprecated будет удалён в **VKUI v8**
+   * Используйте `strategy` вместо этого свойства.
+   *
    * Включает фиксированное позиционирование.
    *
-   * По умолчанию у компонента не задан никакой `position`.
+   * При значении `false` у компонента не задан никакой `position`.
    */
   fixed?: boolean;
+  /**
+   * Стратегия позиционирования:
+   *
+   * - `fixed`: у контейнера выставлен `position: fixed`
+   * - `absolute`: у контейнера выставлен `position: absolute`
+   * - `none`: у контейнера не выставлен `position`
+   *
+   * @default 'fixed'
+   */
+  strategy?: 'fixed' | 'absolute' | 'none';
   /**
    * Выравнивает контент по горизонтали.
    */
@@ -55,12 +74,16 @@ export const PopoutWrapper = ({
   alignX = 'center',
   closing = false,
   noBackground = false,
+  strategy: strategyProp,
+  // TODO [>=8]: удалить свойство
   fixed = true,
   children,
   onClick,
   zIndex = 'var(--vkui--z_index_popout)',
   ...restProps
 }: PopoutWrapperProps): React.ReactNode => {
+  const strategy = strategyProp || (fixed ? 'fixed' : 'none');
+
   return (
     <RootComponent
       {...restProps}
@@ -69,7 +92,7 @@ export const PopoutWrapper = ({
         stylesAlignY[alignY],
         stylesAlignX[alignX],
         closing ? styles.closing : styles.opened,
-        fixed && styles.fixed,
+        strategy && stylesStrategy[strategy],
         !noBackground && styles.masked,
       )}
       baseStyle={{ zIndex }}

package/src/components/Popover/Popover.module.css

@@ -4,9 +4,9 @@
 
 /* Создаём "Safe Zone" */
 .host::before {
-  content: '';
   position: absolute;
   inset: calc(-1 * var(--vkui_internal--popover_safe_zone_padding));
+  content: '';
 }
 
 .in {

package/src/components/Popover/Popover.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { usePatchChildren } from '../../hooks/usePatchChildren';
+import { useReferenceElement } from '../../hooks/useReferenceElement';
 import {
   type FloatingComponentProps,
   type FloatingContentRenderProp,
@@ -53,6 +53,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'usePortal'
   | 'sameWidth'
   | 'hideWhenReferenceHidden'
+  | 'onReferenceHiddenChange'
   | 'disabled'
   | 'disableInteractive'
   | 'disableCloseOnClickOutside'
@@ -64,6 +65,7 @@ type AllowedFloatingComponentProps = Pick<
   | 'disableFlipMiddleware'
   | 'customMiddlewares'
   | 'strategy'
+  | 'disableFocusTrap'
 >;
 
 /**
@@ -116,13 +118,13 @@ export interface PopoverProps
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
 export const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {
-  const { anchorRef, anchorProps: referenceProps, popover } = usePopover<HTMLDivElement>(restProps);
+  const { anchorRef, anchorProps, popover } = usePopover<HTMLDivElement>(restProps);
 
-  const [, child] = usePatchChildren<HTMLDivElement>(children, referenceProps, anchorRef);
+  const reference = useReferenceElement(children, anchorProps, anchorRef);
 
   return (
     <React.Fragment>
-      {child}
+      {reference}
       {popover}
     </React.Fragment>
   );

package/src/components/Popover/usePopover.tsx

@@ -1,13 +1,9 @@
-import { type Ref } from 'react';
+import { type Ref, useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useFloatingElement, type UseFloatingElementProps } from '../../hooks/useFloatingElement';
 import { injectAriaExpandedPropByRole } from '../../lib/accessibility';
 import { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';
-import {
-  useFloatingMiddlewaresBootstrap,
-  useFloatingWithInteractions,
-  usePlacementChangeCallback,
-} from '../../lib/floating';
 import { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import {
@@ -35,7 +31,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
   arrow: withArrow,
   arrowHeight = DEFAULT_ARROW_HEIGHT,
   arrowPadding = DEFAULT_ARROW_PADDING,
-  placement: expectedPlacement = 'bottom-start',
+  placement = 'bottom-start',
   onPlacementChange,
   disableFlipMiddleware = false,
   trigger = 'click',
@@ -47,6 +43,7 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
   offsetByCrossAxis = 0,
   sameWidth,
   hideWhenReferenceHidden,
+  onReferenceHiddenChange,
   disabled,
   disableInteractive,
   disableCloseOnClickOutside,
@@ -73,41 +70,117 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
   className,
   noStyling = false,
   zIndex = 'var(--vkui--z_index_popout)',
+  disableFocusTrap,
   // a11y
   role = 'dialog',
   ...restPopoverProps
 }: UsePopoverProps): UsePopoverResult<ElementType> => {
-  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
-  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
+  const renderFloatingComponent: UseFloatingElementProps<HTMLDivElement>['renderFloatingComponent'] =
+    React.useCallback(
+      ({
+        shown,
+        middlewareData,
+        placement: resolvedPlacement,
+        setArrowRef,
+        floatingRef,
+        floatingProps,
+        willBeHide,
+        onRestoreFocus,
+        onClose,
+      }) => {
+        if (!shown && !keepMounted) {
+          return null;
+        }
+        const hidden = keepMounted && !shown;
+
+        let arrow: React.ReactElement | null = null;
+        if (withArrow) {
+          const { arrow: arrowCoords } = middlewareData;
+          arrow = (
+            <FloatingArrow
+              iconClassName={noStyling ? undefined : styles.arrow}
+              {...arrowProps}
+              coords={arrowCoords}
+              placement={resolvedPlacement}
+              getRootRef={setArrowRef}
+              Icon={ArrowIcon}
+            />
+          );
+        }
+        return (
+          <AppRootPortal usePortal={usePortal}>
+            <div
+              ref={floatingRef}
+              className={classNames(styles.host, hidden && styles.hidden)}
+              {...floatingProps}
+              style={{
+                zIndex: !hidden ? zIndex : undefined,
+                ...floatingProps.style,
+              }}
+            >
+              <FocusTrap
+                {...restPopoverProps}
+                role={role}
+                className={classNames(
+                  styles.in,
+                  noStyling ? undefined : styles.inWithStyling,
+                  willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
+                  transformOriginClassNames[resolvedPlacement],
+                  className,
+                )}
+                mount={!hidden}
+                disabled={hidden || disableFocusTrap}
+                autoFocus={disableInteractive ? false : autoFocus}
+                restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}
+              >
+                {arrow}
+                {typeof content === 'function' ? content({ onClose }) : content}
+              </FocusTrap>
+            </div>
+          </AppRootPortal>
+        );
+      },
+      [
+        ArrowIcon,
+        arrowProps,
+        autoFocus,
+        className,
+        content,
+        disableFocusTrap,
+        disableInteractive,
+        keepMounted,
+        noStyling,
+        restPopoverProps,
+        restoreFocus,
+        role,
+        usePortal,
+        withArrow,
+        zIndex,
+      ],
+    );
+
+  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =
+    useCallback(
+      ({ shown, ...referenceProps }) => injectAriaExpandedPropByRole(referenceProps, shown, role),
+      [role],
+    );
+
+  const { anchorRef, anchorProps, component } = useFloatingElement<ElementType, HTMLDivElement>({
     arrow: withArrow,
-    arrowRef,
     arrowHeight,
     arrowPadding,
-    placement: expectedPlacement,
+    placement,
     offsetByMainAxis,
     offsetByCrossAxis,
     sameWidth,
     hideWhenReferenceHidden,
     disableFlipMiddleware,
     customMiddlewares,
-  });
-  const {
-    placement: resolvedPlacement,
-    shown,
-    willBeHide,
-    refs,
-    referenceProps,
-    floatingProps,
-    middlewareData,
-    onClose,
-    onRestoreFocus,
-    onEscapeKeyDown,
-  } = useFloatingWithInteractions({
-    middlewares,
-    placement: strictPlacement,
+
     trigger,
     strategy,
     hoverDelay,
+    onReferenceHiddenChange,
     closeAfterClick,
     disabled,
     disableInteractive,
@@ -117,67 +190,15 @@ export const usePopover = <ElementType extends HTMLElement = HTMLElement>({
     shown: shownProp,
     onShownChange,
     onShownChanged,
-  });
-
-  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
-
-  let popover: React.ReactNode = null;
-  if (shown || keepMounted) {
-    const hidden = keepMounted && !shown;
 
-    let arrow: React.ReactElement | null = null;
-    if (withArrow) {
-      const { arrow: arrowCoords } = middlewareData;
-      arrow = (
-        <FloatingArrow
-          iconClassName={noStyling ? undefined : styles.arrow}
-          {...arrowProps}
-          coords={arrowCoords}
-          placement={resolvedPlacement}
-          getRootRef={setArrowRef}
-          Icon={ArrowIcon}
-        />
-      );
-    }
-
-    popover = (
-      <AppRootPortal usePortal={usePortal}>
-        <div
-          ref={refs.setFloating}
-          className={classNames(styles.host, hidden && styles.hidden)}
-          {...floatingProps}
-          style={{
-            zIndex: !hidden ? zIndex : undefined,
-            ...floatingProps.style,
-          }}
-        >
-          <FocusTrap
-            {...restPopoverProps}
-            role={role}
-            className={classNames(
-              styles.in,
-              noStyling ? undefined : styles.inWithStyling,
-              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,
-              transformOriginClassNames[resolvedPlacement],
-              className,
-            )}
-            mount={!hidden}
-            disabled={hidden}
-            autoFocus={disableInteractive ? false : autoFocus}
-            restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}
-            onClose={onEscapeKeyDown}
-          >
-            {arrow}
-            {typeof content === 'function' ? content({ onClose }) : content}
-          </FocusTrap>
-        </div>
-      </AppRootPortal>
-    );
-  }
+    onPlacementChange,
+    renderFloatingComponent,
+    remapReferenceProps,
+  });
 
   return {
-    anchorRef: refs.setReference,
-    anchorProps: injectAriaExpandedPropByRole(referenceProps, shown, role),
-    popover,
+    anchorRef,
+    anchorProps,
+    popover: component,
   };
 };

package/src/components/Popper/Popper.tsx

@@ -12,6 +12,7 @@ import {
   usePlacementChangeCallback,
   type VirtualElement,
 } from '../../lib/floating';
+import { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
@@ -46,12 +47,15 @@ type AllowedFloatingComponentProps = Pick<
   | 'onShownChange'
   | 'defaultShown'
   | 'hideWhenReferenceHidden'
+  | 'onReferenceHiddenChange'
   | 'sameWidth'
   | 'zIndex'
+  | 'strategy'
   | 'usePortal'
   | 'customMiddlewares'
   | 'onPlacementChange'
   | 'disableFlipMiddleware'
+  | 'flipMiddlewareFallbackAxisSideDirection'
 >;
 
 export interface PopperCommonProps
@@ -100,9 +104,11 @@ export const Popper = ({
   arrowPadding = DEFAULT_ARROW_PADDING,
   customMiddlewares,
   disableFlipMiddleware = false,
+  flipMiddlewareFallbackAxisSideDirection,
 
   // UseFloatingProps
   autoUpdateOnTargetResize = false,
+  strategy: strategyProp,
 
   // ArrowProps
   arrowProps,
@@ -114,6 +120,7 @@ export const Popper = ({
   children,
   usePortal = true,
   onPlacementChange,
+  onReferenceHiddenChange,
   zIndex,
   style,
   ...restProps
@@ -132,6 +139,7 @@ export const Popper = ({
     hideWhenReferenceHidden,
     customMiddlewares,
     disableFlipMiddleware,
+    flipMiddlewareFallbackAxisSideDirection,
   });
 
   const {
@@ -143,6 +151,7 @@ export const Popper = ({
     middlewareData,
   } = useFloating({
     placement: strictPlacement,
+    strategy: strategyProp,
     middleware: middlewares,
     whileElementsMounted(...args) {
       /* istanbul ignore next: не знаю как проверить */
@@ -154,6 +163,8 @@ export const Popper = ({
 
   usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);
 
+  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);
+
   const { arrow: arrowCoords } = middlewareData;
 
   const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);
@@ -175,13 +186,13 @@ export const Popper = ({
       style={mergeStyle(dropdownStyle, style)}
       baseClassName={styles.host}
       getRootRef={handleRootRef}
-      baseStyle={convertFloatingDataToReactCSSProperties(
-        floatingPositionStrategy,
-        floatingDataX,
-        floatingDataY,
-        sameWidth ? null : undefined,
+      baseStyle={convertFloatingDataToReactCSSProperties({
+        strategy: floatingPositionStrategy,
+        x: floatingDataX,
+        y: floatingDataY,
+        initialWidth: sameWidth ? null : undefined,
         middlewareData,
-      )}
+      })}
     >
       {arrow && (
         <FloatingArrow

package/src/components/Progress/Progress.module.css

@@ -1,23 +1,34 @@
 .host {
-  border-radius: 1px;
-  background: var(--vkui--color_track_background);
   block-size: 2px;
+  background: var(--vkui--color_track_background);
+  border-radius: 1px;
+
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
+  --vkui_internal_Progress_progress: 0;
+}
+
+.trackDisable {
+  background: transparent;
 }
 
-.in {
+.host::after {
+  display: block;
+  inline-size: calc(var(--vkui_internal_Progress_progress) * 1%);
   block-size: 100%;
+  content: '';
+  background: var(--vkui_internal_Progress_background_color);
   border-radius: inherit;
   transition: width 0.2s ease;
 }
 
-.appearanceAccent .in {
-  background: var(--vkui--color_stroke_accent);
+.appearanceAccent {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_accent);
 }
 
-.appearancePositive .in {
-  background: var(--vkui--color_stroke_positive);
+.appearancePositive {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_positive);
 }
 
-.appearanceNegative .in {
-  background: var(--vkui--color_stroke_negative);
+.appearanceNegative {
+  --vkui_internal_Progress_background_color: var(--vkui--color_stroke_negative);
 }

package/src/components/Progress/Progress.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Progress.module.css';
 
-const stylesAppearance = {
+const stylesAppearance: Record<string, string> = {
   accent: styles.appearanceAccent,
   positive: styles.appearancePositive,
   negative: styles.appearanceNegative,
@@ -24,30 +24,57 @@ export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement>
   /**
    * Стиль отображения прогрессбара
    */
-  appearance?: 'accent' | 'positive' | 'negative';
+  appearance?: 'accent' | 'positive' | 'negative' | `--${string}` | `#${string}`;
   value?: number;
   /**
    * Высота элемента.
    */
   height?: number;
+  /**
+   * Сделать прогрессбар прозрачным
+   */
+  trackDisable?: boolean;
 }
 
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
 
+const resolveAppearance = (
+  appearance: Exclude<ProgressProps['appearance'], undefined>,
+): [CSSCustomProperties | undefined, string | undefined] => {
+  switch (appearance) {
+    case 'accent':
+    case 'positive':
+    case 'negative':
+      return [undefined, stylesAppearance[appearance]];
+    default: {
+      return [{ '--vkui_internal_Progress_background_color': appearance }, undefined];
+    }
+  }
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
 export const Progress = ({
   value = 0,
-  appearance = 'accent',
   height,
+  trackDisable = false,
+  appearance = 'accent',
   ...restProps
 }: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
   const title = `${progress} / ${PROGRESS_MAX_VALUE}`;
   const styleHeight = progressCustomHeightStyle(height);
 
+  const [appearanceStyles, appearanceClassName] = resolveAppearance(appearance);
+
+  const style = {
+    ...styleHeight,
+    ...appearanceStyles,
+    '--vkui_internal_Progress_progress': progress,
+  };
+
   return (
     <RootComponent
       aria-valuenow={value}
@@ -56,10 +83,12 @@ export const Progress = ({
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
-      baseClassName={classNames(styles.host, stylesAppearance[appearance])}
-      baseStyle={styleHeight}
-    >
-      <div className={styles.in} style={{ width: `${progress}%` }} />
-    </RootComponent>
+      baseClassName={classNames(
+        styles.host,
+        trackDisable && styles.trackDisable,
+        appearanceClassName,
+      )}
+      baseStyle={style}
+    />
   );
 };