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

package/popover/Component.js

@@ -3,11 +3,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
+var reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
-var reactDom = require('@floating-ui/react-dom');
+var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
+var maxSize = require('popper-max-size-modifier');
 var coreComponentsPortal = require('../portal');
 var coreComponentsStack = require('../stack');
+var hooks = require('@alfalab/hooks');
 var stackContext = require('@alfalab/stack-context');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -15,6 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
 
 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"};
 require('./index.css');
@@ -28,10 +32,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 };
     }
@@ -46,70 +65,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 ? stackContext.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 = React.useRef(null);
-    var rootElementRef = React.useRef(null);
-    var _p = React.useState(), height = _p[0], setHeight = _p[1];
-    var _q = React.useState(), width = _q[0], setWidth = _q[1];
-    var floatingMiddlewares = React.useMemo(function () {
-        var crossAxis = offsetFromProps[0], mainAxis = offsetFromProps[1];
-        var middlewares = [
-            reactDom.offset({ mainAxis: mainAxis, crossAxis: crossAxis }),
-            reactDom.flip({
-                fallbackPlacements: fallbackPlacements,
-                mainAxis: !preventFlip,
-                flipAlignment: false,
-            }),
-        ];
-        if (!preventOverflow) {
-            middlewares.push(reactDom.shift());
-        }
-        middlewares.push(reactDom.size({
-            apply: function (_a) {
-                var nextHeight = _a.availableHeight, reference = _a.rects.reference;
-                setWidth(reference.width);
-                setHeight(nextHeight);
-            },
-        }));
+var Popover = React.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 ? stackContext.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 = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var updatePopperRef = React.useRef();
+    var popperRef = React.useRef(null);
+    var innerRef = React.useRef(null);
+    var popperModifiers = React.useMemo(function () {
+        var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            middlewares.push(reactDom.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 = reactDom.useFloating({
+        if (availableHeight) {
+            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
+            modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
+        }
+        return modifiers;
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
-        elements: {
-            reference: anchorElement instanceof HTMLElement ? anchorElement : anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.current,
-        },
-        whileElementsMounted: reactDom.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;
+    }
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        setReferenceElement(anchorElement);
+    }, [anchorElement]);
+    React.useEffect(function () {
+        if (updatePopper) {
+            updatePopper();
+        }
+    }, [updatePopper, arrowElement, children]);
+    React.useEffect(function () {
+        if (update && updatePopper) {
+            // eslint-disable-next-line no-param-reassign
+            update.current = updatePopper;
+        }
+    });
+    React.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.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__default.default.createElement("div", { ref: mergeRefs__default.default([ref, rootElementRef, refs.setFloating]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? width : undefined }, floatingStyles), (floatingStyles.transform ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles.component, className), "data-popper-placement": placement },
-            React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), style: transitionDuration === "".concat(DEFAULT_TRANSITION.timeout, "ms")
-                    ? undefined
-                    : { transitionDuration: transitionDuration } },
-                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)), style: { height: availableHeight ? height : undefined } }, children),
-                withArrow && (React__default.default.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__default.default(styles.arrow, arrowClassName) })))));
+        var _b;
+        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__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__default.default(styles.component, className) }, attributes.popper),
+            React__default.default.createElement("div", { className: cn__default.default(styles.inner, popperClassName), ref: innerRef },
+                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles.scrollableContent] = availableHeight, _a)) }, children),
+                withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles.arrow, arrowClassName) })))));
     };
-    React.useImperativeHandle(updateRef, function () { return update; }, [update]);
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: rootElementRef }, transition, { in: open }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
-}
-var Popover = React.forwardRef(PopoverRender);
+    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__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';
 
 exports.Popover = Popover;

package/popover/cssm/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/cssm/Component.js

@@ -3,11 +3,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
+var reactPopper = require('react-popper');
 var reactTransitionGroup = require('react-transition-group');
-var reactDom = require('@floating-ui/react-dom');
+var resizeObserver = require('@juggle/resize-observer');
 var cn = require('classnames');
+var maxSize = require('popper-max-size-modifier');
 var coreComponentsPortal = require('../../portal/cssm');
 var coreComponentsStack = require('../../stack/cssm');
+var hooks = require('@alfalab/hooks');
 var stackContext = require('@alfalab/stack-context');
 var styles = require('./index.module.css');
 
@@ -16,6 +19,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
+var maxSize__default = /*#__PURE__*/_interopDefaultCompat(maxSize);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var DEFAULT_TRANSITION = {
@@ -27,10 +31,25 @@ var CSS_TRANSITION_CLASS_NAMES = {
     exit: styles__default.default.exit,
     exitActive: styles__default.default.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__default.default.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 };
     }
