fix(@clayui/modal): simplifies subportal grouping implementation and removes the extra container

Author: matuzalemsteles

packages/clay-modal/src/Hook.ts

@@ -27,12 +27,13 @@ const FOCUSABLE_ELEMENTS = [
  * modal by pressing the ESC key and control the focus within the Modal.
  */
 const useUserInteractions = (
-	elementRef: React.MutableRefObject<any>,
+	modalElementRef: React.MutableRefObject<any>,
+	modalBodyElementRef: React.MutableRefObject<any>,
 	onClick: () => void
 ) => {
 	const getFocusableNodes = () => {
-		if (elementRef.current) {
-			const nodes = elementRef.current.querySelectorAll(
+		if (modalBodyElementRef.current) {
+			const nodes = modalBodyElementRef.current.querySelectorAll(
 				FOCUSABLE_ELEMENTS
 			);
 
@@ -45,11 +46,11 @@ const useUserInteractions = (
 	const handleKeydown = (event: KeyboardEvent) => {
 		if (event.keyCode === KEY_CODE_TAB) {
 			if (
-				elementRef.current &&
+				modalElementRef.current &&
 				event.target !== null &&
-				!elementRef.current.contains(event.target)
+				!modalElementRef.current.contains(event.target)
 			) {
-				elementRef.current.focus();
+				modalBodyElementRef.current.focus();
 			} else {
 				const focusableNodes = getFocusableNodes();
 				const focusedItemIndex = focusableNodes.indexOf(
@@ -83,12 +84,7 @@ const useUserInteractions = (
 			return;
 		}
 
-		if (
-			elementRef.current &&
-			event.target !== null &&
-			!elementRef.current.contains(event.target as HTMLDivElement) &&
-			document.contains(event.target as HTMLElement)
-		) {
+		if (event.target === modalElementRef.current) {
 			onClick();
 		}
 	};

packages/clay-modal/src/Modal.tsx

@@ -5,7 +5,7 @@
 
 import {ClayPortal} from '@clayui/shared';
 import classNames from 'classnames';
-import React from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import warning from 'warning';
 
 import Body from './Body';
@@ -64,24 +64,22 @@ const ClayModal: React.FunctionComponent<IProps> = ({
 	status,
 	...otherProps
 }: IProps) => {
-	const modalBodyElementRef = React.useRef<HTMLDivElement | null>(null);
+	const modalElementRef = useRef<HTMLDivElement | null>(null);
+	const modalBodyElementRef = useRef<HTMLDivElement | null>(null);
 
 	warning(observer !== undefined, warningMessage);
 
-	useUserInteractions(modalBodyElementRef, () =>
+	useUserInteractions(modalElementRef, modalBodyElementRef, () =>
 		observer.dispatch(ObserverType.Close)
 	);
 
-	React.useEffect(() => observer.dispatch(ObserverType.Open), []);
-
-	// Defines a default Modal size when size is not set.
-	const maxWidth = size ? {} : {maxWidth: '600px'};
+	useEffect(() => observer.dispatch(ObserverType.Open), []);
 
 	const [show, content] =
 		observer && observer.mutation ? observer.mutation : [false, false];
 
 	return (
-		<ClayPortal subPortalRef={modalBodyElementRef}>
+		<ClayPortal subPortalRef={modalElementRef}>
 			<div
 				className={classNames('modal-backdrop fade', {
 					show,
@@ -92,34 +90,28 @@ const ClayModal: React.FunctionComponent<IProps> = ({
 				className={classNames('fade modal d-block', className, {
 					show,
 				})}
+				ref={modalElementRef}
 			>
 				<div
-					className={classNames({
+					className={classNames('modal-dialog', {
 						[`modal-${size}`]: size,
+						[`modal-${status}`]: status,
+						'modal-dialog-centered': center,
 					})}
 					ref={modalBodyElementRef}
-					style={{margin: 'auto', ...maxWidth}}
+					tabIndex={-1}
 				>
-					<div
-						className={classNames('modal-dialog', {
-							[`modal-${size}`]: size,
-							[`modal-${status}`]: status,
-							'modal-dialog-centered': center,
-						})}
-						tabIndex={-1}
-					>
-						<div className="modal-content">
-							<Context.Provider
-								value={{
-									onClose: () =>
-										observer.dispatch(ObserverType.Close),
-									spritemap,
-									status,
-								}}
-							>
-								{content && children}
-							</Context.Provider>
-						</div>
+					<div className="modal-content">
+						<Context.Provider
+							value={{
+								onClose: () =>
+									observer.dispatch(ObserverType.Close),
+								spritemap,
+								status,
+							}}
+						>
+							{content && children}
+						</Context.Provider>
 					</div>
 				</div>
 			</div>