export function MemexTableMenu()

in src/stories/ActionMenu2/fixtures.stories.tsx [238:299]
57 lines of code
3 McCabe index (conditional complexity)

export function MemexTableMenu(): JSX.Element {
  const [name, setName] = React.useState('Estimate')
  const inputRef = React.createRef<HTMLInputElement>()

  /** To add custom components to the Menu,
   *  you need to switch to a controlled menu
   */
  const [open, setOpen] = React.useState(false)
  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      setName(event.currentTarget.value)
      setOpen(false)
    }
  }

  /** This requires inside knowledge. If you to do this with onBlur
   *  on the input, it doesn't work :(
   */
  const handleClickOutside = () => {
    if (inputRef.current) setName(inputRef.current.value)
    setOpen(false)
  }

  return (
    <>
      <h1>Memex Table Menu</h1>
      <Box
        sx={{
          width: 200,
          display: 'flex',
          justifyContent: 'space-between',
          p: 2,
          border: '1px solid',
          borderColor: 'border.default'
        }}
      >
        <Text sx={{fontSize: 0, fontWeight: 'bold'}}>{name}</Text>
        <ActionMenu open={open} onOpenChange={setOpen}>
          <ActionMenu.Anchor>
            <IconButton icon={TriangleDownIcon} aria-label="Open Estimate column options menu" sx={{padding: 0}} />
          </ActionMenu.Anchor>

          <ActionMenu.Overlay onClickOutside={handleClickOutside}>
            <TextInput ref={inputRef} sx={{m: 2}} defaultValue={name} onKeyPress={handleKeyPress} />
            <ActionMenu.Divider sx={{m: 0}} />

            <ActionList>
              <ActionList.Item>Sort ascending (123...)</ActionList.Item>
              <ActionList.Item>Sort descending (123...)</ActionList.Item>
              <ActionList.Divider />
              <ActionList.Item>Filter by values</ActionList.Item>
              <ActionList.Item>Group by values</ActionList.Item>
              <ActionList.Divider />
              <ActionList.Item disabled>Hide field</ActionList.Item>
              <ActionList.Item variant="danger">Delete file</ActionList.Item>
            </ActionList>
          </ActionMenu.Overlay>
        </ActionMenu>
      </Box>
    </>
  )
}