@fluentui/react-positioning 0.0.0-nightly-20221102-0421.1 → 0.0.0-nightly-20221104-0421.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-positioning",
   "entries": [
     {
-      "date": "Wed, 02 Nov 2022 04:26:56 GMT",
-      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20221102-0421.1",
-      "version": "0.0.0-nightly-20221102-0421.1",
+      "date": "Fri, 04 Nov 2022 04:28:11 GMT",
+      "tag": "@fluentui/react-positioning_v0.0.0-nightly-20221104-0421.1",
+      "version": "0.0.0-nightly-20221104-0421.1",
       "comments": {
         "prerelease": [
           {
@@ -16,20 +16,61 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221102-0421.1",
-            "commit": "89abd0271f1f8ef12f1cedf0584fca2140c9d253"
+            "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221104-0421.1",
+            "commit": "b4a6c9468046041290f176ebd64c3f304e42ec60"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221102-0421.1",
-            "commit": "89abd0271f1f8ef12f1cedf0584fca2140c9d253"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221104-0421.1",
+            "commit": "b4a6c9468046041290f176ebd64c3f304e42ec60"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-positioning",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221102-0421.1",
-            "commit": "89abd0271f1f8ef12f1cedf0584fca2140c9d253"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221104-0421.1",
+            "commit": "b4a6c9468046041290f176ebd64c3f304e42ec60"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 02 Nov 2022 11:57:57 GMT",
+      "tag": "@fluentui/react-positioning_v9.3.0",
+      "version": "9.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "acbfdcac87c7626542838000f34dbf2283c10f4e",
+            "comment": "exposes new typings to avoid exposing internal methods"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b",
+            "comment": "feat: position updates are handled out of react lifecycle"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.0",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-positioning",
+            "comment": "Bump @fluentui/react-utilities to v9.2.0",
+            "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
+          }
+        ],
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-positioning",
+            "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
+            "comment": "chore: Update Griffel to latest version"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,20 +1,36 @@
 # Change Log - @fluentui/react-positioning
 
-This log was last generated on Wed, 02 Nov 2022 04:26:56 GMT and should not be manually modified.
+This log was last generated on Fri, 04 Nov 2022 04:28:11 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20221102-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20221102-0421.1)
+## [0.0.0-nightly-20221104-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v0.0.0-nightly-20221104-0421.1)
 
-Wed, 02 Nov 2022 04:26:56 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.2.2..@fluentui/react-positioning_v0.0.0-nightly-20221102-0421.1)
+Fri, 04 Nov 2022 04:28:11 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.3.0..@fluentui/react-positioning_v0.0.0-nightly-20221104-0421.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221102-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/89abd0271f1f8ef12f1cedf0584fca2140c9d253) by beachball)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20221102-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/89abd0271f1f8ef12f1cedf0584fca2140c9d253) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20221102-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/89abd0271f1f8ef12f1cedf0584fca2140c9d253) by beachball)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221104-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b4a6c9468046041290f176ebd64c3f304e42ec60) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221104-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b4a6c9468046041290f176ebd64c3f304e42ec60) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221104-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/b4a6c9468046041290f176ebd64c3f304e42ec60) by beachball)
+
+## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.3.0)
+
+Wed, 02 Nov 2022 11:57:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-positioning_v9.2.2..@fluentui/react-positioning_v9.3.0)
+
+### Minor changes
+
+- exposes new typings to avoid exposing internal methods ([PR #25407](https://github.com/microsoft/fluentui/pull/25407) by bernardo.sunderhus@gmail.com)
+- feat: position updates are handled out of react lifecycle ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by lingfangao@hotmail.com)
+- Bump @fluentui/react-shared-contexts to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+- Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
 
 ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-positioning_v9.2.2)
 

package/dist/index.d.ts

@@ -123,7 +123,7 @@ export declare type PositioningImperativeRef = {
      * Sets the target and updates positioning imperatively.
      * Useful for avoiding double renders with the target option.
      */
-    setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
+    setTarget: (target: TargetElement) => void;
 };
 
 declare interface PositioningOptions {
@@ -186,7 +186,7 @@ export declare interface PositioningProps extends Omit<PositioningOptions, 'posi
     /**
      * Manual override for the target element. Useful for scenarios where a component accepts user prop to override target
      */
-    target?: HTMLElement | PositioningVirtualElement | null;
+    target?: TargetElement | null;
 }
 
 export declare type PositioningShorthand = PositioningProps | PositioningShorthandValue;
