experimental/SelectPanel: Recalculate position when panel opens (#4321)

* recalculate position on open * Create curvy-fireants-promise.md
primer · Feb 28, 2024 · 94052a3 · 94052a3
1 parent 223c232
commit 94052a3
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/.changeset/curvy-fireants-promise.md b/.changeset/curvy-fireants-promise.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel: Fix anchored position inside a Dialog
diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -1,7 +1,8 @@
 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 {Dialog} from '../../drafts'
+import {ArrowRightIcon, EyeIcon, GitBranchIcon, TriangleDownIcon, GearIcon, TagIcon} from '@primer/octicons-react'
 import data from './mock-story-data'
 
 export default {
@@ -665,6 +666,47 @@ export const ShortSelectPanel = () => {
   )
 }
 
+export const InsideSidebar = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
+
+  return (
+    <>
+      <h1>Opening SelectPanel inside a sidebar</h1>
+
+      <Button onClick={() => setSidebarOpen(true)}>Open sidebar</Button>
+      {sidebarOpen && (
+        <Dialog position="right" title="Sidebar" onClose={() => setSidebarOpen(false)}>
+          <Box p={3}>
+            <SelectPanel
+              title="Choose a tag"
+              selectionVariant="instant"
+              onSubmit={() => {
+                if (!selectedTag) return
+                data.ref = selectedTag // pretending to persist changes
+              }}
+            >
+              <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+              <ActionList>
+                {data.tags.map(tag => (
+                  <ActionList.Item
+                    key={tag.id}
+                    onSelect={() => setSelectedTag(tag.id)}
+                    selected={selectedTag === tag.id}
+                  >
+                    {tag.name}
+                  </ActionList.Item>
+                ))}
+              </ActionList>
+            </SelectPanel>
+          </Box>
+        </Dialog>
+      )}
+    </>
+  )
+}
+
 // ----- Suspense implementation details ----
 
 const cache = new Map()

diff --git a/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx b/packages/react/src/drafts/SelectPanel2/SelectPanel.tsx
@@ -203,7 +203,7 @@ const Panel: React.FC<SelectPanelProps> = ({
       side: 'outside-bottom',
       align: 'start',
     },
-    [anchorRef.current, dialogRef.current],
+    [internalOpen, anchorRef.current, dialogRef.current],
   )
 
   /*