refactor(react-headless-components-preview): rebuild usePositioning on spec-pure CSS anchor positioning

Author: mainframev

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

@@ -216,7 +216,7 @@ export type AccordionState = AccordionBaseState & {
 };
 
 // @public (undocumented)
-export type Alignment = (typeof ALIGNMENTS)[keyof typeof ALIGNMENTS];
+export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
 
 // @public
 export const Avatar: ForwardRefComponent<AvatarProps>;
@@ -483,13 +483,12 @@ export type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'toggl
     positioning: {
         targetRef: React_2.RefCallback<HTMLElement>;
         containerRef: React_2.RefCallback<HTMLElement>;
-        arrowRef: React_2.RefCallback<HTMLElement>;
     };
 };
 
 // @public
 export type PopoverProps = {
-    children: [React_2.ReactElement, React_2.ReactElement] | React_2.ReactElement;
+    children: [JSXElement, JSXElement] | JSXElement;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: EventHandler<OnOpenChangeData>;
@@ -561,7 +560,7 @@ export type PopoverTriggerState = {
 };
 
 // @public (undocumented)
-export type Position = (typeof POSITIONS)[keyof typeof POSITIONS];
+export type Position = 'above' | 'below' | 'before' | 'after';
 
 // @public
 export type PositioningImperativeRef = {
@@ -592,14 +591,13 @@ export type PositioningProps = {
 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;
 
 // @public (undocumented)
-export type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-top' | 'before-bottom' | 'after' | 'after-top' | 'after-bottom';
+export type PositioningShorthandValue = 'above' | 'above-start' | 'above-end' | 'below' | 'below-start' | 'below-end' | 'before' | 'before-start' | 'before-end' | 'after' | 'after-start' | 'after-end';
 
 // @public
 export const ProgressBar: ForwardRefComponent<ProgressBarProps>;
@@ -761,7 +759,7 @@ export const renderPopover: (state: PopoverState, contextValues: {
 export const renderPopoverSurface: (state: PopoverSurfaceState) => JSXElement;
 
 // @public
-export const renderPopoverTrigger: (state: PopoverTriggerState) => React_2.ReactElement | null;
+export const renderPopoverTrigger: (state: PopoverTriggerState) => JSXElement | null;
 
 // @public
 export const renderProgressBar: (state: ProgressBarState) => JSXElement;

packages/react-components/react-headless-components-preview/library/src/components/Popover/Popover.types.ts

@@ -1,5 +1,12 @@
 import type * as React from 'react';
-import type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';
+import type {
+  ComponentProps,
+  ComponentState,
+  EventData,
+  EventHandler,
+  Slot,
+  JSXElement,
+} from '@fluentui/react-utilities';
 import type { PositioningShorthand, PositioningReturn } from '../../hooks/usePositioning';
 
 /**
@@ -24,10 +31,10 @@ export type OnOpenChangeData = EventData<string, React.SyntheticEvent | Event> &
  */
 export type PopoverProps = {
   /**
-   * Can contain two children including PopoverTrigger and PopoverSurface.
-   * Alternatively can only contain PopoverSurface if using a custom target.
+   * Can contain two children including `PopoverTrigger` and `PopoverSurface`.
+   * Alternatively can only contain `PopoverSurface` if using a custom `target`.
    */
-  children: [React.ReactElement, React.ReactElement] | React.ReactElement;
+  children: [JSXElement, JSXElement] | JSXElement;
 
   /** Controlled open state. */
   open?: boolean;
@@ -190,6 +197,5 @@ export type PopoverContextValue = Pick<
   positioning: {
     targetRef: React.RefCallback<HTMLElement>;
     containerRef: React.RefCallback<HTMLElement>;
-    arrowRef: React.RefCallback<HTMLElement>;
   };
 };

packages/react-components/react-headless-components-preview/library/src/components/Popover/PopoverSurface/usePopoverSurface.ts

@@ -42,12 +42,10 @@ export const usePopoverSurface = (props: PopoverSurfaceProps, ref: React.Ref<HTM
     onMountAutoFocus,
   });
 
-  const mergedArrowRef = useMergedRefs(arrowRef, positioningCtx.arrowRef);
-
   const state: PopoverSurfaceState = {
     inline,
     withArrow,
-    arrowRef: mergedArrowRef as React.RefObject<HTMLDivElement | null>,
+    arrowRef,
     mountNode,
     components: { root: 'div' },
     root: slot.always(

packages/react-components/react-headless-components-preview/library/src/components/Popover/PopoverTrigger/renderPopoverTrigger.ts

@@ -1,9 +1,9 @@
-import type * as React from 'react';
 import type { PopoverTriggerState } from './PopoverTrigger.types';
+import type { JSXElement } from '@fluentui/react-utilities';
 
 /**
  * Renders the PopoverTrigger (returns the cloned child element).
  */
-export const renderPopoverTrigger = (state: PopoverTriggerState): React.ReactElement | null => {
+export const renderPopoverTrigger = (state: PopoverTriggerState): JSXElement | null => {
   return state.children;
 };

packages/react-components/react-headless-components-preview/library/src/components/Popover/popoverContext.ts

@@ -25,7 +25,6 @@ const popoverContextDefaultValue: PopoverContextValue = {
   positioning: {
     targetRef: () => undefined,
     containerRef: () => undefined,
-    arrowRef: () => undefined,
   },
 };
 

packages/react-components/react-headless-components-preview/library/src/components/Popover/usePopover.ts

@@ -206,7 +206,6 @@ export const usePopoverContextValues = (state: PopoverState): { popover: Popover
       positioning: {
         targetRef: positioning.targetRef,
         containerRef: positioning.containerRef,
-        arrowRef: positioning.arrowRef,
       },
     },
   };

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

@@ -1,45 +1,38 @@
-import type { Position, Alignment } from './types';
+import type { LogicalAlignment, Position } from './types';
 
-export const FALLBACK_NAME_PREFIX = '--fluent-fallback-';
+export const GAP = 8;
 
 export const POSITIONS = {
   above: 'above',
   below: 'below',
   before: 'before',
   after: 'after',
-};
+} as const;
 
 export const ALIGNMENTS = {
   start: 'start',
   center: 'center',
   end: 'end',
-};
-
-export const FLIP_POSITION_MAP: Record<Position, Position> = {
-  above: 'below',
-  below: 'above',
-  before: 'after',
-  after: 'before',
-};
+} as const;
 
-export const POSITION_AREA_MAP: Record<Position, Record<Alignment, string>> = {
+export const POSITION_AREA_MAP: Record<Position, Record<LogicalAlignment, string>> = {
   above: {
-    center: 'block-start center',
+    center: 'block-start',
     start: 'block-start span-inline-end',
     end: 'block-start span-inline-start',
   },
   below: {
-    center: 'block-end center',
+    center: 'block-end',
     start: 'block-end span-inline-end',
     end: 'block-end span-inline-start',
   },
   before: {
-    center: 'center inline-start',
+    center: 'inline-start',
     start: 'inline-start span-block-end',
     end: 'inline-start span-block-start',
   },
   after: {
-    center: 'center inline-end',
+    center: 'inline-end',
     start: 'inline-end span-block-end',
     end: 'inline-end span-block-start',
   },

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

@@ -1,5 +1,6 @@
 export { usePositioning } from './usePositioning';
-export { getPlacementString, resolvePositioningShorthand } from './placement';
+export { getPlacementString, resolvePositioningShorthand } from './utils';
+export { POSITIONS, ALIGNMENTS } from './constants';
 export type {
   Position,
   Alignment,
@@ -9,4 +10,3 @@ export type {
   PositioningShorthand,
   PositioningShorthandValue,
 } from './types';
-export { POSITIONS, ALIGNMENTS } from './constants';