@primer/react/dist/ConfirmationDialog/ConfirmationDialog.js

An implementation of GitHub's Primer Design System using React

import { useCallback } from 'react';
import { createRoot } from 'react-dom/client';
import { FocusKeys } from '@primer/behaviors';
import { Dialog } from '../Dialog/Dialog.js';
import { useFocusZone } from '../hooks/useFocusZone.js';
import BaseStyles from '../BaseStyles.js';
import classes from './ConfirmationDialog.module.css.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import Heading from '../Heading/Heading.js';

const ConfirmationHeader = ({
  title,
  onClose,
  dialogLabelId
}) => {
  const onCloseClick = useCallback(() => {
    onClose('close-button');
  }, [onClose]);
  return /*#__PURE__*/jsxs("div", {
    className: classes.ConfirmationHeader,
    children: [/*#__PURE__*/jsx(Heading, {
      id: dialogLabelId,
      as: "h1",
      variant: "small",
      children: title
    }), /*#__PURE__*/jsx(Dialog.CloseButton, {
      onClose: onCloseClick
    })]
  });
};
ConfirmationHeader.displayName = "ConfirmationHeader";
const ConfirmationBody = ({
  children
}) => {
  return /*#__PURE__*/jsx("div", {
    className: classes.ConfirmationBody,
    children: children
  });
};
ConfirmationBody.displayName = "ConfirmationBody";
const ConfirmationFooter = ({
  footerButtons
}) => {
  const {
    containerRef: footerRef
  } = useFocusZone({
    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
    focusInStrategy: 'closest'
  });

  // Must have exactly 2 buttons!
  return /*#__PURE__*/jsx("div", {
    ref: footerRef,
    className: classes.ConfirmationFooter,
    children: /*#__PURE__*/jsx(Dialog.Buttons, {
      buttons: footerButtons !== null && footerButtons !== void 0 ? footerButtons : []
    })
  });
};
ConfirmationFooter.displayName = "ConfirmationFooter";
/**
 * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
 * is used to confirm a user action. ConfirmationDialogs always have exactly
 * two buttons: one to cancel the action and one to confirm it. No custom
 * rendering capabilities are provided for ConfirmationDialog.
 */
const ConfirmationDialog = props => {
  const {
    onClose,
    title,
    cancelButtonContent = 'Cancel',
    confirmButtonContent = 'OK',
    confirmButtonType = 'normal',
    cancelButtonLoading = false,
    confirmButtonLoading = false,
    children,
    className,
    width = 'medium',
    height,
    overrideButtonFocus
  } = props;
  const onCancelButtonClick = useCallback(() => {
    onClose('cancel');
  }, [onClose]);
  const onConfirmButtonClick = useCallback(() => {
    onClose('confirm');
  }, [onClose]);
  const isConfirmationDangerous = confirmButtonType === 'danger';
  const buttonToFocus = overrideButtonFocus !== undefined ? overrideButtonFocus : isConfirmationDangerous ? 'cancel' : 'confirm';
  const cancelButton = {
    content: cancelButtonContent,
    onClick: onCancelButtonClick,
    autoFocus: buttonToFocus === 'cancel',
    loading: cancelButtonLoading
  };
  const confirmButton = {
    content: confirmButtonContent,
    buttonType: confirmButtonType,
    onClick: onConfirmButtonClick,
    autoFocus: buttonToFocus === 'confirm',
    loading: confirmButtonLoading
  };
  const footerButtons = [cancelButton, confirmButton];
  return /*#__PURE__*/jsx(Dialog, {
    onClose: onClose,
    title: title,
    footerButtons: footerButtons,
    role: "alertdialog",
    width: width,
    height: height,
    className: className,
    renderHeader: ConfirmationHeader,
    renderBody: ConfirmationBody,
    renderFooter: ConfirmationFooter,
    children: children
  });
};
ConfirmationDialog.displayName = "ConfirmationDialog";
let hostElement = null;
async function confirm(options) {
  const {
    content,
    ...confirmationDialogProps
  } = options;
  return new Promise(resolve => {
    hostElement ||= document.createElement('div');
    if (!hostElement.isConnected) document.body.append(hostElement);
    const root = createRoot(hostElement);
    const onClose = gesture => {
      root.unmount();
      if (gesture === 'confirm') {
        resolve(true);
      } else {
        resolve(false);
      }
    };
    root.render(/*#__PURE__*/jsx(BaseStyles, {
      children: /*#__PURE__*/jsx(ConfirmationDialog, {
        ...confirmationDialogProps,
        onClose: onClose,
        children: content
      })
    }));
  });
}

/**
 * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
 * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
 * resolved with `true` or `false` depending on whether or not the confirm button was used.
 */
function useConfirm() {
  const result = useCallback(options => {
    return confirm(options);
  }, []);
  return result;
}

export { ConfirmationDialog, useConfirm };