wip: SelectPanel overflow

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

@@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Avatar, Box, Link, Text} from '..'
+import {Avatar, Box, Dialog, Link, Spinner, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
 import Octicon from '../Octicon'
@@ -312,3 +312,99 @@ export const OverlayPropsOverrides = () => {
     </AnchoredOverlay>
   )
 }
+
+export const RepositionAfterContentGrows = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 200px)'}}>
+      <div>
+        What to expect:
+        <ul>
+          <li>The anchored overlay should open below the anchor (default position)</li>
+          <li>After 2000ms, the amount of content in the overlay grows</li>
+          <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+        </ul>
+      </div>
+      <AnchoredOverlay
+        renderAnchor={props => (
+          <Button {...props} sx={{width: 'fit-content'}}>
+            Button
+          </Button>
+        )}
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => {
+          setOpen(false)
+          setLoading(true)
+        }}
+      >
+        {loading ? (
+          <>
+            <Spinner />
+            loading for 2000ms
+          </>
+        ) : (
+          <div style={{height: '300px'}}>content with 300px height</div>
+        )}
+      </AnchoredOverlay>
+    </Stack>
+  )
+}
+
+export const RepositionAfterContentGrowsWithinDialog = () => {
+  const [open, setOpen] = useState(false)
+
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Dialog onClose={() => {}}>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 300px)'}}>
+        <div>
+          What to expect:
+          <ul>
+            <li>The anchored overlay should open below the anchor (default position)</li>
+            <li>After 2000ms, the amount of content in the overlay grows</li>
+            <li>the overlay should reposition itself above the anchor so that it stays inside the window</li>
+          </ul>
+        </div>
+        <AnchoredOverlay
+          renderAnchor={props => (
+            <Button {...props} sx={{width: 'fit-content'}}>
+              Button
+            </Button>
+          )}
+          open={open}
+          onOpen={() => setOpen(true)}
+          onClose={() => {
+            setOpen(false)
+            setLoading(true)
+          }}
+        >
+          {loading ? (
+            <>
+              <Spinner />
+              loading for 2000ms
+            </>
+          ) : (
+            <div style={{height: '300px'}}>content with 300px height</div>
+          )}
+        </AnchoredOverlay>
+      </Stack>
+    </Dialog>
+  )
+}

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -112,7 +112,7 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   overlayProps,
   focusTrapSettings,
   focusZoneSettings,
-  side = 'outside-bottom',
+  side = overlayProps?.['anchorSide'] || 'outside-bottom',
   align = 'start',
   alignmentOffset,
   anchorOffset,

packages/react/src/Overlay/Overlay.module.css

