v3/packages/design-system/atoms/popover/Popover.tsx

import { globalOnKeyUp } from '@roleypoly/design-system/atoms/key-events';
import * as React from 'react';
import { IoMdClose } from 'react-icons/io';
import {
  DefocusHandler,
  PopoverBase,
  PopoverContent,
  PopoverHead,
  PopoverHeadCloser,
} from './Popover.styled';

type PopoverProps = {
  children: () => React.ReactNode;
  position: 'top left' | 'top right' | 'bottom left' | 'bottom right';
  active: boolean;
  canDefocus?: boolean;
  onExit?: (type: 'escape' | 'defocus' | 'explicit') => void;
  headContent: React.ReactNode;
  preferredWidth?: number;
};

export const Popover = (props: PopoverProps) => {
  globalOnKeyUp(['Escape'], () => props.onExit?.('escape'), props.active);
  return (
    <>
      <PopoverBase active={props.active} preferredWidth={props.preferredWidth}>
        <PopoverHead>
          <PopoverHeadCloser onClick={() => props.onExit?.('explicit')}>
            <IoMdClose />
          </PopoverHeadCloser>
          <div>{props.headContent}</div>
        </PopoverHead>
        <PopoverContent>{props.children()}</PopoverContent>
      </PopoverBase>
      {props.canDefocus && (
        <DefocusHandler active={props.active} onClick={() => props.onExit?.('defocus')} />
      )}
    </>
  );
};