diff --git a/.changeset/select-panel-css-anchor-positioning-settings.md b/.changeset/select-panel-css-anchor-positioning-settings.md new file mode 100644 index 00000000000..2d3fc1e1b8e --- /dev/null +++ b/.changeset/select-panel-css-anchor-positioning-settings.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +SelectPanel: Add `cssAnchorPositioningSettings` prop to customize CSS anchor positioning behavior diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index 95cbe2c6ad8..c9a2c7b6382 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.tsx @@ -131,7 +131,10 @@ type SelectPanelVariantProps = {variant?: 'anchored'; onCancel?: () => void} | { export type SelectPanelProps = SelectPanelBaseProps & Omit & - Pick & + Pick< + AnchoredOverlayProps, + 'open' | 'height' | 'width' | 'align' | 'displayInViewport' | 'cssAnchorPositioningSettings' + > & AnchoredOverlayWrapperAnchorProps & (SelectPanelSingleSelection | SelectPanelMultiSelection) & SelectPanelVariantProps @@ -204,6 +207,7 @@ function Panel({ focusPrependedElements, virtualized, displayInViewport, + cssAnchorPositioningSettings, ...listProps }: SelectPanelProps): JSX.Element { const titleId = useId() @@ -882,7 +886,11 @@ function Panel({ closeButtonProps={closeButtonProps} displayInViewport={displayInViewport} // Modal variant is positioned manually so native CSS anchor positioning must not be used - cssAnchorPositioningSettings={{disable: variant === 'modal'}} + // Other cssAnchorPositioningSettings (e.g. fallbackStrategy) may be passed in and are forwarded here + cssAnchorPositioningSettings={{ + ...cssAnchorPositioningSettings, + disable: variant === 'modal' || cssAnchorPositioningSettings?.disable, + }} >