ClickAwayListener

ClickAwayListener wraps an element and calls onClickAway when a mousedown or touchstart occurs anywhere outside it. Use it to close custom dropdowns, inline editors, or popovers when the user interacts elsewhere. It listens on press (not click), so it fires before focus moves, and renders a plain wrapper with no portal or positioning of its own.

Example

import { ClickAwayListener } from '@officina/ui';

{
  open && (
    <ClickAwayListener onClickAway={() => setOpen(false)}>
      <div className="absolute mt-1 rounded border bg-white p-2">{/* menu items */}</div>
    </ClickAwayListener>
  );
}

API