update SelectPanel Multi Select Modal story (#7354)

Co-authored-by: Copilot <[email protected]>

Author: llastflowers

.changeset/fresh-spiders-push.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+update SelectPanel Multi Select Modal story

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

@@ -783,13 +783,15 @@ export const WithOnCancel = () => {
 
 export const MultiSelectModal = () => {
   const [initialSelection, setInitialSelection] = React.useState<ItemInput[]>(items.slice(1, 3))
-
   const [selected, setSelected] = React.useState<ItemInput[]>(initialSelection)
+  const [savedSelection, setSavedSelection] = React.useState<ItemInput[]>(initialSelection)
   const [filter, setFilter] = React.useState('')
   const [open, setOpen] = useState(false)
 
   React.useEffect(() => {
-    if (!open) setInitialSelection(selected) // Save selection as initialSelection for next time
+    // Sync initialSelection with the last committed selection after the modal closes.
+    // onCancel uses initialSelection to discard unsaved changes made while the modal is open.
+    if (!open) setInitialSelection(selected)
   }, [open, selected])
 
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
@@ -800,13 +802,18 @@ export const MultiSelectModal = () => {
       title="Select labels"
       placeholder="Select labels"
       subtitle="Use labels to organize issues and pull requests"
-      renderAnchor={({children, ...anchorProps}) => (
+      renderAnchor={({...anchorProps}) => (
         <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
-          {children}
+          {savedSelection.map(item => item.text).join(', ') || 'Select labels'}
         </Button>
       )}
       open={open}
-      onOpenChange={setOpen}
+      onOpenChange={(nextOpen, gesture) => {
+        setOpen(nextOpen)
+        if (!nextOpen && gesture === 'selection') {
+          setSavedSelection(selected)
+        }
+      }}
       items={filteredItems}
       selected={selected}
       onSelectedChange={setSelected}