export function OverlayProps()

in src/stories/ActionMenu2/fixtures.stories.tsx [500:540]


export function OverlayProps(): JSX.Element {
  const [open, setOpen] = React.useState(false)
  const inputRef = React.createRef<HTMLInputElement>()

  return (
    <>
      <h1>OverlayProps</h1>
      <p>
        Disable `onClickOutside` and `onEscape`. Only way to close is to select an action which takes focus on a
        TextInput
      </p>
      <ActionMenu open={open} onOpenChange={setOpen}>
        <ActionMenu.Button>Menu</ActionMenu.Button>
        <ActionMenu.Overlay
          width="large"
          onClickOutside={() => {
            /* do nothing, keep it open*/
          }}
          onEscape={() => {
            /* do nothing, keep it open*/
          }}
          returnFocusRef={inputRef}
        >
          <ActionList>
            <ActionList.Item>Option 1</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
            <ActionList.Item>Option 2</ActionList.Item>
          </ActionList>
        </ActionMenu.Overlay>
      </ActionMenu>
      <br />
      <br />
      <TextInput type="text" ref={inputRef} placeholder="random input to return focus to" />
    </>
  )
}