@@ -45,70 +64,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 ? stackContext.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 = React.useRef(null);
-    var rootElementRef = React.useRef(null);
-    var _p = React.useState(), height = _p[0], setHeight = _p[1];
-    var _q = React.useState(), width = _q[0], setWidth = _q[1];
-    var floatingMiddlewares = React.useMemo(function () {
-        var crossAxis = offsetFromProps[0], mainAxis = offsetFromProps[1];
-        var middlewares = [
-            reactDom.offset({ mainAxis: mainAxis, crossAxis: crossAxis }),
-            reactDom.flip({
-                fallbackPlacements: fallbackPlacements,
-                mainAxis: !preventFlip,
-                flipAlignment: false,
-            }),
-        ];
-        if (!preventOverflow) {
-            middlewares.push(reactDom.shift());
-        }
-        middlewares.push(reactDom.size({
-            apply: function (_a) {
-                var nextHeight = _a.availableHeight, reference = _a.rects.reference;
-                setWidth(reference.width);
-                setHeight(nextHeight);
-            },
-        }));
+var Popover = React.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 ? stackContext.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 = React.useState(anchorElement), referenceElement = _l[0], setReferenceElement = _l[1];
+    var _m = React.useState(null), popperElement = _m[0], setPopperElement = _m[1];
+    var _o = React.useState(null), arrowElement = _o[0], setArrowElement = _o[1];
+    var updatePopperRef = React.useRef();
+    var popperRef = React.useRef(null);
+    var innerRef = React.useRef(null);
+    var popperModifiers = React.useMemo(function () {
+        var modifiers = [{ name: 'offset', options: { offset: offset } }];
         if (withArrow) {
-            middlewares.push(reactDom.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 = reactDom.useFloating({
+        if (availableHeight) {
+            modifiers.push(tslib.__assign(tslib.__assign({}, maxSize__default.default), { options: {} }));
+            modifiers.push(tslib.__assign(tslib.__assign({}, availableHieghtModifier), { options: {} }));
+        }
+        return modifiers;
+    }, [
+        offset,
+        withArrow,
+        preventFlip,
+        fallbackPlacements,
+        preventOverflow,
+        availableHeight,
+        arrowElement,
+    ]);
+    var _p = reactPopper.usePopper(referenceElement, popperElement, {
         placement: position,
-        elements: {
-            reference: anchorElement instanceof HTMLElement ? anchorElement : anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.current,
-        },
-        whileElementsMounted: reactDom.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;
+    }
+    hooks.useLayoutEffect_SAFE_FOR_SSR(function () {
+        setReferenceElement(anchorElement);
+    }, [anchorElement]);
+    React.useEffect(function () {
+        if (updatePopper) {
+            updatePopper();
+        }
+    }, [updatePopper, arrowElement, children]);
+    React.useEffect(function () {
+        if (update && updatePopper) {
+            // eslint-disable-next-line no-param-reassign
+            update.current = updatePopper;
+        }
+    });
+    React.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.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__default.default.createElement("div", { ref: mergeRefs__default.default([ref, rootElementRef, refs.setFloating]), style: tslib.__assign(tslib.__assign({ zIndex: computedZIndex, width: useAnchorWidth ? width : undefined }, floatingStyles), (floatingStyles.transform ? null : { visibility: 'hidden' })), "data-test-id": dataTestId, className: cn__default.default(styles__default.default.component, className), "data-popper-placement": placement },
-            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), style: transitionDuration === "".concat(DEFAULT_TRANSITION.timeout, "ms")
-                    ? undefined
-                    : { transitionDuration: transitionDuration } },
-                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)), style: { height: availableHeight ? height : undefined } }, children),
-                withArrow && (React__default.default.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__default.default(styles__default.default.arrow, arrowClassName) })))));
+        var _b;
+        return (React__default.default.createElement("div", tslib.__assign({ ref: mergeRefs__default.default([ref, popperRef, setPopperElement]), style: tslib.__assign(tslib.__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__default.default(styles__default.default.component, className) }, attributes.popper),
+            React__default.default.createElement("div", { className: cn__default.default(styles__default.default.inner, popperClassName), ref: innerRef },
+                React__default.default.createElement("div", { className: cn__default.default((_a = {}, _a[styles__default.default.scrollableContent] = availableHeight, _a)) }, children),
+                withArrow && (React__default.default.createElement("div", { ref: setArrowElement, style: popperStyles.arrow, className: cn__default.default(styles__default.default.arrow, arrowClassName) })))));
     };
-    React.useImperativeHandle(updateRef, function () { return update; }, [update]);
-    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__assign({ unmountOnExit: true, classNames: CSS_TRANSITION_CLASS_NAMES, nodeRef: rootElementRef }, transition, { in: open }), renderContent(computedZIndex))) : (open && renderContent(computedZIndex)))); }));
-}
-var Popover = React.forwardRef(PopoverRender);
+    return (React__default.default.createElement(coreComponentsStack.Stack, { value: zIndex }, function (computedZIndex) { return (React__default.default.createElement(coreComponentsPortal.Portal, { getPortalContainer: getPortalContainer }, withTransition ? (React__default.default.createElement(reactTransitionGroup.CSSTransition, tslib.__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';
 
 exports.Popover = Popover;

package/popover/cssm/index.module.css

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

package/popover/esm/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 };