message: Added open prop on <Modal />
diff: @@ -13,6 +13,8 @@ export interface ModalComposition {
  }
  export interface ModalProps {
  + open?: boolean;
  + defaultOpen?: boolean;
  mask?: boolean;
  size?: ModalSize;
  header?: React.ReactNode;
  @@ -23,6 +25,7 @@ export interface ModalProps {
  }
  const Modal: React.FC<ModalProps> & ModalComposition = ({
  + open: isOpen = false,
  mask = true,
  size = 'regular',
  header,
  @@ -32,9 +35,12 @@ const Modal: React.FC<ModalProps> & ModalComposition = ({
  children,
  ...props
  }) => {
  + const [open, setOpen] = React.useState(false);
  const createPortal = usePortal('modal-portal');
  useScrollToggler();
  + React.useEffect(() => setOpen(isOpen), [isOpen]);
  +
  React.useEffect(() => {
  const event = ({ key }: React.KeyboardEvent): void => {
  if (['Escape'].includes(key) && props.onClose !== undefined) {
  @@ -52,14 +58,21 @@ const Modal: React.FC<ModalProps> & ModalComposition = ({
  const onClickOutside = (ev: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
  const target = ev.target as HTMLDivElement;
  - if (target && target.classList.contains('ebs-modal__wrapper') && props.onClose !== undefined) {
  + if (target && target.classList.contains('ebs-modal__wrapper')) {
  + if (props.onClose !== undefined) {
  props.onClose();
  }
  +
  + setOpen(false);
  + }
  };
  const showHeader = React.useMemo(() => header || title, [header, title]);
  - return createPortal(
  + return (
  + <>
  + {open &&
  + createPortal(
  <>
  <Mask />
  @@ -89,6 +102,8 @@ const Modal: React.FC<ModalProps> & ModalComposition = ({
  </div>
  </div>
  </>,
  + )}
  + </>
  );
  };
  