Modal Dialog Primitive

yarn add @twilio-paste/modal-dialog-primitive - or - yarn add @twilio-paste/core

import * as React from 'react';
import {styled} from '@twilio-paste/styling-library';
import {Text} from '@twilio-paste/text';
import {Button} from '@twilio-paste/button';
import {ModalDialogPrimitiveOverlay, ModalDialogPrimitiveContent} from '@twilio-paste/modal-dialog-primitive';

const StyledModalDialogOverlay = styled(ModalDialogPrimitiveOverlay)({
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  background: 'rgba(0, 0, 0, 0.7)',
});

const StyledModalDialogContent = styled(ModalDialogPrimitiveContent)({
  width: '100%',
  maxWidth: '560px',
  maxHeight: 'calc(100% - 60px)',
  background: '#f4f5f6',
  borderRadius: '5px',
  padding: '20px',
});

interface BasicModalDialogProps {
  isOpen: boolean;
  handleClose: () => void;
}

const BasicModalDialog: React.FC<BasicModalDialogProps> = ({isOpen, handleClose}) => {
  const inputRef = React.useRef();

  return (
    <StyledModalDialogOverlay
      isOpen={isOpen}
      onDismiss={handleClose}
      allowPinchZoom={true}
      initialFocusRef={inputRef}
    >
      <StyledModalDialogContent>
        <input type="text" value="first" />
        <br />
        <input ref={inputRef} type="text" value="second (initial focused)" />
        <Text as="p" color="colorText">
          Roll your own dialog!
        </Text>
      </StyledModalDialogContent>
    </StyledModalDialogOverlay>
  );
};

export const ModalActivator: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = (): void => setIsOpen(true);
  const handleClose = (): void => setIsOpen(false);

  return (
    <div>
      <Button variant="primary" onClick={handleOpen}>
        Open Sample Modal
      </Button>
      <BasicModalDialog isOpen={isOpen} handleClose={handleClose} />
    </div>
  );
};

<ModalDialogPrimitiveOverlay isOpen={true}>
  <p>I will be open</p>
</ModalDialogPrimitiveOverlay>

<ModalDialogPrimitiveOverlay isOpen={false}>
  <p>I will be closed</p>
</ModalDialogPrimitiveOverlay>

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Show Dialog</button>
      <ModalDialogPrimitiveOverlay isOpen={showDialog} onDismiss={close}>
        <ModalDialogPrimitiveContent>
          <Text as="p">
            It is your job to close this with state when the user clicks outside
            or presses escape.
          </Text>
          <button onClick={close}>Okay</button>
        </ModalDialogPrimitiveContent>
      </ModalDialogPrimitiveOverlay>
    </div>
  );
}

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false);
  const [showWarning, setShowWarning] = React.useState(false);
  const open = () => {
    setShowDialog(true);
    setShowWarning(false);
  };
  const close = () => setShowDialog(false);
  const dismiss = () => setShowWarning(true);

  return (
    <div>
      <button onClick={open}>Show Dialog</button>
      <ModalDialogPrimitiveOverlay isOpen={showDialog} onDismiss={close}>
        <ModalDialogPrimitiveContent>
          {showWarning && (
            <p style={{ color: "red" }}>You must make a choice, sorry :(</p>
          )}
          <p>Which router should survive the merge?</p>
          <button onClick={close}>React Router</button>{" "}
          <button onClick={close}>@reach/router</button>
        </ModalDialogPrimitiveContent>
      </ModalDialogPrimitiveOverlay>
    </div>
  );
}

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false);
  const buttonRef = React.useRef();
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);

  return (
    <div>
      <button onClick={open}>Show Dialog</button>
      {showDialog && (
        <ModalDialogPrimitiveOverlay initialFocusRef={buttonRef} onDismiss={close}>
          <ModalDialogPrimitiveContent>
            <p>Pass the button ref to DialogOverlay and the button.</p>
            <button onClick={close}>Not me</button>
            <button
              ref={buttonRef}
              onClick={close}
            >
              Got me!
            </button>
          </ModalDialogPrimitiveContent>
        </ModalDialogPrimitiveOverlay>
      )}
    </div>
  );
}