Popover

import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ContactDetailsPopover = () => (
  <Popover.Root defaultOpen={false}>
    <Popover.Trigger render={<Button>Show details</Button>} />
    <Popover.Portal>
      <Popover.Positioner align="start">
        <Popover.Popup
          style={{ boxSizing: 'border-box', width: 260, padding: 16, gap: 12 }}
        >
          <Popover.Title>Contact details</Popover.Title>
          <Popover.Description>
            Reach Alex at alex@example.com.
          </Popover.Description>
          <Popover.Close
            style={{ alignSelf: 'flex-end' }}
            render={<Button size="sm">Close</Button>}
          />
        </Popover.Popup>
      </Popover.Positioner>
    </Popover.Portal>
  </Popover.Root>
);

Popover.Root
├── Popover.Trigger
└── Popover.Portal
    ├── Popover.Backdrop (optional)
    └── Popover.Positioner
        └── Popover.Popup
            ├── Popover.Arrow (optional)
            └── Popover.Viewport (optional)
                ├── Popover.Title
                ├── Popover.Description
                └── Popover.Close

import { useState } from 'react';
import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ContactDetailsPopover = () => {
  const [open, setOpen] = useState(false);

  return (
    <Popover.Root open={open} onOpenChange={setOpen}>
      <Popover.Trigger render={<Button>Show details</Button>} />
      <Popover.Portal>
        <Popover.Positioner align="start">
          <Popover.Popup
            style={{
              boxSizing: 'border-box',
              width: 260,
              padding: 16,
              gap: 12,
            }}
          >
            <Popover.Title>Contact details</Popover.Title>
            <Popover.Description>
              Reach Alex at alex@example.com.
            </Popover.Description>
            <Popover.Close
              style={{ alignSelf: 'flex-end' }}
              render={<Button size="sm">Close</Button>}
            />
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
};

import { Button } from 'twenty-ui/primitives/input';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const ImportHelp = () => (
  <Popover.Root>
    <Popover.Trigger render={<Button variant="outline">Import help</Button>} />
    <Popover.Portal>
      <Popover.Positioner align="start">
        <Popover.Popup
          style={{ boxSizing: 'border-box', width: 260, padding: 16, gap: 12 }}
        >
          <Popover.Arrow />
          <Popover.Title>Import a CSV file</Popover.Title>
          <Popover.Description>
            Use a header row to identify your columns.
          </Popover.Description>
          <Popover.Close
            style={{ alignSelf: 'flex-end' }}
            render={<Button size="sm">Got it</Button>}
          />
        </Popover.Popup>
      </Popover.Positioner>
    </Popover.Portal>
  </Popover.Root>
);

import { useRef } from 'react';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const AnchoredHelp = () => {
  const anchor = useRef<HTMLDivElement>(null);

  return (
    <div ref={anchor}>
      <Popover.Root>
        <Popover.Trigger>Help</Popover.Trigger>
        <Popover.Portal>
          <Popover.Positioner
            anchor={anchor}
            side="inline-end"
            align="start"
            sideOffset={({ anchor }) => anchor.width / 2}
            collisionBoundary="clipping-ancestors"
            collisionAvoidance={{ side: 'flip', align: 'shift' }}
            collisionPadding={8}
            positionMethod="fixed"
          >
            <Popover.Popup aria-label="Help">
              <Popover.Arrow />
              Contextual help
            </Popover.Popup>
          </Popover.Positioner>
        </Popover.Portal>
      </Popover.Root>
    </div>
  );
};

import { useState } from 'react';
import { Popover } from 'twenty-ui/primitives/surfaces';

export const OwnerHelp = () => {
  const [handle] = useState(() => Popover.createHandle<{ name: string }>());

  return (
    <>
      <Popover.Trigger handle={handle} id="owner" payload={{ name: 'Alice' }}>
        Owner
      </Popover.Trigger>
      <Popover.Root handle={handle}>
        {({ payload }) => (
          <Popover.Portal>
            <Popover.Positioner align="start">
              <Popover.Popup aria-label="Account owner">
                {payload?.name}
                <Popover.Close>Close</Popover.Close>
              </Popover.Popup>
            </Popover.Positioner>
          </Popover.Portal>
        )}
      </Popover.Root>
    </>
  );
};