@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/cssm/components/Popover/usePopover.js

@@ -1,55 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useFloatingElement } from "../../hooks/useFloatingElement.js";
 import { injectAriaExpandedPropByRole } from "../../lib/accessibility.js";
 import { animationFadeClassNames, transformOriginClassNames } from "../../lib/animation/index.js";
-import { useFloatingMiddlewaresBootstrap, useFloatingWithInteractions, usePlacementChangeCallback } from "../../lib/floating/index.js";
 import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from "../FloatingArrow/DefaultIcon.js";
 import { FloatingArrow } from "../FloatingArrow/FloatingArrow.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import styles from "./Popover.module.css";
 export const usePopover = ({ // UsePopoverProps
-arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', strategy, content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, customMiddlewares, // uncontrolled
+arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', strategy, content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, onReferenceHiddenChange, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, keepMounted = false, customMiddlewares, // uncontrolled
 defaultShown = false, // controlled
 shown: shownProp, onShownChange, onShownChanged, // Для AppRootPortal
 usePortal = true, // Для FloatingArrow
 arrowProps, ArrowIcon = DefaultIcon, // FocusTrapProps
-autoFocus = true, restoreFocus = true, className, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', // a11y
+autoFocus = true, restoreFocus = true, className, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', disableFocusTrap, // a11y
 role = 'dialog', ...restPopoverProps })=>{
-    const [arrowRef, setArrowRef] = React.useState(null);
-    const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
-        arrow: withArrow,
-        arrowRef,
-        arrowHeight,
-        arrowPadding,
-        placement: expectedPlacement,
-        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,
-        closeAfterClick,
-        disabled,
-        disableInteractive,
-        disableCloseOnClickOutside,
-        disableCloseOnEscKey,
-        defaultShown,
-        shown: shownProp,
-        onShownChange,
-        onShownChanged
-    });
-    usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
-    let popover = null;
-    if (shown || keepMounted) {
+    const renderFloatingComponent = React.useCallback(({ shown, middlewareData, placement: resolvedPlacement, setArrowRef, floatingRef, floatingProps, willBeHide, onRestoreFocus, onClose })=>{
+        if (!shown && !keepMounted) {
+            return null;
+        }
         const hidden = keepMounted && !shown;
         let arrow = null;
         if (withArrow) {
@@ -63,10 +35,10 @@ role = 'dialog', ...restPopoverProps })=>{
                 Icon: ArrowIcon
             });
         }
-        popover = /*#__PURE__*/ _jsx(AppRootPortal, {
+        return /*#__PURE__*/ _jsx(AppRootPortal, {
             usePortal: usePortal,
             children: /*#__PURE__*/ _jsx("div", {
-                ref: refs.setFloating,
+                ref: floatingRef,
                 className: classNames(styles.host, hidden && styles.hidden),
                 ...floatingProps,
                 style: {
@@ -78,10 +50,9 @@ role = 'dialog', ...restPopoverProps })=>{
                     role: role,
                     className: classNames(styles.in, noStyling ? undefined : styles.inWithStyling, willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, transformOriginClassNames[resolvedPlacement], className),
                     mount: !hidden,
-                    disabled: hidden,
+                    disabled: hidden || disableFocusTrap,
                     autoFocus: disableInteractive ? false : autoFocus,
                     restoreFocus: restoreFocus ? ()=>onRestoreFocus(restoreFocus) : false,
-                    onClose: onEscapeKeyDown,
                     children: [
                         arrow,
                         typeof content === 'function' ? content({
@@ -91,11 +62,58 @@ role = 'dialog', ...restPopoverProps })=>{
                 })
             })
         });
-    }
+    }, [
+        ArrowIcon,
+        arrowProps,
+        autoFocus,
+        className,
+        content,
+        disableFocusTrap,
+        disableInteractive,
+        keepMounted,
+        noStyling,
+        restPopoverProps,
+        restoreFocus,
+        role,
+        usePortal,
+        withArrow,
+        zIndex
+    ]);
+    const remapReferenceProps = useCallback(({ shown, ...referenceProps })=>injectAriaExpandedPropByRole(referenceProps, shown, role), [
+        role
+    ]);
+    const { anchorRef, anchorProps, component } = useFloatingElement({
+        arrow: withArrow,
+        arrowHeight,
+        arrowPadding,
+        placement,
+        offsetByMainAxis,
+        offsetByCrossAxis,
+        sameWidth,
+        hideWhenReferenceHidden,
+        disableFlipMiddleware,
+        customMiddlewares,
+        trigger,
+        strategy,
+        hoverDelay,
+        onReferenceHiddenChange,
+        closeAfterClick,
+        disabled,
+        disableInteractive,
+        disableCloseOnClickOutside,
+        disableCloseOnEscKey,
+        defaultShown,
+        shown: shownProp,
+        onShownChange,
+        onShownChanged,
+        onPlacementChange,
+        renderFloatingComponent,
+        remapReferenceProps
+    });
     return {
-        anchorRef: refs.setReference,
-        anchorProps: injectAriaExpandedPropByRole(referenceProps, shown, role),
-        popover
+        anchorRef,
+        anchorProps,
+        popover: component
     };
 };
 

