SelectPanel2: Use html dialog

.changeset/eleven-lizards-draw.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+experimental/SelectPanel2: Use `<dialog>` element

src/Overlay/Overlay.tsx

@@ -54,7 +54,7 @@ function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y
   return {x: 0, y: 0}
 }
 
-const StyledOverlay = styled.div<StyledOverlayProps>`
+export const StyledOverlay = styled.div<StyledOverlayProps>`
   background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;

src/drafts/SelectPanel2/SelectPanel.tsx

@@ -8,8 +8,6 @@ import {
   IconButton,
   Heading,
   Box,
-  AnchoredOverlay,
-  AnchoredOverlayProps,
   Tooltip,
   TextInput,
   TextInputProps,
@@ -20,8 +18,9 @@ import {
 } from '../../../src/index'
 import {ActionListContainerContext} from '../../../src/ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
-import {useProvidedRefOrCreate, useId} from '../../hooks'
+import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
 import {useFocusZone} from '../../hooks/useFocusZone'
+import {StyledOverlay, OverlayProps} from '../../Overlay/Overlay'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -58,8 +57,8 @@ export type SelectPanelProps = {
   onSubmit?: (event?: React.FormEvent<HTMLFormElement>) => void
 
   // TODO: move these to SelectPanel.Overlay or overlayProps
-  width?: AnchoredOverlayProps['width']
-  height?: AnchoredOverlayProps['height']
+  width?: OverlayProps['width']
+  height?: OverlayProps['height']
 
   children: React.ReactNode
 }
@@ -82,24 +81,38 @@ const Panel: React.FC<SelectPanelProps> = ({
   height = 'large',
   ...props
 }) => {
-  const anchorRef = useProvidedRefOrCreate(providedAnchorRef)
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+
+  // sync open state with props
+  if (propsOpen !== undefined && internalOpen !== propsOpen) setInternalOpen(propsOpen)
+
+  // TODO: replace this hack with clone element?
 
   // 🚨 Hack for good API!
-  // we strip out Anchor from children and pass it to AnchoredOverlay to render
+  // we strip out Anchor from children and wire it up to Dialog
   // with additional props for accessibility
-  let renderAnchor: AnchoredOverlayProps['renderAnchor'] = null
+  let Anchor: React.ReactElement | undefined
+  const anchorRef = useProvidedRefOrCreate(providedAnchorRef)
+
+  const onAnchorClick = () => {
+    if (!internalOpen) setInternalOpen(true)
+    else onInternalClose()
+  }
+
   const contents = React.Children.map(props.children, child => {
     if (React.isValidElement(child) && child.type === SelectPanelButton) {
-      renderAnchor = anchorProps => React.cloneElement(child, anchorProps)
+      Anchor = React.cloneElement(child, {
+        // @ts-ignore TODO
+        ref: anchorRef,
+        onClick: onAnchorClick,
+        'aria-haspopup': true,
+        'aria-expanded': internalOpen,
+      })
       return null
     }
     return child
   })
 
-  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
-  // sync open state
-  if (propsOpen !== undefined && internalOpen !== propsOpen) setInternalOpen(propsOpen)
-
   const onInternalClose = () => {
     if (propsOpen === undefined) setInternalOpen(false)
     if (typeof propsOnCancel === 'function') propsOnCancel()
@@ -135,26 +148,77 @@ const Panel: React.FC<SelectPanelProps> = ({
     [internalOpen],
   )
 
+  /* Dialog */
+  const dialogRef = React.useRef<HTMLDialogElement>(null)
+  if (internalOpen) dialogRef.current?.showModal()
+  else dialogRef.current?.close()
+
+  // dialog handles Esc automatically, so we have to sync internal state
+  React.useEffect(() => dialogRef.current?.addEventListener('close', onInternalClose))
+
+  // React doesn't support autoFocus for dialog: https://github.com/facebook/react/issues/23301
+  // tl;dr: react takes over autofocus instead of letting the browser handle it,
+  // but not for dialogs, so we have to do it
+  React.useEffect(() => {
+    if (internalOpen) document.querySelector('input')?.focus()
+  }, [internalOpen])
+
+  /* Anchored */
+  const {position} = useAnchoredPosition(
+    {
+      anchorElementRef: anchorRef,
+      floatingElementRef: dialogRef,
+      side: 'outside-bottom',
+      align: 'start',
+    },
+    [anchorRef.current, dialogRef.current],
+  )
+
+  /* 
+    We don't close the panel when clicking outside.
+    For many years, we used to save changes and closed the dialog (for label picker)
+    which isn't accessible, clicking outside should discard changes and close the dialog
+    Fixing this a11y bug would confuse users, so as a middle ground,
+    we don't close the menu and nudge the user towards the footer actions
+  */
+  const [footerAnimationEnabled, setFooterAnimationEnabled] = React.useState(false)
+  const onClickOutside = () => {
+    setFooterAnimationEnabled(true)
+    window.setTimeout(() => setFooterAnimationEnabled(false), 500)
+  }
+
   return (
     <>
-      <AnchoredOverlay
-        anchorRef={anchorRef}
-        renderAnchor={renderAnchor}
-        open={internalOpen}
-        onOpen={() => setInternalOpen(true)}
-        onClose={onInternalClose}
+      {Anchor}
+
+      <StyledOverlay
+        as="dialog"
+        ref={dialogRef}
+        aria-labelledby={`${panelId}--title`}
+        aria-describedby={description ? `${panelId}--description` : undefined}
         width={width}
         height={height}
-        focusZoneSettings={{
-          // we only want focus trap from the overlay,
-          // we don't want focus zone on the whole overlay because
-          // we have a focus zone on the list
-          disabled: true,
+        sx={{
+          ...position,
+          // reset dialog default styles
+          border: 'none',
+          padding: 0,
+          margin: 0,
+          '::backdrop': {background: 'transparent'},
+
+          '& [data-selectpanel-primary-actions]': {
+            animation: footerAnimationEnabled ? 'selectpanel-gelatine 0.5s linear' : 'none',
+          },
+          '@keyframes selectpanel-gelatine': {
+            '0%': {transform: 'scale(1, 1)'},
+            '25%': {transform: 'scale(0.9, 1.1)'},
+            '50%': {transform: 'scale(1.1, 0.9)'},
+            '75%': {transform: 'scale(0.95, 1.05)'},
+            '100%': {transform: 'scale(1, 1)'},
+          },
         }}
-        overlayProps={{
-          role: 'dialog',
-          'aria-labelledby': `${panelId}--title`,
-          'aria-describedby': description ? `${panelId}--description` : undefined,
+        onClick={event => {
+          if (event.target === event.currentTarget) onClickOutside()
         }}
       >
         <SelectPanelContext.Provider
@@ -171,15 +235,16 @@ const Panel: React.FC<SelectPanelProps> = ({
         >
           <Box
             as="form"
+            method="dialog"
             onSubmit={onInternalSubmit}
             sx={{
               display: 'flex',
               flexDirection: 'column',
               height: '100%',
             }}
           >
-            {/* render default header as fallback */}
-            {slots.header ?? <SelectPanelHeader />}
+            {slots.header ?? /* render default header as fallback */ <SelectPanelHeader />}
+
             <Box
               as="div"
               ref={listContainerRef as React.RefObject<HTMLDivElement>}
@@ -209,7 +274,7 @@ const Panel: React.FC<SelectPanelProps> = ({
             {slots.footer}
           </Box>
         </SelectPanelContext.Provider>
-      </AnchoredOverlay>
+      </StyledOverlay>
     </>
   )
 }
@@ -279,6 +344,7 @@ const SelectPanelHeader: React.FC<React.PropsWithChildren> = ({children, ...prop
 }
 
 const SelectPanelSearchInput: React.FC<TextInputProps> = ({onChange: propsOnChange, ...props}) => {
+  // TODO: use forwardedRef
   const inputRef = React.createRef<HTMLInputElement>()
 
   const {setSearchQuery} = React.useContext(SelectPanelContext)
@@ -292,9 +358,6 @@ const SelectPanelSearchInput: React.FC<TextInputProps> = ({onChange: propsOnChan
 
   return (
     <TextInput
-      // this autofocus doesn't seem to apply 🤔
-      // probably because the focus zone overrides autoFocus
-      autoFocus
       ref={inputRef}
       block
       leadingVisual={SearchIcon}
@@ -303,6 +366,7 @@ const SelectPanelSearchInput: React.FC<TextInputProps> = ({onChange: propsOnChan
         <TextInput.Action
           icon={XCircleFillIcon}
           aria-label="Clear"
+          tooltipDirection="w"
           sx={{color: 'fg.subtle', bg: 'none'}}
           onClick={() => {
             if (inputRef.current) inputRef.current.value = ''
@@ -349,7 +413,7 @@ const SelectPanelFooter = ({...props}) => {
       <Box sx={{flexGrow: hidePrimaryActions ? 1 : 0}}>{props.children}</Box>
 
       {hidePrimaryActions ? null : (
-        <Box sx={{display: 'flex', gap: 2}}>
+        <Box data-selectpanel-primary-actions sx={{display: 'flex', gap: 2}}>
           <Button size="small" type="button" onClick={() => onCancel()}>
             Cancel
           </Button>