@alfalab/core-components 48.8.0-beta.0 → 48.8.0

package/popover/esm/Component.js

@@ -1,11 +1,14 @@
 import { __assign } from 'tslib';
-import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
+import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
-import { offset, flip, shift, size, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
+import maxSize from 'popper-max-size-modifier';
 import { Portal } from '../../portal/esm';
 import { Stack } from '../../stack/esm';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { stackingOrder } from '@alfalab/stack-context';
 
 var styles = {"component":"popover__component_chanz","inner":"popover__inner_chanz","scrollableContent":"popover__scrollableContent_chanz","arrow":"popover__arrow_chanz","enter":"popover__enter_chanz","enterActive":"popover__enterActive_chanz","exit":"popover__exit_chanz","exitActive":"popover__exitActive_chanz"};
@@ -20,10 +23,25 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
+var availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn: function (_a) {
+        var _b = _a.state, modifiersData = _b.modifiersData, popper = _b.elements.popper;
+        var height = modifiersData.maxSize.height;
+        var content = popper.querySelector(".".concat(styles.scrollableContent));
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = "".concat(height, "px");
+        }
+    },
+};
 var DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 var MIN_DISTANCE_TO_EDGE = 24;
-function getArrowPadding(placement) {
+function getArrowPadding(_a) {
+    var placement = _a.placement;
     if (placement === 'right-end' || placement === 'left-end') {
         return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
     }
@@ -38,70 +56,101 @@ function getArrowPadding(placement) {
     }
     return 0;
 }
-function PopoverRender() {
-    var _a = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        _a[_i] = arguments[_i];
-    }
-    var _b = _a[0], children = _b.children, getPortalContainer = _b.getPortalContainer, _c = _b.transition, transition = _c === void 0 ? DEFAULT_TRANSITION : _c, anchorElement = _b.anchorElement, _d = _b.useAnchorWidth, useAnchorWidth = _d === void 0 ? false : _d, _e = _b.offset, offsetFromProps = _e === void 0 ? DEFAULT_OFFSET : _e, _f = _b.withArrow, withArrow = _f === void 0 ? false : _f, _g = _b.withTransition, withTransition = _g === void 0 ? true : _g, _h = _b.position, position = _h === void 0 ? 'left' : _h, _j = _b.preventFlip, preventFlip = _j === void 0 ? false : _j, popperClassName = _b.popperClassName, arrowClassName = _b.arrowClassName, className = _b.className, open = _b.open, dataTestId = _b.dataTestId, _k = _b.transitionDuration, transitionDuration = _k === void 0 ? "".concat(transition.timeout, "ms") : _k, _l = _b.zIndex, zIndex = _l === void 0 ? stackingOrder.POPOVER : _l, fallbackPlacements = _b.fallbackPlacements, _m = _b.preventOverflow, preventOverflow = _m === void 0 ? true : _m, _o = _b.availableHeight, availableHeight = _o === void 0 ? false : _o, updateRef = _b.update, ref = _a[1];
-    var arrowElementRef = useRef(null);
-    var rootElementRef = useRef(null);
-    var _p = useState(), height = _p[0], setHeight = _p[1];
-    var _q = useState(), width = _q[0], setWidth = _q[1];
-    var floatingMiddlewares = useMemo(function () {
-        var crossAxis = offsetFromProps[0], mainAxis = offsetFromProps[1];
-        var middlewares = [
-            offset({ mainAxis: mainAxis, crossAxis: crossAxis }),
-            flip({
-                fallbackPlacements: fallbackPlacements,
-                mainAxis: !preventFlip,
-                flipAlignment: false,
-            }),
-        ];
-        if (!preventOverflow) {
-            middlewares.push(shift());
-        }
-        middlewares.push(size({
-            apply: function (_a) {
-                var nextHeight = _a.availableHeight, reference = _a.rects.reference;
-                setWidth(reference.width);
-                setHeight(nextHeight);
-            },
-        }));
+var Popover = forwardRef(function (_a, ref) {
+    var children = _a.children, getPortalContainer = _a.getPortalContainer, _b = _a.transition, transition = _b === void 0 ? DEFAULT_TRANSITION : _b, anchorElement = _a.anchorElement, useAnchorWidth = _a.useAnchorWidth, _c = _a.offset, offset = _c === void 0 ? DEFAULT_OFFSET : _c, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.withTransition, withTransition = _e === void 0 ? true : _e, _f = _a.position, position = _f === void 0 ? 'left' : _f, preventFlip = _a.preventFlip, popperClassName = _a.popperClassName, arrowClassName = _a.arrowClassName, className = _a.className, open = _a.open, dataTestId = _a.dataTestId, update = _a.update, _g = _a.transitionDuration, transitionDuration = _g === void 0 ? "".concat(transition.timeout, "ms") : _g, _h = _a.zIndex, zIndex = _h === void 0 ? stackingOrder.POPOVER : _h, fallbackPlacements = _a.fallbackPlacements, _j = _a.preventOverflow, preventOverflow = _j === void 0 ? true : _j, _k = _a.availableHeight, availableHeight = _k === void 0 ? false : _k;
+    var _l = useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var updatePopperRef = useRef();
+    var popperRef = useRef(null);
+    var innerRef = useRef(null);
+    var popperModifiers = useMemo(function () {
+        var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            middlewares.push(arrow(function (state) { return ({
-                element: arrowElementRef,
-                padding: getArrowPadding(state.placement),
-            }); }));
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
+        }
+        if (preventFlip) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
+        }
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: fallbackPlacements } });
+        }
+        if (preventOverflow) {
+            modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
         }
-        return middlewares;
-    }, [offsetFromProps, fallbackPlacements, preventFlip, withArrow, preventOverflow]);
-    var _r = useFloating({
+        if (availableHeight) {
+            modifiers.push(__assign(__assign({}, maxSize), { options: {} }));
+            modifiers.push(__assign(__assign({}, availableHieghtModifier), { options: {} }));
+        }
+        return modifiers;
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = usePopper(referenceElement, popperElement, {
         placement: position,
-        elements: {
-            reference: anchorElement instanceof HTMLElement ? anchorElement : anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.current,
-        },
-        whileElementsMounted: autoUpdate,
-        middleware: floatingMiddlewares,
-        // strategy 'absolute' causes floating element resize on scroll so used 'fixed'
-        strategy: 'fixed',
-    }), floatingStyles = _r.floatingStyles, refs = _r.refs, middlewareData = _r.middlewareData, placement = _r.placement, update = _r.update;
+        modifiers: popperModifiers,
+    }), popperStyles = _p.styles, attributes = _p.attributes, updatePopper = _p.update;
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    useLayoutEffect_SAFE_FOR_SSR(function () {
+        setReferenceElement(anchorElement);
+    }, [anchorElement]);
+    useEffect(function () {
+        if (updatePopper) {
+            updatePopper();
+        }
+    }, [updatePopper, arrowElement, children]);
+    useEffect(function () {
+        if (update && updatePopper) {
+            // eslint-disable-next-line no-param-reassign
+            update.current = updatePopper;
+        }
+    });
+    useEffect(function () {
+        if (useAnchorWidth) {
+            var updatePopoverWidth = function () { var _a; return (_a = updatePopperRef.current) === null || _a === void 0 ? void 0 : _a.call(updatePopperRef); };
+            var ResizeObserver_1 = window.ResizeObserver || ResizeObserver;
+            var observer_1 = new ResizeObserver_1(updatePopoverWidth);
+            if (anchorElement) {
+                observer_1.observe(anchorElement);
+            }
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+        return function () { return ({}); };
+    }, [anchorElement, useAnchorWidth]);
     var renderContent = function (computedZIndex) {
         var _a;
-        var _b, _c, _d, _e;
-        return (React.createElement("div", { ref: mergeRefs([ref, rootElementRef, refs.setFloating]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? width : undefined }, floatingStyles), (floatingStyles.transform ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className), "data-popper-placement": placement },
-            React.createElement("div", { className: cn(styles.inner, popperClassName), style: transitionDuration === "".concat(DEFAULT_TRANSITION.timeout, "ms")
-                    ? undefined
-                    : { transitionDuration: transitionDuration } },
-                React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)), style: { height: availableHeight ? height : undefined } }, children),
-                withArrow && (React.createElement("div", { ref: arrowElementRef, style: {
-                        transform: "translate(".concat((_c = (_b = middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.x) !== null && _c !== void 0 ? _c : 0, "px, ").concat((_e = (_d = middlewareData.arrow) === null || _d === void 0 ? void 0 : _d.y) !== null && _e !== void 0 ? _e : 0, "px)"),
-                    }, className: cn(styles.arrow, arrowClassName) })))));
+        var _b;
+        return (React.createElement("div", __assign({ ref: mergeRefs([ref, popperRef, setPopperElement]), style: __assign(__assign({ zIndex: computedZIndex, width: useAnchorWidth ? referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetWidth : undefined }, popperStyles.popper), (((_b = popperStyles.popper) === null || _b === void 0 ? void 0 : _b.transform) ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn(styles.component, className) }, attributes.popper),
+            React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
+                React.createElement("div", { className: cn((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
+                withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
     };
-    useImperativeHandle(updateRef, function () { return update; }, [update]);
-    return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: rootElementRef }, transition, { in: open }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
-}
-var Popover = forwardRef(PopoverRender);
+    return (React.createElement(Stack, { value: zIndex }, function (computedZIndex) { return (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, __assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef }, transition, { in: open, onEntering: function (node, isAppearing) {
+            var _a;
+            // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
+            if (innerRef.current &&
+                transitionDuration !== "".concat(DEFAULT_TRANSITION.timeout, "ms")) {
+                innerRef.current.style.setProperty('transition-duration', transitionDuration);
+            }
+            (_a = transition === null || transition === void 0 ? void 0 : transition.onEntering) === null || _a === void 0 ? void 0 : _a.call(transition, node, isAppearing);
+        } }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
+});
 Popover.displayName = 'Popover';
 
 export { Popover };

package/popover/esm/index.css

@@ -40,8 +40,6 @@
     overflow-y: auto;
 } .popover__arrow_chanz {
     z-index: 1;
-    position: absolute;
-    bottom: 100%;
 } .popover__arrow_chanz:after {
     content: '';
     display: block;

package/popover/esm/index.js

@@ -2,9 +2,12 @@ export { Popover } from './Component.js';
 import 'tslib';
 import 'react';
 import 'react-merge-refs';
+import 'react-popper';
 import 'react-transition-group';
-import '@floating-ui/react-dom';
+import '@juggle/resize-observer';
 import 'classnames';
+import 'popper-max-size-modifier';
 import '../../portal/esm';
 import '../../stack/esm';
+import '@alfalab/hooks';
 import '@alfalab/stack-context';

package/popover/index.css

@@ -40,8 +40,6 @@
     overflow-y: auto;
 } .popover__arrow_chanz {
     z-index: 1;
-    position: absolute;
-    bottom: 100%;
 } .popover__arrow_chanz:after {
     content: '';
     display: block;

package/popover/modern/Component.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { CSSProperties, MutableRefObject, ReactNode, RefObject } from "react";
+import { CSSProperties, MutableRefObject, ReactNode } from "react";
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { Placement } from '@floating-ui/react-dom';
-type Position = Placement;
-type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
+import { BasePlacement, VariationPlacement } from '@popperjs/core';
+type RefElement = HTMLElement | null;
+type Position = BasePlacement | VariationPlacement;
+type PopoverProps = {
     /**
      * Управление состоянием поповера (открыт/закрыт)
      */
@@ -13,36 +14,30 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     /**
      * Элемент, относительного которого появляется поповер
      */
-    anchorElement: AnchorElement | null | RefObject<AnchorElement>;
+    anchorElement: RefElement;
     /**
      * Использовать ширину родительского элемента
-     * @default false
      */
     useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
-     * @default left
      */
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
      * Например, если места снизу недостаточно, то он все равно будет показан снизу
-     * @default false
      */
     preventFlip?: boolean;
     /**
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
-     * @default true
      */
     preventOverflow?: boolean;
     /**
-     * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
-     * @default false
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
      */
     availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
-     * @default false
      */
     withArrow?: boolean;
     /**
@@ -73,7 +68,6 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     transitionDuration?: CSSProperties['transitionDuration'];
     /**
      * Рендерит компонент, обернутый в Transition
-     * @default true
      */
     withTransition?: boolean;
     /**
@@ -82,7 +76,6 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     dataTestId?: string;
     /**
      * Хранит функцию, с помощью которой можно обновить положение компонента
-     * @deprecated Отсутствует необходимость использования в связи с миграцией на floating-ui
      */
     update?: MutableRefObject<(() => void) | undefined>;
     /**
@@ -104,5 +97,5 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
      */
     children?: ReactNode;
 };
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps<HTMLElement> & React.RefAttributes<HTMLDivElement>> & (<AnchorElement extends HTMLElement = HTMLElement>(props: PopoverProps<AnchorElement> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null);
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };

package/popover/modern/Component.js

@@ -1,10 +1,13 @@
-import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
+import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
 import mergeRefs from 'react-merge-refs';
+import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
-import { offset, flip, shift, size, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
+import { ResizeObserver } from '@juggle/resize-observer';
 import cn from 'classnames';
+import maxSize from 'popper-max-size-modifier';
 import { Portal } from '../../portal/modern';
 import { Stack } from '../../stack/modern';
+import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 import { stackingOrder } from '@alfalab/stack-context';
 
 const styles = {"component":"popover__component_chanz","inner":"popover__inner_chanz","scrollableContent":"popover__scrollableContent_chanz","arrow":"popover__arrow_chanz","enter":"popover__enter_chanz","enterActive":"popover__enterActive_chanz","exit":"popover__exit_chanz","exitActive":"popover__exitActive_chanz"};
@@ -19,10 +22,23 @@ const CSS_TRANSITION_CLASS_NAMES = {
     exit: styles.exit,
     exitActive: styles.exitActive,
 };
+const availableHieghtModifier = {
+    name: 'availableHeight',
+    enabled: true,
+    phase: 'beforeWrite',
+    requires: ['maxSize'],
+    fn({ state: { modifiersData, elements: { popper }, }, }) {
+        const { height } = modifiersData.maxSize;
+        const content = popper.querySelector(`.${styles.scrollableContent}`);
+        if (content && !content.style.maxHeight) {
+            content.style.maxHeight = `${height}px`;
+        }
+    },
+};
 const DEFAULT_OFFSET = [0, 0];
 // Минимальное расстояние стрелки до края поповера
 const MIN_DISTANCE_TO_EDGE = 24;
-function getArrowPadding(placement) {
+function getArrowPadding({ placement, }) {
     if (placement === 'right-end' || placement === 'left-end') {
         return { top: MIN_DISTANCE_TO_EDGE, right: 0, bottom: 0, left: 0 };
     }
@@ -37,65 +53,100 @@ function getArrowPadding(placement) {
     }
     return 0;
 }
-function PopoverRender(...[{ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth = false, offset: offsetFromProps = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip = false, popperClassName, arrowClassName, className, open, dataTestId, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, update: updateRef, }, ref,]) {
-    const arrowElementRef = useRef(null);
-    const rootElementRef = useRef(null);
-    const [height, setHeight] = useState();
-    const [width, setWidth] = useState();
-    const floatingMiddlewares = useMemo(() => {
-        const [crossAxis, mainAxis] = offsetFromProps;
-        const middlewares = [
-            offset({ mainAxis, crossAxis }),
-            flip({
-                fallbackPlacements,
-                mainAxis: !preventFlip,
-                flipAlignment: false,
-            }),
-        ];
-        if (!preventOverflow) {
-            middlewares.push(shift());
-        }
-        middlewares.push(size({
-            apply({ availableHeight: nextHeight, rects: { reference } }) {
-                setWidth(reference.width);
-                setHeight(nextHeight);
-            },
-        }));
+const Popover = forwardRef(({ children, getPortalContainer, transition = DEFAULT_TRANSITION, anchorElement, useAnchorWidth, offset = DEFAULT_OFFSET, withArrow = false, withTransition = true, position = 'left', preventFlip, popperClassName, arrowClassName, className, open, dataTestId, update, transitionDuration = `${transition.timeout}ms`, zIndex = stackingOrder.POPOVER, fallbackPlacements, preventOverflow = true, availableHeight = false, }, ref) => {
+    const [referenceElement, setReferenceElement] = useState(anchorElement);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const updatePopperRef = useRef();
+    const popperRef = useRef(null);
+    const innerRef = useRef(null);
+    const popperModifiers = useMemo(() => {
+        const modifiers = [{ name: 'offset', options: { offset } }];
         if (withArrow) {
-            middlewares.push(arrow((state) => ({
-                element: arrowElementRef,
-                padding: getArrowPadding(state.placement),
-            })));
+            modifiers.push({
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                    padding: getArrowPadding,
+                },
+            });
+        }
+        if (preventFlip) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
+        }
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
+        }
+        if (preventOverflow) {
+            modifiers.push({ name: 'preventOverflow', options: { mainAxis: false } });
+        }
+        if (availableHeight) {
+            modifiers.push({ ...maxSize, options: {} });
+            modifiers.push({ ...availableHieghtModifier, options: {} });
         }
-        return middlewares;
-    }, [offsetFromProps, fallbackPlacements, preventFlip, withArrow, preventOverflow]);
-    const { floatingStyles, refs, middlewareData, placement, update } = useFloating({
+        return modifiers;
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
         placement: position,
-        elements: {
-            reference: anchorElement instanceof HTMLElement ? anchorElement : anchorElement?.current,
-        },
-        whileElementsMounted: autoUpdate,
-        middleware: floatingMiddlewares,
-        // strategy 'absolute' causes floating element resize on scroll so used 'fixed'
-        strategy: 'fixed',
+        modifiers: popperModifiers,
     });
-    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, rootElementRef, refs.setFloating]), style: {
+    if (updatePopper) {
+        updatePopperRef.current = updatePopper;
+    }
+    useLayoutEffect_SAFE_FOR_SSR(() => {
+        setReferenceElement(anchorElement);
+    }, [anchorElement]);
+    useEffect(() => {
+        if (updatePopper) {
+            updatePopper();
+        }
+    }, [updatePopper, arrowElement, children]);
+    useEffect(() => {
+        if (update && updatePopper) {
+            // eslint-disable-next-line no-param-reassign
+            update.current = updatePopper;
+        }
+    });
+    useEffect(() => {
+        if (useAnchorWidth) {
+            const updatePopoverWidth = () => updatePopperRef.current?.();
+            const ResizeObserver$1 = window.ResizeObserver || ResizeObserver;
+            const observer = new ResizeObserver$1(updatePopoverWidth);
+            if (anchorElement) {
+                observer.observe(anchorElement);
+            }
+            return () => {
+                observer.disconnect();
+            };
+        }
+        return () => ({});
+    }, [anchorElement, useAnchorWidth]);
+    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, popperRef, setPopperElement]), style: {
             zIndex: computedZIndex,
-            width: useAnchorWidth ? width : undefined,
-            ...floatingStyles,
-            ...(floatingStyles.transform ? null : { visibility: 'hidden' }),
-        }, "data-test-id": dataTestId, className: cn(styles.component, className), "data-popper-placement": placement },
-        React.createElement("div", { className: cn(styles.inner, popperClassName), style: transitionDuration === `${DEFAULT_TRANSITION.timeout}ms`
-                ? undefined
-                : { transitionDuration } },
-            React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }), style: { height: availableHeight ? height : undefined } }, children),
-            withArrow && (React.createElement("div", { ref: arrowElementRef, style: {
-                    transform: `translate(${middlewareData.arrow?.x ?? 0}px, ${middlewareData.arrow?.y ?? 0}px)`,
-                }, className: cn(styles.arrow, arrowClassName) })))));
-    useImperativeHandle(updateRef, () => update, [update]);
-    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: rootElementRef, ...transition, in: open }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
-}
-const Popover = forwardRef(PopoverRender);
+            width: useAnchorWidth ? referenceElement?.offsetWidth : undefined,
+            ...popperStyles.popper,
+            ...(popperStyles.popper?.transform ? null : { visibility: 'hidden' }),
+        }, "data-test-id": dataTestId, className: cn(styles.component, className), ...attributes.popper },
+        React.createElement("div", { className: cn(styles.inner, popperClassName), ref: innerRef },
+            React.createElement("div", { className: cn({ [styles.scrollableContent]: availableHeight }) }, children),
+            withArrow && (React.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn(styles.arrow, arrowClassName) })))));
+    return (React.createElement(Stack, { value: zIndex }, (computedZIndex) => (React.createElement(Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React.createElement(CSSTransition, { unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: popperRef, ...transition, in: open, onEntering: (node, isAppearing) => {
+            // Меняем transition-duration только в случае, если передано значение отличное от дефолтного.
+            if (innerRef.current &&
+                transitionDuration !== `${DEFAULT_TRANSITION.timeout}ms`) {
+                innerRef.current.style.setProperty('transition-duration', transitionDuration);
+            }
+            transition?.onEntering?.(node, isAppearing);
+        } }, renderContent(computedZIndex))) : (open && renderContent(computedZIndex))))));
+});
 Popover.displayName = 'Popover';
 
 export { Popover };

