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

package/popover/esm/index.js

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

package/popover/index.css

@@ -1,4 +1,4 @@
-/* hash: 10brw */
+/* hash: 1rf7c */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
@@ -24,23 +24,25 @@
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --popover-border-color: transparent;
-} .popover__component_1o4df {
+} .popover__component_chanz {
     background-color: transparent;
     color: var(--color-light-text-primary);
-} .popover__inner_1o4df {
+} .popover__inner_chanz {
     position: relative;
     background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     will-change: transform;
-} .popover__scrollableContent_1o4df {
+} .popover__scrollableContent_chanz {
     position: relative;
     z-index: 2;
     overflow-y: auto;
-} .popover__arrow_1o4df {
+} .popover__arrow_chanz {
     z-index: 1;
-} .popover__arrow_1o4df:after {
+    position: absolute;
+    bottom: 100%;
+} .popover__arrow_chanz:after {
     content: '';
     display: block;
     position: absolute;
@@ -50,51 +52,51 @@
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
-} .popover__component_1o4df[data-popper-placement='left'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='left-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='left-end'] .popover__arrow_1o4df {
+} .popover__component_chanz[data-popper-placement='left'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='left-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='left-end'] .popover__arrow_chanz {
     right: 5px
-} .popover__component_1o4df[data-popper-placement='left'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='left-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='left-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='left'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='left-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='left-end'] .popover__arrow_chanz:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
-    } .popover__component_1o4df[data-popper-placement='right'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='right-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='right-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='right'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='right-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='right-end'] .popover__arrow_chanz {
     left: -7px
-} .popover__component_1o4df[data-popper-placement='right'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='right-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='right-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='right'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='right-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='right-end'] .popover__arrow_chanz:after {
         top: -6px;
         border-top: none;
         border-right: none;
-    } .popover__component_1o4df[data-popper-placement='top'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='top-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='top-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='top'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='top-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='top-end'] .popover__arrow_chanz {
     bottom: 5px
-} .popover__component_1o4df[data-popper-placement='top'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='top-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='top-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='top'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='top-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='top-end'] .popover__arrow_chanz:after {
         left: -6px;
         border-top: none;
         border-left: none;
-    } .popover__component_1o4df[data-popper-placement='bottom'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='bottom-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='bottom-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='bottom'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='bottom-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='bottom-end'] .popover__arrow_chanz {
     top: -7px
-} .popover__component_1o4df[data-popper-placement='bottom'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='bottom-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='bottom-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='bottom'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='bottom-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='bottom-end'] .popover__arrow_chanz:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
-    } .popover__enter_1o4df .popover__inner_1o4df {
+    } .popover__enter_chanz .popover__inner_chanz {
     opacity: 0;
     transform: scale(0.98);
-} .popover__enterActive_1o4df .popover__inner_1o4df {
+} .popover__enterActive_chanz .popover__inner_chanz {
     opacity: 1;
     transform: scale(1);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     transition-duration: 150ms;
-} .popover__exit_1o4df .popover__inner_1o4df {
+} .popover__exit_chanz .popover__inner_chanz {
     opacity: 1;
     transform: scale(1);
-} .popover__exitActive_1o4df .popover__inner_1o4df {
+} .popover__exitActive_chanz .popover__inner_chanz {
     opacity: 0;
     transform: scale(0.98);
     transition-property: opacity, transform;

package/popover/modern/Component.d.ts

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

package/popover/modern/Component.js

@@ -1,16 +1,13 @@
-import React, { forwardRef, useState, useRef, useMemo, useEffect } from 'react';
+import React, { forwardRef, useRef, useState, useMemo, useImperativeHandle } from 'react';
 import mergeRefs from 'react-merge-refs';
-import { usePopper } from 'react-popper';
 import { CSSTransition } from 'react-transition-group';
-import { ResizeObserver } from '@juggle/resize-observer';
+import { offset, flip, shift, size, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
 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_1o4df","inner":"popover__inner_1o4df","scrollableContent":"popover__scrollableContent_1o4df","arrow":"popover__arrow_1o4df","enter":"popover__enter_1o4df","enterActive":"popover__enterActive_1o4df","exit":"popover__exit_1o4df","exitActive":"popover__exitActive_1o4df"};
+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"};
 require('./index.css');
 
 const DEFAULT_TRANSITION = {
@@ -22,23 +19,10 @@ 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 };
     }
@@ -53,100 +37,65 @@ function getArrowPadding({ placement, }) {
     }
     return 0;
 }
-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) {
-            modifiers.push({
-                name: 'arrow',
-                options: {
-                    element: arrowElement,
-                    padding: getArrowPadding,
-                },
-            });
-        }
-        if (preventFlip) {
-            modifiers.push({ name: 'flip', options: { fallbackPlacements: [] } });
+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());
         }
-        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: {} });
+        middlewares.push(size({
+            apply({ availableHeight: nextHeight, rects: { reference } }) {
+                setWidth(reference.width);
+                setHeight(nextHeight);
+            },
+        }));
+        if (withArrow) {
+            middlewares.push(arrow((state) => ({
+                element: arrowElementRef,
+                padding: getArrowPadding(state.placement),
+            })));
         }
