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

@@ -27,6 +27,7 @@ async function performTest() {
       'react@17',
       'react-dom@17',
       `typescript@${tsVersion}`,
+      'patch-package',
     ].join(' ');
     await shEcho(`yarn add ${dependencies}`, tempPaths.testApp);
     logger(`✔️ Dependencies were installed`);
@@ -41,6 +42,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/'));
+    fs.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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  usePopper,
+  usePositioning,
   createArrowStyles,
   PositioningProps,
-  PopperVirtualElement,
-  PopperRefHandle,
+  PositioningVirtualElement,
+  PositioningImperativeRef,
 } from '@fluentui/react-positioning';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { useMergedRefs } from '@fluentui/react-utilities';
@@ -103,7 +103,7 @@ const Box = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement
 
 const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ positionFixed }) => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     const popperOptions: PositioningProps = { position: cur[0], align: cur[1] };
     // positionFixed is not public yet
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -112,8 +112,8 @@ const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ position
 
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper(popperOptions);
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning(popperOptions);
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -131,11 +131,15 @@ const PositionAndAlignProps: React.FC<{ positionFixed?: boolean }> = ({ position
 
 const Offset = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((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] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({
+      position: cur[0],
+      align: cur[1],
+      offset: { crossAxis: 10, mainAxis: 10 },
+    });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -153,11 +157,15 @@ const Offset = () => {
 
 const OffsetFunction = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((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] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({
+      position: cur[0],
+      align: cur[1],
+      offset: () => ({ crossAxis: 10, mainAxis: 10 }),
+    });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -175,11 +183,11 @@ const OffsetFunction = () => {
 
 const CoverTarget = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1], coverTarget: true });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({ position: cur[0], align: cur[1], coverTarget: true });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -198,8 +206,8 @@ const CoverTarget = () => {
 const VerticalFlip = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const topPopper = usePopper({ position: 'above', flipBoundary: boundary ?? undefined });
-  const bottomPopper = usePopper({ position: 'below', flipBoundary: boundary ?? undefined });
+  const topPopper = usePositioning({ position: 'above', flipBoundary: boundary ?? undefined });
+  const bottomPopper = usePositioning({ position: 'below', flipBoundary: boundary ?? undefined });
 
   return (
     <div
@@ -221,8 +229,8 @@ const VerticalFlip = () => {
 const HorizontalFlip = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const startPopper = usePopper({ position: 'before', flipBoundary: boundary ?? undefined });
-  const endPopper = usePopper({ position: 'after', flipBoundary: boundary ?? undefined });
+  const startPopper = usePositioning({ position: 'before', flipBoundary: boundary ?? undefined });
+  const endPopper = usePositioning({ position: 'after', flipBoundary: boundary ?? undefined });
   const { dir } = useFluent();
   const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight';
 
@@ -242,8 +250,8 @@ const HorizontalFlip = () => {
 const VerticalOverflow = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const topPopper = usePopper({ position: 'after', overflowBoundary: boundary ?? undefined });
-  const bottomPopper = usePopper({ position: 'after', overflowBoundary: boundary ?? undefined });
+  const topPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined });
+  const bottomPopper = usePositioning({ position: 'after', overflowBoundary: boundary ?? undefined });
 
   return (
     <div
@@ -265,8 +273,8 @@ const VerticalOverflow = () => {
 const HorizontalOverflow = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const startPopper = usePopper({ position: 'below', overflowBoundary: boundary ?? undefined });
-  const endPopper = usePopper({ position: 'below', overflowBoundary: boundary ?? undefined });
+  const startPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined });
+  const endPopper = usePositioning({ position: 'below', overflowBoundary: boundary ?? undefined });
   const { dir } = useFluent();
   const marginDir = dir === 'ltr' ? 'marginLeft' : 'marginRight';
 
@@ -290,7 +298,7 @@ const HorizontalOverflow = () => {
 const Pinned = () => {
   const styles = useStyles();
   const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'above',
     flipBoundary: boundary ?? undefined,
     pinned: true,
@@ -310,11 +318,11 @@ const Pinned = () => {
 
 const Arrow: React.FC = () => {
   const styles = useStyles();
-  const positionedRefs = positions.reduce<ReturnType<typeof usePopper>[]>((acc, cur) => {
+  const positionedRefs = positions.reduce<ReturnType<typeof usePositioning>[]>((acc, cur) => {
     // this loop is deterministic
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    const popperRefs = usePopper({ position: cur[0], align: cur[1] });
-    acc.push(popperRefs);
+    const positioningRefs = usePositioning({ position: cur[0], align: cur[1] });
+    acc.push(positioningRefs);
     return acc;
   }, []);
 
@@ -335,7 +343,7 @@ const Arrow: React.FC = () => {
 
 const AutoSize = () => {
   const styles = useStyles();
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'below',
     autoSize: true,
   });
@@ -375,17 +383,20 @@ const AutoSize = () => {
 
 const DisableTether = () => {
   const styles = useStyles();
-  const { containerRef, targetRef } = usePopper({
+  const [boundary, setBoundary] = React.useState<HTMLDivElement | null>(null);
+  const { containerRef, targetRef } = usePositioning({
     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 +407,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>
@@ -411,14 +422,14 @@ const DisableTether = () => {
 const VirtualElement = () => {
   const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
-  const { containerRef, targetRef } = usePopper({
+  const { containerRef, targetRef } = usePositioning({
     position: 'below',
     align: 'end',
   });
 
   React.useEffect(() => {
     if (target) {
-      const virtualElement: PopperVirtualElement = {
+      const virtualElement: PositioningVirtualElement = {
         getBoundingClientRect: () => target.getBoundingClientRect(),
       };
 
@@ -437,7 +448,7 @@ const VirtualElement = () => {
 const TargetProp = () => {
   const [target, setTarget] = React.useState<HTMLButtonElement | null>(null);
 
-  const { containerRef } = usePopper({
+  const { containerRef } = usePositioning({
     target,
     position: 'below',
     align: 'end',
@@ -452,18 +463,18 @@ const TargetProp = () => {
 };
 
 const ImperativeTarget = () => {
-  const popperRef = React.useRef<PopperRefHandle>({ updatePosition: () => null, setTarget: () => null });
+  const imperativeRef = React.useRef<PositioningImperativeRef>({ updatePosition: () => null, setTarget: () => null });
   const ref = React.useRef<HTMLButtonElement>(null);
 
-  const { containerRef } = usePopper({
-    popperRef,
+  const { containerRef } = usePositioning({
+    imperativeRef,
     position: 'below',
     align: 'end',
   });
 
   React.useEffect(() => {
     if (ref.current) {
-      popperRef.current.setTarget(ref.current);
+      imperativeRef.current.setTarget(ref.current);
     }
   }, []);
 
@@ -477,7 +488,7 @@ const ImperativeTarget = () => {
 
 const VisibilityModifiers = () => {
   const styles = useStyles();
-  const popper = usePopper({ align: 'center', position: 'above' });
+  const popper = usePositioning({ align: 'center', position: 'above' });
 
   return (
     <>

change/@fluentui-react-menu-16ea1e78-a70f-4378-9515-49a0254f3217.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Updates related to internal bump of Popper.js to Floating UI",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-popover-7c1b5c26-eb72-4d8b-8951-f6a5501eb7af.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Updates related to internal bump of Popper.js to Floating UI",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "BREAKING: Updates related to internal bump of Popper.js to Floating UI",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-combobox/src/components/Combobox/useCombobox.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
+import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import {
   getPartitionedNativeProps,
   resolveShorthand,
@@ -56,7 +56,7 @@ export const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLBu
   }: {
     targetRef: React.MutableRefObject<HTMLButtonElement>;
     containerRef: React.MutableRefObject<HTMLDivElement>;
-  } = usePopper(popperOptions);
+  } = usePositioning(popperOptions);
 
   // update value based on selectedOptions
   const isFirstMount = useFirstMount();

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>
   ),