@fluentui/react-positioning 9.0.0-alpha.6 → 9.0.0-alpha.60

package/dist/react-positioning.d.ts

@@ -1,10 +1,28 @@
 import * as PopperJs from '@popperjs/core';
-import * as React from 'react';
+import * as React_2 from 'react';
 
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
+
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
+
+/**
+ * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
+ * height of the arrow. A simple utility to merge a provided offset with an arrow height to return the final offset
+ *
+ * @param userOffset - The offset provided by the user
+ * @param arrowHeight - The height of the arrow in px
+ * @returns User offset augmented with arrow height
+ */
+export declare function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
+
 export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
 
 export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
@@ -15,36 +33,42 @@ export declare type OffsetFunctionParam = {
     placement: PopperJs.Placement;
 };
 
-export declare interface PopperOptions extends PositioningProps {
+declare interface PopperOptions extends PositioningProps {
     /**
      * If false, delays Popper's creation.
      * @default true
      */
     enabled?: boolean;
+    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
     /**
-     * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
      */
-    positioningDependencies?: React.DependencyList;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    positionFixed?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
 }
 
 export declare type PopperRefHandle = {
     updatePosition: () => void;
 };
 
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
+
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 
 export declare interface PositioningProps {
-    /**
-     * Alignment for the component.
-     */
+    /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
     /** An imperative handle to Popper methods. */
-    containerRef?: React.Ref<PopperRefHandle>;
+    popperRef?: React_2.Ref<PopperRefHandle>;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -52,11 +76,6 @@ export declare interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
     /**
      * Lets you displace a popper element from its reference element.
      * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -64,23 +83,39 @@ export declare interface PositioningProps {
      */
     offset?: Offset;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
+     * Defines padding between the corner of the popup element and the arrow.
+     * Use to prevent the arrow from overlapping a rounded corner, for example.
      */
-    unstable_disableTether?: boolean | 'all';
+    arrowPadding?: number;
     /**
-     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
-     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
-    unstable_pinned?: boolean;
+    autoSize?: AutoSize;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
-     * true enables this for both width and height.
-     * 'height' applies only `max-height` and 'width' for `max-width`
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
+     */
+    target?: HTMLElement | PopperVirtualElement | null;
+    /**
+     * Modifies position and alignment to cover the target
+     */
+    coverTarget?: boolean;
+    /**
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
      */
-    autoSize?: 'height' | 'width' | boolean;
+    pinned?: boolean;
 }
 
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
+
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+
+export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
+
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -90,9 +125,19 @@ export declare interface PositioningProps {
  *   to avoid focus jumps
  */
 export declare function usePopper(options?: PopperOptions): {
-    targetRef: React.MutableRefObject<any>;
-    containerRef: React.MutableRefObject<any>;
-    arrowRef: React.MutableRefObject<any>;
+    targetRef: React_2.MutableRefObject<any>;
+    containerRef: React_2.MutableRefObject<any>;
+    arrowRef: React_2.MutableRefObject<any>;
 };
 
+/**
+ * A state hook that manages a popper virtual element from mouseevents.
+ * Useful for scenarios where a component needs to be positioned by mouse click (e.g. contextmenu)
+ * React synthetic events are not persisted by this hook
+ *
+ * @param initialState - initializes a user provided state similare to useState
+ * @returns state and dispatcher for a Popper virtual element that uses native/synthetic mouse events
+ */
+export declare const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
+
 export { }

package/lib/createVirtualElementFromClick.d.ts

@@ -0,0 +1,6 @@
+import type { PopperVirtualElement } from './types';
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;

package/lib/createVirtualElementFromClick.js

@@ -0,0 +1,24 @@
+/**
+ * Creates a virtual element based on the position of a click event
+ * Can be used as a target for popper in scenarios such as context menus
+ */
+export function createVirtualElementFromClick(nativeEvent) {
+    var left = nativeEvent.clientX;
+    var top = nativeEvent.clientY;
+    var right = left + 1;
+    var bottom = top + 1;
+    function getBoundingClientRect() {
+        return {
+            left: left,
+            top: top,
+            right: right,
+            bottom: bottom,
+            height: 1,
+            width: 1,
+        };
+    }
+    return {
+        getBoundingClientRect: getBoundingClientRect,
+    };
+}
+//# sourceMappingURL=createVirtualElementFromClick.js.map

package/lib/createVirtualElementFromClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createVirtualElementFromClick.js","sourceRoot":"","sources":["../src/createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,UAAU,6BAA6B,CAAC,WAAuB;IACnE,IAAM,IAAI,GAAG,WAAW,CAAC,OAAO,CAAC;IACjC,IAAM,GAAG,GAAG,WAAW,CAAC,OAAO,CAAC;IAChC,IAAM,KAAK,GAAG,IAAI,GAAG,CAAC,CAAC;IACvB,IAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;IAEvB,SAAS,qBAAqB;QAC5B,OAAO;YACL,IAAI,MAAA;YACJ,GAAG,KAAA;YACH,KAAK,OAAA;YACL,MAAM,QAAA;YAEN,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,CAAC;SACT,CAAC;IACJ,CAAC;IAED,OAAO;QACL,qBAAqB,uBAAA;KACtB,CAAC;AACJ,CAAC"}

package/lib/index.d.ts

@@ -1,2 +1,5 @@
 export * from './usePopper';
+export * from './createVirtualElementFromClick';
+export * from './usePopperMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 export * from './types';

package/lib/index.js

@@ -1,2 +1,6 @@
 export * from './usePopper';
+export * from './createVirtualElementFromClick';
+export * from './usePopperMouseTarget';
+export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
+export * from './types';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC","sourcesContent":["export * from './usePopper';\nexport * from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAC9E,cAAc,SAAS,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.7.1"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib/types.d.ts

@@ -9,21 +9,21 @@ export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | n
 export declare type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
 export declare type Position = 'above' | 'below' | 'before' | 'after';
 export declare type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+export declare type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 export declare type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
 export declare type PopperRefHandle = {
     updatePosition: () => void;
 };
+export declare type PopperVirtualElement = PopperJs.VirtualElement;
 export interface PositioningProps {
-    /**
-     * Alignment for the component.
-     */
+    /** Alignment for the component. Only has an effect if used with the @see position option */
     align?: Alignment;
     /** The element which will define the boundaries of the popper position for the flip behavior. */
     flipBoundary?: Boundary;
     /** The element which will define the boundaries of the popper position for the overflow behavior. */
     overflowBoundary?: Boundary;
     /** An imperative handle to Popper methods. */
-    containerRef?: React.Ref<PopperRefHandle>;
+    popperRef?: React.Ref<PopperRefHandle>;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
      * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -31,11 +31,6 @@ export interface PositioningProps {
      * then provided value for 'align' will be ignored and 'center' will be used instead.
      */
     position?: Position;
-    /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
-     * @default false
-     */
-    positionFixed?: boolean;
     /**
      * Lets you displace a popper element from its reference element.
      * This can be useful if you need to apply some margin between them or if you need to fine tune the
@@ -43,31 +38,31 @@ export interface PositioningProps {
      */
     offset?: Offset;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
-     * "all" enables this behavior for all axis.
+     * Defines padding between the corner of the popup element and the arrow.
+     * Use to prevent the arrow from overlapping a rounded corner, for example.
      */
-    unstable_disableTether?: boolean | 'all';
+    arrowPadding?: number;
     /**
-     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
-     * `position` props, regardless of the size of the component, the reference element or the viewport.
+     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * true enables this for both width and height when overflow happens.
+     * 'always' applies `max-height`/`max-width` regardless of overflow.
+     * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`
+     * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`
      */
-    unstable_pinned?: boolean;
+    autoSize?: AutoSize;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
-     * true enables this for both width and height.
-     * 'height' applies only `max-height` and 'width' for `max-width`
+     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
      */
-    autoSize?: 'height' | 'width' | boolean;
-}
-export interface PopperOptions extends PositioningProps {
+    target?: HTMLElement | PopperVirtualElement | null;
     /**
-     * If false, delays Popper's creation.
-     * @default true
+     * Modifies position and alignment to cover the target
      */
-    enabled?: boolean;
+    coverTarget?: boolean;
     /**
-     * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.
+     * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and
+     * `position` props, regardless of the size of the component, the reference element or the viewport.
      */
-    positioningDependencies?: React.DependencyList;
-    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    pinned?: boolean;
 }
+export declare type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;

package/lib/types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as PopperJs from '@popperjs/core';\nimport * as React from 'react';\n\nexport type OffsetFunctionParam = {\n  popper: PopperJs.Rect;\n  reference: PopperJs.Rect;\n  placement: PopperJs.Placement;\n};\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];\n\nexport type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';\n\nexport type PopperRefHandle = { updatePosition: () => void };\n\nexport interface PositioningProps {\n  /**\n   * Alignment for the component.\n   */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the popper position for the flip behavior. */\n  flipBoundary?: Boundary;\n\n  /** The element which will define the boundaries of the popper position for the overflow behavior. */\n  overflowBoundary?: Boundary;\n\n  /** An imperative handle to Popper methods. */\n  containerRef?: React.Ref<PopperRefHandle>;\n\n  /**\n   * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')\n   * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'\n   * and 'start' | 'end' respectively),\n   * then provided value for 'align' will be ignored and 'center' will be used instead.\n   */\n  position?: Position;\n\n  /**\n   * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a popper element from its reference element.\n   * This can be useful if you need to apply some margin between them or if you need to fine tune the\n   * position according to some custom logic.\n   */\n  offset?: Offset;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.\n   * \"all\" enables this behavior for all axis.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_disableTether?: boolean | 'all';\n\n  /**\n   * Disables automatic repositioning of the component; it will always be placed according to the values of `align` and\n   * `position` props, regardless of the size of the component, the reference element or the viewport.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  unstable_pinned?: boolean;\n\n  /**\n   * Applies max-height and max-width on popper to fit it within the available space in viewport.\n   * true enables this for both width and height.\n   * 'height' applies only `max-height` and 'width' for `max-width`\n   */\n  autoSize?: 'height' | 'width' | boolean;\n}\n\nexport interface PopperOptions extends PositioningProps {\n  /**\n   * If false, delays Popper's creation.\n   * @default true\n   */\n  enabled?: boolean;\n\n  /**\n   * Array of conditions to be met in order to trigger a subsequent render to reposition the elements.\n   */\n  positioningDependencies?: React.DependencyList;\n\n  onStateUpdate?: (state: Partial<PopperJs.State>) => void;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/lib/usePopper.d.ts

@@ -1,5 +1,24 @@
+import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
-import { PopperOptions } from './types';
+import type { PositioningProps } from './types';
+interface PopperOptions extends PositioningProps {
+    /**
+     * If false, delays Popper's creation.
+     * @default true
+     */
+    enabled?: boolean;
+    onStateUpdate?: (state: Partial<PopperJs.State>) => void;
+    /**
+     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * @default false
+     */
+    positionFixed?: boolean;
+    /**
+     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * "all" enables this behavior for all axis.
+     */
+    unstable_disableTether?: boolean | 'all';
+}
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -13,3 +32,4 @@ export declare function usePopper(options?: PopperOptions): {
     containerRef: React.MutableRefObject<any>;
     arrowRef: React.MutableRefObject<any>;
 };
+export {};

package/lib/usePopper.js

@@ -1,6 +1,6 @@
-import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-provider';
-import { isBrowser, getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, } from './utils/index';
+import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
+import { useFluent } from '@fluentui/react-shared-contexts';
+import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement, } from './utils/index';
 import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 //
