WIP: feat(react-headless-components-preview): add Popover & positioning

packages/react-components/react-headless-components-preview/library/cypress.config.ts

@@ -0,0 +1,3 @@
+import { baseConfig } from '@fluentui/scripts-cypress';
+
+export default baseConfig;

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

@@ -44,10 +44,13 @@ import type { CheckboxBaseProps } from '@fluentui/react-checkbox';
 import { CheckboxBaseState } from '@fluentui/react-checkbox';
 import type { CheckboxSlots as CheckboxSlots_2 } from '@fluentui/react-checkbox';
 import { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
 import type { DividerBaseProps } from '@fluentui/react-divider';
 import { DividerBaseState } from '@fluentui/react-divider';
 import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
+import type { EventData } from '@fluentui/react-utilities';
+import type { EventHandler } from '@fluentui/react-utilities';
 import type { FieldBaseProps } from '@fluentui/react-field';
 import { FieldBaseState } from '@fluentui/react-field';
 import { FieldContextValues } from '@fluentui/react-field';
@@ -116,6 +119,7 @@ import type { SkeletonSlots as SkeletonSlots_2 } from '@fluentui/react-skeleton'
 import type { SliderBaseProps } from '@fluentui/react-slider';
 import { SliderBaseState } from '@fluentui/react-slider';
 import type { SliderSlots as SliderSlots_2 } from '@fluentui/react-slider';
+import type { Slot } from '@fluentui/react-utilities';
 import type { SpinButtonBaseProps } from '@fluentui/react-spinbutton';
 import { SpinButtonBaseState } from '@fluentui/react-spinbutton';
 import type { SpinButtonSlots as SpinButtonSlots_2 } from '@fluentui/react-spinbutton';
@@ -211,6 +215,9 @@ export type AccordionState = AccordionBaseState & {
     };
 };
 
+// @public (undocumented)
+export type Alignment = 'top' | 'bottom' | 'start' | 'end' | 'center';
+
 // @public
 export const Avatar: ForwardRefComponent<AvatarProps>;
 
@@ -457,6 +464,149 @@ export type MessageBarTitleSlots = MessageBarTitleSlots_2;
 // @public (undocumented)
 export type MessageBarTitleState = MessageBarTitleState_2;
 
