diff --git a/.changeset/mighty-doors-beg.md b/.changeset/mighty-doors-beg.md
new file mode 100644
index 00000000000..d18f4855ea8
--- /dev/null
+++ b/.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`)
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png
new file mode 100644
index 00000000000..18880f3d6ba
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..fab4fd093f7
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png
new file mode 100644
index 00000000000..04311f27fb1
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..865ac022d45
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..bd5293f1fb4
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..14caf14e856
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png
new file mode 100644
index 00000000000..18880f3d6ba
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..fab4fd093f7
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..18880f3d6ba
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..fab4fd093f7
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png
new file mode 100644
index 00000000000..ac61fa8ec26
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0ae224d9a54
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png
new file mode 100644
index 00000000000..2687ea9d1e3
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0b023b3f496
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png
new file mode 100644
index 00000000000..ac61fa8ec26
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0ae224d9a54
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png
new file mode 100644
index 00000000000..ac61fa8ec26
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png
new file mode 100644
index 00000000000..0ae224d9a54
Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png differ
diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts
index e4f61864b17..45ad02fe90f 100644
--- a/e2e/components/SelectPanel.test.ts
+++ b/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',
+ },
],
})
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index ae791e63909..a0a31b60466 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/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({
) : (
-
+
{groupMetadata?.length
? groupMetadata.map((group, index) => {
return (
@@ -168,6 +176,15 @@ export function FilteredActionList({
: items.map((item, index) => {
return
})}
+
+ {items.length === 0 ? (
+
+
+
+
+ No matches
+
+ ) : undefined}
)}
diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
index 248432e0f9a..6570019e3d6 100644
--- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx
@@ -309,3 +309,32 @@ export const CustomItemRenderer = () => {
>
)
}
+
+export const NoMatches = () => {
+ const [selected, setSelected] = React.useState([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 (
+ <>
+ No matches
+ (
+
+ )}
+ open={open}
+ onOpenChange={setOpen}
+ items={filteredItems}
+ selected={selected}
+ onSelectedChange={setSelected}
+ filterValue={filter}
+ onFilterChange={setFilter}
+ overlayProps={{width: 'medium'}}
+ />
+ >
+ )
+}