@@ -33,11 +33,9 @@ function hasAutofocusFilter(node) {
  * that can't be resolved properly during an initial rendering.
  */
 function usePopperOptions(options, popperOriginalPositionRef) {
-    var autoSize = options.autoSize, flipBoundary = options.flipBoundary, offset = options.offset, onStateUpdate = options.onStateUpdate, overflowBoundary = options.overflowBoundary, 
+    var arrowPadding = options.arrowPadding, autoSize = options.autoSize, coverTarget = options.coverTarget, flipBoundary = options.flipBoundary, offset = options.offset, onStateUpdate = options.onStateUpdate, overflowBoundary = options.overflowBoundary, 
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_disableTether = options.unstable_disableTether, 
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    unstable_pinned = options.unstable_pinned;
+    unstable_disableTether = options.unstable_disableTether, pinned = options.pinned;
     var isRtl = useFluent().dir === 'rtl';
     var placement = getPlacement(options.align, options.position, isRtl);
     var strategy = options.positionFixed ? 'fixed' : 'absolute';
@@ -85,12 +83,12 @@ function usePopperOptions(options, popperOriginalPositionRef) {
             },
             { name: 'flip', options: { flipVariations: true } },
             /**
-             * unstable_pinned disables the flip modifier by setting flip.enabled to false; this
+             * pinned disables the flip modifier by setting flip.enabled to false; this
              * disables automatic repositioning of the popper box; it will always be placed according to
              * the values of `align` and `position` props, regardless of the size of the component, the
              * reference element or the viewport.
              */
-            unstable_pinned && { name: 'flip', enabled: false },
+            pinned && { name: 'flip', enabled: false },
             /**
              * When the popper box is placed in the context of a scrollable element, we need to set
              * preventOverflow.escapeWithReference to true and flip.boundariesElement to 'scrollParent'
@@ -129,12 +127,12 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                 phase: 'afterWrite',
                 fn: handleStateUpdate,
             },
-            autoSize && {
+            {
                 // Similar code as popper-maxsize-modifier: https://github.com/atomiks/popper.js/blob/master/src/modifiers/maxSize.js
                 // popper-maxsize-modifier only calculates the max sizes.
-                // This modifier applies the max sizes when overflow is detected
+                // This modifier can apply max sizes always, or apply the max sizes only when overflow is detected
                 name: 'applyMaxSize',
-                enabled: true,
+                enabled: !!autoSize,
                 phase: 'beforeWrite',
                 requiresIfExists: ['offset', 'preventOverflow', 'flip'],
                 options: {
@@ -146,13 +144,19 @@ function usePopperOptions(options, popperOriginalPositionRef) {
                     var overflow = PopperJs.detectOverflow(state, modifierOptions);
                     var _b = state.modifiersData.preventOverflow || { x: 0, y: 0 }, x = _b.x, y = _b.y;
                     var _c = state.rects.popper, width = _c.width, height = _c.height;
-                    var basePlacement = state.placement.split('-')[0];
+                    var basePlacement = getBasePlacement(state.placement);
                     var widthProp = basePlacement === 'left' ? 'left' : 'right';
                     var heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-                    if (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width')) {
+                    var applyMaxWidth = autoSize === 'always' ||
+                        autoSize === 'width-always' ||
+                        (overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width'));
+                    var applyMaxHeight = autoSize === 'always' ||
+                        autoSize === 'height-always' ||
+                        (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height'));
+                    if (applyMaxWidth) {
                         state.styles.popper.maxWidth = width - overflow[widthProp] - x + "px";
                     }
-                    if (overflow[heightProp] > 0 && (autoSize === true || autoSize === 'height')) {
+                    if (applyMaxHeight) {
                         state.styles.popper.maxHeight = height - overflow[heightProp] - y + "px";
                     }
                 },
@@ -164,7 +168,34 @@ function usePopperOptions(options, popperOriginalPositionRef) {
             {
                 name: 'arrow',
                 enabled: !!arrow,
-                options: { element: arrow },
+                options: { element: arrow, padding: arrowPadding },
+            },
+            /**
+             * Modifies popper offsets to cover the reference rect, but still keep edge alignment
+             */
+            {
+                name: 'coverTarget',
+                enabled: !!coverTarget,
+                phase: 'main',
+                requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+                fn: function (_a) {
+                    var state = _a.state;
+                    var basePlacement = getBasePlacement(state.placement);
+                    switch (basePlacement) {
+                        case 'bottom':
+                            state.modifiersData.popperOffsets.y -= state.rects.reference.height;
+                            break;
+                        case 'top':
+                            state.modifiersData.popperOffsets.y += state.rects.reference.height;
+                            break;
+                        case 'left':
+                            state.modifiersData.popperOffsets.x += state.rects.reference.width;
+                            break;
+                        case 'right':
+                            state.modifiersData.popperOffsets.x -= state.rects.reference.width;
+                            break;
+                    }
+                },
             },
         ].filter(Boolean); // filter boolean conditional spreading values
         var popperOptions = {
@@ -175,14 +206,16 @@ function usePopperOptions(options, popperOriginalPositionRef) {
         };
         return popperOptions;
     }, [
+        arrowPadding,
         autoSize,
+        coverTarget,
         flipBoundary,
         offsetModifier,
         overflowBoundary,
         placement,
         strategy,
         unstable_disableTether,
-        unstable_pinned,
+        pinned,
         // These can be skipped from deps as they will not ever change
         handleStateUpdate,
         popperOriginalPositionRef,
@@ -207,10 +240,11 @@ export function usePopper(options) {
         var _a;
         (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
         popperInstanceRef.current = null;
+        var _b = options.target, target = _b === void 0 ? targetRef.current : _b;
         var popperInstance = null;
-        if (isBrowser() && enabled) {
-            if (targetRef.current && containerRef.current) {
-                popperInstance = PopperJs.createPopper(targetRef.current, containerRef.current, resolvePopperOptions(targetRef.current, containerRef.current, arrowRef.current));
+        if (canUseDOM() && enabled) {
+            if (target && containerRef.current) {
+                popperInstance = PopperJs.createPopper(target, containerRef.current, resolvePopperOptions(target, containerRef.current, arrowRef.current));
             }
         }
         if (popperInstance) {
@@ -221,8 +255,7 @@ export function usePopper(options) {
             var originalForceUpdate_1 = popperInstance.forceUpdate;
             popperInstance.isFirstRun = true;
             popperInstance.forceUpdate = function () {
-                var _a;
-                if ((_a = popperInstance) === null || _a === void 0 ? void 0 : _a.isFirstRun) {
+                if (popperInstance === null || popperInstance === void 0 ? void 0 : popperInstance.isFirstRun) {
                     popperInstance.state.elements.popper.style.position = popperOriginalPositionRef.current;
                     popperInstance.isFirstRun = false;
                 }
@@ -254,7 +287,7 @@ export function usePopper(options) {
     var targetRef = useCallbackRef(null, handlePopperUpdate, true);
     var containerRef = useCallbackRef(null, handlePopperUpdate, true);
     var arrowRef = useCallbackRef(null, handlePopperUpdate, true);
-    React.useImperativeHandle(options.containerRef, function () { return ({
+    React.useImperativeHandle(options.popperRef, function () { return ({
         updatePosition: function () {
             var _a;
             (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.update();
@@ -267,25 +300,30 @@ export function usePopper(options) {
             (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
             popperInstanceRef.current = null;
         };
-    }, [options.enabled]);
+    }, [handlePopperUpdate, options.enabled, options.target]);
     useIsomorphicLayoutEffect(function () {
         var _a;
         if (!isFirstMount) {
-            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(targetRef.current, containerRef.current, arrowRef.current));
+            (_a = popperInstanceRef.current) === null || _a === void 0 ? void 0 : _a.setOptions(resolvePopperOptions(options.target || targetRef.current, containerRef.current, arrowRef.current));
         }
-    }, [resolvePopperOptions]);
+    }, 
+    // Missing deps:
+    // options.target - The useIsomorphicLayoutEffect before this will create a new popper instance if target changes
+    // isFirstMount - Should never change after mount
+    // arrowRef, containerRef, targetRef - Stable between renders
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resolvePopperOptions]);
     if (process.env.NODE_ENV !== 'production') {
         // This checked should run only in development mode
         // eslint-disable-next-line react-hooks/rules-of-hooks
         React.useEffect(function () {
-            var _a, _b;
+            var _a;
             if (containerRef.current) {
                 var contentNode = containerRef.current;
-                // eslint-disable-next-line deprecation/deprecation
                 var treeWalker = (_a = contentNode.ownerDocument) === null || _a === void 0 ? void 0 : _a.createTreeWalker(contentNode, NodeFilter.SHOW_ELEMENT, {
                     acceptNode: hasAutofocusFilter,
                 });
-                while ((_b = treeWalker) === null || _b === void 0 ? void 0 : _b.nextNode()) {
+                while (treeWalker === null || treeWalker === void 0 ? void 0 : treeWalker.nextNode()) {
                     var node = treeWalker.currentNode;
                     // eslint-disable-next-line no-console
                     console.warn('<Popper>:', node);