From b83cae83ceebccd5aef864dbe1f46761f634e549 Mon Sep 17 00:00:00 2001
From: Hector Garcia <hectahertz@github.com>
Date: Mon, 27 Jun 2022 15:55:52 +0000
Subject: [PATCH 1/4] Don't use selected items as the SelectPanel anchor label

---
 docs/content/SelectPanel.mdx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
index 84a8c3f734a..354dbc5cf78 100644
--- a/docs/content/SelectPanel.mdx
+++ b/docs/content/SelectPanel.mdx
@@ -44,11 +44,7 @@ function DemoComponent() {
 
   return (
     <SelectPanel
-      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
-        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
-          {children || 'Select Labels'}
-        </Button>
-      )}
+      renderAnchor={({...anchorProps}) => <DropdownButton {...anchorProps}>Select Labels</DropdownButton>}
       title="Select Items"
       inputLabel="Select Items"
       open={open}

From d14d7245e1b33df2f0a132b6b4955fd9fe110702 Mon Sep 17 00:00:00 2001
From: Cameron McHenry <camchenry@users.noreply.github.com>
Date: Mon, 27 Jun 2022 16:05:07 +0000
Subject: [PATCH 2/4] Fix select state not synchronizing with updated items

---
 src/SelectPanel/SelectPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index f1dc33ba8ea..01620a4fdbc 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -100,6 +100,7 @@ export function SelectPanel({
   )
 
   const [finalItemsSelected, setFinalItemsSelected] = useState(selectedItems)
+  React.useEffect(() => setFinalItemsSelected(selectedItems), [selectedItems])
 
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef)
   const onOpen: AnchoredOverlayProps['onOpen'] = useCallback(gesture => onOpenChange(true, gesture), [onOpenChange])

From e37b9db0aca50b8ef61262a9309805d7e84f6232 Mon Sep 17 00:00:00 2001
From: Cameron McHenry <camchenry@users.noreply.github.com>
Date: Mon, 27 Jun 2022 16:08:36 +0000
Subject: [PATCH 3/4] Fix onClose being called with event instead of gesture

---
 src/SelectPanel/SelectPanel.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index 01620a4fdbc..c1a4824d55a 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -167,7 +167,7 @@ export function SelectPanel({
     onClose('selection')
   }, [finalItemsSelected, onSelectedChange, onClose, selected])
 
-  const onCancelClickHandler = React.useCallback(
+  const onCloseOverlay = React.useCallback(
     (gesture?: 'anchor-click' | 'click-outside' | 'escape') => {
       setFinalItemsSelected(selectedItems)
       onClose(gesture ?? 'escape')
@@ -175,6 +175,11 @@ export function SelectPanel({
     [onClose, selectedItems]
   )
 
+  const onCloseClickHandler = React.useCallback(() => {
+    setFinalItemsSelected(selectedItems)
+    onClose('escape')
+  }, [onClose, selectedItems])
+
   const inputRef = React.useRef<HTMLInputElement>(null)
   const titleId = useSSRSafeId()
   const focusTrapSettings = {
@@ -207,7 +212,7 @@ export function SelectPanel({
       anchorRef={anchorRef}
       open={open}
       onOpen={onOpen}
-      onClose={onCancelClickHandler}
+      onClose={onCloseOverlay}
       overlayProps={{...overlayProps, onKeyPress: overlayKeyPressHandler, role: 'dialog', 'aria-labelledby': titleId}}
       focusTrapSettings={focusTrapSettings}
       focusZoneSettings={focusZoneSettings}
@@ -222,8 +227,10 @@ export function SelectPanel({
             : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`}
         </SrOnly>
         <Box display="flex" alignItems="center" justifyContent="space-between" pl={3} pr={2} pt={2}>
-          <Heading as="h1" id={titleId} sx={{fontSize: 1}}>{title}</Heading>
-          <IconButton icon={XIcon} aria-label="Close" variant="invisible" onClick={onCancelClickHandler} />
+          <Heading as="h1" id={titleId} sx={{fontSize: 1}}>
+            {title}
+          </Heading>
+          <IconButton icon={XIcon} aria-label="Close" variant="invisible" onClick={onCloseClickHandler} />
         </Box>
         <FilteredActionList
           filterValue={filterValue}
@@ -248,7 +255,7 @@ export function SelectPanel({
           borderTopWidth={1}
           borderTopStyle="solid"
         >
-          <Button onClick={onCancelClickHandler}>Cancel</Button>
+          <Button onClick={onCloseClickHandler}>Cancel</Button>
           <Button variant="primary" onClick={onSaveClickHandler}>
             Save
           </Button>

From a36cb97adf80c83bbeeecbb5aa08d21fb3cca904 Mon Sep 17 00:00:00 2001
From: Cameron McHenry <camchenry@users.noreply.github.com>
Date: Mon, 27 Jun 2022 16:54:40 +0000
Subject: [PATCH 4/4] Remove useEffect post-merge

---
 src/SelectPanel/SelectPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index 4423109d4af..e9888062f3f 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -86,7 +86,6 @@ export function SelectPanel({
   )
 
   const [finalItemsSelected, setFinalItemsSelected] = useState(selectedItems)
-  React.useEffect(() => setFinalItemsSelected(selectedItems), [selectedItems])
 
   // Refresh the selected items state when the prop changes.
   // This is necessary because sometimes the selected items need to be fetched async.