@vkontakte/vkui 7.1.3 → 7.2.0

package/dist/components/Popover/Popover.js

@@ -2,7 +2,7 @@
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { usePatchChildren } from "../../hooks/usePatchChildren.js";
+import { useReferenceElement } from "../../hooks/useReferenceElement.js";
 import { usePopover } from "./usePopover.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
@@ -10,11 +10,11 @@ import { usePopover } from "./usePopover.js";
     var { children } = _param, restProps = _object_without_properties(_param, [
         "children"
     ]);
-    const { anchorRef, anchorProps: referenceProps, popover } = usePopover(restProps);
-    const [, child] = usePatchChildren(children, referenceProps, anchorRef);
+    const { anchorRef, anchorProps, popover } = usePopover(restProps);
+    const reference = useReferenceElement(children, anchorProps, anchorRef);
     return /*#__PURE__*/ _jsxs(React.Fragment, {
         children: [
-            child,
+            reference,
             popover
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePatchChildren } from '../../hooks/usePatchChildren';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { usePopover } from './usePopover';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n  | 'strategy'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\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   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n  autoFocus?: FocusTrapProps['autoFocus'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {\n  const { anchorRef, anchorProps: referenceProps, popover } = usePopover<HTMLDivElement>(restProps);\n\n  const [, child] = usePatchChildren<HTMLDivElement>(children, referenceProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {child}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","usePatchChildren","usePopover","Popover","children","restProps","anchorRef","anchorProps","referenceProps","popover","child","Fragment"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,kCAA+B;AAShE,SAASC,UAAU,QAAQ,kBAAe;AAsG1C;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,QAAQ,EAA8B,WAAzBC;QAAbD;;IACxB,MAAM,EAAEE,SAAS,EAAEC,aAAaC,cAAc,EAAEC,OAAO,EAAE,GAAGP,WAA2BG;IAEvF,MAAM,GAAGK,MAAM,GAAGT,iBAAiCG,UAAUI,gBAAgBF;IAE7E,qBACE,MAACN,MAAMW,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useReferenceElement } from '../../hooks/useReferenceElement';\nimport {\n  type FloatingComponentProps,\n  type FloatingContentRenderProp,\n  type OnShownChange,\n} from '../../lib/floating';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';\nimport type { FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { usePopover } from './usePopover';\n\n/**\n * @alias\n * @public\n */\nexport type PopoverArrowProps = Omit<\n  FloatingArrowPropsPrivate,\n  'getRootRef' | 'coords' | 'placement' | 'Icon'\n>;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverOnShownChange = OnShownChange;\n\n/**\n * @alias\n * @public\n */\nexport type PopoverContentRenderProp = FloatingContentRenderProp;\n\ntype AllowedFloatingComponentProps = Pick<\n  FloatingComponentProps,\n  | 'arrow'\n  | 'arrowHeight'\n  | 'arrowPadding'\n  | 'placement'\n  | 'onPlacementChange'\n  | 'trigger'\n  | 'content'\n  | 'hoverDelay'\n  | 'closeAfterClick'\n  | 'offsetByMainAxis'\n  | 'offsetByCrossAxis'\n  | 'defaultShown'\n  | 'shown'\n  | 'onShownChange'\n  | 'onShownChanged'\n  | 'usePortal'\n  | 'sameWidth'\n  | 'hideWhenReferenceHidden'\n  | 'onReferenceHiddenChange'\n  | 'disabled'\n  | 'disableInteractive'\n  | 'disableCloseOnClickOutside'\n  | 'disableCloseOnEscKey'\n  | 'autoFocus'\n  | 'restoreFocus'\n  | 'children'\n  | 'zIndex'\n  | 'disableFlipMiddleware'\n  | 'customMiddlewares'\n  | 'strategy'\n  | 'disableFocusTrap'\n>;\n\n/**\n * @public\n */\nexport interface PopoverProps\n  extends Omit<AllowedFloatingComponentProps, 'autoFocus'>,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {\n  /**\n   * Отключает у всплывающего элемента стилизацию по умолчанию.\n   *\n   * У `content`:\n   * - _background_\n   * - _border-radius_\n   * - _box-shadow_\n   *\n   * У `arrow`:\n   * - _color_\n   *\n   * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно\n   * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.\n   */\n  noStyling?: boolean;\n  /**\n   * Позволяет набросить на стрелку пользовательские атрибуты.\n   */\n  arrowProps?: PopoverArrowProps;\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   * Используется для того, чтобы не удалять поповер из DOM дерева при скрытии.\n   */\n  keepMounted?: boolean;\n  autoFocus?: FocusTrapProps['autoFocus'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({ children, ...restProps }: PopoverProps): React.ReactNode => {\n  const { anchorRef, anchorProps, popover } = usePopover<HTMLDivElement>(restProps);\n\n  const reference = useReferenceElement(children, anchorProps, anchorRef);\n\n  return (\n    <React.Fragment>\n      {reference}\n      {popover}\n    </React.Fragment>\n  );\n};\n"],"names":["React","useReferenceElement","usePopover","Popover","children","restProps","anchorRef","anchorProps","popover","reference","Fragment"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,qCAAkC;AAStE,SAASC,UAAU,QAAQ,kBAAe;AAwG1C;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EAAEC,QAAQ,EAA8B,WAAzBC;QAAbD;;IACxB,MAAM,EAAEE,SAAS,EAAEC,WAAW,EAAEC,OAAO,EAAE,GAAGN,WAA2BG;IAEvE,MAAMI,YAAYR,oBAAoBG,UAAUG,aAAaD;IAE7D,qBACE,MAACN,MAAMU,QAAQ;;YACZD;YACAD;;;AAGP,EAAE"}

package/dist/components/Popover/usePopover.d.ts

@@ -10,5 +10,5 @@ export type UsePopoverResult<ElementType extends HTMLElement = HTMLElement> = {
     anchorProps: ReferenceProps<ElementType>;
     popover: React.ReactNode | null;
 };
-export declare const usePopover: <ElementType extends HTMLElement = HTMLElement>({ 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 }: UsePopoverProps) => UsePopoverResult<ElementType>;
+export declare const usePopover: <ElementType extends HTMLElement = HTMLElement>({ 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 }: UsePopoverProps) => UsePopoverResult<ElementType>;
 //# sourceMappingURL=usePopover.d.ts.map

package/dist/components/Popover/usePopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAS3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IAC7D,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,WAAW,SAAS,WAAW,GAAG,WAAW,IAAI;IAC5E,SAAS,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5B,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAW,SAAS,WAAW,8iBA8CvD,eAAe,KAAG,gBAAgB,CAAC,WAAW,CAwGhD,CAAC"}
+{"version":3,"file":"usePopover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/usePopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAe,MAAM,OAAO,CAAC;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sDAAsD,CAAC;AAS3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IAC7D,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACpD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,WAAW,SAAS,WAAW,GAAG,WAAW,IAAI;IAC5E,SAAS,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IAC5B,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,OAAO,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,WAAW,SAAS,WAAW,GAAG,WAAW,EAAE,sjBAgDvE,eAAe,KAAG,gBAAgB,CAAC,WAAW,CA+HhD,CAAC"}

package/dist/components/Popover/usePopover.js

@@ -2,23 +2,24 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 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";
 export const usePopover = (_param)=>{
     var { // 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' } = _param, restPopoverProps = _object_without_properties(_param, [
         "arrow",
         "arrowHeight",
@@ -35,6 +36,7 @@ export const usePopover = (_param)=>{
         "offsetByCrossAxis",
         "sameWidth",
         "hideWhenReferenceHidden",
+        "onReferenceHiddenChange",
         "disabled",
         "disableInteractive",
         "disableCloseOnClickOutside",
@@ -53,41 +55,13 @@ export const usePopover = (_param)=>{
         "className",
         "noStyling",
         "zIndex",
+        "disableFocusTrap",
         "role"
     ]);
-    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) {
@@ -101,10 +75,10 @@ export const usePopover = (_param)=>{
                 Icon: ArrowIcon
             }));
         }
-        popover = /*#__PURE__*/ _jsx(AppRootPortal, {
+        return /*#__PURE__*/ _jsx(AppRootPortal, {
             usePortal: usePortal,
             children: /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
-                ref: refs.setFloating,
+                ref: floatingRef,
                 className: classNames("vkuiPopover__host", hidden && "vkuiPopover__hidden")
             }, floatingProps), {
                 style: _object_spread({
@@ -114,10 +88,9 @@ export const usePopover = (_param)=>{
                     role: role,
                     className: classNames("vkuiPopover__in", noStyling ? undefined : "vkuiPopover__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({
@@ -127,11 +100,63 @@ export const usePopover = (_param)=>{
                 }))
             }))
         });
-    }
+    }, [
+        ArrowIcon,
+        arrowProps,
+        autoFocus,
+        className,
+        content,
+        disableFocusTrap,
+        disableInteractive,
+        keepMounted,
+        noStyling,
+        restPopoverProps,
+        restoreFocus,
+        role,
+        usePortal,
+        withArrow,
+        zIndex
+    ]);
+    const remapReferenceProps = useCallback((_param)=>{
+        var { shown } = _param, referenceProps = _object_without_properties(_param, [
+            "shown"
+        ]);
+        return 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/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","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","style","out","in","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","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","style","out","in","mount","remapReferenceProps","referenceProps","anchorRef","anchorProps","component","popover"],"mappings":"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"}

package/dist/components/Popper/Popper.d.ts

@@ -3,7 +3,7 @@ import { type FloatingComponentProps, type VirtualElement } from '../../lib/floa
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';
 export type FloatingArrowProps = Omit<FloatingArrowPropsPrivate, 'getRootRef' | 'coords' | 'placement' | 'Icon'>;
-type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowRef' | 'arrowHeight' | 'arrowPadding' | 'hoverDelay' | 'placement' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'shown' | 'onShownChange' | 'defaultShown' | 'hideWhenReferenceHidden' | 'sameWidth' | 'zIndex' | 'usePortal' | 'customMiddlewares' | 'onPlacementChange' | 'disableFlipMiddleware'>;
+type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowRef' | 'arrowHeight' | 'arrowPadding' | 'hoverDelay' | 'placement' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'shown' | 'onShownChange' | 'defaultShown' | 'hideWhenReferenceHidden' | 'onReferenceHiddenChange' | 'sameWidth' | 'zIndex' | 'strategy' | 'usePortal' | 'customMiddlewares' | 'onPlacementChange' | 'disableFlipMiddleware' | 'flipMiddlewareFallbackAxisSideDirection'>;
 export interface PopperCommonProps extends AllowedFloatingComponentProps, Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof AllowedFloatingComponentProps> {
     /**
      * Позволяет набросить на стрелку пользовательские атрибуты.
@@ -34,6 +34,6 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ placement: placementProp, sameWidth, hideWhenReferenceHidden, offsetByMainAxis, offsetByCrossAxis, arrow, arrowHeight, arrowPadding, customMiddlewares, disableFlipMiddleware, autoUpdateOnTargetResize, arrowProps, ArrowIcon, targetRef, getRootRef, children, usePortal, onPlacementChange, zIndex, style, ...restProps }: PopperProps) => React.ReactNode;
+export declare const 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 }: PopperProps) => React.ReactNode;
 export {};
 //# sourceMappingURL=Popper.d.ts.map

package/dist/components/Popper/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,UAAU,GACV,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,eAAe,GACf,cAAc,GACd,yBAAyB,GACzB,WAAW,GACX,QAAQ,GACR,WAAW,GACX,mBAAmB,GACnB,mBAAmB,GACnB,uBAAuB,CAC1B,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,6BAA6B,CAAC;IACtF;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,cAAc,CAAC;CACjE;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,mUA6BhB,WAAW,KAAG,KAAK,CAAC,SAgFtB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../src/components/Popper/Popper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,KAAK,sBAAsB,EAI3B,KAAK,cAAc,EACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,UAAU,GACV,aAAa,GACb,cAAc,GACd,YAAY,GACZ,WAAW,GACX,kBAAkB,GAClB,mBAAmB,GACnB,OAAO,GACP,eAAe,GACf,cAAc,GACd,yBAAyB,GACzB,yBAAyB,GACzB,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,GACX,mBAAmB,GACnB,mBAAmB,GACnB,uBAAuB,GACvB,yCAAyC,CAC5C,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,6BAA6B,CAAC;IACtF;;OAEG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;IAC9C;;OAEG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,cAAc,CAAC;CACjE;AAED;;GAEG;AACH,eAAO,MAAM,MAAM,GAAI,0ZAgCpB,WAAW,KAAG,KAAK,CAAC,SAoFtB,CAAC"}

package/dist/components/Popper/Popper.js

@@ -7,6 +7,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";
@@ -16,10 +17,10 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
  * @see https://vkcom.github.io/VKUI/#/Popper
  */ export const Popper = (_param)=>{
     var { // 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 } = _param, restProps = _object_without_properties(_param, [
+    targetRef, getRootRef, children, usePortal = true, onPlacementChange, onReferenceHiddenChange, zIndex, style } = _param, restProps = _object_without_properties(_param, [
         "placement",
         "sameWidth",
         "hideWhenReferenceHidden",
@@ -30,7 +31,9 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         "arrowPadding",
         "customMiddlewares",
         "disableFlipMiddleware",
+        "flipMiddlewareFallbackAxisSideDirection",
         "autoUpdateOnTargetResize",
+        "strategy",
         "arrowProps",
         "ArrowIcon",
         "targetRef",
@@ -38,6 +41,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         "children",
         "usePortal",
         "onPlacementChange",
+        "onReferenceHiddenChange",
         "zIndex",
         "style"
     ]);
@@ -53,10 +57,12 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         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, {
@@ -65,6 +71,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         }
     });
     usePlacementChangeCallback(placementProp, resolvedPlacement, onPlacementChange);
+    useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);
     const { arrow: arrowCoords } = middlewareData;
     const handleRootRef = useExternRef(refs.setFloating, getRootRef);
     useIsomorphicLayoutEffect(()=>{
@@ -80,7 +87,13 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
         style: mergeStyle(dropdownStyle, style),
         baseClassName: "vkuiPopper__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, _object_spread_props(_object_spread({}, arrowProps), {
                 coords: arrowCoords,

package/dist/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","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","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;AA6D/D;;CAEC,GACD,OAAO,MAAMC,SAAS;QAAC,EACrB,uCAAuC;IACvCC,WAAWC,gBAAgB,cAAc,EACzCC,SAAS,EACTC,uBAAuB,EACvBC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,KAAK,EACLC,cAAcb,oBAAoB,EAClCc,eAAeb,qBAAqB,EACpCc,iBAAiB,EACjBC,wBAAwB,KAAK,EAE7B,mBAAmB;IACnBC,2BAA2B,KAAK,EAEhC,aAAa;IACbC,UAAU,EACVC,YAAYjB,WAAW,EAEvB,OAAO;IACPkB,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,YAAY,IAAI,EAChBC,iBAAiB,EACjBC,MAAM,EACNC,KAAK,EAEO,WADTC;QA1BHrB;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QAGAC;QAGAC;QACAC;QAGAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,UAAUC,YAAY,GAAGvC,MAAMwC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,eAAe,EAAEC,WAAW,EAAE,GAAGpC,gCAAgC;QACvEU,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,GAAG9C,YAAY;QACdW,WAAWyB;QACXW,YAAYV;QACZW,sBAAqB,GAAGC,IAAI;YAC1B,+CAA+C,GAC/C,OAAOnD,6BAA6BmD,MAAM;gBACxCC,eAAe5B;YACjB;QACF;IACF;IAEApB,2BAA2BU,eAAegC,mBAAmBf;IAE7D,MAAM,EAAEZ,OAAOkC,WAAW,EAAE,GAAGL;IAE/B,MAAMM,gBAAgBvD,aAA6BgD,KAAKQ,WAAW,EAAE3B;IAErEvB,0BAA0B;QACxB0C,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,MAACjD,uDACKuB;QACJD,OAAOnC,WAAW4D,eAAezB;QACjC4B,aAAa;QACbjC,YAAY0B;QACZQ,WAAW7D,wCACT4C,0BACAJ,eACAE,eACA5B,YAAY,OAAO4C,WACnBX;;YAGD7B,uBACC,KAACT,uDACKe;gBACJsC,QAAQV;gBACRxC,WAAWiC;gBACXlB,YAAYQ;gBACZ4B,MAAMtC;;YAGTG;;;IAIL,qBAAO,KAACvB;QAAcwB,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","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","baseStyle","initialWidth","coords","Icon"],"mappings":"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"}

package/dist/components/Progress/Progress.d.ts

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import { type HTMLAttributesWithRootRef } from '../../types';
 export interface ProgressProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Стиль отображения прогрессбара
      */
-    appearance?: 'accent' | 'positive' | 'negative';
+    appearance?: 'accent' | 'positive' | 'negative' | `--${string}` | `#${string}`;
     value?: number;
     /**
      * Высота элемента.
      */
     height?: number;
+    /**
+     * Сделать прогрессбар прозрачным
+     */
+    trackDisable?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Progress
  */
-export declare const Progress: ({ value, appearance, height, ...restProps }: ProgressProps) => React.ReactNode;
+export declare const Progress: ({ value, height, trackDisable, appearance, ...restProps }: ProgressProps) => React.ReactNode;
 //# sourceMappingURL=Progress.d.ts.map

package/dist/components/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAmB7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD;;GAEG;AACH,eAAO,MAAM,QAAQ,gDAKlB,aAAa,KAAG,KAAK,CAAC,SAmBxB,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../../src/components/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAmBvF,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,UAAU,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,GAAG,KAAK,MAAM,EAAE,GAAG,IAAI,MAAM,EAAE,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,2DAMtB,aAAa,KAAG,KAAK,CAAC,SA6BxB,CAAC"}

package/dist/components/Progress/Progress.js

@@ -19,17 +19,42 @@ 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 = (_param)=>{
-    var { value = 0, appearance = 'accent', height } = _param, restProps = _object_without_properties(_param, [
+    var { value = 0, height, trackDisable = false, appearance = 'accent' } = _param, restProps = _object_without_properties(_param, [
         "value",
-        "appearance",
-        "height"
+        "height",
+        "trackDisable",
+        "appearance"
     ]);
     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 = _object_spread_props(_object_spread({}, styleHeight, appearanceStyles), {
+        '--vkui_internal_Progress_progress': progress
+    });
     return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
         "aria-valuenow": value,
         title: title
@@ -37,14 +62,8 @@ const PROGRESS_MAX_VALUE = 100;
         role: "progressbar",
         "aria-valuemin": PROGRESS_MIN_VALUE,
         "aria-valuemax": PROGRESS_MAX_VALUE,
-        baseClassName: classNames("vkuiProgress__host", stylesAppearance[appearance]),
-        baseStyle: styleHeight,
-        children: /*#__PURE__*/ _jsx("div", {
-            className: "vkuiProgress__in",
-            style: {
-                width: `${progress}%`
-            }
-        })
+        baseClassName: classNames("vkuiProgress__host", trackDisable && "vkuiProgress__trackDisable", appearanceClassName),
+        baseStyle: style
     }));
 };
 

package/dist/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","stylesAppearance","accent","positive","negative","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","baseStyle","div","className","style","width"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,mBAAmB;IACvBC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;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;QAAC,EACvBC,QAAQ,CAAC,EACTC,aAAa,QAAQ,EACrBP,MAAM,EAEQ,WADXQ;QAHHF;QACAC;QACAP;;IAGA,MAAMS,WAAWhB,MAAMa,OAAOH,oBAAoBC;IAClD,MAAMM,QAAQ,GAAGD,SAAS,GAAG,EAAEL,oBAAoB;IACnD,MAAMO,cAAcZ,0BAA0BC;IAE9C,qBACE,KAACN;QACCkB,iBAAeN;QACfI,OAAOA;OACHF;QACJK,MAAK;QACLC,iBAAeX;QACfY,iBAAeX;QACfY,eAAexB,iCAAwBG,gBAAgB,CAACY,WAAW;QACnEU,WAAWN;kBAEX,cAAA,KAACO;YAAIC,SAAS;YAAaC,OAAO;gBAAEC,OAAO,GAAGZ,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","stylesAppearance","accent","positive","negative","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","baseStyle"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,wBAAqB;AAE3C,SAASC,aAAa,QAAQ,oCAAiC;AAG/D,MAAMC,mBAA2C;IAC/CC,MAAM;IACNC,QAAQ;IACRC,QAAQ;AACV;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;gBAAWP,gBAAgB,CAACW,WAAW;aAAC;QAClD;YAAS;gBACP,OAAO;oBAAC;wBAAE,6CAA6CA;oBAAW;oBAAGJ;iBAAU;YACjF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,WAAW;QAAC,EACvBC,QAAQ,CAAC,EACTR,MAAM,EACNS,eAAe,KAAK,EACpBH,aAAa,QAAQ,EAEP,WADXI;QAJHF;QACAR;QACAS;QACAH;;IAGA,MAAMK,WAAWlB,MAAMe,OAAOL,oBAAoBC;IAClD,MAAMQ,QAAQ,GAAGD,SAAS,GAAG,EAAEP,oBAAoB;IACnD,MAAMS,cAAcd,0BAA0BC;IAE9C,MAAM,CAACc,kBAAkBC,oBAAoB,GAAGV,kBAAkBC;IAElE,MAAMU,QAAQ,wCACTH,aACAC;QACH,qCAAqCH;;IAGvC,qBACE,KAACjB;QACCuB,iBAAeT;QACfI,OAAOA;OACHF;QACJQ,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,eAAe7B,iCAEbiB,8CACAM;QAEFO,WAAWN;;AAGjB,EAAE"}

package/dist/components/PullToRefresh/PullToRefresh.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAoD,MAAM,eAAe,CAAC;AAEhG,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,KAAK,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqB/E,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,KAAG,KAAK,CAAC,SAqN7B,CAAC"}
+{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,QAAQ,EAAoD,MAAM,eAAe,CAAC;AAEhG,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,KAAK,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAElF,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqB/E,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,8DAM3B,kBAAkB,KAAG,KAAK,CAAC,SAqN7B,CAAC"}

package/dist/components/PullToRefresh/PullToRefreshSpinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PullToRefreshSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,gEAO9B,yBAAyB,KAAG,KAAK,CAAC,SA6CpC,CAAC"}
+{"version":3,"file":"PullToRefreshSpinner.d.ts","sourceRoot":"","sources":["../../../src/components/PullToRefresh/PullToRefreshSpinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,MAAM,WAAW,yBAA0B,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,oBAAoB,GAAI,6DAOlC,yBAAyB,KAAG,KAAK,CAAC,SA6CpC,CAAC"}

package/dist/components/RadioGroup/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,2BAGpB,eAAe,KAAG,KAAK,CAAC,SAU1B,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;CAClC;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,wBAGxB,eAAe,KAAG,KAAK,CAAC,SAU1B,CAAC"}