feat(modal): allowoutsideclick optional prop

Adding prop allowOutsideClick which is optional.
Default value is true, changing it to false stops the user from
clicking outside the component, which stops the behavior of
tabbing outside a component to be possible.

packages/core/src/Modal/index.tsx

@@ -123,13 +123,19 @@ export interface ModalProps extends BaseProps {
    * When `true` the dialog is rendered, `false` removes the dialog.
    */
   readonly open: boolean
+  /**
+   * If `true`, clicking outside the modal is possible, `false` does not allow
+   * clicking outside the modal.
+   */
+  readonly allowOutsideClick?: boolean
 }
 
 export const Modal: FC<ModalProps> = ({
   open,
   onClose,
   focusDialog = true,
   children,
+  allowOutsideClick = true,
   ...props
 }) => {
   useEffect(() => {
@@ -156,7 +162,7 @@ export const Modal: FC<ModalProps> = ({
         focusTrapOptions={{
           initialFocus: focusDialog ? `#${id}` : undefined,
           escapeDeactivates: false, // We use our own stack
-          clickOutsideDeactivates: true, // 😱😱😱 We need this to prevent click capturing
+          clickOutsideDeactivates: allowOutsideClick,
         }}
       >
         <FocusWrapper tabIndex={-1} id={id}>