chore: Upgrade Popper to Floating UI

apps/vr-tests-react-components/src/stories/Positioning.stories.tsx

@@ -3,7 +3,7 @@ import {
   usePopper,
   createArrowStyles,
   PositioningProps,
-  PopperVirtualElement,
+  PositioningVirtualElement,
   PopperRefHandle,
 } from '@fluentui/react-positioning';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
@@ -134,7 +134,7 @@ const Offset = () => {
   const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: [10, 10] });
+    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: { crossAxis: 10, mainAxis: 10 } });
     acc.push(popperRefs);
     return acc;
   }, []);
@@ -156,7 +156,7 @@ const OffsetFunction = () => {
   const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: () => [10, 10] });
+    const popperRefs = usePopper({ position: cur[0], align: cur[1], offset: () => ({ crossAxis: 10, mainAxis: 10 }) });
     acc.push(popperRefs);
     return acc;
   }, []);
@@ -375,17 +375,20 @@ const AutoSize = () => {
 
 const DisableTether = () => {
   const styles = useStyles();
+  const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
   const { containerRef, targetRef } = usePopper({
     position: 'above',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     // eslint-disable-next-line @typescript-eslint/naming-convention
     unstable_disableTether: 'all',
+    overflowBoundary: boundary,
   });
 
   return (
     <>
       <div
+        ref={setBoundary}
         className={styles.boundary}
         style={{
           display: 'flex',
@@ -396,7 +399,7 @@ const DisableTether = () => {
           position: 'relative',
         }}
       >
-        <button style={{ position: 'absolute', top: -1000 }} ref={targetRef}>
+        <button style={{ position: 'absolute', top: -50 }} ref={targetRef}>
           Target
         </button>
         <Box ref={containerRef}>Untethered</Box>
@@ -418,7 +421,7 @@ const VirtualElement = () => {
 
   React.useEffect(() => {
     if (target) {
-      const virtualElement: PopperVirtualElement = {
+      const virtualElement: PositioningVirtualElement = {
         getBoundingClientRect: () => target.getBoundingClientRect(),
       };
 

change/@fluentui-react-positioning-deff0906-26f7-49f7-8e84-fd138709d245.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Upgrade PopperJS for FloatingUI",
+  "packageName": "@fluentui/react-positioning",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-tooltip-3f810af7-b574-4988-bf02-21dbdde3e0db.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: update usages of positioning API",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/Concepts/Positioning/PositioningCoverTarget.stories.tsx

@@ -221,7 +221,7 @@ CoverTarget.parameters = {
 
 CoverTarget.decorators = [
   (Story: React.ElementType) => (
-    <div style={{ height: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div style={{ height: 700, display: 'flex', alignItems: 'center' }}>
       <Story />
     </div>
   ),

packages/react-components/src/Concepts/Positioning/PositioningImperativeAnchorTarget.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Tooltip } from '@fluentui/react-components';
-import { PopperRefHandle, PopperVirtualElement } from '@fluentui/react-positioning';
+import { PopperRefHandle, PositioningVirtualElement } from '@fluentui/react-positioning';
 
 export const ImperativeAnchorTarget = () => {
   const popperRef = React.useRef<PopperRefHandle>(null);
@@ -19,7 +19,7 @@ export const ImperativeAnchorTarget = () => {
         y,
       });
     };
-    const virtualElement: PopperVirtualElement = {
+    const virtualElement: PositioningVirtualElement = {
       getBoundingClientRect: getRect(e.clientX, e.clientY),
     };
     popperRef.current?.setTarget(virtualElement);
@@ -40,7 +40,7 @@ export const ImperativeAnchorTarget = () => {
     <>
       <Tooltip
         visible={open}
-        positioning={{ popperRef, offset: [0, 15] }}
+        positioning={{ popperRef, offset: { crossAxis: 0, mainAxis: 15 } }}
         content="Follows the cursor"
         relationship="label"
       />

packages/react-components/src/Concepts/Positioning/PositioningOffsetFunction.stories.tsx

@@ -4,8 +4,8 @@ import { Button } from '@fluentui/react-button';
 import { PositioningProps } from '@fluentui/react-positioning';
 
 export const OffsetFunction = () => {
-  const offset: PositioningProps['offset'] = ({ popper, reference, placement }) => {
-    return [10, popper.width / 2];
+  const offset: PositioningProps['offset'] = ({ floating, reference, placement }) => {
+    return { crossAxis: 10, mainAxis: floating.width / 2 };
   };
 
   return (
@@ -25,11 +25,11 @@ OffsetFunction.parameters = {
     description: {
       story: [
         'The positioned element can be offset from the target element by using a callback function.',
-        'The callback function provides the arguments and are a values used directly by Popper.',
+        'The callback function provides the arguments and are a values used directly by Floating UI.',
         '',
         '- Dimensions and position of the positioned element',
         '- Dimensions and position of the reference element',
-        '- The Popper.JS placement value',
+        '- The Floating UI placement value',
       ].join('\n'),
     },
   },

packages/react-components/src/Concepts/Positioning/PositioningOffsetValue.stories.tsx

@@ -3,34 +3,27 @@ import { Popover, PopoverTrigger, PopoverSurface } from '@fluentui/react-popover
 import { Button } from '@fluentui/react-button';
 
 export const OffsetValue = () => {
-  const [offsetY, setOffsetY] = React.useState(10);
-  const [offsetX, setOffsetX] = React.useState(10);
+  const [crossAxis, setCrossAxis] = React.useState(10);
+  const [mainAxis, setMainAxis] = React.useState(10);
 
   const onChangeY = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOffsetY(parseInt(e.target.value, 10));
+    setCrossAxis(parseInt(e.target.value, 10));
   };
 
   const onChangeX = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setOffsetX(parseInt(e.target.value, 10));
+    setMainAxis(parseInt(e.target.value, 10));
   };
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
       <label style={{ display: 'flex', gap: 10 }}>
-        Offset Y
-        <input onChange={onChangeY} value={offsetY} type="number" />
+        Cross axis
+        <input onChange={onChangeY} value={crossAxis} type="number" />
       </label>
       <label style={{ display: 'flex', gap: 10 }}>
-        Offset X
-        <input onChange={onChangeX} value={offsetX} type="number" />
+        Main axis
+        <input onChange={onChangeX} value={mainAxis} type="number" />
       </label>
-      <Popover positioning={{ position: 'after', offset: [offsetY, offsetX] }} noArrow>
-        <PopoverTrigger>
-          <Button appearance="primary">Click me</Button>
-        </PopoverTrigger>
-
-        <PopoverSurface style={{ minWidth: 100 }}>Container</PopoverSurface>
-      </Popover>
-      <Popover positioning={{ position: 'after', offset: () => [offsetY, offsetX] }} noArrow>
+      <Popover positioning={{ position: 'after', offset: { crossAxis, mainAxis } }} noArrow>
         <PopoverTrigger>
           <Button appearance="primary">Click me</Button>
         </PopoverTrigger>
@@ -47,9 +40,16 @@ OffsetValue.parameters = {
     description: {
       story: [
         'The positioned element can be offset from the target element. The offset value can be set either by:',
+        'Offset is determined by',
+        '',
+        '- Cross axis: The distance the positioning element slides from the target',
+        '- Main axis: The distance between positioning element and the target',
+        '',
+        'Offset is determined by',
+        '',
+        '- An object with cross axis and main axis values',
+        '- A function that returns the offset object',
         '',
-        '- Simple array with X and Y axis values',
-        '- A function that returns the array offset value',
       ].join('\n'),
     },
   },

packages/react-components/src/Concepts/Positioning/PositioningShorthandPositions.stories.tsx

@@ -188,7 +188,7 @@ ShorthandPositions.parameters = {
 
 ShorthandPositions.decorators = [
   (Story: React.ElementType) => (
-    <div style={{ height: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+    <div style={{ height: 700, display: 'flex', alignItems: 'center' }}>
       <Story />
     </div>
   ),

packages/react-popover/etc/react-popover.api.md

@@ -11,7 +11,7 @@ import type { ContextSelector } from '@fluentui/react-context-selector';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElementConstructor } from 'react';
-import type { PopperVirtualElement } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
@@ -56,7 +56,7 @@ export type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
     triggerRef: React_2.MutableRefObject<HTMLElement | null>;
     contentRef: React_2.MutableRefObject<HTMLElement | null>;
     arrowRef: React_2.MutableRefObject<HTMLDivElement | null>;
-    contextTarget: PopperVirtualElement | undefined;
+    contextTarget: PositioningVirtualElement | undefined;
     setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
     size: NonNullable<PopoverProps['size']>;
     popoverTrigger: React_2.ReactElement | undefined;

packages/react-popover/src/components/Popover/Popover.types.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
-import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
+import type {
+  PositioningVirtualElement,
+  PositioningShorthand,
+  usePopperMouseTarget,
+} from '@fluentui/react-positioning';
 import type { PortalProps } from '@fluentui/react-portal';
 
 /**
@@ -95,7 +99,7 @@ export type PopoverState = PopoverCommons &
     /**
      * Anchors the popper to the mouse click for context events
      */
-    contextTarget: PopperVirtualElement | undefined;
+    contextTarget: PositioningVirtualElement | undefined;
     /**
      * A callback to set the target of the popper to the mouse click for context events
      */

packages/react-positioning/etc/react-positioning.api.md

@@ -4,9 +4,10 @@
 
 ```ts
 
+import * as FloatingUI from '@floating-ui/core';
 import type { GriffelStyle } from '@griffel/react';
-import * as PopperJs from '@popperjs/core';
 import * as React_2 from 'react';
+import { VirtualElement } from '@floating-ui/core';
 
 // @public (undocumented)
 export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
@@ -15,7 +16,7 @@ export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 export type AutoSize = 'height' | 'height-always' | 'width' | 'width-always' | 'always' | boolean;
 
 // @public (undocumented)
-export type Boundary = PopperJs.Boundary | 'scrollParent' | 'window';
+export type Boundary = FloatingUI.Boundary | 'scrollParent' | 'window';
 
 // @public
 export function createArrowHeightStyles(arrowHeight: number): {
@@ -35,26 +36,32 @@ export type CreateArrowStylesOptions = {
 };
 
 // @public
-export function createVirtualElementFromClick(nativeEvent: MouseEvent): PopperVirtualElement;
+export function createVirtualElementFromClick(nativeEvent: MouseEvent): PositioningVirtualElement;
 
 // @public
 export function mergeArrowOffset(userOffset: Offset | undefined | null, arrowHeight: number): Offset;
 
 // @public (undocumented)
-export type Offset = OffsetFunction | [number | null | undefined, number | null | undefined];
+export type Offset = OffsetFunction | OffsetObject | number;
 
 // @public (undocumented)
-export type OffsetFunction = (param: OffsetFunctionParam) => [number | null | undefined, number | null | undefined];
+export type OffsetFunction = (param: OffsetFunctionParam) => OffsetObject;
 
 // @public (undocumented)
 export type OffsetFunctionParam = {
-    popper: PopperJs.Rect;
-    reference: PopperJs.Rect;
-    placement: PopperJs.Placement;
+    floating: FloatingUI.Rect;
+    reference: FloatingUI.Rect;
+    placement: FloatingUI.Placement;
 };
 
 // @public (undocumented)
-export interface PopperOptions {
+export type OffsetObject = {
+    mainAxis?: number;
+    crossAxis?: number;
+};
+
+// @public (undocumented)
+export interface FloatingUIOptions {
     align?: Alignment;
     arrowPadding?: number;
     autoSize?: AutoSize;
@@ -71,19 +78,19 @@ export interface PopperOptions {
 // @public (undocumented)
 export type PopperRefHandle = {
     updatePosition: () => void;
-    setTarget: (target: HTMLElement | PopperVirtualElement) => void;
+    setTarget: (target: HTMLElement | PositioningVirtualElement) => void;
 };
 
 // @public (undocumented)
-export type PopperVirtualElement = PopperJs.VirtualElement;
+export type PositioningVirtualElement = FloatingUI.VirtualElement;
 
 // @public (undocumented)
 export type Position = 'above' | 'below' | 'before' | 'after';
 
 // @public (undocumented)
-export interface PositioningProps extends Omit<PopperOptions, 'positionFixed' | 'unstable_disableTether'> {
+export interface PositioningProps extends Omit<FloatingUIOptions, 'positionFixed' | 'unstable_disableTether'> {
     popperRef?: React_2.Ref<PopperRefHandle>;
-    target?: HTMLElement | PopperVirtualElement | null;
+    target?: HTMLElement | PositioningVirtualElement | null;
 }
 
 // @public (undocumented)
@@ -95,17 +102,17 @@ export type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' |
 // @public (undocumented)
 export function resolvePositioningShorthand(shorthand: PositioningShorthand | undefined | null): Readonly<PositioningProps>;
 
-// Warning: (ae-forgotten-export) The symbol "UsePopperOptions" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "UseFloatingUIOptions" needs to be exported by the entry point index.d.ts
 //
-// @public
-export function usePopper(options?: UsePopperOptions): {
+// @public (undocumented)
+export function usePopper(options: UseFloatingUIOptions): {
     targetRef: React_2.MutableRefObject<any>;
     containerRef: React_2.MutableRefObject<any>;
     arrowRef: React_2.MutableRefObject<any>;
 };
 
 // @public
-export const usePopperMouseTarget: (initialState?: PopperJs.VirtualElement | (() => PopperJs.VirtualElement) | undefined) => readonly [PopperJs.VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
+export const usePopperMouseTarget: (initialState?: VirtualElement | (() => PositioningVirtualElement) | undefined) => readonly [VirtualElement | undefined, (event: React_2.MouseEvent | MouseEvent | undefined | null) => void];
 
 // (No @packageDocumentation comment for this package)
 

packages/react-positioning/package.json

@@ -28,11 +28,11 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "^0.4.0",
     "@griffel/react": "1.0.0",
     "@fluentui/react-shared-contexts": "9.0.0-rc.4",
     "@fluentui/react-theme": "9.0.0-rc.4",
     "@fluentui/react-utilities": "9.0.0-rc.5",
-    "@popperjs/core": "~2.4.3",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

packages/react-positioning/src/contants.ts

@@ -0,0 +1,3 @@
+export const DATA_POSITIONING_INTERSECTING = 'data-popper-is-intersecting';
+export const DATA_POSITIONING_ESCAPED = 'data-popper-escaped';
+export const DATA_POSITIONING_HIDDEN = 'data-popper-reference-hidden';

packages/react-positioning/src/createArrowStyles.ts

@@ -70,7 +70,6 @@ export function createArrowStyles(options: CreateArrowStylesOptions): GriffelSty
     position: 'absolute',
     backgroundColor: 'inherit',
     visibility: 'hidden',
-    zIndex: -1,
 
     ...(arrowHeight && createArrowHeightStyles(arrowHeight)),