Simplify

Author: camertron

packages/react/src/experimental/SelectPanel2/SelectPanel.module.css

@@ -8,14 +8,6 @@
   --position-top: 0;
   --position-left: 0;
 
-  &[data-visibility='visible'] {
-    visibility: visible;
-  }
-
-  &[data-visibility='hidden'] {
-    visibility: hidden;
-  }
-
   &:where([open]) {
     display: flex; /* to fit children */
   }

packages/react/src/experimental/SelectPanel2/SelectPanel.tsx

@@ -249,20 +249,6 @@ const Panel: React.FC<SelectPanelProps> = ({
     maxHeightValue = '100vh'
   }
 
-  const [isVisible, setIsVisible] = useState(internalOpen)
-
-  useEffect(() => {
-    if (internalOpen) {
-      // give the browser time to render the panel and for useAnchoredPosition
-      // to calculate its actual size
-      window.requestAnimationFrame(() => {
-        setIsVisible(true)
-      })
-    } else {
-      setIsVisible(false)
-    }
-  }, [internalOpen, setIsVisible])
-
   return (
     <>
       {Anchor}
@@ -276,24 +262,15 @@ const Panel: React.FC<SelectPanelProps> = ({
         height="fit-content"
         maxHeight={maxHeight}
         data-variant={currentVariant}
-        data-visibility={isVisible ? 'visible' : 'hidden'}
         sx={
           enabled
             ? undefined
             : {
-                '&[data-visibility="visible"]': {
-                  visibility: 'visible',
-                },
-                '&[data-visibility="hidden"]': {
-                  visibility: 'hidden',
-                },
-
                 '--max-height': heightMap[maxHeight],
                 // reset dialog default styles
                 border: 'none',
                 padding: 0,
                 color: 'fg.default',
-                '&[open]': {display: 'flex'}, // to fit children
 
                 '&[data-variant="anchored"], &[data-variant="full-screen"]': {
                   margin: 0,
@@ -335,8 +312,13 @@ const Panel: React.FC<SelectPanelProps> = ({
                 '--max-height': maxHeightValue,
                 '--position-top': `${position?.top ?? 0}px`,
                 '--position-left': `${position?.left ?? 0}px`,
+                visibility: internalOpen ? 'visible' : 'hidden',
+                display: 'flex',
               } as React.CSSProperties)
-            : undefined
+            : {
+                visibility: internalOpen ? 'visible' : 'hidden',
+                display: 'flex',
+              }
         }
         className={enabled ? classes.Overlay : undefined}
         {...props}
@@ -345,64 +327,62 @@ const Panel: React.FC<SelectPanelProps> = ({
         }}
       >
         {internalOpen && (
-          <>
-            <SelectPanelContext.Provider
-              value={{
-                panelId,
-                title,
-                description,
-                onCancel: onInternalCancel,
-                onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
-                searchQuery,
-                setSearchQuery,
-                selectionVariant,
-                moveFocusToList,
-              }}
+          <SelectPanelContext.Provider
+            value={{
+              panelId,
+              title,
+              description,
+              onCancel: onInternalCancel,
+              onClearSelection: propsOnClearSelection ? onInternalClearSelection : undefined,
+              searchQuery,
+              setSearchQuery,
+              selectionVariant,
+              moveFocusToList,
+            }}
+          >
+            <Box
+              as="form"
+              method="dialog"
+              onSubmit={onInternalSubmit}
+              sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', width: '100%'}}
+              className={enabled ? classes.Form : undefined}
             >
+              {slots.header ?? /* render default header as fallback */ <SelectPanelHeader />}
+
               <Box
-                as="form"
-                method="dialog"
-                onSubmit={onInternalSubmit}
-                sx={enabled ? undefined : {display: 'flex', flexDirection: 'column', width: '100%'}}
-                className={enabled ? classes.Form : undefined}
+                as="div"
+                sx={
+                  enabled
+                    ? undefined
+                    : {
+                        flexShrink: 1,
+                        flexGrow: 1,
+                        overflow: 'hidden',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'space-between',
+                        ul: {overflowY: 'auto', flexGrow: 1},
+                      }
+                }
+                className={enabled ? classes.Container : undefined}
               >
-                {slots.header ?? /* render default header as fallback */ <SelectPanelHeader />}
-
-                <Box
-                  as="div"
-                  sx={
-                    enabled
-                      ? undefined
-                      : {
-                          flexShrink: 1,
-                          flexGrow: 1,
-                          overflow: 'hidden',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          justifyContent: 'space-between',
-                          ul: {overflowY: 'auto', flexGrow: 1},
-                        }
-                  }
-                  className={enabled ? classes.Container : undefined}
+                <ActionListContainerContext.Provider
+                  value={{
+                    container: 'SelectPanel',
+                    listRole: 'listbox',
+                    selectionAttribute: 'aria-selected',
+                    selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
+                    afterSelect: internalAfterSelect,
+                    listLabelledBy: `${panelId}--title`,
+                    enableFocusZone: true, // Arrow keys navigation for list items
+                  }}
                 >
-                  <ActionListContainerContext.Provider
-                    value={{
-                      container: 'SelectPanel',
-                      listRole: 'listbox',
-                      selectionAttribute: 'aria-selected',
-                      selectionVariant: selectionVariant === 'instant' ? 'single' : selectionVariant,
-                      afterSelect: internalAfterSelect,
-                      listLabelledBy: `${panelId}--title`,
-                      enableFocusZone: true, // Arrow keys navigation for list items
-                    }}
-                  >
-                    {childrenInBody}
-                  </ActionListContainerContext.Provider>
-                </Box>
-                {slots.footer}
+                  {childrenInBody}
+                </ActionListContainerContext.Provider>
               </Box>
-            </SelectPanelContext.Provider>
-          </>
+              {slots.footer}
+            </Box>
+          </SelectPanelContext.Provider>
         )}
       </BaseOverlay>
     </>

packages/react/src/hooks/useAnchoredPosition.ts

@@ -1,4 +1,4 @@
-import React, {type RefObject} from 'react'
+import React from 'react'
 import {getAnchoredPosition} from '@primer/behaviors'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
@@ -45,12 +45,8 @@ export function useAnchoredPosition(
 
   useLayoutEffect(updatePosition, [updatePosition])
 
-  // recalculate position if viewport changes size
   useResizeObserver(updatePosition)
 
-  // recalculate position if the floating element changes size
-  useResizeObserver(updatePosition, floatingElementRef as RefObject<HTMLElement>)
-
   return {
     floatingElementRef,
     anchorElementRef,