overleaf-cep/services/web/frontend/js/shared/components/ol/ol-modal.tsx

import FocusTrap from '../focus-trap'
import {
  Modal,
  ModalProps,
  ModalHeaderProps,
  ModalTitleProps,
  ModalFooterProps,
} from 'react-bootstrap'
import { ModalBodyProps } from 'react-bootstrap/ModalBody'
import type { Options as FocusTrapOptions } from 'focus-trap'
import { useTranslation } from 'react-i18next'
import classNames from 'classnames'

type OLModalProps = ModalProps & {
  size?: 'sm' | 'lg'
  onHide: () => void
  show?: boolean
  themed?: boolean
  className?: string
} & Pick<
    FocusTrapOptions,
    | 'escapeDeactivates'
    | 'clickOutsideDeactivates'
    | 'returnFocusOnDeactivate'
    | 'initialFocus'
  >

type OLModalHeaderProps = ModalHeaderProps & {
  closeButton?: boolean
}

export function OLModal({
  children,
  show = false,
  onHide,
  returnFocusOnDeactivate = true, // Return focus to trigger element when modal closes
  escapeDeactivates = false, // Let React-Bootstrap Modal handle Escape key to avoid double Escape key handling
  clickOutsideDeactivates = true, // Allow focus trap to deactivate on outside click and let React-Bootstrap Modal handle it
  initialFocus,
  themed = false,
  className,
  backdropClassName,
  ...props
}: OLModalProps) {
  return (
    <Modal
      show={show}
      onHide={onHide}
      className={classNames({ 'modal-themed': themed }, className)}
      backdropClassName={classNames(
        { 'modal-backdrop-themed': themed },
        backdropClassName
      )}
      {...props}
    >
      <FocusTrap
        active={show}
        focusTrapOptions={{
          escapeDeactivates,
          clickOutsideDeactivates,
          returnFocusOnDeactivate,
          initialFocus,
        }}
      >
        {children}
      </FocusTrap>
    </Modal>
  )
}

export function OLModalHeader({
  children,
  closeButton = true,
  ...props
}: OLModalHeaderProps) {
  const { t } = useTranslation()
  return (
    <Modal.Header
      closeButton={closeButton}
      closeLabel={t('close_dialog')}
      {...props}
    >
      {children}
    </Modal.Header>
  )
}

export function OLModalTitle({ children, ...props }: ModalTitleProps) {
  return (
    <Modal.Title as="h2" {...props}>
      {children}
    </Modal.Title>
  )
}

export function OLModalBody({ children, ...props }: ModalBodyProps) {
  return <Modal.Body {...props}>{children}</Modal.Body>
}

export function OLModalFooter({ children, ...props }: ModalFooterProps) {
  return <Modal.Footer {...props}>{children}</Modal.Footer>
}