[core] Refactor data passing

Author: atomiks

docs/reference/generated/menu-positioner.json

@@ -4,6 +4,7 @@
   "props": {
     "align": {
       "type": "'start' | 'center' | 'end'",
+      "default": "'center'",
       "description": "How to align the popup relative to the specified side."
     },
     "alignOffset": {
@@ -13,6 +14,7 @@
     },
     "side": {
       "type": "'bottom' | 'inline-end' | 'inline-start' | 'left' | 'right' | 'top'",
+      "default": "'bottom'",
       "description": "Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."
     },
     "sideOffset": {
@@ -42,21 +44,26 @@
     "sticky": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to maintain the menu in the viewport after\nthe anchor element is scrolled out of view."
+      "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
     },
     "positionMethod": {
       "type": "'absolute' | 'fixed'",
       "default": "'absolute'",
       "description": "Determines which CSS `position` property to use."
     },
+    "trackAnchor": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popup tracks any layout shift of its positioning anchor."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the menu is hidden."
+      "description": "Whether to keep the popup mounted in the DOM while it's hidden."
     },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",

docs/reference/generated/popover-positioner.json

@@ -44,21 +44,26 @@
     "sticky": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to maintain the popup in the viewport after\nthe anchor element is scrolled out of view."
+      "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
     },
     "positionMethod": {
       "type": "'absolute' | 'fixed'",
       "default": "'absolute'",
       "description": "Determines which CSS `position` property to use."
     },
+    "trackAnchor": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popup tracks any layout shift of its positioning anchor."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the popover is hidden."
+      "description": "Whether to keep the popup mounted in the DOM while it's hidden."
     },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",

docs/reference/generated/preview-card-positioner.json

@@ -44,21 +44,26 @@
     "sticky": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to maintain the popup in the viewport after\nthe anchor element is scrolled out of view."
+      "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
     },
     "positionMethod": {
       "type": "'absolute' | 'fixed'",
       "default": "'absolute'",
       "description": "Determines which CSS `position` property to use."
     },
+    "trackAnchor": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popup tracks any layout shift of its positioning anchor."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the preview card is hidden."
+      "description": "Whether to keep the popup mounted in the DOM while it's hidden."
     },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",

docs/reference/generated/select-positioner.json

@@ -4,7 +4,7 @@
   "props": {
     "align": {
       "type": "'start' | 'center' | 'end'",
-      "default": "'start'",
+      "default": "'center'",
       "description": "How to align the popup relative to the specified side."
     },
     "alignOffset": {
@@ -44,17 +44,17 @@
     "sticky": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to maintain the select menu in the viewport after\nthe anchor element is scrolled out of view."
+      "description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
     },
     "positionMethod": {
       "type": "'absolute' | 'fixed'",
       "default": "'absolute'",
-      "description": "The CSS position method for positioning the Select popup element."
+      "description": "Determines which CSS `position` property to use."
     },
     "trackAnchor": {
       "type": "boolean",
       "default": "true",
-      "description": "Whether the select popup continuously tracks its anchor after the initial positioning upon mount."
+      "description": "Whether the popup tracks any layout shift of its positioning anchor."
     },
     "className": {
       "type": "string | (state) => string",

docs/reference/generated/tooltip-positioner.json

@@ -51,14 +51,19 @@
       "default": "'absolute'",
       "description": "Determines which CSS `position` property to use."
     },
+    "trackAnchor": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popup tracks any layout shift of its positioning anchor."
+    },
     "className": {
       "type": "string | (state) => string",
       "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
     },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
