fix(SelectPanel): always show x button on single select (#5912)

Author: francinelucca

.changeset/light-snakes-deny.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): always show x button on single select

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

@@ -191,7 +191,6 @@ export const SingleSelect = () => {
         selected={selected}
         onSelectedChange={setSelected}
         onFilterChange={setFilter}
-        onCancel={() => setOpen(false)}
         width="medium"
         message={selectedItemsSortedFirst.length === 0 ? NoResultsMessage(filter) : undefined}
       />

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -431,6 +431,9 @@ export function SelectPanel({
     }
   }
 
+  // because of instant selection, canceling on single select is the same as closing the panel, no onCancel needed
+  const shouldShowXButton = (onCancel || !isMultiSelectVariant(selected)) && usingFullScreenOnNarrow
+
   return (
     <AnchoredOverlay
       renderAnchor={renderMenuAnchor}
@@ -468,19 +471,19 @@ export function SelectPanel({
               </div>
             ) : null}
           </div>
-          {onCancel && usingFullScreenOnNarrow && (
+          {shouldShowXButton ? (
             <IconButton
               type="button"
               variant="invisible"
               icon={XIcon}
               aria-label="Cancel and close"
               className={classes.ResponsiveCloseButton}
               onClick={() => {
-                onCancel()
+                onCancel?.()
                 onCancelRequested()
               }}
             />
-          )}
+          ) : null}
         </div>
         {notice && (
           <div aria-live="polite" data-variant={notice.variant} className={classes.Notice}>