package/dist/cssm/components/Popover/usePopover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popover/usePopover.tsx"],"sourcesContent":["import { type Ref } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport {\n  useFloatingMiddlewaresBootstrap,\n  useFloatingWithInteractions,\n  usePlacementChangeCallback,\n} from '../../lib/floating';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { type PopoverProps } from './Popover';\nimport styles from './Popover.module.css';\n\nexport type UsePopoverProps = Omit<PopoverProps, 'children'> & {\n  [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UsePopoverResult<ElementType extends HTMLElement = HTMLElement> = {\n  anchorRef: Ref<ElementType>;\n  anchorProps: ReferenceProps<ElementType>;\n  popover: React.ReactNode | null;\n};\n\nexport const usePopover = <ElementType extends HTMLElement = HTMLElement>({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement: expectedPlacement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  strategy,\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  keepMounted = false,\n  customMiddlewares,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n  onShownChanged,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  // a11y\n  role = 'dialog',\n  ...restPopoverProps\n}: UsePopoverProps): UsePopoverResult<ElementType> => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    arrow: withArrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    placement: expectedPlacement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    customMiddlewares,\n  });\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    placement: strictPlacement,\n    trigger,\n    strategy,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    onShownChanged,\n  });\n\n  usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);\n\n  let popover: React.ReactNode = null;\n  if (shown || keepMounted) {\n    const hidden = keepMounted && !shown;\n\n    let arrow: React.ReactElement | null = null;\n    if (withArrow) {\n      const { arrow: arrowCoords } = middlewareData;\n      arrow = (\n        <FloatingArrow\n          iconClassName={noStyling ? undefined : styles.arrow}\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      );\n    }\n\n    popover = (\n      <AppRootPortal usePortal={usePortal}>\n        <div\n          ref={refs.setFloating}\n          className={classNames(styles.host, hidden && styles.hidden)}\n          {...floatingProps}\n          style={{\n            zIndex: !hidden ? zIndex : undefined,\n            ...floatingProps.style,\n          }}\n        >\n          <FocusTrap\n            {...restPopoverProps}\n            role={role}\n            className={classNames(\n              styles.in,\n              noStyling ? undefined : styles.inWithStyling,\n              willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n              transformOriginClassNames[resolvedPlacement],\n              className,\n            )}\n            mount={!hidden}\n            disabled={hidden}\n            autoFocus={disableInteractive ? false : autoFocus}\n            restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}\n            onClose={onEscapeKeyDown}\n          >\n            {arrow}\n            {typeof content === 'function' ? content({ onClose }) : content}\n          </FocusTrap>\n        </div>\n      </AppRootPortal>\n    );\n  }\n\n  return {\n    anchorRef: refs.setReference,\n    anchorProps: injectAriaExpandedPropByRole(referenceProps, shown, role),\n    popover,\n  };\n};\n"],"names":["React","classNames","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","styles","usePopover","arrow","withArrow","arrowHeight","arrowPadding","placement","expectedPlacement","onPlacementChange","disableFlipMiddleware","trigger","strategy","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","onShownChanged","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","noStyling","zIndex","role","restPopoverProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","popover","hidden","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","setFloating","host","style","in","inWithStyling","out","mount","anchorRef","setReference","anchorProps"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Popover/usePopover.tsx"],"sourcesContent":["import { type Ref, useCallback } from 'react';\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useFloatingElement, type UseFloatingElementProps } from '../../hooks/useFloatingElement';\nimport { injectAriaExpandedPropByRole } from '../../lib/accessibility';\nimport { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';\nimport { type ReferenceProps } from '../../lib/floating/useFloatingWithInteractions/types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport { FloatingArrow } from '../FloatingArrow/FloatingArrow';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { type PopoverProps } from './Popover';\nimport styles from './Popover.module.css';\n\nexport type UsePopoverProps = Omit<PopoverProps, 'children'> & {\n  [key: `data-${string}`]: string | number | boolean;\n};\n\nexport type UsePopoverResult<ElementType extends HTMLElement = HTMLElement> = {\n  anchorRef: Ref<ElementType>;\n  anchorProps: ReferenceProps<ElementType>;\n  popover: React.ReactNode | null;\n};\n\nexport const usePopover = <ElementType extends HTMLElement = HTMLElement>({\n  // UsePopoverProps\n  arrow: withArrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  placement = 'bottom-start',\n  onPlacementChange,\n  disableFlipMiddleware = false,\n  trigger = 'click',\n  strategy,\n  content,\n  hoverDelay = 150,\n  closeAfterClick,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  sameWidth,\n  hideWhenReferenceHidden,\n  onReferenceHiddenChange,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  keepMounted = false,\n  customMiddlewares,\n  // uncontrolled\n  defaultShown = false,\n  // controlled\n  shown: shownProp,\n  onShownChange,\n  onShownChanged,\n\n  // Для AppRootPortal\n  usePortal = true,\n\n  // Для FloatingArrow\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // FocusTrapProps\n  autoFocus = true,\n  restoreFocus = true,\n  className,\n  noStyling = false,\n  zIndex = 'var(--vkui--z_index_popout)',\n  disableFocusTrap,\n  // a11y\n  role = 'dialog',\n  ...restPopoverProps\n}: UsePopoverProps): UsePopoverResult<ElementType> => {\n  const renderFloatingComponent: UseFloatingElementProps<HTMLDivElement>['renderFloatingComponent'] =\n    React.useCallback(\n      ({\n        shown,\n        middlewareData,\n        placement: resolvedPlacement,\n        setArrowRef,\n        floatingRef,\n        floatingProps,\n        willBeHide,\n        onRestoreFocus,\n        onClose,\n      }) => {\n        if (!shown && !keepMounted) {\n          return null;\n        }\n        const hidden = keepMounted && !shown;\n\n        let arrow: React.ReactElement | null = null;\n        if (withArrow) {\n          const { arrow: arrowCoords } = middlewareData;\n          arrow = (\n            <FloatingArrow\n              iconClassName={noStyling ? undefined : styles.arrow}\n              {...arrowProps}\n              coords={arrowCoords}\n              placement={resolvedPlacement}\n              getRootRef={setArrowRef}\n              Icon={ArrowIcon}\n            />\n          );\n        }\n        return (\n          <AppRootPortal usePortal={usePortal}>\n            <div\n              ref={floatingRef}\n              className={classNames(styles.host, hidden && styles.hidden)}\n              {...floatingProps}\n              style={{\n                zIndex: !hidden ? zIndex : undefined,\n                ...floatingProps.style,\n              }}\n            >\n              <FocusTrap\n                {...restPopoverProps}\n                role={role}\n                className={classNames(\n                  styles.in,\n                  noStyling ? undefined : styles.inWithStyling,\n                  willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in,\n                  transformOriginClassNames[resolvedPlacement],\n                  className,\n                )}\n                mount={!hidden}\n                disabled={hidden || disableFocusTrap}\n                autoFocus={disableInteractive ? false : autoFocus}\n                restoreFocus={restoreFocus ? () => onRestoreFocus(restoreFocus) : false}\n              >\n                {arrow}\n                {typeof content === 'function' ? content({ onClose }) : content}\n              </FocusTrap>\n            </div>\n          </AppRootPortal>\n        );\n      },\n      [\n        ArrowIcon,\n        arrowProps,\n        autoFocus,\n        className,\n        content,\n        disableFocusTrap,\n        disableInteractive,\n        keepMounted,\n        noStyling,\n        restPopoverProps,\n        restoreFocus,\n        role,\n        usePortal,\n        withArrow,\n        zIndex,\n      ],\n    );\n\n  const remapReferenceProps: Exclude<UseFloatingElementProps['remapReferenceProps'], undefined> =\n    useCallback(\n      ({ shown, ...referenceProps }) => injectAriaExpandedPropByRole(referenceProps, shown, role),\n      [role],\n    );\n\n  const { anchorRef, anchorProps, component } = useFloatingElement<ElementType, HTMLDivElement>({\n    arrow: withArrow,\n    arrowHeight,\n    arrowPadding,\n    placement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    sameWidth,\n    hideWhenReferenceHidden,\n    disableFlipMiddleware,\n    customMiddlewares,\n\n    trigger,\n    strategy,\n    hoverDelay,\n    onReferenceHiddenChange,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    onShownChanged,\n\n    onPlacementChange,\n    renderFloatingComponent,\n    remapReferenceProps,\n  });\n\n  return {\n    anchorRef,\n    anchorProps,\n    popover: component,\n  };\n};\n"],"names":["useCallback","React","classNames","useFloatingElement","injectAriaExpandedPropByRole","animationFadeClassNames","transformOriginClassNames","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","FocusTrap","styles","usePopover","arrow","withArrow","arrowHeight","arrowPadding","placement","onPlacementChange","disableFlipMiddleware","trigger","strategy","content","hoverDelay","closeAfterClick","offsetByMainAxis","offsetByCrossAxis","sameWidth","hideWhenReferenceHidden","onReferenceHiddenChange","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","keepMounted","customMiddlewares","defaultShown","shown","shownProp","onShownChange","onShownChanged","usePortal","arrowProps","ArrowIcon","autoFocus","restoreFocus","className","noStyling","zIndex","disableFocusTrap","role","restPopoverProps","renderFloatingComponent","middlewareData","resolvedPlacement","setArrowRef","floatingRef","floatingProps","willBeHide","onRestoreFocus","onClose","hidden","arrowCoords","iconClassName","undefined","coords","getRootRef","Icon","div","ref","host","style","in","inWithStyling","out","mount","remapReferenceProps","referenceProps","anchorRef","anchorProps","component","popover"],"mappings":"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"}

package/dist/cssm/components/Popper/Popper.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
 import { useExternRef } from "../../hooks/useExternRef.js";
 import { autoUpdateFloatingElement, convertFloatingDataToReactCSSProperties, useFloating, useFloatingMiddlewaresBootstrap, usePlacementChangeCallback } from "../../lib/floating/index.js";
+import { useReferenceHiddenChangeCallback } from "../../lib/floating/useReferenceHiddenChangeCallback.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from "../FloatingArrow/DefaultIcon.js";
@@ -13,10 +14,10 @@ import styles from "./Popper.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */ export const Popper = ({ // UseFloatingMiddlewaresBootstrapProps
-placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, offsetByMainAxis = 8, offsetByCrossAxis = 0, arrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, customMiddlewares, disableFlipMiddleware = false, // UseFloatingProps
-autoUpdateOnTargetResize = false, // ArrowProps
+placement: placementProp = 'bottom-start', sameWidth, hideWhenReferenceHidden, offsetByMainAxis = 8, offsetByCrossAxis = 0, arrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, customMiddlewares, disableFlipMiddleware = false, flipMiddlewareFallbackAxisSideDirection, // UseFloatingProps
+autoUpdateOnTargetResize = false, strategy: strategyProp, // ArrowProps
 arrowProps, ArrowIcon = DefaultIcon, // rest
-targetRef, getRootRef, children, usePortal = true, onPlacementChange, zIndex, style, ...restProps })=>{
+targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenceHiddenChange, zIndex, style, ...restProps })=>{
     const [arrowRef, setArrowRef] = React.useState(null);
     const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({
         placement: placementProp,
@@ -29,10 +30,12 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, zIndex, st
         offsetByCrossAxis,
         hideWhenReferenceHidden,
         customMiddlewares,
-        disableFlipMiddleware
+        disableFlipMiddleware,
+        flipMiddlewareFallbackAxisSideDirection
     });
     const { x: floatingDataX, y: floatingDataY, strategy: floatingPositionStrategy, placement: resolvedPlacement, refs, middlewareData } = useFloating({
         placement: strictPlacement,
+        strategy: strategyProp,
         middleware: middlewares,
         whileElementsMounted (...args) {
             /* istanbul ignore next: не знаю как проверить */ return autoUpdateFloatingElement(...args, {
@@ -41,6 +44,7 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, zIndex, st
         }
     });
     usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);
+    useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);
     const { arrow: arrowCoords } = middlewareData;
     const handleRootRef = useExternRef(refs.setFloating, getRootRef);
     useIsomorphicLayoutEffect(()=>{
@@ -57,7 +61,13 @@ targetRef, getRootRef, children, usePortal = true, onPlacementChange, zIndex, st
         style: mergeStyle(dropdownStyle, style),
         baseClassName: styles.host,
         getRootRef: handleRootRef,
-        baseStyle: convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined, middlewareData),
+        baseStyle: convertFloatingDataToReactCSSProperties({
+            strategy: floatingPositionStrategy,
+            x: floatingDataX,
+            y: floatingDataY,
+            initialWidth: sameWidth ? null : undefined,
+            middlewareData
+        }),
         children: [
             arrow && /*#__PURE__*/ _jsx(FloatingArrow, {
                 ...arrowProps,

package/dist/cssm/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  zIndex,\n  style,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdownStyle =\n    typeof zIndex !== 'undefined'\n      ? {\n          zIndex,\n        }\n      : undefined;\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      style={mergeStyle(dropdownStyle, style)}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties(\n        floatingPositionStrategy,\n        floatingDataX,\n        floatingDataY,\n        sameWidth ? null : undefined,\n        middlewareData,\n      )}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","autoUpdateOnTargetResize","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","host","baseStyle","coords","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA4DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;AACnBC,2BAA2B,KAAK,EAEhC,aAAa;AACbC,UAAU,EACVC,YAAYlB,WAAW,EAEvB,OAAO;AACPmB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EACjBC,MAAM,EACNC,KAAK,EACL,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAGxC,MAAMyC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGrC,gCAAgC;QACvEW,WAAWC;QACXC;QACAI;QACAgB;QACAf;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;IACF;IAEA,MAAM,EACJiB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBC,UAAUC,wBAAwB,EAClChC,WAAWiC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAG/C,YAAY;QACdY,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOpD,6BAA6BoD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEArB,2BAA2BW,eAAegC,mBAAmBf;IAE7D,MAAM,EAAEZ,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBxD,aAA6BiD,KAAKQ,WAAW,EAAE3B;IAErExB,0BAA0B;QACxB2C,KAAKS,YAAY,CAAC,aAAa7B,YAAYA,UAAU8B,OAAO,GAAG9B;IACjE,GAAG;QAACoB,KAAKS,YAAY;QAAE7B;KAAU;IAEjC,MAAM+B,gBACJ,OAAO1B,WAAW,cACd;QACEA;IACF,IACA2B;IAEN,MAAMC,yBACJ,MAAClD;QACE,GAAGwB,SAAS;QACbD,OAAOpC,WAAW6D,eAAezB;QACjC4B,eAAelD,OAAOmD,IAAI;QAC1BlC,YAAY0B;QACZS,WAAW/D,wCACT6C,0BACAJ,eACAE,eACA5B,YAAY,OAAO4C,WACnBX;;YAGD7B,uBACC,KAACV;gBACE,GAAGgB,UAAU;gBACduC,QAAQX;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ6B,MAAMvC;;YAGTG;;;IAIL,qBAAO,KAACxB;QAAcyB,WAAWA;kBAAY8B;;AAC/C,EAAE"}
+{"version":3,"sources":["../../../../src/components/Popper/Popper.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeStyle } from '../../helpers/mergeStyle';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  autoUpdateFloatingElement,\n  convertFloatingDataToReactCSSProperties,\n  type FloatingComponentProps,\n  useFloating,\n  useFloatingMiddlewaresBootstrap,\n  usePlacementChangeCallback,\n  type VirtualElement,\n} from '../../lib/floating';\nimport { useReferenceHiddenChangeCallback } from '../../lib/floating/useReferenceHiddenChangeCallback';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../FloatingArrow/DefaultIcon';\nimport {\n  FloatingArrow,\n  type FloatingArrowProps as FloatingArrowPropsPrivate,\n} from '../FloatingArrow/FloatingArrow';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Popper.module.css';\n\nexport type FloatingArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowRef'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'hoverDelay'\n  | 'placement'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'shown'\n  | 'onShownChange'\n  | 'defaultShown'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'sameWidth'\n  | 'zIndex'\n  | 'strategy'\n  | 'usePortal'\n  | 'customMiddlewares'\n  | 'onPlacementChange'\n  | 'disableFlipMiddleware'\n  | 'flipMiddlewareFallbackAxisSideDirection'\n>;\n\nexport interface PopperCommonProps\n  extends AllowedFloatingComponentProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: FloatingArrowProps;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: FloatingArrowPropsPrivate['Icon'];\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement | null> | VirtualElement;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  // UseFloatingMiddlewaresBootstrapProps\n  placement: placementProp = 'bottom-start',\n  sameWidth,\n  hideWhenReferenceHidden,\n  offsetByMainAxis = 8,\n  offsetByCrossAxis = 0,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  customMiddlewares,\n  disableFlipMiddleware = false,\n  flipMiddlewareFallbackAxisSideDirection,\n\n  // UseFloatingProps\n  autoUpdateOnTargetResize = false,\n  strategy: strategyProp,\n\n  // ArrowProps\n  arrowProps,\n  ArrowIcon = DefaultIcon,\n\n  // rest\n  targetRef,\n  getRootRef,\n  children,\n  usePortal = true,\n  onPlacementChange,\n  onReferenceHiddenChange,\n  zIndex,\n  style,\n  ...restProps\n}: PopperProps): React.ReactNode => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { strictPlacement, middlewares } = useFloatingMiddlewaresBootstrap({\n    placement: placementProp,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowHeight,\n    arrowPadding,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    hideWhenReferenceHidden,\n    customMiddlewares,\n    disableFlipMiddleware,\n    flipMiddlewareFallbackAxisSideDirection,\n  });\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData,\n  } = useFloating({\n    placement: strictPlacement,\n    strategy: strategyProp,\n    middleware: middlewares,\n    whileElementsMounted(...args) {\n      /* istanbul ignore next: не знаю как проверить */\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);\n\n  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n  const { arrow: arrowCoords } = middlewareData;\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRootRef);\n\n  useIsomorphicLayoutEffect(() => {\n    refs.setReference('current' in targetRef ? targetRef.current : targetRef);\n  }, [refs.setReference, targetRef]);\n\n  const dropdownStyle =\n    typeof zIndex !== 'undefined'\n      ? {\n          zIndex,\n        }\n      : undefined;\n\n  const dropdown = (\n    <RootComponent\n      {...restProps}\n      style={mergeStyle(dropdownStyle, style)}\n      baseClassName={styles.host}\n      getRootRef={handleRootRef}\n      baseStyle={convertFloatingDataToReactCSSProperties({\n        strategy: floatingPositionStrategy,\n        x: floatingDataX,\n        y: floatingDataY,\n        initialWidth: sameWidth ? null : undefined,\n        middlewareData,\n      })}\n    >\n      {arrow && (\n        <FloatingArrow\n          {...arrowProps}\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {children}\n    </RootComponent>\n  );\n\n  return <AppRootPortal usePortal={usePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","mergeStyle","useExternRef","autoUpdateFloatingElement","convertFloatingDataToReactCSSProperties","useFloating","useFloatingMiddlewaresBootstrap","usePlacementChangeCallback","useReferenceHiddenChangeCallback","useIsomorphicLayoutEffect","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","FloatingArrow","RootComponent","styles","Popper","placement","placementProp","sameWidth","hideWhenReferenceHidden","offsetByMainAxis","offsetByCrossAxis","arrow","arrowHeight","arrowPadding","customMiddlewares","disableFlipMiddleware","flipMiddlewareFallbackAxisSideDirection","autoUpdateOnTargetResize","strategy","strategyProp","arrowProps","ArrowIcon","targetRef","getRootRef","children","usePortal","onPlacementChange","onReferenceHiddenChange","zIndex","style","restProps","arrowRef","setArrowRef","useState","strictPlacement","middlewares","x","floatingDataX","y","floatingDataY","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","middleware","whileElementsMounted","args","elementResize","hide","arrowCoords","handleRootRef","setFloating","setReference","current","dropdownStyle","undefined","dropdown","baseClassName","host","baseStyle","initialWidth","coords","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SACEC,yBAAyB,EACzBC,uCAAuC,EAEvCC,WAAW,EACXC,+BAA+B,EAC/BC,0BAA0B,QAErB,8BAAqB;AAC5B,SAASC,gCAAgC,QAAQ,yDAAsD;AACvG,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SACEC,oBAAoB,EACpBC,qBAAqB,EACrBC,WAAW,QACN,kCAA+B;AACtC,SACEC,aAAa,QAER,oCAAiC;AACxC,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,sBAAsB;AA+DzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EACrB,uCAAuC;AACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcd,oBAAoB,EAClCe,eAAed,qBAAqB,EACpCe,iBAAiB,EACjBC,wBAAwB,KAAK,EAC7BC,uCAAuC,EAEvC,mBAAmB;AACnBC,2BAA2B,KAAK,EAChCC,UAAUC,YAAY,EAEtB,aAAa;AACbC,UAAU,EACVC,YAAYrB,WAAW,EAEvB,OAAO;AACPsB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EACjBC,uBAAuB,EACvBC,MAAM,EACNC,KAAK,EACL,GAAGC,WACS;IACZ,MAAM,CAACC,UAAUC,YAAY,GAAG7C,MAAM8C,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAG1C,gCAAgC;QACvEY,WAAWC;QACXC;QACAI;QACAoB;QACAnB;QACAC;QACAJ;QACAC;QACAF;QACAM;QACAC;QACAC;IACF;IAEA,MAAM,EACJoB,GAAGC,aAAa,EAChBC,GAAGC,aAAa,EAChBrB,UAAUsB,wBAAwB,EAClCnC,WAAWoC,iBAAiB,EAC5BC,IAAI,EACJC,cAAc,EACf,GAAGnD,YAAY;QACda,WAAW6B;QACXhB,UAAUC;QACVyB,YAAYT;QACZU,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOxD,6BAA6BwD,MAAM;gBACxCC,eAAe9B;YACjB;QACF;IACF;IAEAvB,2BAA2BY,eAAemC,mBAAmBf;IAE7D/B,iCAAiCgD,eAAeK,IAAI,EAAErB;IAEtD,MAAM,EAAEhB,OAAOsC,WAAW,EAAE,GAAGN;IAE/B,MAAMO,gBAAgB7D,aAA6BqD,KAAKS,WAAW,EAAE5B;IAErE3B,0BAA0B;QACxB8C,KAAKU,YAAY,CAAC,aAAa9B,YAAYA,UAAU+B,OAAO,GAAG/B;IACjE,GAAG;QAACoB,KAAKU,YAAY;QAAE9B;KAAU;IAEjC,MAAMgC,gBACJ,OAAO1B,WAAW,cACd;QACEA;IACF,IACA2B;IAEN,MAAMC,yBACJ,MAACtD;QACE,GAAG4B,SAAS;QACbD,OAAOzC,WAAWkE,eAAezB;QACjC4B,eAAetD,OAAOuD,IAAI;QAC1BnC,YAAY2B;QACZS,WAAWpE,wCAAwC;YACjD2B,UAAUsB;YACVJ,GAAGC;YACHC,GAAGC;YACHqB,cAAcrD,YAAY,OAAOgD;YACjCZ;QACF;;YAEChC,uBACC,KAACV;gBACE,GAAGmB,UAAU;gBACdyC,QAAQZ;gBACR5C,WAAWoC;gBACXlB,YAAYS;gBACZ8B,MAAMzC;;YAGTG;;;IAIL,qBAAO,KAAC3B;QAAc4B,WAAWA;kBAAY+B;;AAC/C,EAAE"}

package/dist/cssm/components/Progress/Progress.js

@@ -17,12 +17,38 @@ function progressCustomHeightStyle(height) {
 }
 const PROGRESS_MIN_VALUE = 0;
 const PROGRESS_MAX_VALUE = 100;
+const resolveAppearance = (appearance)=>{
+    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, ...restProps })=>{
+ */ export const Progress = ({ value = 0, height, trackDisable = false, appearance = 'accent', ...restProps })=>{
     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 /*#__PURE__*/ _jsx(RootComponent, {
         "aria-valuenow": value,
         title: title,
@@ -30,14 +56,8 @@ const PROGRESS_MAX_VALUE = 100;
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
-        baseClassName: classNames(styles.host, stylesAppearance[appearance]),
-        baseStyle: styleHeight,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: styles.in,
-            style: {
-                width: `${progress}%`
-            }
-        })
+        baseClassName: classNames(styles.host, trackDisable && styles.trackDisable, appearanceClassName),
+        baseStyle: style
     });
 };
 

package/dist/cssm/components/Progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance = {\n  accent: styles.appearanceAccent,\n  positive: styles.appearancePositive,\n  negative: styles.appearanceNegative,\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative';\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  appearance = 'accent',\n  height,\n  ...restProps\n}: ProgressProps): React.ReactNode => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n  const styleHeight = progressCustomHeightStyle(height);\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(styles.host, stylesAppearance[appearance])}\n      baseStyle={styleHeight}\n    >\n      <div className={styles.in} style={{ width: `${progress}%` }} />\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","styles","stylesAppearance","accent","appearanceAccent","positive","appearancePositive","negative","appearanceNegative","progressCustomHeightStyle","height","borderRadius","undefined","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","appearance","restProps","progress","title","styleHeight","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","host","baseStyle","div","className","in","style","width"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,mBAAmB;IACvBC,QAAQF,OAAOG,gBAAgB;IAC/BC,UAAUJ,OAAOK,kBAAkB;IACnCC,UAAUN,OAAOO,kBAAkB;AACrC;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAcA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B;;CAEC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBP,MAAM,EACN,GAAGQ,WACW;IACd,MAAMC,WAAWpB,MAAMiB,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,GAAGD,SAAS,GAAG,EAAEL,oBAAoB;IACnD,MAAMO,cAAcZ,0BAA0BC;IAE9C,qBACE,KAACV;QACCsB,iBAAeN;QACfI,OAAOA;QACN,GAAGF,SAAS;QACbK,MAAK;QACLC,iBAAeX;QACfY,iBAAeX;QACfY,eAAe5B,WAAWG,OAAO0B,IAAI,EAAEzB,gBAAgB,CAACe,WAAW;QACnEW,WAAWP;kBAEX,cAAA,KAACQ;YAAIC,WAAW7B,OAAO8B,EAAE;YAAEC,OAAO;gBAAEC,OAAO,GAAGd,SAAS,CAAC,CAAC;YAAC;;;AAGhE,EAAE"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Progress.module.css';\n\nconst stylesAppearance: Record<string, string> = {\n  accent: styles.appearanceAccent,\n  positive: styles.appearancePositive,\n  negative: styles.appearanceNegative,\n};\n\nfunction progressCustomHeightStyle(height: number | undefined): React.CSSProperties | undefined {\n  return height\n    ? {\n        height,\n        borderRadius: height / 2,\n      }\n    : undefined;\n}\n\nexport interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Стиль отображения прогрессбара\n   */\n  appearance?: 'accent' | 'positive' | 'negative' | `--${string}` | `#${string}`;\n  value?: number;\n  /**\n   * Высота элемента.\n   */\n  height?: number;\n  /**\n   * Сделать прогрессбар прозрачным\n   */\n  trackDisable?: boolean;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\nconst resolveAppearance = (\n  appearance: Exclude<ProgressProps['appearance'], undefined>,\n): [CSSCustomProperties | undefined, string | undefined] => {\n  switch (appearance) {\n    case 'accent':\n    case 'positive':\n    case 'negative':\n      return [undefined, stylesAppearance[appearance]];\n    default: {\n      return [{ '--vkui_internal_Progress_background_color': appearance }, undefined];\n    }\n  }\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Progress\n */\nexport const Progress = ({\n  value = 0,\n  height,\n  trackDisable = false,\n  appearance = 'accent',\n  ...restProps\n}: ProgressProps): React.ReactNode => {\n  const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);\n  const title = `${progress} / ${PROGRESS_MAX_VALUE}`;\n  const styleHeight = progressCustomHeightStyle(height);\n\n  const [appearanceStyles, appearanceClassName] = resolveAppearance(appearance);\n\n  const style = {\n    ...styleHeight,\n    ...appearanceStyles,\n    '--vkui_internal_Progress_progress': progress,\n  };\n\n  return (\n    <RootComponent\n      aria-valuenow={value}\n      title={title}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      baseClassName={classNames(\n        styles.host,\n        trackDisable && styles.trackDisable,\n        appearanceClassName,\n      )}\n      baseStyle={style}\n    />\n  );\n};\n"],"names":["React","classNames","clamp","RootComponent","styles","stylesAppearance","accent","appearanceAccent","positive","appearancePositive","negative","appearanceNegative","progressCustomHeightStyle","height","borderRadius","undefined","PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","resolveAppearance","appearance","Progress","value","trackDisable","restProps","progress","title","styleHeight","appearanceStyles","appearanceClassName","style","aria-valuenow","role","aria-valuemin","aria-valuemax","baseClassName","host","baseStyle"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,mBAA2C;IAC/CC,QAAQF,OAAOG,gBAAgB;IAC/BC,UAAUJ,OAAOK,kBAAkB;IACnCC,UAAUN,OAAOO,kBAAkB;AACrC;AAEA,SAASC,0BAA0BC,MAA0B;IAC3D,OAAOA,SACH;QACEA;QACAC,cAAcD,SAAS;IACzB,IACAE;AACN;AAkBA,MAAMC,qBAAqB;AAC3B,MAAMC,qBAAqB;AAE3B,MAAMC,oBAAoB,CACxBC;IAEA,OAAQA;QACN,KAAK;QACL,KAAK;QACL,KAAK;YACH,OAAO;gBAACJ;gBAAWV,gBAAgB,CAACc,WAAW;aAAC;QAClD;YAAS;gBACP,OAAO;oBAAC;wBAAE,6CAA6CA;oBAAW;oBAAGJ;iBAAU;YACjF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,WAAW,CAAC,EACvBC,QAAQ,CAAC,EACTR,MAAM,EACNS,eAAe,KAAK,EACpBH,aAAa,QAAQ,EACrB,GAAGI,WACW;IACd,MAAMC,WAAWtB,MAAMmB,OAAOL,oBAAoBC;IAClD,MAAMQ,QAAQ,GAAGD,SAAS,GAAG,EAAEP,oBAAoB;IACnD,MAAMS,cAAcd,0BAA0BC;IAE9C,MAAM,CAACc,kBAAkBC,oBAAoB,GAAGV,kBAAkBC;IAElE,MAAMU,QAAQ;QACZ,GAAGH,WAAW;QACd,GAAGC,gBAAgB;QACnB,qCAAqCH;IACvC;IAEA,qBACE,KAACrB;QACC2B,iBAAeT;QACfI,OAAOA;QACN,GAAGF,SAAS;QACbQ,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,eAAejC,WACbG,OAAO+B,IAAI,EACXb,gBAAgBlB,OAAOkB,YAAY,EACnCM;QAEFQ,WAAWP;;AAGjB,EAAE"}

package/dist/cssm/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/dist/cssm/components/PullToRefresh/PullToRefresh.module.css

@@ -1,12 +1,12 @@
 .host {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .refreshing {
-  touch-action: none;
   pointer-events: none;
+  touch-action: none;
 }
 
 .controls {
@@ -19,28 +19,28 @@
 }
 
 .spinner {
+  box-sizing: border-box;
   display: flex;
-  margin: auto;
-  inline-size: 40px;
-  block-size: 40px;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
-  transition:
-    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
-    opacity 220ms ease-out;
-  opacity: 0;
+  inline-size: 40px;
+  block-size: 40px;
+  margin: auto;
+  color: var(--vkui--color_icon_accent);
   background: var(--vkui--color_background_modal);
   border-radius: 50%;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-  color: var(--vkui--color_icon_accent);
+  opacity: 0;
+  transition:
+    transform 300ms cubic-bezier(0.1, 0, 0.25, 1),
+    opacity 220ms ease-out;
 }
 
 .ios .spinner {
+  color: var(--vkui--color_icon_medium);
+  background: none;
   border-radius: 0;
   box-shadow: none;
-  background: none;
-  color: var(--vkui--color_icon_medium);
 }
 
 .watching .spinner {
@@ -72,8 +72,8 @@
 
 .content {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   overflow: hidden;
   transition: transform 400ms var(--vkui--animation_easing_platform);
 }

package/dist/cssm/components/Radio/Radio.module.css

@@ -4,7 +4,7 @@
  */
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 :global(.vkuiInternalRadioGroup) .host {
+  box-sizing: border-box;
   flex: 1;
   margin: 0;
-  box-sizing: border-box;
 }

package/dist/cssm/components/Radio/RadioInput/RadioInput.module.css

@@ -10,8 +10,8 @@
 }
 
 .icon .pin {
-  transform-origin: center;
   transform: scale(0);
+  transform-origin: center;
   transition: transform 0.15s var(--vkui--animation_easing_platform);
 }
 

package/dist/cssm/components/RadioGroup/RadioGroup.module.css

@@ -10,7 +10,7 @@
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalFormItem) .host {
+  box-sizing: content-box;
   margin-block: 0;
   margin-inline: calc(-1 * var(--vkui--size_base_padding_horizontal--regular));
-  box-sizing: content-box;
 }

package/dist/cssm/components/Removable/Removable.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { getTextFromChildren } from "../../lib/children.js";
@@ -15,6 +16,8 @@ import styles from "./Removable.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/RemovableIos
  */ const RemovableIos = ({ onRemove, removePlaceholder, removePlaceholderString, children: childrenProp, toggleButtonTestId, removeButtonTestId, disabled })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
     const { window } = useDOM();
     const removeButtonRef = React.useRef(null);
     const disabledRef = React.useRef(true);
@@ -42,11 +45,12 @@ import styles from "./Removable.module.css";
         disabledRef.current = false;
         updateRemoveOffset(offsetWidth);
     };
+    const style = {
+        '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0)
+    };
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames(styles.content, 'vkuiInternalRemovable__content'),
-        style: {
-            transform: `translateX(-${removeOffset ?? 0}px)`
-        },
+        className: classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content'),
+        style: style,
         onTransitionEnd: onRemoveTransitionEnd,
         children: [
             /*#__PURE__*/ _jsxs(IconButton, {