Popover

Варианты использования target​

target может быть как ReactNode, так и RefObject:

Работа с фокусом элементов

Свойство isFocusTrapped захватывает фокус внутри одного DOM элемента.

Когда свойство имеет значение true, при нажатии Tab или Shift + Tab фокус будет перемещаться только внутри всплывающего окна. Если поверх текущего всплывающего окна открывается еще одно модальное окно, то фокус захватывает последнее модальное окно. После закрытия всплывающего окна, фокус может свободно перемещаться.

Если установить значение isFocusTrapped в false, после открытия всплывающего фокус будет перемещен на первый элемент внутри всплывающего окна. Но при последующей навигации с помощью Tab или Shift + Tab фокус не будет зациклен внутри всплывающего окна и может покинуть его.

Live Editor
Result
Open in CodeSandbox

Resizable​

Чтобы иметь возможность растягивать Popover нужно настроить свойство resizable. Формат следующий:

/**
 * Настройка resizable-режима.
 */
resizable?: 
    |  boolean
    |  {
            /**
            * Включение/выключение ресайза.
            * @default false
            */
            disabled?: boolean;
            /**
            * Направления для ресайза.
            */
            directions?: ResizeDirections;
            /**
            * Начальный размер окна ресайза.
            */
            defaultSize?: { width?: number; height?: number };
            /**
            * Минимальная ширина ресайза в px.
            */
            minWidth?: number;
            /**
            * Минимальная высота ресайза в px.
            */
            minHeight?: number;
            /**
            * Максимальная ширина ресайза в px.
            */
            maxWidth?: number;
            /**
            * Максимальная высота ресайза в px.
            */
            maxHeight?: number;
            /**
            * Кастомные иконки ресайза.
            */
            icons?: {
                topRight?: ReactNode;
                bottomRight?: ReactNode;
                bottomLeft?: ReactNode;
                topLeft?: ReactNode;
            };
            /**
            * Размер иконки ресайза.
            * @default s
            */
            iconSize?: 'xs' | 's' | 'm';
            /**
            * Скрывать ли иконку для ресайза.
            * @default false
            */
            hiddenIcons?: PopupPlacementMixed[];
        };

Пример:

Live Editor
Result
Open in CodeSandbox