AnchoredOverlay: Add settings for CSS anchor positioning

.changeset/select-panel-modal-css-anchor-positioning.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+AnchoredOverlay: Add `cssAnchorPositioningSettings` prop to allow opting out of native CSS anchor positioning (via `disable`), and use it in `SelectPanel` so the `modal` variant stays manually centered instead of being repositioned by CSS anchor positioning.

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -124,6 +124,13 @@ interface AnchoredOverlayBaseProps extends Pick<OverlayProps, 'height' | 'width'
    * and the browser supports native CSS anchor positioning. Has no effect otherwise. Defaults to `"portal"`.
    */
   renderAs?: 'portal' | 'popover'
+  /**
+   * Settings for native CSS anchor positioning.
+   *
+   * - `disable`: When `true`, opts this overlay out of native CSS anchor positioning (and the Popover API)
+   *   even if `primer_react_css_anchor_positioning` is enabled and the browser supports it.
+   */
+  cssAnchorPositioningSettings?: {disable?: boolean}
 }
 
 export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
@@ -167,6 +174,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   displayCloseButton = true,
   closeButtonProps = defaultCloseButtonProps,
   renderAs = 'portal',
+  cssAnchorPositioningSettings,
 }) => {
   const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning')
   // Lazy initial state so feature detection runs once per mount on the client.
@@ -180,7 +188,10 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   )
 
   const cssAnchorPositioning =
-    cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning && !overlayProps?.portalContainerName
+    cssAnchorPositioningFlag &&
+    supportsNativeCSSAnchorPositioning &&
+    !overlayProps?.portalContainerName &&
+    !cssAnchorPositioningSettings?.disable
   // Only use Popover API when both CSS anchor positioning is enabled AND renderAs is true
   const shouldRenderAsPopover = cssAnchorPositioning && renderAs === 'popover'
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -881,6 +881,8 @@ function Panel({
         displayCloseButton={showXCloseIcon}
         closeButtonProps={closeButtonProps}
         displayInViewport={displayInViewport}
+        // Modal variant is positioned manually so native CSS anchor positioning must not be used
+        cssAnchorPositioningSettings={{disable: variant === 'modal'}}
       >
         <div className={classes.Wrapper} data-variant={variant} data-component="SelectPanel">
           <div className={classes.Header} data-variant={currentResponsiveVariant} data-component="SelectPanel.Header">