applications/calendar/src/app/components/events/PopoverContainer.tsx

   1 import type { Ref } from 'react';
   2 import { forwardRef, useRef } from 'react';
   3 import * as React from 'react';
   4
   5 import { useFocusTrap, useHotkeys } from '@proton/components';
   6 import { useCombinedRefs } from '@proton/hooks';
   7 import clsx from '@proton/utils/clsx';
   8
   9 interface Props extends React.HTMLAttributes<HTMLDivElement> {
  10     isOpen?: boolean;
  11     onClose?: () => void;
  12 }
  13
  14 const PopoverContainer = (
  15     { children, className, isOpen = true, onClose, ...rest }: Props,
  16     ref: Ref<HTMLDivElement>
  17 ) => {
  18     const rootRef = useRef<HTMLDivElement>(null);
  19     const combinedRefs = useCombinedRefs<HTMLDivElement>(ref, rootRef);
  20     const focusTrapProps = useFocusTrap({ active: isOpen, rootRef });
  21
  22     useHotkeys(rootRef, [
  23         [
  24             'Escape',
  25             () => {
  26                 onClose?.();
  27             },
  28         ],
  29     ]);
  30
  31     return (
  32         <div ref={combinedRefs} className={clsx([className, 'outline-none'])} {...rest} {...focusTrapProps}>
  33             {children}
  34         </div>
  35     );
  36 };
  37
  38 const ForwardPopoverContainer = forwardRef(PopoverContainer);
  39
  40 export default ForwardPopoverContainer;