Select Panel: Add built-in "No matches" item

.changeset/mighty-doors-beg.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Select Panel: Add built-in "No matches" item (behind feature flag `primer_react_select_panel_with_modern_action_list`)

e2e/components/SelectPanel.test.ts

@@ -32,6 +32,10 @@ const scenarios = matrix({
       id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch',
       name: 'Height Initial with Underflowing Items After Fetch',
     },
+    {
+      id: 'components-selectpanel-examples--no-matches',
+      name: 'No matches',
+    },
   ],
 })
 

packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx

@@ -20,6 +20,7 @@ import type {SxProp} from '../sx'
 
 import {isValidElementType} from 'react-is'
 import type {RenderItemFn} from '../deprecated/ActionList/List'
+import {CircleSlashIcon} from '@primer/octicons-react'
 
 const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
 
@@ -151,7 +152,14 @@ export function FilteredActionList({
             <Spinner />
           </Box>
         ) : (
-          <ActionList ref={listContainerRef} showDividers={showItemDividers} {...listProps} role="listbox" id={listId}>
+          <ActionList
+            ref={listContainerRef}
+            showDividers={showItemDividers}
+            {...listProps}
+            role="listbox"
+            id={listId}
+            selectionVariant={items.length === 0 ? undefined : listProps.selectionVariant}
+          >
             {groupMetadata?.length
               ? groupMetadata.map((group, index) => {
                   return (
@@ -168,6 +176,15 @@ export function FilteredActionList({
               : items.map((item, index) => {
                   return <MappedActionListItem key={index} {...item} renderItem={listProps.renderItem} />
                 })}
+
+            {items.length === 0 ? (
+              <ActionList.Item disabled={true}>
+                <ActionList.LeadingVisual>
+                  <CircleSlashIcon />
+                </ActionList.LeadingVisual>
+                No matches
+              </ActionList.Item>
+            ) : undefined}
           </ActionList>
         )}
       </Box>

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

@@ -309,3 +309,32 @@ export const CustomItemRenderer = () => {
     </>
   )
 }
+
+export const NoMatches = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('no-matches-for-this')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <h1>No matches</h1>
+      <SelectPanel
+        title="Select files"
+        renderAnchor={({...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps}>
+            Select files
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        filterValue={filter}
+        onFilterChange={setFilter}
+        overlayProps={{width: 'medium'}}
+      />
+    </>
+  )
+}