feat(react-positioning): replace Floating UI with custom positioning engine (exploration)

change/@fluentui-react-charts-1cc101ec-348b-4d7f-9b9f-687b8f694ade.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "Avoid creating a virtual popover target when no click position is provided.",
+  "packageName": "@fluentui/react-charts",
+  "email": "dmytrokirpa@microsoft.com"
+}

change/@fluentui-react-headless-components-preview-8a41d7c3-2b5f-4e68-a0d9-6c3f1e9b7a24.json

@@ -0,0 +1,6 @@
+{
+  "type": "minor",
+  "comment": "feat(usePositioning): use CSS anchor positioning by default, and the engine of @fluentui/react-positioning when the browser doesn't support it or an option can't be handled by CSS",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "kirpadv@gmail.com"
+}

change/@fluentui-react-positioning-39add3c6-6961-4f67-8af0-e52dc9fb99d2.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "Preserve resolved positioning targets, pinned offsets, oversized popup placement, and fixed-position clipping.",
+  "packageName": "@fluentui/react-positioning",
+  "email": "dmytrokirpa@microsoft.com"
+}

change/@fluentui-react-positioning-3f6c1a52-7d0e-4b9a-9c1e-5a2b8d4e6f10.json

@@ -0,0 +1,6 @@
+{
+  "type": "minor",
+  "comment": "feat: compute positions with a built-in engine that follows the rules of CSS anchor positioning, replacing Floating UI to reduce the bundle size",
+  "packageName": "@fluentui/react-positioning",
+  "email": "kirpadv@gmail.com"
+}

change/@fluentui-react-positioning-76925269-6201-44d2-ad51-c66d334c5418.json

@@ -0,0 +1,6 @@
+{
+  "type": "none",
+  "comment": "test(react-positioning): pin portable browser geometry and lifecycle contracts with exact engine output",
+  "packageName": "@fluentui/react-positioning",
+  "email": "dmytrokirpa@microsoft.com"
+}

change/@fluentui-react-positioning-c26c97e4-ca8e-4b26-9ea7-6d72ff5214d4.json

@@ -0,0 +1,6 @@
+{
+  "type": "patch",
+  "comment": "Replace the positioning runtime with a standalone parity engine and enforce the 15,000-byte minified budget.",
+  "packageName": "@fluentui/react-positioning",
+  "email": "dmytrokirpa@microsoft.com"
+}

packages/charts/react-charts/library/src/components/CommonComponents/ChartPopover.tsx