@@ -30,6 +30,7 @@
 
   &:where([data-reflow-container='true']) {
     max-width: calc(100vw - 2rem);
+    max-height: 100vh;
   }
 
   &:where([data-overflow-auto]) {

packages/react/src/Overlay/Overlay.tsx

@@ -101,6 +101,7 @@ const StyledOverlay = toggleStyledComponent(
 
     &[data-reflow-container='true'] {
       max-width: calc(100vw - 2rem);
+      max-height: 100vh;
     }
 
     ${sx};

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

@@ -8,6 +8,8 @@ import type {OverlayProps} from '../Overlay'
 import {TriangleDownIcon} from '@primer/octicons-react'
 import {ActionList} from '../deprecated/ActionList'
 import FormControl from '../FormControl'
+import {Stack} from '../Stack'
+import {Dialog} from '../experimental'
 
 const meta = {
   title: 'Components/SelectPanel/Examples',
@@ -442,3 +444,72 @@ export const ItemsInScope = () => {
     </FormControl>
   )
 }
+
+export const RepositionAfterLoading = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    if (!open) setLoading(true)
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 300px)', width: 'fit-content'}}>
+        <h1>Reposition panel after loading</h1>
+        <SelectPanel
+          loading={loading}
+          title="Select labels"
+          placeholderText="Filter Labels"
+          open={open}
+          onOpenChange={setOpen}
+          items={filteredItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          onFilterChange={setFilter}
+        />
+      </Stack>
+    </>
+  )
+}
+
+export const SelectPanelRepositionInsideDialog = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const [loading, setLoading] = useState(true)
+
+  React.useEffect(() => {
+    if (!open) setLoading(true)
+    window.setTimeout(() => {
+      if (open) setLoading(false)
+    }, 2000)
+  }, [open])
+
+  return (
+    <Dialog title="SelectPanel reposition after loading inside Dialog" onClose={() => {}}>
+      <Stack direction="vertical" justify="space-between" style={{height: 'calc(100vh - 500px)', width: 'fit-content'}}>
+        <p>other content</p>
+        <SelectPanel
+          loading={loading}
+          title="Select labels"
+          placeholderText="Filter Labels"
+          open={open}
+          onOpenChange={setOpen}
+          items={filteredItems}
+          selected={selected}
+          onSelectedChange={setSelected}
+          onFilterChange={setFilter}
+          overlayProps={{anchorSide: 'outside-top'}}
+        />
+      </Stack>
+    </Dialog>
+  )
+}

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -50,7 +50,7 @@ interface SelectPanelBaseProps {
 
 export type SelectPanelProps = SelectPanelBaseProps &
   Omit<FilteredActionListProps, 'selectionVariant'> &
-  Pick<AnchoredOverlayProps, 'open'> &
+  Pick<AnchoredOverlayProps, 'open' | 'width' | 'height'> &
   AnchoredOverlayWrapperAnchorProps &
   (SelectPanelSingleSelection | SelectPanelMultiSelection)
 
@@ -102,6 +102,8 @@ export function SelectPanel({
   overlayProps,
   sx,
   className,
+  height,
+  width,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -205,6 +207,8 @@ export function SelectPanel({
         open={open}
         onOpen={onOpen}
         onClose={onClose}
+        height={height}
+        width={width}
         overlayProps={{
           role: 'dialog',
           'aria-labelledby': titleId,
@@ -213,6 +217,8 @@ export function SelectPanel({
         }}
         focusTrapSettings={focusTrapSettings}
         focusZoneSettings={focusZoneSettings}
+        // TODO: fix
+        preventOverflow={false}
       >
         <LiveRegionOutlet />
         {usingModernActionList ? null : (

packages/react/src/hooks/useAnchoredPosition.ts

@@ -30,22 +30,54 @@ export function useAnchoredPosition(
   const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef)
   const anchorElementRef = useProvidedRefOrCreate(settings?.anchorElementRef)
   const [position, setPosition] = React.useState<AnchorPosition | undefined>(undefined)
+  const [_, setPrevHeight] = React.useState<number | undefined>(undefined)
 
   const updatePosition = React.useCallback(
     () => {
+      // TODO: remove
+      console.log('updatePosition')
       if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
-        setPosition(getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings))
+        const newPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings)
+        const anchorTop = anchorElementRef.current?.getBoundingClientRect().top
+        setPosition(prev => {
+          // TODO: remove
+          console.log({
+            prev,
+            newPosition,
+            floatingHeight: floatingElementRef.current?.clientHeight,
+            floatingBottom: floatingElementRef.current?.getBoundingClientRect().bottom,
+            anchorTop,
+          })
+          if (
+            prev &&
+            prev.anchorSide !== newPosition.anchorSide &&
+            ['outside-top', 'inside-top'].includes(prev.anchorSide)
+          ) {
+            if (anchorTop > (floatingElementRef.current?.clientHeight ?? 0)) {
+              setPrevHeight(prevHeight => {
+                if (floatingElementRef?.current && prevHeight) {
+                  ;(floatingElementRef.current as HTMLElement).style.height = `${prevHeight}px`
+                }
+                return prevHeight
+              })
+              return prev
+            }
+          }
+          return newPosition
+        })
       } else {
         setPosition(undefined)
       }
+      setPrevHeight(floatingElementRef?.current?.clientHeight)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [floatingElementRef, anchorElementRef, ...dependencies],
   )
 
   useLayoutEffect(updatePosition, [updatePosition])
 
-  useResizeObserver(updatePosition)
+  useResizeObserver(updatePosition) // watches for changes in window size
+  useResizeObserver(updatePosition, floatingElementRef as React.RefObject<HTMLElement>) // watches for changes in floating element size
 
   return {
     floatingElementRef,

packages/react/src/hooks/useResizeObserver.ts

@@ -20,8 +20,9 @@ export function useResizeObserver<T extends HTMLElement>(
     savedCallback.current = callback
   })
 
+  const targetEl = target && 'current' in target ? target.current : document.documentElement
+
   useLayoutEffect(() => {
-    const targetEl = target && 'current' in target ? target.current : document.documentElement
     if (!targetEl) {
       return
     }
@@ -36,5 +37,5 @@ export function useResizeObserver<T extends HTMLElement>(
       observer.disconnect()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target, ...depsArray])
+  }, [targetEl, ...depsArray])
 }