-      "description": "Whether to keep the HTML element in the DOM while the tooltip is hidden."
+      "description": "Whether to keep the popup mounted in the DOM while it's hidden."
     },
     "render": {
       "type": "React.ReactElement | (props, state) => React.ReactElement",

docs/src/app/(private)/experiments/anchor-positioning.tsx

@@ -37,7 +37,7 @@ export default function AnchorPositioning() {
     positionerStyles,
     arrowStyles,
     arrowRef,
-    renderedSide,
+    side: renderedSide,
     arrowUncentered,
   } = useAnchorPositioning({
     side,

packages/react/src/dialog/root/DialogRoot.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DialogRootContext, useOptionalDialogRootContext } from './DialogRootContext';
 import { DialogContext } from '../utils/DialogContext';
-import { type CommonParameters, useDialogRoot } from './useDialogRoot';
+import { type SharedParameters, useDialogRoot } from './useDialogRoot';
 import { PortalContext } from '../../portal/PortalContext';
 
 /**
@@ -50,7 +50,7 @@ const DialogRoot = function DialogRoot(props: DialogRoot.Props) {
 };
 
 namespace DialogRoot {
-  export interface Props extends CommonParameters {
+  export interface Props extends SharedParameters {
     children?: React.ReactNode;
   }
 }

packages/react/src/dialog/root/useDialogRoot.ts

@@ -21,7 +21,7 @@ import {
   translateOpenChangeReason,
 } from '../../utils/translateOpenChangeReason';
 
-export function useDialogRoot(parameters: useDialogRoot.Parameters): useDialogRoot.ReturnValue {
+export function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue {
   const {
     defaultOpen,
     dismissible,
@@ -30,7 +30,7 @@ export function useDialogRoot(parameters: useDialogRoot.Parameters): useDialogRo
     onNestedDialogOpen,
     onOpenChange: onOpenChangeParameter,
     open: openParam,
-  } = parameters;
+  } = params;
 
   const [open, setOpenUnwrapped] = useControlled({
     controlled: openParam,
@@ -167,7 +167,7 @@ export function useDialogRoot(parameters: useDialogRoot.Parameters): useDialogRo
   ]);
 }
 
-export interface CommonParameters {
+export interface SharedParameters {
   /**
    * Whether the dialog is currently open.
    */
@@ -200,7 +200,7 @@ export interface CommonParameters {
 }
 
 export namespace useDialogRoot {
-  export interface Parameters extends RequiredExcept<CommonParameters, 'open' | 'onOpenChange'> {
+  export interface Parameters extends RequiredExcept<SharedParameters, 'open' | 'onOpenChange'> {
     /**
      * Callback to invoke when a nested dialog is opened.
      */

packages/react/src/menu/positioner/MenuPositioner.tsx

@@ -1,23 +1,18 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import {
-  FloatingNode,
-  useFloatingNodeId,
-  useFloatingParentNodeId,
-  useFloatingTree,
-} from '@floating-ui/react';
+import { FloatingNode, useFloatingNodeId, useFloatingParentNodeId } from '@floating-ui/react';
 import { MenuPositionerContext } from './MenuPositionerContext';
 import { useMenuRootContext } from '../root/MenuRootContext';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import { useMenuPositioner } from './useMenuPositioner';
-import { HTMLElementType } from '../../utils/proptypes';
 import { BaseUIComponentProps } from '../../utils/types';
 import { popupStateMapping } from '../../utils/popupStateMapping';
 import { CompositeList } from '../../composite/list/CompositeList';
 import { InternalBackdrop } from '../../utils/InternalBackdrop';
+import { HTMLElementType, refType } from '../../utils/proptypes';
 
 /**
  * Positions the menu popup against the trigger.
@@ -43,6 +38,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     collisionPadding = 5,
     arrowPadding = 5,
     sticky = false,
+    trackAnchor = true,
     ...otherProps
   } = props;
 
@@ -54,12 +50,9 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     itemLabels,
     mounted,
     nested,
-    setOpen,
     modal,
   } = useMenuRootContext();
 
-  const { events: menuEvents } = useFloatingTree()!;
-
   const nodeId = useFloatingNodeId();
   const parentNodeId = useFloatingParentNodeId();
 
@@ -88,8 +81,8 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     sticky,
     nodeId,
     parentNodeId,
-    menuEvents,
-    setOpen,
+    keepMounted,
+    trackAnchor,
   });
 
   const state: MenuPositioner.State = React.useMemo(
@@ -110,15 +103,15 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
       arrowRef: positioner.arrowRef,
       arrowUncentered: positioner.arrowUncentered,
       arrowStyles: positioner.arrowStyles,
-      floatingContext: positioner.floatingContext,
+      floatingContext: positioner.context,
     }),
     [
       positioner.side,
       positioner.align,
       positioner.arrowRef,
       positioner.arrowUncentered,
       positioner.arrowStyles,
-      positioner.floatingContext,
+      positioner.context,
     ],
   );
 
@@ -175,6 +168,7 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
   // └─────────────────────────────────────────────────────────────────────┘
   /**
    * How to align the popup relative to the specified side.
+   * @default 'center'
    */
   align: PropTypes.oneOf(['center', 'end', 'start']),
   /**
@@ -188,6 +182,7 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
    */
   anchor: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     HTMLElementType,
+    refType,
     PropTypes.object,
     PropTypes.func,
   ]),
@@ -236,7 +231,7 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
     }),
   ]),
   /**
-   * Whether to keep the HTML element in the DOM while the menu is hidden.
+   * Whether to keep the popup mounted in the DOM while it's hidden.
    * @default false
    */
   keepMounted: PropTypes.bool,
@@ -255,6 +250,7 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
+   * @default 'bottom'
    */
   side: PropTypes.oneOf(['bottom', 'inline-end', 'inline-start', 'left', 'right', 'top']),
   /**
@@ -263,11 +259,16 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
    */
   sideOffset: PropTypes.number,
   /**
-   * Whether to maintain the menu in the viewport after
-   * the anchor element is scrolled out of view.
+   * Whether to maintain the popup in the viewport after
+   * the anchor element was scrolled out of view.
    * @default false
    */
   sticky: PropTypes.bool,
+  /**
+   * Whether the popup tracks any layout shift of its positioning anchor.
+   * @default true
+   */
+  trackAnchor: PropTypes.bool,
 } as any;
 
 export { MenuPositioner };