@@ -20,18 +20,21 @@ export const ChartPopover: React.FunctionComponent<ChartPopoverProps> = React.fo
   HTMLDivElement,
   ChartPopoverProps
 >((props, forwardedRef) => {
-  const virtualElement: PositioningVirtualElement = {
-    getBoundingClientRect: () => ({
-      top: props.clickPosition!.y,
-      left: props.clickPosition!.x,
-      right: props.clickPosition!.x,
-      bottom: props.clickPosition!.y,
-      x: props.clickPosition!.x,
-      y: props.clickPosition!.y,
-      width: 0,
-      height: 0,
-    }),
-  };
+  const { clickPosition } = props;
+  const virtualElement: PositioningVirtualElement | undefined = clickPosition
+    ? {
+        getBoundingClientRect: () => ({
+          top: clickPosition.y,
+          left: clickPosition.x,
+          right: clickPosition.x,
+          bottom: clickPosition.y,
+          x: clickPosition.x,
+          y: clickPosition.y,
+          width: 0,
+          height: 0,
+        }),
+      }
+    : undefined;
   const target =
     typeof props.positioning === 'object' && 'target' in props.positioning
       ? props.positioning.target !== null

packages/charts/react-charts/library/src/components/GanttChart/__snapshots__/GanttChart.test.tsx.snap

@@ -443,7 +443,7 @@ exports[`GanttChart interaction and accessibility tests should render custom cal
         data-popper-placement="top"
         data-tabster="{\\"restorer\\":{\\"type\\":0}}"
         role="group"
-        style="position: absolute; left: 0px; top: 0px; margin: 0px; box-sizing: border-box; max-width: 0px; max-height: -20px; overflow-y: auto; transform: translate(-10px, -40px); --fui-positioning-slide-direction-x: 0px; --fui-positioning-slide-direction-y: 1px;"
+        style="position: absolute; left: 0px; top: 0px; margin: 0px; box-sizing: border-box; max-width: 0px; max-height: 0px; transform: translate(0px, -20px); --fui-positioning-slide-direction-x: 0px; --fui-positioning-slide-direction-y: 1px;"
       >
         <div
           class="fui-cart__calloutContentRoot"
@@ -4935,7 +4935,7 @@ exports[`GanttChart rendering and behavior tests should render callout correctly
         data-popper-placement="top"
         data-tabster="{\\"restorer\\":{\\"type\\":0}}"
         role="group"
-        style="position: absolute; left: 0px; top: 0px; margin: 0px; box-sizing: border-box; max-width: 0px; max-height: -20px; overflow-y: auto; transform: translate(-10px, -40px); --fui-positioning-slide-direction-x: 0px; --fui-positioning-slide-direction-y: 1px;"
+        style="position: absolute; left: 0px; top: 0px; margin: 0px; box-sizing: border-box; max-width: 0px; max-height: 0px; transform: translate(0px, -20px); --fui-positioning-slide-direction-x: 0px; --fui-positioning-slide-direction-y: 1px;"
       >
         <div
           class="fui-cart__calloutContentRoot"

packages/react-components/react-headless-components-preview/library/bundle-size/usePositioning.fixture.js

@@ -0,0 +1,7 @@
+import { usePositioning } from '@fluentui/react-headless-components-preview/positioning';
+
+console.log(usePositioning);
+
+export default {
+  name: '@fluentui/react-headless-components-preview/positioning: usePositioning',
+};

packages/react-components/react-headless-components-preview/library/etc/avatar-group.api.md

@@ -23,8 +23,7 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import { PartitionAvatarGroupItems } from '@fluentui/react-avatar';
 import { partitionAvatarGroupItems } from '@fluentui/react-avatar';
 import { PartitionAvatarGroupItemsOptions } from '@fluentui/react-avatar';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
 import { renderAvatarGroup_unstable as renderAvatarGroup } from '@fluentui/react-avatar';
 import { renderAvatarGroupItem_unstable as renderAvatarGroupItem } from '@fluentui/react-avatar';

packages/react-components/react-headless-components-preview/library/etc/combobox.api.md

@@ -20,8 +20,7 @@ import { OptionGroupState } from '@fluentui/react-combobox';
 import { OptionProps } from '@fluentui/react-combobox';
 import { OptionSlots } from '@fluentui/react-combobox';
 import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { renderListbox_unstable as renderListbox } from '@fluentui/react-combobox';
 import { renderOption_unstable as renderOption } from '@fluentui/react-combobox';

packages/react-components/react-headless-components-preview/library/etc/dropdown.api.md

@@ -20,8 +20,7 @@ import { OptionGroupState } from '@fluentui/react-combobox';
 import { OptionProps } from '@fluentui/react-combobox';
 import { OptionSlots } from '@fluentui/react-combobox';
 import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
 import { renderListbox_unstable as renderListbox } from '@fluentui/react-combobox';
 import { renderOption_unstable as renderOption } from '@fluentui/react-combobox';

packages/react-components/react-headless-components-preview/library/etc/info-label.api.md

@@ -11,8 +11,7 @@ import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import { LabelBaseProps } from '@fluentui/react-label';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 

packages/react-components/react-headless-components-preview/library/etc/menu.api.md

@@ -49,8 +49,7 @@ import { MenuBaseState as MenuState } from '@fluentui/react-menu';
 import { MenuTriggerChildProps } from '@fluentui/react-menu';
 import { MenuTriggerProps } from '@fluentui/react-menu';
 import { MenuTriggerState } from '@fluentui/react-menu';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { renderMenuDivider_unstable as renderMenuDivider } from '@fluentui/react-menu';
 import { renderMenuGroup_unstable as renderMenuGroup } from '@fluentui/react-menu';

packages/react-components/react-headless-components-preview/library/etc/popover.api.md

@@ -13,8 +13,7 @@ import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PopoverTriggerChildProps as PopoverTriggerChildProps_2 } from '@fluentui/react-popover';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { TriggerProps } from '@fluentui/react-utilities';

packages/react-components/react-headless-components-preview/library/etc/positioning.api.md

@@ -5,11 +5,22 @@
 ```ts
 
 import { Alignment } from '@fluentui/react-positioning';
+import { AutoSize } from '@fluentui/react-positioning';
+import { Offset } from '@fluentui/react-positioning';
+import { OffsetFunction } from '@fluentui/react-positioning';
+import { OffsetFunctionParam } from '@fluentui/react-positioning';
+import { OffsetObject } from '@fluentui/react-positioning';
+import { OffsetShorthand } from '@fluentui/react-positioning';
 import { Position } from '@fluentui/react-positioning';
+import { PositioningBoundary } from '@fluentui/react-positioning';
 import { PositioningImperativeRef } from '@fluentui/react-positioning';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
+import { PositioningProps } from '@fluentui/react-positioning';
+import { PositioningRect } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningVirtualElement } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
+import { SetVirtualMouseTarget } from '@fluentui/react-positioning';
 
 export { Alignment }
 
@@ -20,27 +31,44 @@ export const ALIGNMENTS: {
     readonly end: "end";
 };
 
+export { AutoSize }
+
 // @public
 export function getPlacementString(position: Position, align: Alignment): PositioningShorthandValue;
 
+export { Offset }
+
+export { OffsetFunction }
+
+export { OffsetFunctionParam }
+
+export { OffsetObject }
+
+export { OffsetShorthand }
+
 export { Position }
 
+export { PositioningBoundary }
+
 export { PositioningImperativeRef }
 
-// @public (undocumented)
-export type PositioningProps = Pick<PositioningProps_2, 'align' | 'coverTarget' | 'fallbackPositions' | 'matchTargetSize' | 'offset' | 'pinned' | 'position' | 'positioningRef' | 'strategy' | 'target'>;
+export { PositioningProps }
+
+export { PositioningRect }
 
 // @public (undocumented)
 export type PositioningReturn = {
     targetRef: React_2.RefCallback<HTMLElement>;
     containerRef: React_2.RefCallback<HTMLElement>;
+    arrowRef: React_2.RefCallback<HTMLElement>;
 };
 
-// @public (undocumented)
-export type PositioningShorthand = PositioningProps | PositioningShorthandValue;
+export { PositioningShorthand }
 
 export { PositioningShorthandValue }
 
+export { PositioningVirtualElement }
+
 // @public (undocumented)
 export const POSITIONS: {
     readonly above: "above";
@@ -52,8 +80,15 @@ export const POSITIONS: {
 // @public (undocumented)
 export const resolvePositioningShorthand: ResolvePositioningShorthand;
 
-// @public (undocumented)
-export function usePositioning(options: PositioningProps): PositioningReturn;
+export { SetVirtualMouseTarget }
+
+// @public
+export function usePositioning(options: UsePositioningOptions): PositioningReturn;
+
+// @public
+export type UsePositioningOptions = PositioningProps & {
+    enabled?: boolean;
+};
 
 // (No @packageDocumentation comment for this package)
 

packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md

@@ -11,8 +11,7 @@ import type { JSXElement } from '@fluentui/react-utilities';
 import { ListboxProps } from '@fluentui/react-combobox';
 import { OptionSlots } from '@fluentui/react-combobox';
 import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
 import { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';
 import { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';

packages/react-components/react-headless-components-preview/library/etc/teaching-popover.api.md

@@ -13,8 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PopoverContextValue as PopoverContextValue_2 } from '@fluentui/react-popover';
 import type { PopoverTriggerChildProps } from '@fluentui/react-popover';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { renderTeachingPopoverBody_unstable as renderTeachingPopoverBody } from '@fluentui/react-teaching-popover';
 import { renderTeachingPopoverCarouselCard_unstable as renderTeachingPopoverCarouselCard } from '@fluentui/react-teaching-popover';

packages/react-components/react-headless-components-preview/library/etc/tooltip.api.md

@@ -6,8 +6,7 @@
 
 import type { JSXElement } from '@fluentui/react-utilities';
 import { OnVisibleChangeData } from '@fluentui/react-tooltip';
-import type { PositioningProps as PositioningProps_2 } from '@fluentui/react-positioning';
-import type { PositioningShorthandValue } from '@fluentui/react-positioning';
+import { PositioningShorthand } from '@fluentui/react-positioning';
 import type * as React_2 from 'react';
 import type { TooltipBaseProps } from '@fluentui/react-tooltip';
 import type { TooltipBaseState } from '@fluentui/react-tooltip';

packages/react-components/react-headless-components-preview/library/src/components/Dialog/Dialog.cy.tsx

@@ -281,26 +281,31 @@ describe('Dialog', () => {
     });
 
     it('should not close when clicking inside a portaled Popover descendant', () => {
-      mount(
-        <Dialog modalType="modal">
-          <DialogTrigger>
-            <Button id={dialogTriggerOpenId}>Open dialog</Button>
-          </DialogTrigger>
-          <DialogSurface>
-            <DialogBody>
-              <DialogTitle>Dialog title</DialogTitle>
-              <Popover>
-                <PopoverTrigger disableButtonEnhancement>
-                  <Button id="popover-trigger-btn">Toggle popover</Button>
-                </PopoverTrigger>
-                <PopoverSurface aria-label="popover">
-                  <Button id="popover-inner-btn">Inner action</Button>
-                </PopoverSurface>
-              </Popover>
-            </DialogBody>
-          </DialogSurface>
-        </Dialog>,
-      );
+      const Example = () => {
+        const [mountNode, setMountNode] = React.useState<HTMLDialogElement | null>(null);
+        return (
+          <Dialog modalType="modal">
+            <DialogTrigger>
+              <Button id={dialogTriggerOpenId}>Open dialog</Button>
+            </DialogTrigger>
+            <DialogSurface ref={setMountNode}>
+              <DialogBody>
+                <DialogTitle>Dialog title</DialogTitle>
+                {/* Legacy portaled surfaces must stay inside the native modal's non-inert subtree. */}
+                <Popover mountNode={mountNode}>
+                  <PopoverTrigger disableButtonEnhancement>
+                    <Button id="popover-trigger-btn">Toggle popover</Button>
+                  </PopoverTrigger>
+                  <PopoverSurface aria-label="popover">
+                    <Button id="popover-inner-btn">Inner action</Button>
+                  </PopoverSurface>
+                </Popover>
+              </DialogBody>
+            </DialogSurface>
+          </Dialog>
+        );
+      };
+      mount(<Example />);
       cy.get(dialogTriggerOpenSelector).realClick();
       cy.get('#popover-trigger-btn').realClick();
       cy.get('#popover-inner-btn').should('be.visible').realClick();

packages/react-components/react-headless-components-preview/library/src/components/TagPicker/TagPicker.test.tsx

@@ -35,6 +35,15 @@ const renderTagPicker = (props: Partial<Pick<TagPickerProps, 'disabled' | 'posit
   );
 };
 
+// jsdom doesn't implement `CSS.supports()`, these tests cover the CSS anchor positioning path
+beforeAll(() => {
+  Object.defineProperty(globalThis, 'CSS', { value: { supports: () => true }, configurable: true, writable: true });
+});
+
+afterAll(() => {
+  Reflect.deleteProperty(globalThis, 'CSS');
+});
+
 describe('TagPicker', () => {
   it('renders the input trigger and the options list when open', () => {
     const { getByRole, getAllByRole } = renderTagPicker();

packages/react-components/react-headless-components-preview/library/src/hooks/index.ts

@@ -1,11 +1,22 @@
 export { usePositioning } from './usePositioning';
 export type {
-  Position,
   Alignment,
+  AutoSize,
+  Offset,
+  OffsetFunction,
+  OffsetFunctionParam,
+  OffsetObject,
+  OffsetShorthand,
+  Position,
+  PositioningBoundary,
+  PositioningImperativeRef,
   PositioningProps,
+  PositioningRect,
   PositioningReturn,
-  PositioningImperativeRef,
   PositioningShorthand,
   PositioningShorthandValue,
+  PositioningVirtualElement,
+  SetVirtualMouseTarget,
+  UsePositioningOptions,
 } from './usePositioning';
 export { POSITIONS, ALIGNMENTS, getPlacementString, resolvePositioningShorthand } from './usePositioning';