different way of writing the same thing

primer · Nov 11, 2024 · 080e0f6 · 080e0f6
1 parent 2f95af1
commit 080e0f6
Showing 1 changed file with 70 additions and 70 deletions.
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -239,81 +239,81 @@ export function SelectPanel({
 
   const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
 
+  if (!open) return <LiveRegion>{anchor}</LiveRegion>
+
   return (
     <LiveRegion>
       {anchor}
-      {open && (
-        <Overlay
-          role="dialog"
-          aria-labelledby={titleId}
-          aria-describedby={subtitle ? subtitleId : undefined}
-          ref={overlayRef}
-          returnFocusRef={anchorRef}
-          onEscape={() => onClose('escape')}
-          onClickOutside={() => onClose('click-outside')}
-          ignoreClickRefs={
-            /* this is required so that clicking the button while the panel is open does not re-open the panel */
-            [anchorRef]
-          }
-          {...position}
-          {...overlayProps}
-        >
-          <LiveRegionOutlet />
-          {usingModernActionList ? null : (
-            <Message
-              value={
-                filterValue === ''
-                  ? 'Showing all items'
-                  : items.length <= 0
-                    ? 'No matching items'
-                    : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
-              }
-            />
-          )}
-          <Box sx={{display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}>
-            <Box sx={{pt: 2, px: 3}}>
-              <Heading as="h1" id={titleId} sx={{fontSize: 1}}>
-                {title}
-              </Heading>
-              {subtitle ? (
-                <Box id={subtitleId} sx={{fontSize: 0, color: 'fg.muted'}}>
-                  {subtitle}
-                </Box>
-              ) : null}
-            </Box>
-            <FilteredActionList
-              filterValue={filterValue}
-              onFilterChange={onFilterChange}
-              placeholderText={placeholderText}
-              {...listProps}
-              role="listbox"
-              // browsers give aria-labelledby precedence over aria-label so we need to make sure
-              // we don't accidentally override props.aria-label
-              aria-labelledby={listProps['aria-label'] ? undefined : titleId}
-              aria-multiselectable={isMultiSelectVariant(selected) ? 'true' : 'false'}
-              selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
-              items={itemsToRender}
-              textInputProps={extendedTextInputProps}
-              inputRef={inputRef}
-              // inheriting height and maxHeight ensures that the FilteredActionList is never taller
-              // than the Overlay (which would break scrolling the items)
-              sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
-            />
-            {footer && (
-              <Box
-                sx={{
-                  display: 'flex',
-                  borderTop: '1px solid',
-                  borderColor: 'border.default',
-                  padding: 2,
-                }}
-              >
-                {footer}
+      <Overlay
+        role="dialog"
+        aria-labelledby={titleId}
+        aria-describedby={subtitle ? subtitleId : undefined}
+        ref={overlayRef}
+        returnFocusRef={anchorRef}
+        onEscape={() => onClose('escape')}
+        onClickOutside={() => onClose('click-outside')}
+        ignoreClickRefs={
+          /* this is required so that clicking the button while the panel is open does not re-open the panel */
+          [anchorRef]
+        }
+        {...position}
+        {...overlayProps}
+      >
+        <LiveRegionOutlet />
+        {usingModernActionList ? null : (
+          <Message
+            value={
+              filterValue === ''
+                ? 'Showing all items'
+                : items.length <= 0
+                  ? 'No matching items'
+                  : `${items.length} matching ${items.length === 1 ? 'item' : 'items'}`
+            }
+          />
+        )}
+        <Box sx={{display: 'flex', flexDirection: 'column', height: 'inherit', maxHeight: 'inherit'}}>
+          <Box sx={{pt: 2, px: 3}}>
+            <Heading as="h1" id={titleId} sx={{fontSize: 1}}>
+              {title}
+            </Heading>
+            {subtitle ? (
+              <Box id={subtitleId} sx={{fontSize: 0, color: 'fg.muted'}}>
+                {subtitle}
               </Box>
-            )}
+            ) : null}
           </Box>
-        </Overlay>
-      )}
+          <FilteredActionList
+            filterValue={filterValue}
+            onFilterChange={onFilterChange}
+            placeholderText={placeholderText}
+            {...listProps}
+            role="listbox"
+            // browsers give aria-labelledby precedence over aria-label so we need to make sure
+            // we don't accidentally override props.aria-label
+            aria-labelledby={listProps['aria-label'] ? undefined : titleId}
+            aria-multiselectable={isMultiSelectVariant(selected) ? 'true' : 'false'}
+            selectionVariant={isMultiSelectVariant(selected) ? 'multiple' : 'single'}
+            items={itemsToRender}
+            textInputProps={extendedTextInputProps}
+            inputRef={inputRef}
+            // inheriting height and maxHeight ensures that the FilteredActionList is never taller
+            // than the Overlay (which would break scrolling the items)
+            sx={{...sx, height: 'inherit', maxHeight: 'inherit'}}
+          />
+          {footer && (
+            <Box
+              sx={{
+                display: 'flex',
+                borderTop: '1px solid',
+                borderColor: 'border.default',
+                padding: 2,
+              }}
+            >
+              {footer}
+            </Box>
+          )}
+        </Box>
+      </Overlay>
     </LiveRegion>
   )
 }