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">