+// @public
+export type OnOpenChangeData = EventData<string, React_2.SyntheticEvent | Event> & {
+    open: boolean;
+};
+
+// @public
+export type OpenPopoverEvents = MouseEvent | TouchEvent | React_2.FocusEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement> | React_2.MouseEvent<HTMLElement>;
+
+// @public
+export const Popover: {
+    (props: PopoverProps): JSXElement;
+    displayName: string;
+};
+
+// @public
+export type PopoverContextValue = Pick<PopoverState, 'open' | 'setOpen' | 'toggleOpen' | 'triggerRef' | 'contentRef' | 'arrowRef' | 'openOnHover' | 'openOnContext' | 'trapFocus' | 'disableAutoFocus' | 'withArrow' | 'inline' | 'mountNode'> & {
+    positioning: {
+        targetRef: React_2.RefCallback<HTMLElement>;
+        containerRef: React_2.RefCallback<HTMLElement>;
+    };
+};
+
+// @public
+export type PopoverProps = {
+    children: [JSXElement, JSXElement] | JSXElement;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: EventHandler<OnOpenChangeData>;
+    openOnHover?: boolean;
+    openOnContext?: boolean;
+    mouseLeaveDelay?: number;
+    positioning?: PositioningShorthand;
+    withArrow?: boolean;
+    trapFocus?: boolean;
+    disableAutoFocus?: boolean;
+    closeOnScroll?: boolean;
+    closeOnIframeFocus?: boolean;
+    inline?: boolean;
+    mountNode?: HTMLElement | null;
+};
+
+// @public
+export type PopoverState = Required<Pick<PopoverProps, 'open' | 'inline'>> & Pick<PopoverProps, 'onOpenChange' | 'openOnContext' | 'openOnHover' | 'trapFocus' | 'withArrow' | 'disableAutoFocus' | 'mountNode'> & {
+    setOpen: (e: OpenPopoverEvents, open: boolean) => void;
+    toggleOpen: (e: OpenPopoverEvents) => void;
+    triggerRef: React_2.RefObject<HTMLElement | null>;
+    contentRef: React_2.RefObject<HTMLElement | null>;
+    arrowRef: React_2.RefObject<HTMLDivElement | null>;
+    popoverTrigger: React_2.ReactElement | undefined;
+    popoverSurface: React_2.ReactElement | undefined;
+    contextTarget: {
+        x: number;
+        y: number;
+    } | undefined;
+    setContextTarget: (target: {
+        x: number;
+        y: number;
+    } | undefined) => void;
+    positioning: PositioningReturn;
+};
+
+// @public
+export const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
+
+// @public (undocumented)
+export type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
+
+// @public
+export type PopoverSurfaceSlots = {
+    root: Slot<'div'>;
+};
+
+// @public (undocumented)
+export type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & {
+    inline: boolean;
+    withArrow: boolean | undefined;
+    arrowRef: React_2.RefObject<HTMLDivElement | null>;
+    mountNode: HTMLElement | null | undefined;
+    'data-open': string;
+};
+
+// @public
+export const PopoverTrigger: React_2.FC<PopoverTriggerProps>;
+
+// @public
+export type PopoverTriggerProps = {
+    children: React_2.ReactElement;
+    disableButtonEnhancement?: boolean;
+};
+
+// @public
+export type PopoverTriggerState = {
+    children: React_2.ReactElement | null;
+};
+
+// @public (undocumented)
+export type Position = 'above' | 'below' | 'before' | 'after';
+
+// @public
+export type PositioningBoundaryPadding = number | Partial<{
+    top: number;
+    end: number;
+    bottom: number;
+    start: number;
+}>;
+
+// @public
+export type PositioningImperativeRef = {
+    setTarget: (target: HTMLElement | null) => void;
+    updatePosition: () => void;
+};
+
+// @public (undocumented)
+export type PositioningProps = {
+    position?: Position;
+    align?: Alignment;
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    fallbackPositions?: PositioningShorthandValue[];
+    coverTarget?: boolean;
+    target?: HTMLElement | React_2.RefObject<HTMLElement | null> | null;
+    strategy?: 'absolute' | 'fixed';
+    matchTargetSize?: 'width';
+    pinned?: boolean;
+    positioningRef?: React_2.Ref<PositioningImperativeRef>;
+    overflowBoundary?: HTMLElement | React_2.RefObject<HTMLElement | null> | null;
+    overflowBoundaryPadding?: PositioningBoundaryPadding;
+};
+
+// @public (undocumented)
+export type PositioningReturn = {
+    targetRef: React_2.RefCallback<HTMLElement>;
+    containerRef: 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-start' | 'before-end' | 'after' | 'after-start' | 'after-end';
+
 // @public
 export const ProgressBar: ForwardRefComponent<ProgressBarProps>;
 
@@ -608,6 +758,17 @@ export const renderMessageBarBody: (state: MessageBarBodyState_2, contextValues:
 // @public
 export const renderMessageBarTitle: (state: MessageBarTitleState_2) => JSXElement;
 
+// @public
+export const renderPopover: (state: PopoverState, contextValues: {
+    popover: PopoverContextValue;
+}) => React_2.ReactElement;
+
+// @public
+export const renderPopoverSurface: (state: PopoverSurfaceState) => JSXElement;
+
+// @public
+export const renderPopoverTrigger: (state: PopoverTriggerState) => JSXElement | null;
+
 // @public
 export const renderProgressBar: (state: ProgressBarState) => JSXElement;
 
@@ -939,6 +1100,23 @@ export const useMessageBarContextValues: (state: MessageBarState) => MessageBarC
 // @public
 export const useMessageBarTitle: (props: MessageBarTitleProps, ref: React_2.Ref<HTMLElement>) => MessageBarTitleState;
 
+// @public
+export const usePopover: (props: PopoverProps, ref: React_2.Ref<HTMLElement>) => PopoverState;
+
+// @public
+export const usePopoverContext: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;
+
+// @public (undocumented)
+export const usePopoverContextValues: (state: PopoverState) => {
+    popover: PopoverContextValue;
+};
+
+// @public
+export const usePopoverSurface: (props: PopoverSurfaceProps, ref: React_2.Ref<HTMLDivElement>) => PopoverSurfaceState;
+
+// @public
+export const usePopoverTrigger: (props: PopoverTriggerProps) => PopoverTriggerState;
+
 // @public
 export const useProgressBar: (props: ProgressBarProps, ref: React_2.Ref<HTMLDivElement>) => ProgressBarState;
 

packages/react-components/react-headless-components-preview/library/package.json

@@ -19,13 +19,16 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@fluentui/keyboard-keys": "^9.0.8",
     "@fluentui/react-accordion": "^9.10.0",
     "@fluentui/react-avatar": "^9.10.4",
     "@fluentui/react-badge": "^9.5.1",
+    "@fluentui/react-aria": "^9.17.10",
     "@fluentui/react-button": "^9.9.0",
     "@fluentui/react-breadcrumb": "^9.4.0",
     "@fluentui/react-checkbox": "^9.5.17",
     "@fluentui/react-dialog": "^9.17.3",
+    "@fluentui/react-context-selector": "^9.2.15",
     "@fluentui/react-divider": "^9.7.0",
     "@fluentui/react-field": "^9.4.16",
     "@fluentui/react-image": "^9.4.0",

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

@@ -0,0 +1,14 @@
+export { Popover, renderPopover, usePopover, usePopoverContext, usePopoverContextValues } from './components/Popover';
+export type {
+  PopoverProps,
+  PopoverState,
+  PopoverContextValue,
+  OpenPopoverEvents,
+  OnOpenChangeData,
+} from './components/Popover';
+
+export { PopoverTrigger, usePopoverTrigger, renderPopoverTrigger } from './components/Popover';
+export type { PopoverTriggerProps, PopoverTriggerState } from './components/Popover';
+
+export { PopoverSurface, usePopoverSurface, renderPopoverSurface } from './components/Popover';
+export type { PopoverSurfaceSlots, PopoverSurfaceProps, PopoverSurfaceState } from './components/Popover';