@@ -218,14 +218,12 @@ export declare function resolvePositioningShorthand(shorthand: PositioningShorth
 
 export declare type SetVirtualMouseTarget = (event: React_2.MouseEvent | MouseEvent | undefined | null) => void;
 
+declare type TargetElement = HTMLElement | PositioningVirtualElement;
+
 /**
  * @internal
  */
-export declare function usePositioning(options: UsePositioningOptions): {
-    targetRef: React_2.MutableRefObject<any>;
-    containerRef: React_2.MutableRefObject<any>;
-    arrowRef: React_2.MutableRefObject<any>;
-};
+export declare function usePositioning(options: UsePositioningOptions): UsePositioningReturn;
 
 /**
  * @internal
@@ -245,4 +243,10 @@ declare interface UsePositioningOptions extends PositioningProps {
     enabled?: boolean;
 }
 
+declare interface UsePositioningReturn {
+    targetRef: React_2.MutableRefObject<any>;
+    containerRef: React_2.MutableRefObject<any>;
+    arrowRef: React_2.MutableRefObject<any>;
+}
+
 export { }

package/lib/createPositionManager.js

@@ -0,0 +1,119 @@
+import { computePosition } from '@floating-ui/dom';
+import { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';
+/**
+ * @internal
+ * @returns manager that handles positioning out of the react lifecycle
+ */
+
+export function createPositionManager(options) {
+  const {
+    container,
+    target,
+    arrow,
+    strategy,
+    middleware,
+    placement
+  } = options;
+
+  if (!target || !container) {
+    return {
+      updatePosition: () => undefined,
+      dispose: () => undefined
+    };
+  }
+
+  let isFirstUpdate = true;
+  const scrollParents = new Set();
+  const targetWindow = container.ownerDocument.defaultView; // When the container is first resolved, set position `fixed` to avoid scroll jumps.
+  // Without this scroll jumps can occur when the element is rendered initially and receives focus
+
+  Object.assign(container.style, {
+    position: 'fixed',
+    left: 0,
+    top: 0,
+    margin: 0
+  });
+
+  const forceUpdate = () => {
+    if (isFirstUpdate) {
+      scrollParents.add(getScrollParent(container));
+
+      if (target instanceof HTMLElement) {
+        scrollParents.add(getScrollParent(target));
+      }
+
+      scrollParents.forEach(scrollParent => {
+        scrollParent.addEventListener('scroll', updatePosition);
+      });
+      isFirstUpdate = false;
+    }
+
+    Object.assign(container.style, {
+      position: strategy
+    });
+    computePosition(target, container, {
+      placement,
+      middleware,
+      strategy
+    }).then(({
+      x,
+      y,
+      middlewareData,
+      placement: computedPlacement
+    }) => {
+      writeArrowUpdates({
+        arrow,
+        middlewareData
+      });
+      writeContainerUpdates({
+        container,
+        middlewareData,
+        placement: computedPlacement,
+        coordinates: {
+          x,
+          y
+        },
+        lowPPI: ((targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.devicePixelRatio) || 1) <= 1,
+        strategy
+      });
+    }).catch(err => {
+      // https://github.com/floating-ui/floating-ui/issues/1845
+      // FIXME for node > 14
+      // node 15 introduces promise rejection which means that any components
+      // tests need to be `it('', async () => {})` otherwise there can be race conditions with
+      // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
+      // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
+      // will actually be counter productive
+      if (process.env.NODE_ENV === 'development') {
+        // eslint-disable-next-line no-console
+        console.error('[usePositioning]: Failed to calculate position', err);
+      }
+    });
+  };
+
+  const updatePosition = debounce(() => forceUpdate());
+
+  const dispose = () => {
+    if (targetWindow) {
+      targetWindow.removeEventListener('scroll', updatePosition);
+      targetWindow.removeEventListener('resize', updatePosition);
+    }
+
+    scrollParents.forEach(scrollParent => {
+      scrollParent.removeEventListener('scroll', updatePosition);
+    });
+  };
+
+  if (targetWindow) {
+    targetWindow.addEventListener('scroll', updatePosition);
+    targetWindow.addEventListener('resize', updatePosition);
+  } // Update the position on initialization
+
+
+  updatePosition();
+  return {
+    updatePosition,
+    dispose
+  };
+}
+//# sourceMappingURL=createPositionManager.js.map

package/lib/createPositionManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/createPositionManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { computePosition } from '@floating-ui/dom';\nimport type { Middleware, Placement, Strategy } from '@floating-ui/dom';\nimport type { PositionManager, TargetElement } from './types';\nimport { debounce, writeArrowUpdates, writeContainerUpdates, getScrollParent } from './utils';\n\ninterface PositionManagerOptions {\n  /**\n   * The positioned element\n   */\n  container: HTMLElement;\n  /**\n   * Element that the container will be anchored to\n   */\n  target: TargetElement;\n  /**\n   * Arrow that points from the container to the target\n   */\n  arrow: HTMLElement | null;\n  /**\n   * The value of the css `position` property\n   * @default absolute\n   */\n  strategy: Strategy;\n  /**\n   * [Floating UI middleware](https://floating-ui.com/docs/middleware)\n   */\n  middleware: Middleware[];\n  /**\n   * [Floating UI placement](https://floating-ui.com/docs/computePosition#placement)\n   */\n  placement?: Placement;\n}\n\n/**\n * @internal\n * @returns manager that handles positioning out of the react lifecycle\n */\nexport function createPositionManager(options: PositionManagerOptions): PositionManager {\n  const { container, target, arrow, strategy, middleware, placement } = options;\n  if (!target || !container) {\n    return {\n      updatePosition: () => undefined,\n      dispose: () => undefined,\n    };\n  }\n\n  let isFirstUpdate = true;\n  const scrollParents: Set<HTMLElement> = new Set<HTMLElement>();\n  const targetWindow = container.ownerDocument.defaultView;\n\n  // When the container is first resolved, set position `fixed` to avoid scroll jumps.\n  // Without this scroll jumps can occur when the element is rendered initially and receives focus\n  Object.assign(container.style, { position: 'fixed', left: 0, top: 0, margin: 0 });\n\n  const forceUpdate = () => {\n    if (isFirstUpdate) {\n      scrollParents.add(getScrollParent(container));\n      if (target instanceof HTMLElement) {\n        scrollParents.add(getScrollParent(target));\n      }\n\n      scrollParents.forEach(scrollParent => {\n        scrollParent.addEventListener('scroll', updatePosition);\n      });\n\n      isFirstUpdate = false;\n    }\n\n    Object.assign(container.style, { position: strategy });\n    computePosition(target, container, { placement, middleware, strategy })\n      .then(({ x, y, middlewareData, placement: computedPlacement }) => {\n        writeArrowUpdates({ arrow, middlewareData });\n        writeContainerUpdates({\n          container,\n          middlewareData,\n          placement: computedPlacement,\n          coordinates: { x, y },\n          lowPPI: (targetWindow?.devicePixelRatio || 1) <= 1,\n          strategy,\n        });\n      })\n      .catch(err => {\n        // https://github.com/floating-ui/floating-ui/issues/1845\n        // FIXME for node > 14\n        // node 15 introduces promise rejection which means that any components\n        // tests need to be `it('', async () => {})` otherwise there can be race conditions with\n        // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist\n        // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing\n        // will actually be counter productive\n        if (process.env.NODE_ENV === 'development') {\n          // eslint-disable-next-line no-console\n          console.error('[usePositioning]: Failed to calculate position', err);\n        }\n      });\n  };\n\n  const updatePosition = debounce(() => forceUpdate());\n\n  const dispose = () => {\n    if (targetWindow) {\n      targetWindow.removeEventListener('scroll', updatePosition);\n      targetWindow.removeEventListener('resize', updatePosition);\n    }\n\n    scrollParents.forEach(scrollParent => {\n      scrollParent.removeEventListener('scroll', updatePosition);\n    });\n  };\n\n  if (targetWindow) {\n    targetWindow.addEventListener('scroll', updatePosition);\n    targetWindow.addEventListener('resize', updatePosition);\n  }\n\n  // Update the position on initialization\n  updatePosition();\n\n  return {\n    updatePosition,\n    dispose,\n  };\n}\n"],"sourceRoot":""}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/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 type SetVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => void;\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 | null;\n\n  /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n  overflowBoundary?: Boundary | null;\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"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/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 TargetElement = HTMLElement | PositioningVirtualElement;\n\n/**\n * @internal\n */\nexport interface UsePositioningOptions extends PositioningProps {\n  /**\n   * If false, does not position anything\n   */\n  enabled?: boolean;\n}\n\n/**\n * @internal\n */\nexport interface PositionManager {\n  updatePosition: () => void;\n  dispose: () => void;\n}\n\nexport interface UsePositioningReturn {\n  // React refs are supposed to be contravariant\n  // (allows a more general type to be passed rather than a more specific one)\n  // However, Typescript currently can't infer that fact for refs\n  // See https://github.com/microsoft/TypeScript/issues/30748 for more information\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  targetRef: React.MutableRefObject<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  containerRef: React.MutableRefObject<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  arrowRef: React.MutableRefObject<any>;\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: TargetElement) => 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 type SetVirtualMouseTarget = (event: React.MouseEvent | MouseEvent | undefined | null) => void;\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 | null;\n\n  /** The element which will define the boundaries of the positioned element for the overflow behavior. */\n  overflowBoundary?: Boundary | null;\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?: TargetElement | 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/usePositioning.js

@@ -1,90 +1,53 @@
-import { computePosition, hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
+import { hide as hideMiddleware, arrow as arrowMiddleware } from '@floating-ui/dom';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { canUseDOM, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
-import { useEventCallback } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { useCallbackRef, toFloatingUIPlacement, toggleScrollListener, hasAutofocusFilter, debounce, hasScrollParent } from './utils';
+import { useCallbackRef, toFloatingUIPlacement, hasAutofocusFilter, hasScrollParent } from './utils';
 import { shift as shiftMiddleware, flip as flipMiddleware, coverTarget as coverTargetMiddleware, maxSize as maxSizeMiddleware, offset as offsetMiddleware, intersecting as intersectingMiddleware } from './middleware';
-import { DATA_POSITIONING_ESCAPED, DATA_POSITIONING_INTERSECTING, DATA_POSITIONING_HIDDEN, DATA_POSITIONING_PLACEMENT } from './constants';
+import { createPositionManager } from './createPositionManager';
 /**
  * @internal
  */
 
 export function usePositioning(options) {
-  const {
-    targetDocument
-  } = useFluent();
+  const managerRef = React.useRef(null);
+  const targetRef = React.useRef(null);
+  const overrideTargetRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const arrowRef = React.useRef(null);
   const {
     enabled = true
   } = options;
   const resolvePositioningOptions = usePositioningOptions(options);
-  const forceUpdate = useEventCallback(() => {
+  const updatePositionManager = React.useCallback(() => {
     var _a;
 
-    const target = (_a = overrideTargetRef.current) !== null && _a !== void 0 ? _a : targetRef.current;
-
-    if (!canUseDOM || !enabled || !target || !containerRef.current) {
-      return;
+    if (managerRef.current) {
+      managerRef.current.dispose();
     }
 
-    const {
-      placement,
-      middleware,
-      strategy
-    } = resolvePositioningOptions(target, containerRef.current, arrowRef.current); // Container is always initialized with `position: fixed` to avoid scroll jumps
-    // Before computing the positioned coordinates, revert the container to the deisred positioning strategy
-
-    Object.assign(containerRef.current.style, {
-      position: strategy
-    });
-    computePosition(target, containerRef.current, {
-      placement,
-      middleware,
-      strategy
-    }).then(({
-      x,
-      y,
-      middlewareData,
-      placement: computedPlacement
-    }) => {
-      var _a;
+    managerRef.current = null;
+    const target = (_a = overrideTargetRef.current) !== null && _a !== void 0 ? _a : targetRef.current;
 
-      writeArrowUpdates({
-        arrow: arrowRef.current,
-        middlewareData
-      });
-      writeContainerUpdates({
+    if (enabled && canUseDOM() && target && containerRef.current) {
+      managerRef.current = createPositionManager({
         container: containerRef.current,
-        middlewareData,
-        placement: computedPlacement,
-        coordinates: {
-          x,
-          y
-        },
-        lowPPI: (((_a = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) === null || _a === void 0 ? void 0 : _a.devicePixelRatio) || 1) <= 1,
-        strategy
+        target,
+        arrow: arrowRef.current,
+        ...resolvePositioningOptions(containerRef.current, arrowRef.current)
       });
-    }).catch(err => {
-      // https://github.com/floating-ui/floating-ui/issues/1845
-      // FIXME for node > 14
-      // node 15 introduces promise rejection which means that any components
-      // tests need to be `it('', async () => {})` otherwise there can be race conditions with
-      // JSDOM being torn down before this promise is resolved so globals like `window` and `document` don't exist
-      // Unless all tests that ever use `usePositioning` are turned into async tests, any logging during testing
-      // will actually be counter productive
-      if (process.env.NODE_ENV === 'development') {
-        // eslint-disable-next-line no-console
-        console.error('[usePositioning]: Failed to calculate position', err);
-      }
-    });
-  });
-  const updatePosition = React.useState(() => debounce(forceUpdate))[0];
-  const targetRef = useTargetRef(updatePosition);
-  const overrideTargetRef = useTargetRef(updatePosition);
-  const containerRef = useContainerRef(updatePosition, enabled);
-  const arrowRef = useArrowRef(updatePosition);
+    }
+  }, [enabled, resolvePositioningOptions]);
+  const setOverrideTarget = React.useCallback(target => {
+    overrideTargetRef.current = target;
+    updatePositionManager();
+  }, [updatePositionManager]);
   React.useImperativeHandle(options.positioningRef, () => ({
-    updatePosition,
+    updatePosition: () => {
+      var _a;
+
+      return (_a = managerRef.current) === null || _a === void 0 ? void 0 : _a.updatePosition();
+    },
     setTarget: target => {
       if (options.target && process.env.NODE_ENV !== 'production') {
         const err = new Error(); // eslint-disable-next-line no-console
@@ -94,35 +57,17 @@ export function usePositioning(options) {
         console.warn(err.stack);
       }
 
-      overrideTargetRef.current = target;
+      setOverrideTarget(target);
     }
-  }), // Missing deps:
-  // options.target - only used for a runtime warning
-  // overrideTargetRef - Stable between renders
-  // updatePosition - Stable between renders
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  []);
+  }), [options.target, setOverrideTarget]);
   useIsomorphicLayoutEffect(() => {
     var _a;
 
-    overrideTargetRef.current = (_a = options.target) !== null && _a !== void 0 ? _a : null;
-  }, [options.target, overrideTargetRef, containerRef]);
+    setOverrideTarget((_a = options.target) !== null && _a !== void 0 ? _a : null);
+  }, [options.target, setOverrideTarget]);
   useIsomorphicLayoutEffect(() => {
-    updatePosition();
-  }, [enabled, resolvePositioningOptions, updatePosition]); // Add window resize and scroll listeners to update position
-
-  useIsomorphicLayoutEffect(() => {
-    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
-
-    if (win) {
-      win.addEventListener('resize', updatePosition);
-      win.addEventListener('scroll', updatePosition);
-      return () => {
-        win.removeEventListener('resize', updatePosition);
-        win.removeEventListener('scroll', updatePosition);
-      };
-    }
-  }, [updatePosition, targetDocument]);
+    updatePositionManager();
+  }, [updatePositionManager]);
 
   if (process.env.NODE_ENV !== 'production') {
     // This checked should run only in development mode
@@ -150,10 +95,29 @@ export function usePositioning(options) {
     }, []);
   }
 
+  const setTarget = useCallbackRef(null, target => {
+    if (targetRef.current !== target) {
+      targetRef.current = target;
+      updatePositionManager();
+    }
+  });
+  const setContainer = useCallbackRef(null, container => {
+    if (containerRef.current !== container) {
+      containerRef.current = container;
+      updatePositionManager();
+    }
+  });
+  const setArrow = useCallbackRef(null, arrow => {
+    if (arrowRef.current !== arrow) {
+      arrowRef.current = arrow;
+      updatePositionManager();
+    }
+  }); // Let users use callback refs so they feel like 'normal' DOM refs
+
   return {
-    targetRef,
-    containerRef,
-    arrowRef
+    targetRef: setTarget,
+    containerRef: setContainer,
+    arrowRef: setArrow
   };
 }
 
