(reverted) SelectPanel: Prepare for non-anchored variants

.changeset/fluffy-days-brake.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: (Implementation detail, should have no changes for users) Replace AnchoredOverlay with Overlay and useAnchoredPosition

packages/react/src/SelectPanel/SelectPanel.tsx

@@ -1,7 +1,7 @@
 import {SearchIcon, TriangleDownIcon} from '@primer/octicons-react'
 import React, {useCallback, useMemo} from 'react'
 import type {AnchoredOverlayProps} from '../AnchoredOverlay'
-import {AnchoredOverlay} from '../AnchoredOverlay'
+import Overlay from '../Overlay'
 import type {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
 import Box from '../Box'
 import type {FilteredActionListProps} from '../FilteredActionList'
@@ -12,12 +12,12 @@ import type {TextInputProps} from '../TextInput'
 import type {ItemProps, ItemInput} from './types'
 
 import {Button} from '../Button'
-import {useProvidedRefOrCreate} from '../hooks'
-import type {FocusZoneHookSettings} from '../hooks/useFocusZone'
+import {useAnchoredPosition, useProvidedRefOrCreate} from '../hooks'
 import {useId} from '../hooks/useId'
 import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
 import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
 import {useFeatureFlag} from '../FeatureFlags'
+import {useFocusTrap} from '../hooks/useFocusTrap'
 
 interface SelectPanelSingleSelection {
  selected: ItemInput | undefined
@@ -56,11 +56,6 @@ function isMultiSelectVariant(
  return Array.isArray(selected)
 }
 
-const focusZoneSettings: Partial<FocusZoneHookSettings> = {
- // Let FilteredActionList handle focus zone
- disabled: true,
-}
-
 const areItemsEqual = (itemA: ItemInput, itemB: ItemInput) => {
  // prefer checking equivality by item.id
  if (typeof itemA.id !== 'undefined') return itemA.id === itemB.id
@@ -137,6 +132,57 @@ export function SelectPanel({
  }
  }, [placeholder, renderAnchor, selected])
 
+ /* Anchoring logic */
+ const overlayRef = React.useRef<HTMLDivElement>(null)
+ const inputRef = React.useRef<HTMLInputElement>(null)
+
+ const {position} = useAnchoredPosition(
+ {
+ anchorElementRef: anchorRef,
+ floatingElementRef: overlayRef,
+ side: 'outside-bottom',
+ align: 'start',
+ },
+ [open, anchorRef.current, overlayRef.current],
+ )
+
+ const onAnchorClick = useCallback(
+ (event: React.MouseEvent<HTMLElement>) => {
+ if (event.defaultPrevented || event.button !== 0) {
+ return
+ }
+
+ if (!open) {
+ onOpen('anchor-click')
+ } else {
+ onClose('anchor-click')
+ }
+ },
+ [open, onOpen, onClose],
+ )
+
+ const onAnchorKeyDown = useCallback(
+ (event: React.KeyboardEvent<HTMLElement>) => {
+ if (!event.defaultPrevented) {
+ if (!open && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
+ onOpen('anchor-key-press', event)
+ event.preventDefault()
+ }
+ }
+ },
+ [open, onOpen],
+ )
+
+ const anchorProps = {
+ ref: anchorRef,
+ 'aria-haspopup': true,
+ 'aria-expanded': open,
+ onClick: onAnchorClick,
+ onKeyDown: onAnchorKeyDown,
+ }
+ // TODO: anchor should be called button because it's not an anchor anymore
+ const anchor = renderMenuAnchor ? renderMenuAnchor(anchorProps) : null
+
  const itemsToRender = useMemo(() => {
  return items.map(item => {
  const isItemSelected = isMultiSelectVariant(selected) ? doesItemsIncludeItem(selected, item) : selected === item
@@ -172,10 +218,13 @@ export function SelectPanel({
  })
  }, [onClose, onSelectedChange, items, selected])
 
- const inputRef = React.useRef<HTMLInputElement>(null)
- const focusTrapSettings = {
+ /** Focus trap */
+ useFocusTrap({
+ containerRef: overlayRef,
+ disabled: !open || !position,
  initialFocusRef: inputRef,
- }
+ returnFocusRef: anchorRef,
+ })
 
  const extendedTextInputProps: Partial<TextInputProps> = useMemo(() => {
  return {
@@ -189,22 +238,26 @@ export function SelectPanel({
 
  const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list')
 
+ if (!open) return <>{anchor}</>
+
  return (
  <LiveRegion>
- <AnchoredOverlay
- renderAnchor={renderMenuAnchor}
- anchorRef={anchorRef}
- open={open}
- onOpen={onOpen}
- onClose={onClose}
- overlayProps={{
- role: 'dialog',
- 'aria-labelledby': titleId,
- 'aria-describedby': subtitle ? subtitleId : undefined,
- ...overlayProps,
- }}
- focusTrapSettings={focusTrapSettings}
- focusZoneSettings={focusZoneSettings}
+ {anchor}
+
+ <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 : (
@@ -260,7 +313,7 @@ export function SelectPanel({
  </Box>
  )}
  </Box>
- </AnchoredOverlay>
+ </Overlay>
  </LiveRegion>
  )
 }