@fluentui/react-positioning 0.0.0-nightly-20220523-0424.1 → 0.0.0-nightly-20220607-0421.1

package/CHANGELOG.json

@@ -2,9 +2,84 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Mon, 23 May 2022 04:37:41 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20220523-0424.1",
-      "version": "0.0.0-nightly-20220523-0424.1",
+      "date": "Tue, 07 Jun 2022 04:34:28 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20220607-0421.1",
+      "version": "0.0.0-nightly-20220607-0421.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1",
+            "commit": "b264fd655a010e09847726c4b0481262f8f4a949"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 31 May 2022 21:28:42 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-rc.11",
+      "version": "9.0.0-rc.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd",
+            "comment": "updates import to react-shared-components"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.10",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
+            "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:47 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-rc.10",
+      "version": "9.0.0-rc.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
+            "comment": "BREAKING CHANGE: Encapsulate Popper API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:13:34 GMT",
+      "tag": "@fluentui/react-positioning_v9.0.0-rc.9",
+      "version": "9.0.0-rc.9",
       "comments": {
         "prerelease": [
           {
@@ -28,20 +103,20 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220523-0424.1",
-            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220523-0424.1",
-            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220523-0424.1",
-            "commit": "38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,22 +1,54 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Mon, 23 May 2022 04:37:41 GMT and should not be manually modified.
+This log was last generated on Tue, 07 Jun 2022 04:34:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20220523-0424.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20220523-0424.1)
+## [0.0.0-nightly-20220607-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20220607-0421.1)
 
-Mon, 23 May 2022 04:37:41 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.8..@fluentui/react-positioning_v0.0.0-nightly-20220523-0424.1)
+Tue, 07 Jun 2022 04:34:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.11..@fluentui/react-positioning_v0.0.0-nightly-20220607-0421.1)
+
+### Changes
+
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220607-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b264fd655a010e09847726c4b0481262f8f4a949) by beachball)
+
+## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.11)
+
+Tue, 31 May 2022 21:28:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.10..@fluentui/react-positioning_v9.0.0-rc.11)
+
+### Changes
+
+- updates import to react-shared-components ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by bernardo.sunderhus@gmail.com)
+- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
+
+## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.10)
+
+Mon, 23 May 2022 18:56:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.9..@fluentui/react-positioning_v9.0.0-rc.10)
+
+### Changes
+
+- BREAKING CHANGE: Encapsulate Popper API ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+
+## [9.0.0-rc.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.9)
+
+Mon, 23 May 2022 12:13:34 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.0.0-rc.8..@fluentui/react-positioning_v9.0.0-rc.9)
 
 ### Changes
 
 - feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
 - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
 - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20220523-0424.1 ([commit](https://github.com/microsoft/fluentui/commit/38c77f1ec2382f1d63ab33ac977ca1bd5a6b2d21) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
 
 ## [9.0.0-rc.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.0.0-rc.8)
 

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 import type { GriffelStyle } from '@griffel/react';
-import * as PopperJs from '@popperjs/core';
 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';
+export declare type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';
 
 /**
  * Creates CSS styles to size the arrow created by createArrowStyles to the given height.
@@ -78,7 +77,7 @@ export declare type CreateArrowStylesOptions = {
  * 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;
+export declare function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
 
 /**
  * Generally when adding an arrow to popper, it's necessary to offset the position of the popper by the
@@ -90,22 +89,45 @@ export declare function createVirtualElementFromClick(nativeEvent: MouseEvent):
  */
 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 Offset = OffsetFunction | OffsetObject | OffsetShorthand;
 
-export declare type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
+export declare type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;
 
 export declare type OffsetFunctionParam = {
-    popper: PopperJs.Rect;
-    reference: PopperJs.Rect;
-    placement: PopperJs.Placement;
+    positionedRect: Rect;
+    targetRect: Rect;
+    position: Position;
+    alignment?: Alignment;
 };
 
-export declare interface PopperOptions {
+export declare type OffsetObject = {
+    crossAxis?: number;
+    mainAxis: number;
+};
+
+export declare type OffsetShorthand = number;
+
+export declare type Position = 'above' | 'below' | 'before' | 'after';
+
+export declare type PositioningImperativeRef = {
+    /**
+     * Updates the position imperatively.
+     * Useful when the position of the target changes from other factors than scrolling of window resize.
+     */
+    updatePosition: () => void;
+    /**
+     * Sets the target and updates positioning imperatively.
+     * Useful for avoiding double renders with the target option.
+     */
+    setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
+};
+
+declare interface PositioningOptions {
     /** 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. */
+    /** The element which will define the boundaries of the positioned element for the flip behavior. */
     flipBoundary?: Boundary;
-    /** The element which will define the boundaries of the popper position for the overflow behavior. */
+    /** The element which will define the boundaries of the positioned element for the overflow behavior. */
     overflowBoundary?: Boundary;
     /**
      * Position for the component. Position has higher priority than align. If position is vertical ('above' | 'below')
@@ -115,12 +137,12 @@ export declare interface PopperOptions {
      */
     position?: Position;
     /**
-     * Enables the Popper box to position itself in 'fixed' mode (default value is position: 'absolute')
+     * Enables the position element to be positioned with 'fixed' (default value is position: 'absolute')
      * @default false
      */
     positionFixed?: boolean;
     /**
-     * Lets you displace a popper element from its reference element.
+     * Lets you displace a positioned 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
      * position according to some custom logic.
      */
@@ -131,7 +153,7 @@ export declare interface PopperOptions {
      */
     arrowPadding?: number;
     /**
-     * Applies max-height and max-width on popper to fit it within the available space in viewport.
+     * Applies max-height and max-width on the positioned element 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`
@@ -148,44 +170,56 @@ export declare interface PopperOptions {
      */
     pinned?: boolean;
     /**
-     * When the reference element or the viewport is outside viewport allows a popper element to be fully in viewport.
+     * When the reference element or the viewport is outside viewport allows a positioned element to be fully in viewport.
      * "all" enables this behavior for all axis.
      */
     unstable_disableTether?: boolean | 'all';
 }
 
-export declare type PopperRefHandle = {
-    /**
-     * Updates the position of the popper imperatively.
-     * Useful when the position of the target changes from other factors than scrolling of window resize.
-     */
-    updatePosition: () => void;
-    /**
-     * Sets the target and updates positioning imperatively.
-     * Useful for avoiding double renders with the target option.
-     */
-    setTarget: (target: HTMLElement | PopperVirtualElement) => void;
-};
-
-export declare type PopperVirtualElement = PopperJs.VirtualElement;
-
-export declare type Position = 'above' | 'below' | 'before' | 'after';
-
-export declare interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
+export declare interface PositioningProps extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {
     /** An imperative handle to Popper methods. */
-    popperRef?: React_2.Ref<PopperRefHandle>;
+    positioningRef?: React_2.Ref<PositioningImperativeRef>;
     /**
-     * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target
+     * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
      */
-    target?: HTMLElement | PopperVirtualElement | null;
+    target?: HTMLElement | PositioningVirtualElement | null;
 }
 
 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 type PositioningVirtualElement = {
+    getBoundingClientRect: () => {
+        x: number;
+        y: number;
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+        width: number;
+        height: number;
+    };
+    contextElement?: Element;
+};
+
+declare type Rect = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+
 export declare function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
 
+declare interface UsePopperOptions extends PositioningProps {
+    /**
+     * If false, delays Popper's creation.
+     * @default true
+     */
+    enabled?: boolean;
+}
+
 /**
  * Exposes Popper positioning API via React hook. Contains few important differences between an official "react-popper"
  * package:
@@ -194,7 +228,7 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
  * - contains a specific to React fix related to initial positioning when containers have components with managed focus
  *   to avoid focus jumps
  */
-export declare function usePopper(options?: UsePopperOptions): {
+export declare function usePositioning(options?: UsePopperOptions): {
     targetRef: React_2.MutableRefObject<any>;
     containerRef: React_2.MutableRefObject<any>;
     arrowRef: React_2.MutableRefObject<any>;
@@ -208,14 +242,6 @@ export declare function usePopper(options?: UsePopperOptions): {
  * @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];
-
-declare interface UsePopperOptions extends PositioningProps {
-    /**
-     * If false, delays Popper's creation.
-     * @default true
-     */
-    enabled?: boolean;
-}
+export declare const usePositioningMouseTarget: (initialState?: PositioningVirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [PositioningVirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
 
 export { }

package/lib/createArrowStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;AACjE,QAAM;AACJ,IAAA,WADI;AAEJ,IAAA,WAAW,GAAG,KAFV;AAGJ,IAAA,WAAW,GAAG,OAHV;AAIJ,IAAA,WAAW,GAAG,MAAM,CAAC;AAJjB,MAKF,OALJ;AAOA,SAAO;AACL,IAAA,QAAQ,EAAE,UADL;AAEL,IAAA,eAAe,EAAE,SAFZ;AAGL,IAAA,UAAU,EAAE,QAHP;AAIL,IAAA,MAAM,EAAE,CAAC,CAJJ;AAML,QAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;AAQL,eAAW;AACT,MAAA,OAAO,EAAE,IADA;AAET,MAAA,UAAU,EAAE,SAFH;AAGT,MAAA,QAAQ,EAAE,UAHD;AAIT,MAAA,SAAS,EAAE,YAJF;AAKT,MAAA,KAAK,EAAE,SALE;AAMT,MAAA,MAAM,EAAE,SANC;AAOT,MAAA,eAAe,EAAE,SAPR;AAQT,SAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;AAaT,SAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;AAcT,MAAA,uBAAuB,EAAE,MAAM,CAAC,iBAdvB;AAeT,MAAA,SAAS,EAAE;AAfF,KARN;AA0BL;AACA,+CAA2C;AACzC,MAAA,MAAM,EAAE,IAAI,WAAW,EADkB;AAEzC,iBAAW;AAF8B,KA3BtC;AA+BL,iDAA6C;AAC3C,MAAA,IAAI,EAAE,IAAI,WAAW,gBADsB;AAE3C,iBAAW;AAFgC,KA/BxC;AAmCL,kDAA8C;AAC5C,MAAA,GAAG,EAAE,IAAI,WAAW,EADwB;AAE5C,iBAAW;AAFiC,KAnCzC;AAuCL,gDAA4C;AAC1C,MAAA,KAAK,EAAE,IAAI,WAAW,gBADoB;AAE1C,iBAAW;AAF+B;AAvCvC,GAAP;AA4CD;AAED;;;;;AAKG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;AACzD;AACA;AACA,QAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;AACA,SAAO;AAAE,IAAA,KAAK,EAAE,UAAT;AAAqB,IAAA,MAAM,EAAE;AAA7B,GAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n  /**\n   * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n   *\n   * This can be undefined to leave out the arrow size styles. You must then add styles created by\n   * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n   */\n  arrowHeight: number | undefined;\n\n  /**\n   * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n   *\n   * @defaultvalue 1px\n   */\n  borderWidth?: GriffelStyle['borderBottomWidth'];\n\n  /**\n   * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n   *\n   * @defaultvalue solid\n   */\n  borderStyle?: GriffelStyle['borderBottomStyle'];\n\n  /**\n   * The borderColor of the arrow. Should be the same borderColor as the parent element.\n   *\n   * @defaultvalue tokens.colorTransparentStroke\n   */\n  borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n *   makeStyles({\n *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n *     mediumArrow: createArrowHeightStyles(4),\n *     smallArrow: createArrowHeightStyles(2),\n *   })\n *   ...\n *\n *   state.arrowWithSize.className = styles.arrowWithSize;\n *   state.arrowWithoutSize.className = mergeClasses(\n *     styles.arrowWithoutSize,\n *     state.smallArrow && styles.smallArrow,\n *     state.mediumArrow && styles.mediumArrow,\n *   )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n  const {\n    arrowHeight,\n    borderWidth = '1px',\n    borderStyle = 'solid',\n    borderColor = tokens.colorTransparentStroke,\n  } = options;\n\n  return {\n    position: 'absolute',\n    backgroundColor: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n    ':before': {\n      content: '\"\"',\n      visibility: 'visible',\n      position: 'absolute',\n      boxSizing: 'border-box',\n      width: 'inherit',\n      height: 'inherit',\n      backgroundColor: 'inherit',\n      ...shorthands.borderRight(\n        `${borderWidth} /* @noflip */`,\n        `${borderStyle} /* @noflip */`,\n        `${borderColor} /* @noflip */`,\n      ),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': {\n      bottom: `-${borderWidth}`,\n      '--angle': '0',\n    },\n    ':global([data-popper-placement^=\"right\"])': {\n      left: `-${borderWidth} /* @noflip */`,\n      '--angle': '90deg',\n    },\n    ':global([data-popper-placement^=\"bottom\"])': {\n      top: `-${borderWidth}`,\n      '--angle': '180deg',\n    },\n    ':global([data-popper-placement^=\"left\"])': {\n      right: `-${borderWidth} /* @noflip */`,\n      '--angle': '270deg',\n    },\n  };\n}\n\n/**\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n  // Multiply the triangle's height by sqrt(2) to get length of its edges.\n  const edgeLength = `${1.414 * arrowHeight}px`;\n  return { width: edgeLength, height: edgeLength };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["createArrowStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,QAA2B,gBAA3B;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAqCA;;;;;;;;;;;;;;;;;;;;;AAqBG;;AACH,OAAM,SAAU,iBAAV,CAA4B,OAA5B,EAA6D;EACjE,MAAM;IACJ,WADI;IAEJ,WAAW,GAAG,KAFV;IAGJ,WAAW,GAAG,OAHV;IAIJ,WAAW,GAAG,MAAM,CAAC;EAJjB,IAKF,OALJ;EAOA,OAAO;IACL,QAAQ,EAAE,UADL;IAEL,eAAe,EAAE,SAFZ;IAGL,UAAU,EAAE,QAHP;IAIL,MAAM,EAAE,CAAC,CAJJ;IAML,IAAI,WAAW,IAAI,uBAAuB,CAAC,WAAD,CAA1C,CANK;IAQL,WAAW;MACT,OAAO,EAAE,IADA;MAET,UAAU,EAAE,SAFH;MAGT,QAAQ,EAAE,UAHD;MAIT,SAAS,EAAE,YAJF;MAKT,KAAK,EAAE,SALE;MAMT,MAAM,EAAE,SANC;MAOT,eAAe,EAAE,SAPR;MAQT,GAAG,UAAU,CAAC,WAAX,CACD,GAAG,WAAW,gBADb,EAED,GAAG,WAAW,gBAFb,EAGD,GAAG,WAAW,gBAHb,CARM;MAaT,GAAG,UAAU,CAAC,YAAX,CAAwB,WAAxB,EAAqC,WAArC,EAAkD,WAAlD,CAbM;MAcT,uBAAuB,EAAE,MAAM,CAAC,iBAdvB;MAeT,SAAS,EAAE;IAfF,CARN;IA0BL;IACA,2CAA2C;MACzC,MAAM,EAAE,IAAI,WAAW,EADkB;MAEzC,WAAW;IAF8B,CA3BtC;IA+BL,6CAA6C;MAC3C,IAAI,EAAE,IAAI,WAAW,gBADsB;MAE3C,WAAW;IAFgC,CA/BxC;IAmCL,8CAA8C;MAC5C,GAAG,EAAE,IAAI,WAAW,EADwB;MAE5C,WAAW;IAFiC,CAnCzC;IAuCL,4CAA4C;MAC1C,KAAK,EAAE,IAAI,WAAW,gBADoB;MAE1C,WAAW;IAF+B;EAvCvC,CAAP;AA4CD;AAED;;;;;AAKG;;AACH,OAAM,SAAU,uBAAV,CAAkC,WAAlC,EAAqD;EACzD;EACA;EACA,MAAM,UAAU,GAAG,GAAG,QAAQ,WAAW,IAAzC;EACA,OAAO;IAAE,KAAK,EAAE,UAAT;IAAqB,MAAM,EAAE;EAA7B,CAAP;AACD","sourcesContent":["import { shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { GriffelStyle } from '@griffel/react';\n\n/**\n * Options parameter for the createArrowStyles function\n */\nexport type CreateArrowStylesOptions = {\n  /**\n   * The height of the arrow from the base to the tip, in px. The base width of the arrow is always twice its height.\n   *\n   * This can be undefined to leave out the arrow size styles. You must then add styles created by\n   * createArrowHeightStyles to set the arrow's size correctly. This can be useful if the arrow can be different sizes.\n   */\n  arrowHeight: number | undefined;\n\n  /**\n   * The borderWidth of the arrow. Should be the same borderWidth as the parent element.\n   *\n   * @defaultvalue 1px\n   */\n  borderWidth?: GriffelStyle['borderBottomWidth'];\n\n  /**\n   * The borderStyle for the arrow. Should be the same borderStyle as the parent element.\n   *\n   * @defaultvalue solid\n   */\n  borderStyle?: GriffelStyle['borderBottomStyle'];\n\n  /**\n   * The borderColor of the arrow. Should be the same borderColor as the parent element.\n   *\n   * @defaultvalue tokens.colorTransparentStroke\n   */\n  borderColor?: GriffelStyle['borderBottomColor'];\n};\n\n/**\n * Helper that creates a makeStyles rule for an arrow element.\n * For runtime arrow size toggling simply create extra classnames to apply to the arrow element\n *\n * ```ts\n *   makeStyles({\n *     arrowWithSize: createArrowStyles({ arrowHeight: 6 }),\n *\n *     arrowWithoutSize: createArrowStyles({ arrowHeight: undefined }),\n *     mediumArrow: createArrowHeightStyles(4),\n *     smallArrow: createArrowHeightStyles(2),\n *   })\n *   ...\n *\n *   state.arrowWithSize.className = styles.arrowWithSize;\n *   state.arrowWithoutSize.className = mergeClasses(\n *     styles.arrowWithoutSize,\n *     state.smallArrow && styles.smallArrow,\n *     state.mediumArrow && styles.mediumArrow,\n *   )\n * ```\n */\nexport function createArrowStyles(options: CreateArrowStylesOptions): GriffelStyle {\n  const {\n    arrowHeight,\n    borderWidth = '1px',\n    borderStyle = 'solid',\n    borderColor = tokens.colorTransparentStroke,\n  } = options;\n\n  return {\n    position: 'absolute',\n    backgroundColor: 'inherit',\n    visibility: 'hidden',\n    zIndex: -1,\n\n    ...(arrowHeight && createArrowHeightStyles(arrowHeight)),\n\n    ':before': {\n      content: '\"\"',\n      visibility: 'visible',\n      position: 'absolute',\n      boxSizing: 'border-box',\n      width: 'inherit',\n      height: 'inherit',\n      backgroundColor: 'inherit',\n      ...shorthands.borderRight(\n        `${borderWidth} /* @noflip */`,\n        `${borderStyle} /* @noflip */`,\n        `${borderColor} /* @noflip */`,\n      ),\n      ...shorthands.borderBottom(borderWidth, borderStyle, borderColor),\n      borderBottomRightRadius: tokens.borderRadiusSmall,\n      transform: 'rotate(var(--angle)) translate(0, 50%) rotate(45deg)',\n    },\n\n    // Popper sets data-popper-placement on the root element, which is used to align the arrow\n    ':global([data-popper-placement^=\"top\"])': {\n      bottom: `-${borderWidth}`,\n      '--angle': '0',\n    },\n    ':global([data-popper-placement^=\"right\"])': {\n      left: `-${borderWidth} /* @noflip */`,\n      '--angle': '90deg',\n    },\n    ':global([data-popper-placement^=\"bottom\"])': {\n      top: `-${borderWidth}`,\n      '--angle': '180deg',\n    },\n    ':global([data-popper-placement^=\"left\"])': {\n      right: `-${borderWidth} /* @noflip */`,\n      '--angle': '270deg',\n    },\n  };\n}\n\n/**\n * Creates CSS styles to size the arrow created by createArrowStyles to the given height.\n *\n * Use this when you need to create classes for several different arrow sizes. If you only need a\n * constant arrow size, you can pass the `arrowHeight` param to createArrowStyles instead.\n */\nexport function createArrowHeightStyles(arrowHeight: number) {\n  // The arrow is a square rotated 45 degrees to have its bottom and right edges form a right triangle.\n  // Multiply the triangle's height by sqrt(2) to get length of its edges.\n  const edgeLength = `${1.414 * arrowHeight}px`;\n  return { width: edgeLength, height: edgeLength };\n}\n"],"sourceRoot":"../src/"}

package/lib/createVirtualElementFromClick.js

@@ -14,6 +14,8 @@ export function createVirtualElementFromClick(nativeEvent) {
       top,
       right,
       bottom,
+      x: left,
+      y: top,
       height: 1,
       width: 1
     };

package/lib/createVirtualElementFromClick.js.map

@@ -1 +1 @@
-{"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;AACnE,QAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;AACA,QAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;AACA,QAAM,KAAK,GAAG,IAAI,GAAG,CAArB;AACA,QAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;AAEA,WAAS,qBAAT,GAA8B;AAC5B,WAAO;AACL,MAAA,IADK;AAEL,MAAA,GAFK;AAGL,MAAA,KAHK;AAIL,MAAA,MAJK;AAML,MAAA,MAAM,EAAE,CANH;AAOL,MAAA,KAAK,EAAE;AAPF,KAAP;AASD;;AAED,SAAO;AACL,IAAA;AADK,GAAP;AAGD","sourcesContent":["import type { PopperVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement {\n  const left = nativeEvent.clientX;\n  const top = nativeEvent.clientY;\n  const right = left + 1;\n  const bottom = top + 1;\n\n  function getBoundingClientRect(): ClientRect {\n    return {\n      left,\n      top,\n      right,\n      bottom,\n\n      height: 1,\n      width: 1,\n    };\n  }\n\n  return {\n    getBoundingClientRect,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["createVirtualElementFromClick.ts"],"names":[],"mappings":"AAEA;;;AAGG;AACH,OAAM,SAAU,6BAAV,CAAwC,WAAxC,EAA+D;EACnE,MAAM,IAAI,GAAG,WAAW,CAAC,OAAzB;EACA,MAAM,GAAG,GAAG,WAAW,CAAC,OAAxB;EACA,MAAM,KAAK,GAAG,IAAI,GAAG,CAArB;EACA,MAAM,MAAM,GAAG,GAAG,GAAG,CAArB;;EAEA,SAAS,qBAAT,GAA8B;IAC5B,OAAO;MACL,IADK;MAEL,GAFK;MAGL,KAHK;MAIL,MAJK;MAKL,CAAC,EAAE,IALE;MAML,CAAC,EAAE,GANE;MAOL,MAAM,EAAE,CAPH;MAQL,KAAK,EAAE;IARF,CAAP;EAUD;;EAED,OAAO;IACL;EADK,CAAP;AAGD","sourcesContent":["import type { PositioningVirtualElement } from './types';\n\n/**\n * Creates a virtual element based on the position of a click event\n * Can be used as a target for popper in scenarios such as context menus\n */\nexport function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement {\n  const left = nativeEvent.clientX;\n  const top = nativeEvent.clientY;\n  const right = left + 1;\n  const bottom = top + 1;\n\n  function getBoundingClientRect() {\n    return {\n      left,\n      top,\n      right,\n      bottom,\n      x: left,\n      y: top,\n      height: 1,\n      width: 1,\n    };\n  }\n\n  return {\n    getBoundingClientRect,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,6 +1,6 @@
 export { createVirtualElementFromClick } from './createVirtualElementFromClick';
 export { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';
-export { usePopper } from './usePopper';
-export { usePopperMouseTarget } from './usePopperMouseTarget';
+export { usePositioning } from './usePositioning';
+export { usePositioningMouseTarget } from './usePositioningMouseTarget';
 export { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePopper } from './usePopper';\nexport { usePopperMouseTarget } from './usePopperMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n  Alignment,\n  AutoSize,\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  PopperOptions,\n  PopperRefHandle,\n  PopperVirtualElement,\n  Position,\n  PositioningProps,\n  PositioningShorthand,\n  PositioningShorthandValue,\n} from './types';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,iCAAiC,CAAC;AAChF,OAAO,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAEjF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { createVirtualElementFromClick } from './createVirtualElementFromClick';\nexport { createArrowHeightStyles, createArrowStyles } from './createArrowStyles';\nexport type { CreateArrowStylesOptions } from './createArrowStyles';\nexport { usePositioning } from './usePositioning';\nexport { usePositioningMouseTarget } from './usePositioningMouseTarget';\nexport { resolvePositioningShorthand, mergeArrowOffset } from './utils/index';\nexport type {\n  Alignment,\n  AutoSize,\n  Boundary,\n  Offset,\n  OffsetFunction,\n  OffsetFunctionParam,\n  OffsetObject,\n  OffsetShorthand,\n  Position,\n  PositioningImperativeRef,\n  PositioningProps,\n  PositioningShorthand,\n  PositioningShorthandValue,\n  PositioningVirtualElement,\n} from './types';\n"]}

package/lib/isIntersectingModifier.js.map

@@ -1 +1 @@
-{"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;AAC5D,EAAA,IAAI,EAAE,0BADsD;AAE5D,EAAA,OAAO,EAAE,IAFmD;AAG5D,EAAA,KAAK,EAAE,MAHqD;AAI5D,EAAA,QAAQ,EAAE,CAAC,iBAAD,CAJkD;AAK5D,EAAA,EAAE,EAAE,CAAC;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,GAAD,KAAoB;AACtB,UAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;AACA,UAAM,iBAAiB,GAAG,cAAc,CAAC,KAAD,EAAQ;AAAE,MAAA,WAAW,EAAE;AAAf,KAAR,CAAxC;AAEA,UAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;AACA,UAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;AAEA,UAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;AAEA,IAAA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;AAC1B,MAAA;AAD0B,KAA5B;AAGA,IAAA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;AAExB,qCAA+B;AAFP,KAA1B;AAID;AArB2D,CAAvD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n  name: 'is-intersecting-modifier',\n  enabled: true,\n  phase: 'main',\n  requires: ['preventOverflow'],\n  fn: ({ state, name }) => {\n    const popperRect = state.rects.popper;\n    const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n    const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n    const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n    const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n    state.modifiersData[name] = {\n      isIntersecting,\n    };\n    state.attributes.popper = {\n      ...state.attributes.popper,\n      'data-popper-is-intersecting': isIntersecting,\n    };\n  },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["isIntersectingModifier.ts"],"names":[],"mappings":"AAAA,SAAS,cAAT,QAAyC,gBAAzC;AAEA,OAAO,MAAM,sBAAsB,GAA2B;EAC5D,IAAI,EAAE,0BADsD;EAE5D,OAAO,EAAE,IAFmD;EAG5D,KAAK,EAAE,MAHqD;EAI5D,QAAQ,EAAE,CAAC,iBAAD,CAJkD;EAK5D,EAAE,EAAE,CAAC;IAAE,KAAF;IAAS;EAAT,CAAD,KAAoB;IACtB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAN,CAAY,MAA/B;IACA,MAAM,iBAAiB,GAAG,cAAc,CAAC,KAAD,EAAQ;MAAE,WAAW,EAAE;IAAf,CAAR,CAAxC;IAEA,MAAM,iBAAiB,GAAG,iBAAiB,CAAC,GAAlB,GAAwB,UAAU,CAAC,MAAnC,IAA6C,iBAAiB,CAAC,GAAlB,GAAwB,CAA/F;IACA,MAAM,oBAAoB,GAAG,iBAAiB,CAAC,MAAlB,GAA2B,UAAU,CAAC,MAAtC,IAAgD,iBAAiB,CAAC,MAAlB,GAA2B,CAAxG;IAEA,MAAM,cAAc,GAAG,iBAAiB,IAAI,oBAA5C;IAEA,KAAK,CAAC,aAAN,CAAoB,IAApB,IAA4B;MAC1B;IAD0B,CAA5B;IAGA,KAAK,CAAC,UAAN,CAAiB,MAAjB,GAA0B,EACxB,GAAG,KAAK,CAAC,UAAN,CAAiB,MADI;MAExB,+BAA+B;IAFP,CAA1B;EAID;AArB2D,CAAvD","sourcesContent":["import { detectOverflow, Modifier } from '@popperjs/core';\n\nexport const isIntersectingModifier: IsIntersectingModifier = {\n  name: 'is-intersecting-modifier',\n  enabled: true,\n  phase: 'main',\n  requires: ['preventOverflow'],\n  fn: ({ state, name }) => {\n    const popperRect = state.rects.popper;\n    const popperAltOverflow = detectOverflow(state, { altBoundary: true });\n\n    const isIntersectingTop = popperAltOverflow.top < popperRect.height && popperAltOverflow.top > 0;\n    const isIntersectingBottom = popperAltOverflow.bottom < popperRect.height && popperAltOverflow.bottom > 0;\n\n    const isIntersecting = isIntersectingTop || isIntersectingBottom;\n\n    state.modifiersData[name] = {\n      isIntersecting,\n    };\n    state.attributes.popper = {\n      ...state.attributes.popper,\n      'data-popper-is-intersecting': isIntersecting,\n    };\n  },\n};\n\ntype IsIntersectingModifier = Modifier<'is-intersecting-modifier', never>;\n"],"sourceRoot":"../src/"}

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 AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';\n\nexport type PopperRefHandle = {\n  /**\n   * Updates the position of the popper imperatively.\n   * Useful when the position of the target changes from other factors than scrolling of window resize.\n   */\n  updatePosition: () => void;\n\n  /**\n   * Sets the target and updates positioning imperatively.\n   * Useful for avoiding double renders with the target option.\n   */\n  setTarget: (target: HTMLElement | PopperVirtualElement) => void;\n};\n\nexport type PopperVirtualElement = PopperJs.VirtualElement;\n\nexport interface PopperOptions {\n  /** Alignment for the component. Only has an effect if used with the @see position option */\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  /**\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   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\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 when overflow happens.\n   * 'always' applies `max-height`/`max-width` regardless of overflow.\n   * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n   * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n   */\n  autoSize?: AutoSize;\n\n  /**\n   * Modifies position and alignment to cover the target\n   */\n  coverTarget?: boolean;\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  pinned?: boolean;\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\nexport interface PositioningProps\n  // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n  extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {\n  /** An imperative handle to Popper methods. */\n  popperRef?: React.Ref<PopperRefHandle>;\n\n  /**\n   * Manual override for popper target. Useful for scenarios where a component accepts user prop to override target\n   */\n  target?: HTMLElement | PopperVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n  | 'above'\n  | 'above-start'\n  | 'above-end'\n  | 'below'\n  | 'below-start'\n  | 'below-end'\n  | 'before'\n  | 'before-top'\n  | 'before-bottom'\n  | 'after'\n  | 'after-top'\n  | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\ntype Rect = {\n  width: number;\n  height: number;\n  x: number;\n  y: number;\n};\n\nexport type OffsetFunctionParam = {\n  positionedRect: Rect;\n  targetRect: Rect;\n  position: Position;\n  alignment?: Alignment;\n};\n\nexport type OffsetObject = { crossAxis?: number; mainAxis: number };\n\nexport type OffsetShorthand = number;\n\nexport type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject | OffsetShorthand;\n\nexport type Offset = OffsetFunction | OffsetObject | OffsetShorthand;\n\nexport type Position = 'above' | 'below' | 'before' | 'after';\nexport type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';\n\nexport type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;\n\nexport type Boundary = HTMLElement | Array<HTMLElement> | 'clippingParents' | 'scrollParent' | 'window';\n\nexport type PositioningImperativeRef = {\n  /**\n   * Updates the position imperatively.\n   * Useful when the position of the target changes from other factors than scrolling of window resize.\n   */\n  updatePosition: () => void;\n\n  /**\n   * Sets the target and updates positioning imperatively.\n   * Useful for avoiding double renders with the target option.\n   */\n  setTarget: (target: HTMLElement | PositioningVirtualElement) => void;\n};\n\nexport type PositioningVirtualElement = {\n  getBoundingClientRect: () => {\n    x: number;\n    y: number;\n    top: number;\n    left: number;\n    bottom: number;\n    right: number;\n    width: number;\n    height: number;\n  };\n  contextElement?: Element;\n};\n\nexport interface PositioningOptions {\n  /** Alignment for the component. Only has an effect if used with the @see position option */\n  align?: Alignment;\n\n  /** The element which will define the boundaries of the positioned element for the flip behavior. */\n  flipBoundary?: Boundary;\n\n  /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n  overflowBoundary?: Boundary;\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 position element to be positioned with 'fixed' (default value is position: 'absolute')\n   * @default false\n   */\n  positionFixed?: boolean;\n\n  /**\n   * Lets you displace a positioned 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   * Defines padding between the corner of the popup element and the arrow.\n   * Use to prevent the arrow from overlapping a rounded corner, for example.\n   */\n  arrowPadding?: number;\n\n  /**\n   * Applies max-height and max-width on the positioned element to fit it within the available space in viewport.\n   * true enables this for both width and height when overflow happens.\n   * 'always' applies `max-height`/`max-width` regardless of overflow.\n   * 'height' applies `max-height` when overflow happens, and 'width' for `max-width`\n   * `height-always` applies `max-height` regardless of overflow, and 'width-always' for always applying `max-width`\n   */\n  autoSize?: AutoSize;\n\n  /**\n   * Modifies position and alignment to cover the target\n   */\n  coverTarget?: boolean;\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  pinned?: boolean;\n\n  /**\n   * When the reference element or the viewport is outside viewport allows a positioned 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\nexport interface PositioningProps\n  // \"positionFixed\" & \"unstable_disableTether\" are not exported as public API (yet)\n  extends Omit<PositioningOptions, 'positionFixed' | 'unstable_disableTether'> {\n  /** An imperative handle to Popper methods. */\n  positioningRef?: React.Ref<PositioningImperativeRef>;\n\n  /**\n   * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target\n   */\n  target?: HTMLElement | PositioningVirtualElement | null;\n}\n\nexport type PositioningShorthandValue =\n  | 'above'\n  | 'above-start'\n  | 'above-end'\n  | 'below'\n  | 'below-start'\n  | 'below-end'\n  | 'before'\n  | 'before-top'\n  | 'before-bottom'\n  | 'after'\n  | 'after-top'\n  | 'after-bottom';\n\nexport type PositioningShorthand = PositioningProps | PositioningShorthandValue;\n"]}

package/lib/{usePopper.js → usePositioning.js}

@@ -1,9 +1,10 @@
 import { useEventCallback, useIsomorphicLayoutEffect, useFirstMount, canUseDOM } from '@fluentui/react-utilities';
-import { useFluent } from '@fluentui/react-shared-contexts';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import * as PopperJs from '@popperjs/core';
 import * as React from 'react';
 import { isIntersectingModifier } from './isIntersectingModifier';
-import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, getBasePlacement } from './utils/index'; //
+import { getScrollParent, applyRtlToOffset, getPlacement, getReactFiberFromNode, getBoundary, useCallbackRef, parsePopperPlacement } from './utils/index';
+import { getPopperOffset } from './utils/getPopperOffset'; //
 // Dev utils to detect if nodes have "autoFocus" props.
 //
 
@@ -58,7 +59,7 @@ function usePopperOptions(options, popperOriginalPositionRef) {
   const offsetModifier = React.useMemo(() => offset ? {
     name: 'offset',
     options: {
-      offset: isRtl ? applyRtlToOffset(offset) : offset
+      offset: isRtl ? applyRtlToOffset(getPopperOffset(offset)) : getPopperOffset(offset)
     }
   } : null, [offset, isRtl]);
   return React.useCallback((target, container, arrow) => {
@@ -175,7 +176,7 @@ function usePopperOptions(options, popperOriginalPositionRef) {
           width,
           height
         } = state.rects.popper;
-        const basePlacement = getBasePlacement(state.placement);
+        const basePlacement = parsePopperPlacement(state.placement).basePlacement;
         const widthProp = basePlacement === 'left' ? 'left' : 'right';
         const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
         const applyMaxWidth = autoSize === 'always' || autoSize === 'width-always' || overflow[widthProp] > 0 && (autoSize === true || autoSize === 'width');
@@ -215,7 +216,7 @@ function usePopperOptions(options, popperOriginalPositionRef) {
       fn({
         state
       }) {
-        const basePlacement = getBasePlacement(state.placement);
+        const basePlacement = parsePopperPlacement(state.placement).basePlacement;
 
         switch (basePlacement) {
           case 'bottom':
@@ -257,7 +258,7 @@ function usePopperOptions(options, popperOriginalPositionRef) {
  */
 
 
-export function usePopper(options = {}) {
+export function usePositioning(options = {}) {
   const {
     enabled = true
   } = options;
@@ -324,7 +325,7 @@ export function usePopper(options = {}) {
   const arrowRef = useCallbackRef(null, handlePopperUpdate, true); // Stores external target from options.target or setTarget
 
   const overrideTargetRef = useCallbackRef(null, handlePopperUpdate, true);
-  React.useImperativeHandle(options.popperRef, () => ({
+  React.useImperativeHandle(options.positioningRef, () => ({
     updatePosition: () => {
       var _a;
 
@@ -404,4 +405,4 @@ export function usePopper(options = {}) {
     arrowRef
   };
 }
-//# sourceMappingURL=usePopper.js.map
+//# sourceMappingURL=usePositioning.js.map