Exploration: Make SelectPanel item.id required

.changeset/selectpanel-item-id-required.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": major
+---
+
+SelectPanel: Make item.id required
+SelectPanel: Export types `ItemInput` and `GroupedListProps`

packages/react/src/FilteredActionList/types.ts

@@ -86,7 +86,7 @@ export interface FilteredActionListItemProps extends SxProp {
   /**
    * An id associated with this item.  Should be unique between items
    */
-  id?: number | string
+  id: number | string
 
   /**
    * Node to be included inside the item before the text.

packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx

@@ -5,8 +5,7 @@ import {useState} from 'react'
 
 import Box from '../Box'
 import {Button} from '../Button'
-import {SelectPanel} from '.'
-import type {ItemInput} from '../deprecated/ActionList/List'
+import {SelectPanel, type ItemInput} from '.'
 import FormControl from '../FormControl'
 import Text from '../Text'
 import Select from '../Select/Select'

packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx

@@ -1,8 +1,7 @@
 import React, {useState, useMemo} from 'react'
 import type {Meta} from '@storybook/react-vite'
 import {Button} from '../Button'
-import type {ItemInput} from '../deprecated/ActionList/List'
-import {SelectPanel} from './SelectPanel'
+import {SelectPanel, type ItemInput} from './SelectPanel'
 import type {OverlayProps} from '../Overlay'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import {ActionList} from '../deprecated/ActionList'

packages/react/src/SelectPanel/SelectPanel.features.stories.tsx

@@ -1,9 +1,8 @@
 import React, {useState, useRef, useEffect} from 'react'
 import type {Meta, StoryObj} from '@storybook/react-vite'
 import {Button} from '../Button'
-import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
 import Link from '../Link'
-import {SelectPanel, type SelectPanelProps} from './SelectPanel'
+import {SelectPanel, type SelectPanelProps, type ItemInput, type GroupedListProps} from './SelectPanel'
 import {
   AlertIcon,
   FilterIcon,

packages/react/src/SelectPanel/SelectPanel.stories.tsx

@@ -3,8 +3,7 @@ import type {Meta} from '@storybook/react-vite'
 import {useState} from 'react'
 
 import {Button} from '../Button'
-import {SelectPanel} from '../SelectPanel'
-import type {ItemInput} from '../deprecated/ActionList/List'
+import {SelectPanel, type ItemInput} from '../SelectPanel'
 import FormControl from '../FormControl'
 import classes from './SelectPanel.stories.module.css'
 

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

@@ -1,8 +1,7 @@
 import {render, screen, waitFor} from '@testing-library/react'
 import {describe, expect, it, beforeEach, vi} from 'vitest'
 import React from 'react'
-import {SelectPanel, type SelectPanelProps} from '../SelectPanel'
-import type {ItemInput, GroupedListProps} from '../deprecated/ActionList/List'
+import {SelectPanel, type SelectPanelProps, type ItemInput, type GroupedListProps} from '../SelectPanel'
 import {userEvent} from '@testing-library/user-event'
 import ThemeProvider from '../ThemeProvider'
 import {FeatureFlags} from '../FeatureFlags'
@@ -34,15 +33,9 @@ const renderWithFlag = (children: React.ReactNode, flag: boolean) => {
 }
 
 const items: SelectPanelProps['items'] = [
-  {
-    text: 'item one',
-  },
-  {
-    text: 'item two',
-  },
-  {
-    text: 'item three',
-  },
+  {id: 'one', text: 'item one'},
+  {id: 'two', text: 'item two'},
+  {id: 'three', text: 'item three'},
 ]
 
 function BasicSelectPanel(passthroughProps: Record<string, unknown>) {
@@ -934,15 +927,9 @@ for (const usingRemoveActiveDescendant of [false, true]) {
         renderWithFlag(
           <SelectPanelWithCustomMessages
             items={[
-              {
-                text: 'item one',
-              },
-              {
-                text: 'item two',
-              },
-              {
-                text: 'item three',
-              },
+              {id: 'one', text: 'item one'},
+              {id: 'two', text: 'item two'},
+              {id: 'three', text: 'item three'},
             ]}
           />,
           usingRemoveActiveDescendant,

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -11,7 +11,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
-import type {FilteredActionListProps} from '../FilteredActionList'
+import type {FilteredActionListProps, GroupedListProps} from '../FilteredActionList'
 import {FilteredActionList} from '../FilteredActionList'
 import Heading from '../Heading'
 import type {OverlayProps} from '../Overlay'
@@ -953,3 +953,5 @@ export const SelectPanel = Object.assign(Panel, {
   SecondaryActionButton: SecondaryButton,
   SecondaryActionLink: SecondaryLink,
 })
+
+export type {ItemInput, GroupedListProps}