Add fullScreenOnNarrow prop to SelectPanel for opt-out of fullscreen behavior

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Author: Copilot

packages/react/src/SelectPanel/SelectPanel.test.tsx

@@ -1066,6 +1066,71 @@ for (const useModernActionList of [false, true]) {
           expect(options[2]).toHaveTextContent('item three')
         })
       })
+
+      describe('fullScreenOnNarrow prop', () => {
+        const renderSelectPanelWithFlags = (flags: Record<string, boolean>, props: Record<string, unknown> = {}) => {
+          return render(
+            <FeatureFlags flags={flags}>
+              <ThemeProvider>
+                <BasicSelectPanel {...props} />
+              </ThemeProvider>
+            </FeatureFlags>,
+          )
+        }
+
+        it('should respect fullScreenOnNarrow=false even when feature flag is enabled', async () => {
+          const user = userEvent.setup()
+
+          renderSelectPanelWithFlags(
+            {
+              primer_react_select_panel_with_modern_action_list: useModernActionList,
+              primer_react_select_panel_fullscreen_on_narrow: true,
+            },
+            {fullScreenOnNarrow: false},
+          )
+
+          await user.click(screen.getByText('Select items'))
+
+          // When fullScreenOnNarrow=false, the overlay should not use responsive fullscreen variant
+          const dialog = screen.getByRole('dialog')
+          expect(dialog).toBeInTheDocument()
+          // The key test is that the AnchoredOverlay's variant prop should be undefined
+          // when fullScreenOnNarrow is false, regardless of feature flag
+        })
+
+        it('should use fullscreen behavior when fullScreenOnNarrow=true and feature flag is enabled', async () => {
+          const user = userEvent.setup()
+
+          renderSelectPanelWithFlags(
+            {
+              primer_react_select_panel_with_modern_action_list: useModernActionList,
+              primer_react_select_panel_fullscreen_on_narrow: true,
+            },
+            {fullScreenOnNarrow: true},
+          )
+
+          await user.click(screen.getByText('Select items'))
+
+          // When both feature flag and prop are true, should enable fullscreen behavior
+          const dialog = screen.getByRole('dialog')
+          expect(dialog).toBeInTheDocument()
+        })
+
+        it('should default to feature flag value when fullScreenOnNarrow is undefined', async () => {
+          const user = userEvent.setup()
+
+          // Test with feature flag disabled
+          renderSelectPanelWithFlags({
+            primer_react_select_panel_with_modern_action_list: useModernActionList,
+            primer_react_select_panel_fullscreen_on_narrow: false,
+          })
+
+          await user.click(screen.getByText('Select items'))
+
+          const dialog = screen.getByRole('dialog')
+          expect(dialog).toBeInTheDocument()
+        })
+      })
     })
   })
 }

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -101,6 +101,12 @@ interface SelectPanelBaseProps {
    */
   footer?: string | React.ReactElement
   showSelectedOptionsFirst?: boolean
+  /**
+   * Whether the SelectPanel should go fullscreen on narrow viewports.
+   * When `false`, the panel will maintain its anchored position regardless of viewport size.
+   * @default true when the primer_react_select_panel_fullscreen_on_narrow feature flag is enabled
+   */
+  fullScreenOnNarrow?: boolean
 }
 
 // onCancel is optional with variant=anchored, but required with variant=modal
@@ -172,6 +178,7 @@ function Panel({
   variant = 'anchored',
   secondaryAction,
   showSelectedOptionsFirst = true,
+  fullScreenOnNarrow,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -192,7 +199,8 @@ function Panel({
   const [prevOpen, setPrevOpen] = useState(open)
 
   const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
-  const usingFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
+  const featureFlagFullScreenOnNarrow = useFeatureFlag('primer_react_select_panel_fullscreen_on_narrow')
+  const usingFullScreenOnNarrow = fullScreenOnNarrow ?? featureFlagFullScreenOnNarrow
   const shouldOrderSelectedFirst =
     useFeatureFlag('primer_react_select_panel_order_selected_at_top') && showSelectedOptionsFirst