chore: Upgrade Popper to Floating UI

apps/ts-minbar-test-react-components/assets/patches/@floating-ui+core+0.6.0.patch

@@ -0,0 +1,20 @@
+diff --git a/node_modules/@floating-ui/core/src/types.d.ts b/node_modules/@floating-ui/core/src/types.d.ts
+index f5c4f1b..14cc9b3 100644
+--- a/node_modules/@floating-ui/core/src/types.d.ts
++++ b/node_modules/@floating-ui/core/src/types.d.ts
+@@ -1,6 +1,14 @@
+ export declare type Alignment = 'start' | 'end';
+ export declare type Side = 'top' | 'right' | 'bottom' | 'left';
+-export declare type AlignedPlacement = `${Side}-${Alignment}`;
++export declare type AlignedPlacement =
++  | 'top-start'
++  | 'top-end'
++  | 'right-start'
++  | 'right-end'
++  | 'bottom-start'
++  | 'bottom-end'
++  | 'left-start'
++  | 'left-end';
+ export declare type Placement = Side | AlignedPlacement;
+ export declare type Strategy = 'absolute' | 'fixed';
+ export declare type Axis = 'x' | 'y';

apps/ts-minbar-test-react-components/assets/patches/@floating-ui+dom+0.4.0.patch

@@ -0,0 +1,7 @@
+diff --git a/node_modules/@floating-ui/dom/src/utils/getOverflowAncestors.d.ts b/node_modules/@floating-ui/dom/src/utils/getOverflowAncestors.d.ts
+index 461f170..86d7a4a 100644
+--- a/node_modules/@floating-ui/dom/src/utils/getOverflowAncestors.d.ts
++++ b/node_modules/@floating-ui/dom/src/utils/getOverflowAncestors.d.ts
+@@ -1 +1 @@
+-export declare function getOverflowAncestors(node: Node, list?: Array<Element | Window>): Array<Element | Window | VisualViewport>;
++export declare function getOverflowAncestors(node: Node, list?: Array<Element | Window>): Array<Element | Window>;

apps/ts-minbar-test-react-components/assets/patches/README.md

@@ -0,0 +1,5 @@
+# Patches for TS minbar test
+
+Some partners might be on incompatible versions of typescript, but are willing to patch incompatible
+types on their end. If this is the case, simply create a similar patch for the affected code with
+[patch-package](https://github.com/ds300/patch-package) and drop the resulting patch in this folder.

apps/ts-minbar-test-react-components/src/index.ts

@@ -1,5 +1,6 @@
 import config from '@fluentui/scripts/config';
 import * as fs from 'fs-extra';
+import * as fsExtra from 'fs-extra';
 import * as path from 'path';
 import {
   addResolutionPathsForProjectPackages,
@@ -21,9 +22,14 @@ async function performTest() {
     logger(`✔️ Temporary directories created under ${tempPaths.root}`);
 
     // Install dependencies, using the minimum TS version supported for consumers
-    const dependencies = ['@types/react', '@types/react-dom', 'react', 'react-dom', `typescript@${tsVersion}`].join(
-      ' ',
-    );
+    const dependencies = [
+      '@types/react',
+      '@types/react-dom',
+      'react',
+      'react-dom',
+      `typescript@${tsVersion}`,
+      'patch-package',
+    ].join(' ');
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
 
@@ -37,6 +43,11 @@ async function performTest() {
     fs.mkdirSync(path.join(tempPaths.testApp, 'src'));
     fs.copyFileSync(scaffoldPath('index.tsx'), path.join(tempPaths.testApp, 'src/index.tsx'));
     fs.copyFileSync(scaffoldPath('tsconfig.json'), path.join(tempPaths.testApp, 'tsconfig.json'));
+
+    fs.mkdirSync(path.join(tempPaths.testApp, 'patches/'));
+    fsExtra.copySync(scaffoldPath('patches/'), path.join(tempPaths.testApp, 'patches/'));
+    await shEcho(`yarn patch-package`, tempPaths.testApp);
+
     logger(`✔️ Source and configs were copied`);
 
     await shEcho(`npx npm-which yarn`);

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-popover-7c1b5c26-eb72-4d8b-8951-f6a5501eb7af.json

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

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"
+}

change/@fluentui-react-utilities-6d717ab6-1b9a-4a69-9cc9-fefbb3469bd3.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: useFirstMount now returns a function getter so that it can be used in closures",
+  "packageName": "@fluentui/react-utilities",
+  "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,9 +11,9 @@ 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 { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
+import type { PositioningVirtualElement } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
@@ -55,7 +55,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
      */