diff --git a/.changeset/fluffy-days-brake.md b/.changeset/fluffy-days-brake.md deleted file mode 100644 index a965179d8da..00000000000 --- a/.changeset/fluffy-days-brake.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@primer/react": patch ---- - -SelectPanel: (Implementation detail, should have no changes for users) Replace AnchoredOverlay with Overlay and useAnchoredPosition diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx index a94b461e169..98a7a66d322 100644 --- a/packages/react/src/SelectPanel/SelectPanel.tsx +++ b/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 Overlay from '../Overlay' +import {AnchoredOverlay} from '../AnchoredOverlay' 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 {useAnchoredPosition, useProvidedRefOrCreate} from '../hooks' +import {useProvidedRefOrCreate} from '../hooks' +import type {FocusZoneHookSettings} from '../hooks/useFocusZone' 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,6 +56,11 @@ function isMultiSelectVariant( return Array.isArray(selected) } +const focusZoneSettings: Partial = { + // 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 @@ -132,57 +137,6 @@ export function SelectPanel({ } }, [placeholder, renderAnchor, selected]) - /* Anchoring logic */ - const overlayRef = React.useRef(null) - const inputRef = React.useRef(null) - - const {position} = useAnchoredPosition( - { - anchorElementRef: anchorRef, - floatingElementRef: overlayRef, - side: 'outside-bottom', - align: 'start', - }, - [open, anchorRef.current, overlayRef.current], - ) - - const onAnchorClick = useCallback( - (event: React.MouseEvent) => { - 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) => { - 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 @@ -218,13 +172,10 @@ export function SelectPanel({ }) }, [onClose, onSelectedChange, items, selected]) - /** Focus trap */ - useFocusTrap({ - containerRef: overlayRef, - disabled: !open || !position, + const inputRef = React.useRef(null) + const focusTrapSettings = { initialFocusRef: inputRef, - returnFocusRef: anchorRef, - }) + } const extendedTextInputProps: Partial = useMemo(() => { return { @@ -238,26 +189,22 @@ export function SelectPanel({ const usingModernActionList = useFeatureFlag('primer_react_select_panel_with_modern_action_list') - if (!open) return <>{anchor} - return ( - {anchor} - - 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} + {usingModernActionList ? null : ( @@ -313,7 +260,7 @@ export function SelectPanel({ )} - + ) }