From 5a09f6e0ade1ddf7592134226d2a40d14d83404c Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:52:55 +0100
Subject: [PATCH 1/7] add back button

---
 .../src/drafts/SelectPanel2/SelectPanel.tsx   | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
index 04669a33f13..f2bfe3b74e7 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon} from '@primer/octicons-react'
+import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 import {FocusKeys} from '@primer/behaviors'
 
 import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../../index'
@@ -316,7 +316,7 @@ const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((prop
   return <Button ref={anchorRef} {...props} />
 })
 
-const SelectPanelHeader: React.FC<React.PropsWithChildren> = ({children, ...props}) => {
+const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => {
   const [slots, childrenWithoutSlots] = useSlots(children, {
     searchInput: SelectPanelSearchInput,
   })
@@ -343,18 +343,32 @@ const SelectPanelHeader: React.FC<React.PropsWithChildren> = ({children, ...prop
           marginBottom: slots.searchInput ? 2 : 0,
         }}
       >
-        <Box sx={{marginLeft: 2, marginTop: description ? '2px' : 0}}>
-          {/* heading element is intentionally hardcoded to h1, it is not customisable 
+        <Box sx={{display: 'flex'}}>
+          {onBack ? (
+            <Tooltip text="Back" direction="s">
+              <IconButton
+                type="button"
+                variant="invisible"
+                icon={ArrowLeftIcon}
+                aria-label="Back"
+                onClick={() => onBack()}
+              />
+            </Tooltip>
+          ) : null}
+
+          <Box sx={{marginLeft: onBack ? 1 : 2, marginTop: description ? '2px' : 0}}>
+            {/* heading element is intentionally hardcoded to h1, it is not customisable 
             see https://github.com/github/primer/issues/2578 for context
           */}
-          <Heading as="h1" id={`${panelId}--title`} sx={{fontSize: 14, fontWeight: 600}}>
-            {title}
-          </Heading>
-          {description ? (
-            <Text id={`${panelId}--description`} sx={{fontSize: 0, color: 'fg.muted', display: 'block'}}>
-              {description}
-            </Text>
-          ) : null}
+            <Heading as="h1" id={`${panelId}--title`} sx={{fontSize: 14, fontWeight: 600}}>
+              {title}
+            </Heading>
+            {description ? (
+              <Text id={`${panelId}--description`} sx={{fontSize: 0, color: 'fg.muted', display: 'block'}}>
+                {description}
+              </Text>
+            ) : null}
+          </Box>
         </Box>
 
         <Box>

From 9c956fa2654424c442c87f791c54f881ea9eca2b Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:53:11 +0100
Subject: [PATCH 2/7] add nested panel example

---
 .../SelectPanel.examples.stories.tsx          | 127 +++++++++++++++++-
 .../drafts/SelectPanel2/mock-story-data.ts    |  59 ++++++++
 2 files changed, 183 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
index a4057183ced..2d28ec87b5a 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -1,7 +1,16 @@
 import React from 'react'
 import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Text} from '../../index'
-import {ArrowRightIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon} from '@primer/octicons-react'
+import {ActionList, ActionMenu, Avatar, Box, Button, Octicon, Text} from '../../index'
+import {
+  ArrowRightIcon,
+  EyeIcon,
+  GitBranchIcon,
+  TriangleDownIcon,
+  GearIcon,
+  GitPullRequestIcon,
+  GitMergeIcon,
+  GitPullRequestDraftIcon,
+} from '@primer/octicons-react'
 import data from './mock-story-data'
 
 export default {
@@ -435,8 +444,8 @@ export const OpenFromMenu = () => {
           </ActionList>
         </ActionMenu.Overlay>
       </ActionMenu>
+
       <SelectPanel
-        variant="modal"
         title="Custom"
         open={selectPanelOpen}
         onSubmit={() => {
@@ -450,6 +459,13 @@ export const OpenFromMenu = () => {
           setMenuOpen(true)
         }}
       >
+        <SelectPanel.Header
+          onBack={() => {
+            setSelectedCustomEvents(initialCustomEvents)
+            setSelectPanelOpen(false)
+            setMenuOpen(true)
+          }}
+        />
         <ActionList>
           {itemsToShow.map(item => (
             <ActionList.Item
@@ -639,6 +655,111 @@ export const ShortSelectPanel = () => {
   )
 }
 
+export const NestedSelection = () => {
+  const [panelToShow, setPanelToShow] = React.useState<null | 'repos' | 'pull_requests'>(null)
+
+  const anchorRef = React.useRef<HTMLButtonElement>(null)
+
+  /* First level: Repo selection */
+  const [selectedRepo, setSelectedRepo] = React.useState<string>('')
+
+  const reposToShow = data.repos
+
+  /* Second level: Pull request selection */
+  const iconMap = {
+    open: <Octicon icon={GitPullRequestIcon} sx={{color: 'open.emphasis'}} />,
+    merged: <Octicon icon={GitMergeIcon} sx={{color: 'done.emphasis'}} />,
+    draft: <Octicon icon={GitPullRequestDraftIcon} />,
+  }
+
+  const [selectedPullRequestIds, setSelectedPullRequestIds] = React.useState<string[]>([])
+  /* Selection */
+  const onPullRequestSelect = (pullId: string) => {
+    if (!selectedPullRequestIds.includes(pullId)) setSelectedPullRequestIds([...selectedPullRequestIds, pullId])
+    else setSelectedPullRequestIds(selectedPullRequestIds.filter(id => id !== pullId))
+  }
+
+  return (
+    <>
+      <h1>Nested selection</h1>
+
+      <Button
+        ref={anchorRef}
+        onClick={() => setPanelToShow('repos')}
+        variant="invisible"
+        trailingAction={GearIcon}
+        sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
+      >
+        Reviewers
+      </Button>
+
+      <SelectPanel
+        open={panelToShow === 'repos'}
+        anchorRef={anchorRef}
+        title="Link a pull request or branch"
+        description="Select a repository first to search for pull requests orbranches."
+        selectionVariant="instant"
+        onSubmit={() => setPanelToShow('pull_requests')}
+      >
+        <SelectPanel.Header>
+          <SelectPanel.SearchInput placeholder="Search (not implemented in demo)" />
+        </SelectPanel.Header>
+
+        <ActionList>
+          {reposToShow.map(repo => (
+            <ActionList.Item
+              key={repo.name}
+              selected={selectedRepo === `${repo.org}/${repo.name}`}
+              onSelect={() => setSelectedRepo(`${repo.org}/${repo.name}`)}
+            >
+              <ActionList.LeadingVisual>
+                <Avatar src={`https://github.com/${repo.org}.png`} />
+              </ActionList.LeadingVisual>
+              {repo.org}/{repo.name}
+              <ActionList.Description>{repo.description}</ActionList.Description>
+              <ActionList.TrailingVisual>
+                <ArrowRightIcon />
+              </ActionList.TrailingVisual>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+
+        <SelectPanel.Footer />
+      </SelectPanel>
+
+      <SelectPanel
+        open={panelToShow === 'pull_requests'}
+        anchorRef={anchorRef}
+        title={selectedRepo}
+        description="Link a branch or pull request"
+        selectionVariant="multiple"
+        onSubmit={() => {}}
+      >
+        <SelectPanel.Header onBack={() => setPanelToShow('repos')}>
+          <SelectPanel.SearchInput placeholder="Search (not implemented in demo)" />
+        </SelectPanel.Header>
+
+        <ActionList>
+          {data.pulls.map(pull => (
+            <ActionList.Item
+              key={pull.name}
+              selected={selectedPullRequestIds.includes(pull.id)}
+              onSelect={() => onPullRequestSelect(pull.id)}
+            >
+              <ActionList.LeadingVisual>{iconMap[pull.status as keyof typeof iconMap]}</ActionList.LeadingVisual>
+              {pull.name}
+              <ActionList.Description variant="inline">#{pull.id}</ActionList.Description>
+              <ActionList.Description variant="block">{pull.description}</ActionList.Description>
+            </ActionList.Item>
+          ))}
+        </ActionList>
+
+        <SelectPanel.Footer />
+      </SelectPanel>
+    </>
+  )
+}
+
 // ----- Suspense implementation details ----
 
 const cache = new Map()
diff --git a/packages/react/src/drafts/SelectPanel2/mock-story-data.ts b/packages/react/src/drafts/SelectPanel2/mock-story-data.ts
index 75f86fd3c77..1a43b531fe4 100644
--- a/packages/react/src/drafts/SelectPanel2/mock-story-data.ts
+++ b/packages/react/src/drafts/SelectPanel2/mock-story-data.ts
@@ -936,6 +936,65 @@ const data = {
     {id: 'v35.0.0', name: 'v35.0.0'},
     {id: 'v34.0.0', name: 'v34.0.0'},
   ],
+  repos: [
+    {
+      org: 'github',
+      name: 'primer',
+      description: "The internal hub for GitHub's open-source design system",
+    },
+    {
+      org: 'github',
+      name: 'github',
+      description: 'You’re lookin’ at it.',
+    },
+    {
+      org: 'primer',
+      name: 'react',
+      description: "An implementation of GitHub's Primer Design System using React",
+    },
+    {
+      org: 'primer',
+      name: 'primitives',
+      description: 'Color, typography, and spacing primitives in json',
+    },
+    {
+      org: 'primer',
+      name: 'brand',
+      description: 'React components and Primitives for GitHub marketing websites',
+    },
+    {
+      org: 'facebook',
+      name: 'react',
+      description: 'The library for web and native user interfaces',
+    },
+    {
+      org: 'primer',
+      name: 'view_components',
+      description: 'ViewComponents for the Primer Design System',
+    },
+  ],
+  pulls: [
+    {
+      id: '4286',
+      name: 'chore(deps): bump @mdx-js/mdx from 1.6.22 to 3.0.1',
+      description: 'Opened 14 hours ago',
+      status: 'open',
+    },
+    {id: '4278', name: 'Address a few v8 color bugs', description: 'Opened 4 days ago', status: 'open'},
+    {id: '4277', name: 'SelectPanel2: Responsive variants', description: 'Opened 4 days ago', status: 'draft'},
+    {
+      name: 'SelectPanel2: Submit panel when an item is selected with Enter',
+      id: '4265',
+      description: 'Merged last week',
+      status: 'merged',
+    },
+    {
+      name: 'test(e2e): add e2e test for SelectPanel2 default story',
+      id: '4279',
+      description: 'Opened 3 days ago',
+      status: 'open',
+    },
+  ],
 }
 
 export default data

From 72e9a9c82192f8b42672bbbd1f6cb18e6d4fbf3f Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:53:19 +0100
Subject: [PATCH 3/7] fix nested panel focus

---
 packages/react/src/drafts/SelectPanel2/SelectPanel.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
index f2bfe3b74e7..1461550bc35 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -192,7 +192,10 @@ const Panel: React.FC<SelectPanelProps> = ({
   // tl;dr: react takes over autofocus instead of letting the browser handle it,
   // but not for dialogs, so we have to do it
   React.useEffect(() => {
-    if (internalOpen) document.querySelector('input')?.focus()
+    if (internalOpen) {
+      const searchInput = document.querySelector('dialog[open] input') as HTMLInputElement | undefined
+      searchInput?.focus()
+    }
   }, [internalOpen])
 
   /* Anchored */

From 24105ab1f987060182f6b6acad376ad9d7d54e56 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:56:00 +0100
Subject: [PATCH 4/7] implement save and cancel on second panel

---
 .../drafts/SelectPanel2/SelectPanel.examples.stories.tsx  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
index 2d28ec87b5a..862af3ae495 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -731,9 +731,13 @@ export const NestedSelection = () => {
         open={panelToShow === 'pull_requests'}
         anchorRef={anchorRef}
         title={selectedRepo}
-        description="Link a branch or pull request"
+        description="Link a pull request"
         selectionVariant="multiple"
-        onSubmit={() => {}}
+        onSubmit={() => setPanelToShow(null)}
+        onCancel={() => {
+          setSelectedPullRequestIds([])
+          setPanelToShow('repos')
+        }}
       >
         <SelectPanel.Header onBack={() => setPanelToShow('repos')}>
           <SelectPanel.SearchInput placeholder="Search (not implemented in demo)" />

From 73b6b15026146748008a15c93dbf253e2a9ad4d3 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:56:53 +0100
Subject: [PATCH 5/7] add onCancel for first panel

---
 .../src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
index 862af3ae495..f1ab1c2fc3d 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -700,6 +700,7 @@ export const NestedSelection = () => {
         description="Select a repository first to search for pull requests orbranches."
         selectionVariant="instant"
         onSubmit={() => setPanelToShow('pull_requests')}
+        onCancel={() => setPanelToShow(null)}
       >
         <SelectPanel.Header>
           <SelectPanel.SearchInput placeholder="Search (not implemented in demo)" />

From b154b45ab17858eea5104682b9a17a1c21d59b6f Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 12:59:42 +0100
Subject: [PATCH 6/7] Create fair-sloths-kick.md

---
 .changeset/fair-sloths-kick.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fair-sloths-kick.md

diff --git a/.changeset/fair-sloths-kick.md b/.changeset/fair-sloths-kick.md
new file mode 100644
index 00000000000..d2ba47a2483
--- /dev/null
+++ b/.changeset/fair-sloths-kick.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+experimental/SelectPanel: Add back button

From 6f91cb8931a6c075939c10a4afdce540da19b2ee Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Tue, 20 Feb 2024 13:04:28 +0100
Subject: [PATCH 7/7] add preview for selection

---
 .../SelectPanel.examples.stories.tsx          | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
index f1ab1c2fc3d..a10d42a94b0 100644
--- a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -672,7 +672,8 @@ export const NestedSelection = () => {
     draft: <Octicon icon={GitPullRequestDraftIcon} />,
   }
 
-  const [selectedPullRequestIds, setSelectedPullRequestIds] = React.useState<string[]>([])
+  const initialSelectedPullRequestIds = ['4278']
+  const [selectedPullRequestIds, setSelectedPullRequestIds] = React.useState<string[]>(initialSelectedPullRequestIds)
   /* Selection */
   const onPullRequestSelect = (pullId: string) => {
     if (!selectedPullRequestIds.includes(pullId)) setSelectedPullRequestIds([...selectedPullRequestIds, pullId])
@@ -690,9 +691,22 @@ export const NestedSelection = () => {
         trailingAction={GearIcon}
         sx={{width: '200px', '[data-component=buttonContent]': {justifyContent: 'start'}}}
       >
-        Reviewers
+        Development
       </Button>
 
+      <ActionList>
+        {data.pulls
+          .filter(pull => selectedPullRequestIds.includes(pull.id))
+          .map(pull => (
+            <ActionList.Item key={pull.name}>
+              <ActionList.LeadingVisual>{iconMap[pull.status as keyof typeof iconMap]}</ActionList.LeadingVisual>
+              {pull.name}
+              <ActionList.Description variant="inline">#{pull.id}</ActionList.Description>
+              <ActionList.Description variant="block">{pull.description}</ActionList.Description>
+            </ActionList.Item>
+          ))}
+      </ActionList>
+
       <SelectPanel
         open={panelToShow === 'repos'}
         anchorRef={anchorRef}
@@ -736,7 +750,7 @@ export const NestedSelection = () => {
         selectionVariant="multiple"
         onSubmit={() => setPanelToShow(null)}
         onCancel={() => {
-          setSelectedPullRequestIds([])
+          setSelectedPullRequestIds(initialSelectedPullRequestIds)
           setPanelToShow('repos')
         }}
       >