@@ -176,7 +140,7 @@ function usePositioningOptions(options) {
   } = useFluent();
   const isRtl = dir === 'rtl';
   const strategy = positionFixed ? 'fixed' : 'absolute';
-  return React.useCallback((target, container, arrow) => {
+  return React.useCallback((container, arrow) => {
     const hasScrollableElement = hasScrollParent(container);
     const placement = toFloatingUIPlacement(align, position, isRtl);
     const middleware = [offset && offsetMiddleware(offset), coverTarget && coverTargetMiddleware(), !pinned && flipMiddleware({
@@ -203,105 +167,4 @@ function usePositioningOptions(options) {
     };
   }, [align, arrowPadding, autoSize, coverTarget, disableTether, flipBoundary, isRtl, offset, overflowBoundary, pinned, position, strategy]);
 }
-
-function useContainerRef(updatePosition, enabled) {
-  return useCallbackRef(null, (container, prevContainer) => {
-    if (container && enabled) {
-      // When the container is first resolved, set position `fixed` to avoid scroll jumps.
-      // Without this scroll jumps can occur when the element is rendered initially and receives focus
-      Object.assign(container.style, {
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        margin: 0
-      });
-    }
-
-    toggleScrollListener(container, prevContainer, updatePosition);
-    updatePosition();
-  });
-}
-
-function useTargetRef(updatePosition) {
-  return useCallbackRef(null, (target, prevTarget) => {
-    toggleScrollListener(target, prevTarget, updatePosition);
-    updatePosition();
-  });
-}
-
-function useArrowRef(updatePosition) {
-  return useCallbackRef(null, updatePosition);
-}
-/**
- * Writes all DOM element updates after position is computed
- */
-
-
-function writeContainerUpdates(options) {
-  var _a, _b;
-
-  const {
-    container,
-    placement,
-    middlewareData,
-    strategy,
-    lowPPI,
-    coordinates: {
-      x,
-      y
-    }
-  } = options;
-
-  if (!container) {
-    return;
-  }
-
-  container.setAttribute(DATA_POSITIONING_PLACEMENT, placement);
-  container.removeAttribute(DATA_POSITIONING_INTERSECTING);
-
-  if (middlewareData.intersectionObserver.intersecting) {
-    container.setAttribute(DATA_POSITIONING_INTERSECTING, '');
-  }
-
-  container.removeAttribute(DATA_POSITIONING_ESCAPED);
-
-  if ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.escaped) {
-    container.setAttribute(DATA_POSITIONING_ESCAPED, '');
-  }
-
-  container.removeAttribute(DATA_POSITIONING_HIDDEN);
-
-  if ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden) {
-    container.setAttribute(DATA_POSITIONING_HIDDEN, '');
-  }
-
-  Object.assign(container.style, {
-    transform: lowPPI ? `translate(${x}px, ${y}px)` : `translate3d(${x}px, ${y}px, 0)`,
-    position: strategy
-  });
-}
-/**
- * Writes all DOM element updates after position is computed
- */
-
-
-function writeArrowUpdates(options) {
-  const {
-    arrow,
-    middlewareData
-  } = options;
-
-  if (!middlewareData.arrow || !arrow) {
-    return;
-  }
-
-  const {
-    x: arrowX,
-    y: arrowY
-  } = middlewareData.arrow;
-  Object.assign(arrow.style, {
-    left: `${arrowX}px`,
-    top: `${arrowY}px`
-  });
-}
 //# sourceMappingURL=usePositioning.js.map