Overlay

import React from 'react'
import {Box, Button, Overlay, registerPortalRoot} from '@primer/react'


export default function Dialog() {
  const [isOpen, setIsOpen] = React.useState(false)
  const buttonRef = React.useRef<HTMLButtonElement>(null)
  const confirmButtonRef = React.useRef<HTMLButtonElement>(null)
  const closeOverlay = () => setIsOpen(false)


  // This is for a workaround to ensure the Overlay renders in the example box
  const exampleBoxRef = React.useRef<HTMLDivElement>(null)
  React.useEffect(() => {
    if (exampleBoxRef.current) {
      registerPortalRoot(exampleBoxRef.current, 'exampleBox-dialog')
    }
  }, [exampleBoxRef])
  // end workaround


  return (
    <div ref={exampleBoxRef}>
      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
        Open overlay
      </Button>
      {isOpen ? (
        <Overlay
          initialFocusRef={confirmButtonRef}
          returnFocusRef={buttonRef}
          ignoreClickRefs={[buttonRef]}
          onEscape={closeOverlay}
          onClickOutside={closeOverlay}
          // `portalContainerName` is only needed when you want to portal the overlay into a specific container
          portalContainerName="exampleBox-dialog"
        >
          <Box display="flex" flexDirection="column" p={2}>
            <p>Are you sure?</p>
            <Button variant="danger" onClick={closeOverlay}>
              Cancel
            </Button>
            <Button onClick={closeOverlay} ref={confirmButtonRef}>
              Confirm
            </Button>
          </Box>
        </Overlay>
      ) : null}
    </div>
  )
}

import React from 'react'
import {ActionList, Button, Overlay, registerPortalRoot} from '@primer/react'


export default function Dialog() {
  const [isOpen, setIsOpen] = React.useState(false)
  const buttonRef = React.useRef<HTMLButtonElement>(null)


  // This is for a workaround to ensure the Overlay renders in the example box
  const exampleBoxRef = React.useRef<HTMLDivElement>(null)
  React.useEffect(() => {
    if (exampleBoxRef.current) {
      registerPortalRoot(exampleBoxRef.current, 'exampleBox-dropdown')
    }
  }, [exampleBoxRef])
  // end workaround
  return (
    <div ref={exampleBoxRef}>
      <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
        Open overlay
      </Button>
      {isOpen ? (
        <Overlay
          returnFocusRef={buttonRef}
          ignoreClickRefs={[buttonRef]}
          onEscape={() => setIsOpen(false)}
          onClickOutside={() => setIsOpen(false)}
          // `portalContainerName` is only needed when you want to portal the overlay into a specific container
          portalContainerName="exampleBox-dropdown"
        >
          <ActionList>
            <ActionList.Item>Copy link</ActionList.Item>
            <ActionList.Item>Quote reply</ActionList.Item>
            <ActionList.Item>Reference in new issue</ActionList.Item>
            <ActionList.Item>Edit</ActionList.Item>
            <ActionList.Divider />
            <ActionList.Item variant="danger">Delete</ActionList.Item>
          </ActionList>
        </Overlay>
      ) : null}
    </div>
  )
}