-        return modifiers;
-    }, [
-        offset,
-        withArrow,
-        preventFlip,
-        fallbackPlacements,
-        preventOverflow,
-        availableHeight,
-        arrowElement,
-    ]);
-    const { styles: popperStyles, attributes, update: updatePopper, } = usePopper(referenceElement, popperElement, {
+        return middlewares;
+    }, [offsetFromProps, fallbackPlacements, preventFlip, withArrow, preventOverflow]);
+    const { floatingStyles, refs, middlewareData, placement, update } = useFloating({
         placement: position,
-        modifiers: popperModifiers,
+        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',
     });
-    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: {
+    const renderContent = (computedZIndex) => (React.createElement("div", { ref: mergeRefs([ref, rootElementRef, refs.setFloating]), style: {
             zIndex: computedZIndex,
-            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))))));
-});
+            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);
 Popover.displayName = 'Popover';
 
 export { Popover };

package/popover/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 10brw */
+/* hash: 1rf7c */
 :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } /* deprecated */ :root {
     --color-light-modal-bg-primary: #fff;
@@ -24,23 +24,25 @@
 } :root {
 } /* сбрасывает синюю подсветку при нажатии */ :root {
     --popover-border-color: transparent;
-} .popover__component_1o4df {
+} .popover__component_chanz {
     background-color: transparent;
     color: var(--color-light-text-primary);
-} .popover__inner_1o4df {
+} .popover__inner_chanz {
     position: relative;
     background-color: var(--color-light-modal-bg-primary);
     box-shadow: var(--shadow-m);
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     will-change: transform;
-} .popover__scrollableContent_1o4df {
+} .popover__scrollableContent_chanz {
     position: relative;
     z-index: 2;
     overflow-y: auto;
-} .popover__arrow_1o4df {
+} .popover__arrow_chanz {
     z-index: 1;
-} .popover__arrow_1o4df:after {
+    position: absolute;
+    bottom: 100%;
+} .popover__arrow_chanz:after {
     content: '';
     display: block;
     position: absolute;
@@ -50,51 +52,51 @@
     border: 1px solid var(--popover-border-color);
     box-sizing: border-box;
     transform: rotate(45deg);
-} .popover__component_1o4df[data-popper-placement='left'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='left-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='left-end'] .popover__arrow_1o4df {
+} .popover__component_chanz[data-popper-placement='left'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='left-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='left-end'] .popover__arrow_chanz {
     right: 5px
-} .popover__component_1o4df[data-popper-placement='left'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='left-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='left-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='left'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='left-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='left-end'] .popover__arrow_chanz:after {
         top: -6px;
         border-bottom: none;
         border-left: none;
-    } .popover__component_1o4df[data-popper-placement='right'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='right-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='right-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='right'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='right-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='right-end'] .popover__arrow_chanz {
     left: -7px
-} .popover__component_1o4df[data-popper-placement='right'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='right-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='right-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='right'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='right-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='right-end'] .popover__arrow_chanz:after {
         top: -6px;
         border-top: none;
         border-right: none;
-    } .popover__component_1o4df[data-popper-placement='top'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='top-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='top-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='top'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='top-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='top-end'] .popover__arrow_chanz {
     bottom: 5px
-} .popover__component_1o4df[data-popper-placement='top'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='top-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='top-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='top'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='top-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='top-end'] .popover__arrow_chanz:after {
         left: -6px;
         border-top: none;
         border-left: none;
-    } .popover__component_1o4df[data-popper-placement='bottom'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='bottom-start'] .popover__arrow_1o4df,
-.popover__component_1o4df[data-popper-placement='bottom-end'] .popover__arrow_1o4df {
+    } .popover__component_chanz[data-popper-placement='bottom'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='bottom-start'] .popover__arrow_chanz,
+.popover__component_chanz[data-popper-placement='bottom-end'] .popover__arrow_chanz {
     top: -7px
-} .popover__component_1o4df[data-popper-placement='bottom'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='bottom-start'] .popover__arrow_1o4df:after, .popover__component_1o4df[data-popper-placement='bottom-end'] .popover__arrow_1o4df:after {
+} .popover__component_chanz[data-popper-placement='bottom'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='bottom-start'] .popover__arrow_chanz:after, .popover__component_chanz[data-popper-placement='bottom-end'] .popover__arrow_chanz:after {
         left: -6px;
         border-bottom: none;
         border-right: none;
-    } .popover__enter_1o4df .popover__inner_1o4df {
+    } .popover__enter_chanz .popover__inner_chanz {
     opacity: 0;
     transform: scale(0.98);
-} .popover__enterActive_1o4df .popover__inner_1o4df {
+} .popover__enterActive_chanz .popover__inner_chanz {
     opacity: 1;
     transform: scale(1);
     transition-property: opacity, transform;
     transition-timing-function: ease-in-out;
     transition-duration: 150ms;
-} .popover__exit_1o4df .popover__inner_1o4df {
+} .popover__exit_chanz .popover__inner_chanz {
     opacity: 1;
     transform: scale(1);
-} .popover__exitActive_1o4df .popover__inner_1o4df {
+} .popover__exitActive_chanz .popover__inner_chanz {
     opacity: 0;
     transform: scale(0.98);
     transition-property: opacity, transform;

package/popover/modern/index.js

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