package/popover/modern/index.css

@@ -40,8 +40,6 @@
     overflow-y: auto;
 } .popover__arrow_chanz {
     z-index: 1;
-    position: absolute;
-    bottom: 100%;
 } .popover__arrow_chanz:after {
     content: '';
     display: block;

package/popover/modern/index.js

@@ -1,9 +1,12 @@
 export { Popover } from './Component.js';
 import 'react';
 import 'react-merge-refs';
+import 'react-popper';
 import 'react-transition-group';
-import '@floating-ui/react-dom';
+import '@juggle/resize-observer';
 import 'classnames';
+import 'popper-max-size-modifier';
 import '../../portal/modern';
 import '../../stack/modern';
+import '@alfalab/hooks';
 import '@alfalab/stack-context';

package/popover/moderncssm/Component.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react-transition-group" />
 /// <reference types="react" />
 import React from 'react';
-import { CSSProperties, MutableRefObject, ReactNode, RefObject } from "react";
+import { CSSProperties, MutableRefObject, ReactNode } from "react";
 import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import { Placement } from '@floating-ui/react-dom';
-type Position = Placement;
-type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
+import { BasePlacement, VariationPlacement } from '@popperjs/core';
+type RefElement = HTMLElement | null;
+type Position = BasePlacement | VariationPlacement;
+type PopoverProps = {
     /**
      * Управление состоянием поповера (открыт/закрыт)
      */
@@ -13,36 +14,30 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     /**
      * Элемент, относительного которого появляется поповер
      */
-    anchorElement: AnchorElement | null | RefObject<AnchorElement>;
+    anchorElement: RefElement;
     /**
      * Использовать ширину родительского элемента
-     * @default false
      */
     useAnchorWidth?: boolean;
     /**
      * Позиционирование поповера
-     * @default left
      */
     position?: Position;
     /**
      * Запрещает поповеру менять свою позицию.
      * Например, если места снизу недостаточно, то он все равно будет показан снизу
-     * @default false
      */
     preventFlip?: boolean;
     /**
      * Запрещает поповеру менять свою позицию, если он не влезает в видимую область.
-     * @default true
      */
     preventOverflow?: boolean;
     /**
-     * Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
-     * @default false
+     *  Позволяет поповеру подствраивать свою высоту под границы экрана, если из-за величины контента он выходит за рамки видимой области экрана
      */
     availableHeight?: boolean;
     /**
      * Если `true`, будет отрисована стрелочка
-     * @default false
      */
     withArrow?: boolean;
     /**
@@ -73,7 +68,6 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     transitionDuration?: CSSProperties['transitionDuration'];
     /**
      * Рендерит компонент, обернутый в Transition
-     * @default true
      */
     withTransition?: boolean;
     /**
@@ -82,7 +76,6 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
     dataTestId?: string;
     /**
      * Хранит функцию, с помощью которой можно обновить положение компонента
-     * @deprecated Отсутствует необходимость использования в связи с миграцией на floating-ui
      */
     update?: MutableRefObject<(() => void) | undefined>;
     /**
@@ -104,5 +97,5 @@ type PopoverProps<AnchorElement extends HTMLElement = HTMLElement> = {
      */
     children?: ReactNode;
 };
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps<HTMLElement> & React.RefAttributes<HTMLDivElement>> & (<AnchorElement extends HTMLElement = HTMLElement>(props: PopoverProps<AnchorElement> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null);
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
 export { Position, PopoverProps, Popover };