From c9e68d2fb010e30fbc0a925282a6cf790176937c Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 28 Oct 2024 13:42:02 -0400
Subject: [PATCH 1/6] AvatarStack: Adds back empty space in `AvatarStack`
 (#5181)

* adds back empty space in `AvatarStack`

* Update snapshot
---
 packages/react/src/AvatarStack/AvatarStack.tsx                   | 1 +
 .../react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap  | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
index 8430fc199b5..ccd87f1e24f 100644
--- a/packages/react/src/AvatarStack/AvatarStack.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -314,6 +314,7 @@ const AvatarStack = ({
         tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined}
         ref={stackContainer}
       >
+        {' '}
         {transformChildren(children)}
       </Box>
     </AvatarStackWrapper>
diff --git a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
index cc28e33c219..8f68da6c108 100644
--- a/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/AvatarStack.test.tsx.snap
@@ -188,6 +188,7 @@ exports[`Avatar respects alignRight props 1`] = `
     className="pc-AvatarStackBody"
     tabIndex={0}
   >
+     
     <img
       alt=""
       className="pc-AvatarItem"

From a2536bf4d46812efa45739806ca11749024abbf6 Mon Sep 17 00:00:00 2001
From: Tyler Jones <tylerjdev@github.com>
Date: Mon, 28 Oct 2024 14:41:22 -0400
Subject: [PATCH 2/6] Overlay: Add proper roles w/ keyboard expectations to
 stories (#5175)

* Add proper roles w/ keyboard expectations to stories

* Make prop optional
---
 .../src/Overlay/Overlay.features.stories.tsx  | 108 ++++++++++++++++--
 1 file changed, 99 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
index ac35e8bfc5a..340181ab53c 100644
--- a/packages/react/src/Overlay/Overlay.features.stories.tsx
+++ b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useRef, useCallback} from 'react'
 import type {Meta} from '@storybook/react'
-import {TriangleDownIcon, PlusIcon, IssueDraftIcon} from '@primer/octicons-react'
+import {TriangleDownIcon, PlusIcon, IssueDraftIcon, XIcon} from '@primer/octicons-react'
 import {
   Overlay,
   ButtonGroup,
@@ -16,8 +16,10 @@ import {
   Label,
   ActionList,
   ActionMenu,
+  useFocusTrap,
 } from '..'
 import type {AnchorSide} from '@primer/behaviors'
+import type {AriaRole} from '../utils/types'
 import {Tooltip} from '../TooltipV2'
 
 export default {
@@ -25,6 +27,7 @@ export default {
   component: Overlay,
   args: {
     anchorSide: 'inside-top',
+    role: 'dialog',
   },
   argTypes: {
     anchorSide: {
@@ -43,16 +46,22 @@ export default {
         'outside-right',
       ],
     },
+    role: {
+      type: 'string',
+    },
   },
 } as Meta
 
 interface OverlayProps {
-  anchorSide: AnchorSide
+  anchorSide?: AnchorSide
+  role?: AriaRole
+  right?: boolean
 }
 
 export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
+
   return (
     <>
       <Button ref={buttonRef} sx={{position: 'relative'}} onClick={() => setIsOpen(!isOpen)}>
@@ -67,8 +76,9 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
           onEscape={() => setIsOpen(false)}
           onClickOutside={() => setIsOpen(false)}
           anchorSide={anchorSide}
+          role="none"
         >
-          <ActionList>
+          <ActionList role="menu">
             <ActionList.Item>Copy link</ActionList.Item>
             <ActionList.Item>Quote reply</ActionList.Item>
             <ActionList.Item>Reference in new issue</ActionList.Item>
@@ -82,12 +92,15 @@ export const DropdownOverlay = ({anchorSide}: OverlayProps) => {
   )
 }
 
-export const DialogOverlay = ({anchorSide}: OverlayProps) => {
+export const DialogOverlay = ({anchorSide, role}: OverlayProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const confirmButtonRef = useRef<HTMLButtonElement>(null)
   const anchorRef = useRef<HTMLDivElement>(null)
   const closeOverlay = () => setIsOpen(false)
+  useFocusTrap({containerRef, disabled: !isOpen, initialFocusRef: confirmButtonRef, returnFocusRef: buttonRef})
+
   return (
     <Box ref={anchorRef}>
       <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
@@ -102,6 +115,9 @@ export const DialogOverlay = ({anchorSide}: OverlayProps) => {
           onClickOutside={closeOverlay}
           width="small"
           anchorSide={anchorSide}
+          role={role}
+          aria-modal={role === 'dialog' ? 'true' : undefined}
+          ref={containerRef}
         >
           <Box display="flex" flexDirection="column" p={2}>
             <Text>Are you sure?</Text>
@@ -118,7 +134,7 @@ export const DialogOverlay = ({anchorSide}: OverlayProps) => {
   )
 }
 
-export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
+export const OverlayOnTopOfOverlay = ({anchorSide, role}: OverlayProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [isSecondaryOpen, setIsSecondaryOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
@@ -130,6 +146,14 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
   const items = ['🔵 Cyan', '🔴 Magenta', '🟡 Yellow']
   const [selectedItem, setSelectedItem] = React.useState(items[0])
 
+  const primaryContainer = useRef<HTMLDivElement>(null)
+  const secondaryContainer = useRef<HTMLDivElement>(null)
+
+  useFocusTrap({
+    containerRef: !isSecondaryOpen ? primaryContainer : secondaryContainer,
+    disabled: !isOpen,
+  })
+
   return (
     <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
       <input placeholder="Input for focus testing" />
@@ -145,6 +169,9 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
           onClickOutside={closeOverlay}
           width="small"
           anchorSide={anchorSide}
+          role={role}
+          aria-modal={role === 'dialog' ? 'true' : undefined}
+          ref={primaryContainer}
         >
           <Button ref={secondaryButtonRef} onClick={() => setIsSecondaryOpen(!isSecondaryOpen)}>
             open overlay
@@ -158,6 +185,9 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
               width="small"
               sx={{top: '40px'}}
               anchorSide={anchorSide}
+              role={role}
+              aria-modal={role === 'dialog' ? 'true' : undefined}
+              ref={secondaryContainer}
             >
               <Box display="flex" flexDirection="column" p={2}>
                 <Text>Select an option!</Text>
@@ -186,12 +216,14 @@ export const OverlayOnTopOfOverlay = ({anchorSide}: OverlayProps) => {
   )
 }
 
-export const MemexNestedOverlays = () => {
+export const MemexNestedOverlays = ({role}: OverlayProps) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
 
   const durations = ['days', 'weeks']
   const [duration, setDuration] = React.useState(durations[0])
+  useFocusTrap({containerRef, disabled: !overlayOpen, returnFocusRef: buttonRef})
 
   return (
     <div>
@@ -213,6 +245,9 @@ export const MemexNestedOverlays = () => {
           ignoreClickRefs={[buttonRef]}
           top={60}
           left={16}
+          role={role}
+          aria-modal={role === 'dialog' ? 'true' : undefined}
+          ref={containerRef}
         >
           <Box as="form" onSubmit={() => setOverlayOpen(false)} sx={{display: 'flex', flexDirection: 'column', py: 2}}>
             <Box sx={{paddingX: 3, display: 'flex', alignItems: 'center', gap: 1}}>
@@ -247,12 +282,19 @@ export const MemexNestedOverlays = () => {
   )
 }
 
-export const NestedOverlays = () => {
+export const NestedOverlays = ({role}: OverlayProps) => {
   const [listOverlayOpen, setListOverlayOpen] = React.useState(false)
   const [createListOverlayOpen, setCreateListOverlayOpen] = React.useState(false)
 
   const buttonRef = useRef<HTMLButtonElement>(null)
   const secondaryButtonRef = useRef<HTMLButtonElement>(null)
+  const primaryContainer = useRef<HTMLDivElement>(null)
+  const secondaryContainer = useRef<HTMLDivElement>(null)
+
+  useFocusTrap({
+    containerRef: !createListOverlayOpen ? primaryContainer : secondaryContainer,
+    disabled: !listOverlayOpen,
+  })
 
   React.useEffect(() => {
     // eslint-disable-next-line no-console
@@ -285,6 +327,9 @@ export const NestedOverlays = () => {
           ignoreClickRefs={[buttonRef]}
           top={100}
           left={16}
+          ref={primaryContainer}
+          role={role}
+          aria-modal={role === 'dialog' ? 'true' : undefined}
         >
           <Box sx={{display: 'flex', flexDirection: 'column', py: 2}}>
             <Box sx={{paddingX: 3, paddingY: 2}}>
@@ -324,6 +369,9 @@ export const NestedOverlays = () => {
               ignoreClickRefs={[secondaryButtonRef]}
               top={120}
               left={64}
+              role={role}
+              aria-modal={role === 'dialog' ? 'true' : undefined}
+              ref={secondaryContainer}
             >
               <Box as="form" sx={{display: 'flex', flexDirection: 'column', p: 3}}>
                 <Text color="fg.muted" sx={{fontSize: 1, mb: 3}}>
@@ -344,11 +392,12 @@ export const NestedOverlays = () => {
   )
 }
 
-export const MemexIssueOverlay = () => {
+export const MemexIssueOverlay = ({role}: OverlayProps) => {
   const [overlayOpen, setOverlayOpen] = React.useState(false)
   const linkRef = useRef<HTMLAnchorElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const buttonRef = useRef<HTMLButtonElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
 
   const [title, setTitle] = React.useState('Implement draft issue editor')
   const [editing, setEditing] = React.useState(false)
@@ -358,6 +407,8 @@ export const MemexIssueOverlay = () => {
     if (editing) inputRef.current?.focus()
   }, [editing])
 
+  useFocusTrap({containerRef, disabled: !overlayOpen, initialFocusRef: buttonRef, returnFocusRef: linkRef})
+
   return (
     <>
       <Link
@@ -389,6 +440,9 @@ export const MemexIssueOverlay = () => {
           returnFocusRef={linkRef}
           top={0}
           left="calc(100vw - 480px)"
+          role={role}
+          aria-modal={role === 'dialog' ? 'true' : undefined}
+          ref={containerRef}
         >
           <Box sx={{p: 4, height: '100vh'}}>
             <Box sx={{display: 'flex', alignItems: 'center', gap: 1, mb: 2}}>
@@ -451,13 +505,21 @@ export const MemexIssueOverlay = () => {
   )
 }
 
-export const PositionedOverlays = ({right}: {right?: boolean}) => {
+export const PositionedOverlays = ({right, role}: OverlayProps) => {
   const [isOpen, setIsOpen] = useState(false)
   const [direction, setDirection] = useState<'left' | 'right'>(right ? 'right' : 'left')
   const buttonRef = useRef<HTMLButtonElement>(null)
   const confirmButtonRef = useRef<HTMLButtonElement>(null)
   const anchorRef = useRef<HTMLDivElement>(null)
   const closeOverlay = () => setIsOpen(false)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useFocusTrap({
+    containerRef,
+    disabled: !isOpen,
+  })
+
   return (
     <Box ref={anchorRef}>
       <Button
@@ -491,6 +553,9 @@ export const PositionedOverlays = ({right}: {right?: boolean}) => {
             onClickOutside={closeOverlay}
             width="auto"
             anchorSide="inside-right"
+            role={role}
+            aria-modal={role === 'dialog' ? 'true' : undefined}
+            ref={containerRef}
           >
             <Box
               sx={{
@@ -501,6 +566,17 @@ export const PositionedOverlays = ({right}: {right?: boolean}) => {
                 alignItems: 'center',
               }}
             >
+              <IconButton
+                aria-label="Close"
+                onClick={closeOverlay}
+                icon={XIcon}
+                variant="invisible"
+                sx={{
+                  position: 'absolute',
+                  left: '5px',
+                  top: '5px',
+                }}
+              />
               <Text>Look! left aligned</Text>
             </Box>
           </Overlay>
@@ -515,6 +591,9 @@ export const PositionedOverlays = ({right}: {right?: boolean}) => {
             anchorSide={'inside-left'}
             right={0}
             position="fixed"
+            role={role}
+            aria-modal={role === 'dialog' ? 'true' : undefined}
+            ref={containerRef}
           >
             <Box
               sx={{
@@ -525,6 +604,17 @@ export const PositionedOverlays = ({right}: {right?: boolean}) => {
                 alignItems: 'center',
               }}
             >
+              <IconButton
+                aria-label="Close"
+                onClick={closeOverlay}
+                icon={XIcon}
+                variant="invisible"
+                sx={{
+                  position: 'absolute',
+                  right: '5px',
+                  top: '5px',
+                }}
+              />
               <Text>Look! right aligned</Text>
             </Box>
           </Overlay>

From 31d9a0587eb76f8d786404881b1727213c55fdbc Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:52:49 -0400
Subject: [PATCH 3/6] fix(DataTable): export datatable utility types (#5182)

* fix(DataTable): export datatable utility types

* Create old-plums-explode.md

* test: update snapshot
---
 .changeset/old-plums-explode.md                              | 5 +++++
 packages/react/src/DataTable/index.ts                        | 4 +++-
 .../react/src/__tests__/__snapshots__/exports.test.ts.snap   | 4 ++++
 packages/react/src/experimental/index.ts                     | 4 ++++
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/old-plums-explode.md

diff --git a/.changeset/old-plums-explode.md b/.changeset/old-plums-explode.md
new file mode 100644
index 00000000000..494da343cbb
--- /dev/null
+++ b/.changeset/old-plums-explode.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(DataTable): export datatable utility types
diff --git a/packages/react/src/DataTable/index.ts b/packages/react/src/DataTable/index.ts
index 620df9a88f3..a21097e624a 100644
--- a/packages/react/src/DataTable/index.ts
+++ b/packages/react/src/DataTable/index.ts
@@ -50,4 +50,6 @@ export type {
   TableSkeletonProps,
 } from './Table'
 export {createColumnHelper} from './column'
-export type {Column} from './column'
+export type {Column, CellAlignment, ColumnWidth} from './column'
+export type {UniqueRow} from './row'
+export type {ObjectPaths} from './utils'
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 376d5974445..546b1b187d1 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -263,8 +263,10 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type BlankslateProps",
   "ButtonBase",
   "type ButtonBaseProps",
+  "type CellAlignment",
   "type ChildrenPropTypes",
   "type Column",
+  "type ColumnWidth",
   "createColumnHelper",
   "DataTable",
   "type DataTableProps",
@@ -299,6 +301,7 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type NavListProps",
   "type NavListSubNavProps",
   "type NavListTrailingVisualProps",
+  "type ObjectPaths",
   "PageHeader",
   "type PageHeaderProps",
   "type ParentLinkProps",
@@ -333,6 +336,7 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "type UnderlinePanelsPanelProps",
   "type UnderlinePanelsProps",
   "type UnderlinePanelsTabProps",
+  "type UniqueRow",
   "useFeatureFlag",
   "useOverflow",
   "useSlots",
diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts
index 19ebadec41a..9346c8c39a6 100644
--- a/packages/react/src/experimental/index.ts
+++ b/packages/react/src/experimental/index.ts
@@ -31,6 +31,10 @@ export type {
   TableSubtitleProps,
   TableActionsProps,
   Column,
+  CellAlignment,
+  ColumnWidth,
+  UniqueRow,
+  ObjectPaths,
 } from '../DataTable'
 
 export * from '../Dialog/Dialog'

From 4e03ac2f4289b08f86912e8fbcc14c42b1207149 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 29 Oct 2024 13:03:25 -0500
Subject: [PATCH 4/6] chore(deps-dev): bump @babel/eslint-parser from 7.23.3 to
 7.25.9 (#5178)

Bumps [@babel/eslint-parser](https://github.com/babel/babel/tree/HEAD/eslint/babel-eslint-parser) from 7.23.3 to 7.25.9.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.25.9/eslint/babel-eslint-parser)

---
updated-dependencies:
- dependency-name: "@babel/eslint-parser"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package-lock.json | 19 ++++++++++---------
 package.json      |  2 +-
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 48c76c6bd04..48be07ece77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "examples/*"
       ],
       "devDependencies": {
-        "@babel/eslint-parser": "7.23.3",
+        "@babel/eslint-parser": "7.25.9",
         "@changesets/changelog-github": "0.5.0",
         "@changesets/cli": "2.27.1",
         "@github/axe-github": "0.6.1",
@@ -62,7 +62,7 @@
       "name": "example-app-router",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/react": "37.0.0-rc.11",
+        "@primer/react": "37.0.1",
         "next": "^14.2.10",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -81,7 +81,7 @@
         "react-dom": "^18.3.1"
       },
       "devDependencies": {
-        "@primer/react": "37.0.0-rc.11",
+        "@primer/react": "37.0.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.3.0",
         "@typescript-eslint/eslint-plugin": "^7.11.0",
@@ -99,7 +99,7 @@
       "name": "example-consumer-test",
       "version": "0.0.0",
       "dependencies": {
-        "@primer/react": "37.0.0-rc.11",
+        "@primer/react": "37.0.1",
         "@types/react": "^18.3.11",
         "@types/react-dom": "^18.2.19",
         "@types/styled-components": "^5.1.11",
@@ -125,7 +125,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@primer/octicons-react": "^19.9.0",
-        "@primer/react": "37.0.0-rc.11",
+        "@primer/react": "37.0.1",
         "clsx": "^1.2.1",
         "next": "^14.2.10",
         "react": "^18.3.1",
@@ -303,9 +303,10 @@
       }
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.23.3",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.25.9.tgz",
+      "integrity": "sha512-5UXfgpK0j0Xr/xIdgdLEhOFxaDZ0bRPWJJchRpqOSur/3rZoPbqqki5mm0p4NE2cs28krBEiSM2MB7//afRSQQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1",
         "eslint-visitor-keys": "^2.1.0",
@@ -316,7 +317,7 @@
       },
       "peerDependencies": {
         "@babel/core": "^7.11.0",
-        "eslint": "^7.5.0 || ^8.0.0"
+        "eslint": "^7.5.0 || ^8.0.0 || ^9.0.0"
       }
     },
     "node_modules/@babel/eslint-parser/node_modules/semver": {
@@ -30099,7 +30100,7 @@
     },
     "packages/react": {
       "name": "@primer/react",
-      "version": "37.0.0-rc.11",
+      "version": "37.0.1",
       "license": "MIT",
       "dependencies": {
         "@github/relative-time-element": "^4.4.2",
diff --git a/package.json b/package.json
index e5402ad0b14..d808896be77 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "npm": ">=7"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.23.3",
+    "@babel/eslint-parser": "7.25.9",
     "@changesets/changelog-github": "0.5.0",
     "@changesets/cli": "2.27.1",
     "@github/axe-github": "0.6.1",

From c3d878711e17e666aeb66a5a0f42208d67989d0c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 29 Oct 2024 18:16:00 +0000
Subject: [PATCH 5/6] chore(deps-dev): bump prettier from 3.0.3 to 3.3.3
 (#5180)

* chore(deps-dev): bump prettier from 3.0.3 to 3.3.3

Bumps [prettier](https://github.com/prettier/prettier) from 3.0.3 to 3.3.3.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/3.0.3...3.3.3)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: format files

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
---
 .../adrs/adr-002-behavior-isolation.md        |  2 +
 package-lock.json                             | 66 ++-----------------
 package.json                                  |  2 +-
 packages/react/src/ActionList/Group.tsx       |  2 +-
 packages/react/src/ActionList/List.tsx        |  2 +-
 packages/react/src/Button/ButtonBase.tsx      | 27 ++++----
 .../react/src/DataTable/DataTable.stories.tsx |  4 +-
 packages/react/src/DataTable/useTable.ts      |  4 +-
 packages/react/src/DataTable/utils.ts         | 44 ++++++-------
 packages/react/src/PageLayout/PageLayout.tsx  |  4 +-
 .../react/src/SelectPanel/SelectPanel.tsx     |  4 +-
 packages/react/src/hooks/useSlots.ts          | 12 ++--
 .../components/TextInputInnerAction.tsx       |  8 +--
 packages/react/src/sx.ts                      |  8 +--
 packages/react/src/utils/polymorphic.ts       |  8 +--
 .../react/src/utils/types/ComponentProps.ts   |  7 +-
 16 files changed, 75 insertions(+), 129 deletions(-)

diff --git a/contributor-docs/adrs/adr-002-behavior-isolation.md b/contributor-docs/adrs/adr-002-behavior-isolation.md
index 072099e985c..575468dadc1 100644
--- a/contributor-docs/adrs/adr-002-behavior-isolation.md
+++ b/contributor-docs/adrs/adr-002-behavior-isolation.md
@@ -108,5 +108,7 @@ Some behaviors can be implemented as vanilla JavaScript without introducing addi
 In general, _portions of behaviors_ that affect or rely on **user interactions and events**, **shared state**, or **CSS styles** should be kept in React Hooks. Parts of the behavior that can be implemented in isolation of these concepts should be built with no dependency on React or other libraries.
 
 [^1]: https://codesandbox.io/s/demo-styling-custom-element-g973d?file=/src/index.tsx
+
 [^2]: https://github.com/github/details-dialog-element/blob/main/src/index.ts#L195
+
 [^3]: https://github.com/github/details-dialog-element#details-dialog-close
diff --git a/package-lock.json b/package-lock.json
index 48be07ece77..859cf34e62e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,7 @@
         "jest-watch-typeahead": "2.2.2",
         "markdownlint-cli2": "^0.11.0",
         "markdownlint-cli2-formatter-pretty": "0.0.3",
-        "prettier": "3.0.3",
+        "prettier": "3.3.3",
         "rimraf": "5.0.5",
         "size-limit": "11.1.5",
         "stylelint": "16.9.0",
@@ -5994,22 +5994,6 @@
         "prettier": "3.3"
       }
     },
-    "node_modules/@primer/stylelint-config/node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/@primer/view-components": {
       "version": "0.27.0",
       "dev": true,
@@ -7105,21 +7089,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/@storybook/addon-storysource/node_modules/prettier": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
-      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/@storybook/addon-toolbars": {
       "version": "8.3.0",
       "dev": true,
@@ -7833,20 +7802,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/@storybook/source-loader/node_modules/prettier": {
-      "version": "3.3.3",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "node_modules/@storybook/test": {
       "version": "8.3.0",
       "dev": true,
@@ -23969,9 +23924,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.0.3",
-      "dev": true,
-      "license": "MIT",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -30478,19 +30433,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "packages/react/node_modules/prettier": {
-      "version": "3.3.3",
-      "license": "MIT",
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
     "packages/react/node_modules/rollup-plugin-visualizer": {
       "version": "5.9.2",
       "dev": true,
diff --git a/package.json b/package.json
index d808896be77..4a9020b2e90 100644
--- a/package.json
+++ b/package.json
@@ -72,7 +72,7 @@
     "jest-watch-typeahead": "2.2.2",
     "markdownlint-cli2": "^0.11.0",
     "markdownlint-cli2-formatter-pretty": "0.0.3",
-    "prettier": "3.0.3",
+    "prettier": "3.3.3",
     "rimraf": "5.0.5",
     "size-limit": "11.1.5",
     "stylelint": "16.9.0",
diff --git a/packages/react/src/ActionList/Group.tsx b/packages/react/src/ActionList/Group.tsx
index 1e29f5be58d..d0db9a77ff2 100644
--- a/packages/react/src/ActionList/Group.tsx
+++ b/packages/react/src/ActionList/Group.tsx
@@ -97,7 +97,7 @@ export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
           // because the heading is hidden from the accessibility tree and only used for presentation role.
           // We will instead use aria-label to label the list. See a line below.
           aria-labelledby={listRole ? undefined : groupHeadingId}
-          aria-label={listRole ? title ?? (slots.groupHeading?.props.children as string) : undefined}
+          aria-label={listRole ? (title ?? (slots.groupHeading?.props.children as string)) : undefined}
           role={role || (listRole && 'group')}
         >
           {slots.groupHeading ? childrenWithoutSlots : props.children}
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index 7786f392682..874ce8195ef 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -39,7 +39,7 @@ export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
       enableFocusZone: enableFocusZoneFromContainer,
     } = React.useContext(ActionListContainerContext)
 
-    const ariaLabelledBy = slots.heading ? slots.heading.props.id ?? headingId : listLabelledBy
+    const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
     const listRole = role || listRoleFromContainer
     const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement>)
 
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index dc4ffdcfad1..f64137b8433 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -198,13 +198,13 @@ const ButtonBase = forwardRef(
                             true,
                           )
                         : TrailingVisual
-                        ? renderModuleVisual(
-                            TrailingVisual,
-                            Boolean(loading) && !LeadingVisual,
-                            'trailingVisual',
-                            false,
-                          )
-                        : null
+                          ? renderModuleVisual(
+                              TrailingVisual,
+                              Boolean(loading) && !LeadingVisual,
+                              'trailingVisual',
+                              false,
+                            )
+                          : null
                     }
                   </Box>
                   {
@@ -314,8 +314,13 @@ const ButtonBase = forwardRef(
                           true,
                         )
                       : TrailingVisual
-                      ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false)
-                      : null
+                        ? renderModuleVisual(
+                            TrailingVisual,
+                            Boolean(loading) && !LeadingVisual,
+                            'trailingVisual',
+                            false,
+                          )
+                        : null
                   }
                 </span>
                 {
@@ -420,8 +425,8 @@ const ButtonBase = forwardRef(
                         'trailingVisual',
                       )
                     : TrailingVisual
-                    ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
-                    : null
+                      ? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
+                      : null
                 }
               </Box>
               {
diff --git a/packages/react/src/DataTable/DataTable.stories.tsx b/packages/react/src/DataTable/DataTable.stories.tsx
index 7726463411d..610b33dfcb0 100644
--- a/packages/react/src/DataTable/DataTable.stories.tsx
+++ b/packages/react/src/DataTable/DataTable.stories.tsx
@@ -189,8 +189,8 @@ export const Playground = (args: DataTableProps<UniqueRow> & ColWidthArgTypes) =
     return args[`colWidth${colIndex}`] !== 'explicit width'
       ? args[`colWidth${colIndex}`]
       : args[`explicitColWidth${colIndex}`]
-      ? args[`explicitColWidth${colIndex}`]
-      : 'grow'
+        ? args[`explicitColWidth${colIndex}`]
+        : 'grow'
   }
 
   const align = args.align as CellAlignment
diff --git a/packages/react/src/DataTable/useTable.ts b/packages/react/src/DataTable/useTable.ts
index c5a9140744c..28fd042b2a4 100644
--- a/packages/react/src/DataTable/useTable.ts
+++ b/packages/react/src/DataTable/useTable.ts
@@ -135,8 +135,8 @@ export function useTable<Data extends UniqueRow>({
       header.column.sortBy === true
         ? strategies.basic
         : typeof header.column.sortBy === 'string'
-        ? strategies[header.column.sortBy]
-        : header.column.sortBy
+          ? strategies[header.column.sortBy]
+          : header.column.sortBy
 
     setRowOrder(rowOrder => {
       return rowOrder.slice().sort((a, b) => {
diff --git a/packages/react/src/DataTable/utils.ts b/packages/react/src/DataTable/utils.ts
index e28c1d362aa..779a4598468 100644
--- a/packages/react/src/DataTable/utils.ts
+++ b/packages/react/src/DataTable/utils.ts
@@ -12,9 +12,9 @@ type MaxLength = ArrayOfLength<10>[number]
 type ArrayIndex<A extends ReadonlyArray<any>, Keys extends number = never> = A extends readonly []
   ? Keys
   : // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  A extends readonly [infer _, ...infer Tail]
-  ? ArrayIndex<Tail, Keys | Tail['length']>
-  : Keys
+    A extends readonly [infer _, ...infer Tail]
+    ? ArrayIndex<Tail, Keys | Tail['length']>
+    : Keys
 
 // Check if the given type is within the bounds set by `MaxLength`
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,25 +30,25 @@ type ArrayWithinBounds<T> = T extends ReadonlyArray<any> & {length: infer Length
 export type ObjectPaths<T> = T extends readonly any[] & ArrayWithinBounds<T>
   ? `${ArrayIndex<T>}` | PrefixPath<T, ArrayIndex<T>>
   : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  T extends any[]
-  ? never & 'Unable to determine keys of potentially boundless array'
-  : T extends Date
-  ? never
-  : T extends object
-  ? Extract<keyof T, string | number> | PrefixPath<T, Extract<keyof T, string | number>>
-  : never
+    T extends any[]
+    ? never & 'Unable to determine keys of potentially boundless array'
+    : T extends Date
+      ? never
+      : T extends object
+        ? Extract<keyof T, string | number> | PrefixPath<T, Extract<keyof T, string | number>>
+        : never
 
-type PrefixPath<T, Prefix> = Prefix extends Extract<keyof T, number | string>
-  ? `${Prefix}.${ObjectPaths<T[Prefix]>}`
-  : never
+type PrefixPath<T, Prefix> =
+  Prefix extends Extract<keyof T, number | string> ? `${Prefix}.${ObjectPaths<T[Prefix]>}` : never
 
 // Get the value of a given path within an object
-export type ObjectPathValue<ObjectType extends object, Path extends string | number> = ObjectType extends Record<
-  string | number,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  any
->
-  ? Path extends `${infer Key}.${infer NestedPath}`
-    ? ObjectPathValue<ObjectType[Key], NestedPath>
-    : ObjectType[Path]
-  : never
+export type ObjectPathValue<ObjectType extends object, Path extends string | number> =
+  ObjectType extends Record<
+    string | number,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    any
+  >
+    ? Path extends `${infer Key}.${infer NestedPath}`
+      ? ObjectPathValue<ObjectType[Key], NestedPath>
+      : ObjectType[Path]
+    : never
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 994f3d007a6..dee02530fcc 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -788,8 +788,8 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
             width: resizable
               ? ['100%', null, 'clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width))']
               : isPaneWidth(width)
-              ? paneWidths[width]
-              : width.default,
+                ? paneWidths[width]
+                : width.default,
             padding: SPACING_MAP[padding],
             overflow: [null, null, 'auto'],
 
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index c862950deb3..98a7a66d322 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -213,8 +213,8 @@ export function SelectPanel({
               filterValue === ''
                 ? 'Showing all items'
                 : items.length <= 0
-                ? 'No matching items'
-                : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
+                  ? 'No matching items'
+                  : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
             }
           />
         )}
diff --git a/packages/react/src/hooks/useSlots.ts b/packages/react/src/hooks/useSlots.ts
index 29aaed481af..9fb3d824b29 100644
--- a/packages/react/src/hooks/useSlots.ts
+++ b/packages/react/src/hooks/useSlots.ts
@@ -20,12 +20,12 @@ type SlotElements<Config extends SlotConfig> = {
 type SlotValue<Config, Property extends keyof Config> = Config[Property] extends React.ElementType // config option 1
   ? React.ReactElement<React.ComponentPropsWithoutRef<Config[Property]>, Config[Property]>
   : Config[Property] extends readonly [
-      infer ElementType extends React.ElementType, // config option 2, infer array[0] as component
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props
-    ]
-  ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType>
-  : never // useful for narrowing types, third option is not possible
+        infer ElementType extends React.ElementType, // config option 2, infer array[0] as component
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        infer _testFn, // even though we don't use testFn, we need to infer it to support types for slots.*.props
+      ]
+    ? React.ReactElement<React.ComponentPropsWithoutRef<ElementType>, ElementType>
+    : never // useful for narrowing types, third option is not possible
 
 /**
  * Extract components from `children` so we can render them in different places,
diff --git a/packages/react/src/internal/components/TextInputInnerAction.tsx b/packages/react/src/internal/components/TextInputInnerAction.tsx
index ec9b6100828..75fcb22349f 100644
--- a/packages/react/src/internal/components/TextInputInnerAction.tsx
+++ b/packages/react/src/internal/components/TextInputInnerAction.tsx
@@ -107,10 +107,10 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
     const accessibleLabel = ariaLabel
       ? {'aria-label': ariaLabel}
       : ariaLabelledBy
-      ? {'aria-labelledby': ariaLabelledBy}
-      : {
-          'aria-label': '',
-        }
+        ? {'aria-labelledby': ariaLabelledBy}
+        : {
+            'aria-label': '',
+          }
 
     return (
       <Box as="span" className="TextInput-action" marginLeft={1} marginRight={1} lineHeight="0">
diff --git a/packages/react/src/sx.ts b/packages/react/src/sx.ts
index de25c93e0c0..5b9a20fc011 100644
--- a/packages/react/src/sx.ts
+++ b/packages/react/src/sx.ts
@@ -8,10 +8,10 @@ export type BetterCssProperties = {
   [K in keyof SystemCssProperties]: K extends keyof ColorProps
     ? ThemeColorPaths | SystemCssProperties[K]
     : K extends keyof BorderColorProps
-    ? ThemeColorPaths | SystemCssProperties[K]
-    : K extends keyof ShadowProps
-    ? ThemeShadowPaths | SystemCssProperties[K]
-    : SystemCssProperties[K]
+      ? ThemeColorPaths | SystemCssProperties[K]
+      : K extends keyof ShadowProps
+        ? ThemeShadowPaths | SystemCssProperties[K]
+        : SystemCssProperties[K]
 }
 
 // Support CSS custom properties in the `sx` prop
diff --git a/packages/react/src/utils/polymorphic.ts b/packages/react/src/utils/polymorphic.ts
index 9e017eb33ae..1dd2314cd53 100644
--- a/packages/react/src/utils/polymorphic.ts
+++ b/packages/react/src/utils/polymorphic.ts
@@ -50,10 +50,10 @@ interface ForwardRefComponent<
     props: As extends ''
       ? {as: keyof JSX.IntrinsicElements}
       : As extends React.ComponentType<infer P>
-      ? Merge<P, OwnProps & {as: As}>
-      : As extends keyof JSX.IntrinsicElements
-      ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
-      : never,
+        ? Merge<P, OwnProps & {as: As}>
+        : As extends keyof JSX.IntrinsicElements
+          ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
+          : never,
   ): React.ReactElement | null
 }
 
diff --git a/packages/react/src/utils/types/ComponentProps.ts b/packages/react/src/utils/types/ComponentProps.ts
index 83256126a04..4ddc3c7cf95 100644
--- a/packages/react/src/utils/types/ComponentProps.ts
+++ b/packages/react/src/utils/types/ComponentProps.ts
@@ -5,8 +5,5 @@
  *
  * @example ComponentProps<typeof MyComponent>
  */
-export type ComponentProps<T> = T extends React.ComponentType<React.PropsWithChildren<infer Props>>
-  ? Props extends object
-    ? Props
-    : never
-  : never
+export type ComponentProps<T> =
+  T extends React.ComponentType<React.PropsWithChildren<infer Props>> ? (Props extends object ? Props : never) : never

From 461ae57b4efd1053449643fe4dbd8c18ff86ddd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arma=C4=9Fan?= <broccolinisoup@github.com>
Date: Wed, 30 Oct 2024 11:07:25 +0800
Subject: [PATCH 6/6] SelectPanel: Allow using SelectPanel in FormControl
 (#5185)

* Allow using SelectPanel in FormControl

* Create slow-snails-swim.md
---
 .changeset/slow-snails-swim.md                |  5 ++
 .../FormControl.features.stories.tsx          | 67 ++++++++++++++++++-
 .../react/src/FormControl/FormControl.tsx     | 12 +++-
 3 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/slow-snails-swim.md

diff --git a/.changeset/slow-snails-swim.md b/.changeset/slow-snails-swim.md
new file mode 100644
index 00000000000..0e366fd6e38
--- /dev/null
+++ b/.changeset/slow-snails-swim.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Allow using SelectPanel in FormControl
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
index ac040fb057c..41c48c9487c 100644
--- a/packages/react/src/FormControl/FormControl.features.stories.tsx
+++ b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -4,12 +4,14 @@ import {
   Autocomplete,
   BaseStyles,
   Box,
+  Button,
   Checkbox,
   CheckboxGroup,
   FormControl,
   Radio,
   RadioGroup,
   Select,
+  SelectPanel,
   Text,
   TextInput,
   TextInputWithTokens,
@@ -17,7 +19,8 @@ import {
   ThemeProvider,
   theme,
 } from '..'
-import {MarkGithubIcon} from '@primer/octicons-react'
+import {MarkGithubIcon, TriangleDownIcon} from '@primer/octicons-react'
+import type {ItemInput} from '../deprecated/ActionList/List'
 
 export default {
   title: 'Components/FormControl/Features',
@@ -273,6 +276,68 @@ export const ValidationExample = () => {
   )
 }
 
+function getColorCircle(color: string) {
+  return function () {
+    return (
+      <Box
+        sx={{
+          backgroundColor: color,
+          borderColor: color,
+          width: 14,
+          height: 14,
+          borderRadius: 10,
+          margin: 'auto',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }}
+      />
+    )
+  }
+}
+
+const items: ItemInput[] = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', description: 'New feature or request', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', description: "Something isn't working", id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', description: 'Good for newcomers', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+].map(item => ({...item, descriptionVariant: 'block'}))
+
+export const WithSelectPanel = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FormControl required>
+      <FormControl.Label>Select Labels</FormControl.Label>
+      <SelectPanel
+        title="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+      />
+    </FormControl>
+  )
+}
+
 export const WithLeadingVisual = () => (
   <Box>
     <FormControl>
diff --git a/packages/react/src/FormControl/FormControl.tsx b/packages/react/src/FormControl/FormControl.tsx
index 257163c753a..a6ccd15c858 100644
--- a/packages/react/src/FormControl/FormControl.tsx
+++ b/packages/react/src/FormControl/FormControl.tsx
@@ -4,6 +4,7 @@ import Box from '../Box'
 import Checkbox from '../Checkbox'
 import Radio from '../Radio'
 import Select from '../Select'
+import {SelectPanel} from '../SelectPanel'
 import TextInput from '../TextInput'
 import TextInputWithTokens from '../TextInputWithTokens'
 import Textarea from '../Textarea'
@@ -50,7 +51,16 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
       leadingVisual: FormControlLeadingVisual,
       validation: FormControlValidation,
     })
-    const expectedInputComponents = [Autocomplete, Checkbox, Radio, Select, TextInput, TextInputWithTokens, Textarea]
+    const expectedInputComponents = [
+      Autocomplete,
+      Checkbox,
+      Radio,
+      Select,
+      TextInput,
+      TextInputWithTokens,
+      Textarea,
+      SelectPanel,
+    ]
     const choiceGroupContext = useContext(CheckboxOrRadioGroupContext)
     const disabled = choiceGroupContext.disabled || disabledProp
     const id = useId(idProp)