Destructure props in the function body in Modal to prevent TS error…

…s from the consuming TS component, and use React's `forwardRef` to forward refs to `Modal`
WordPress · Oct 14, 2021 · 414ab15 · 414ab15
1 parent 64c2816
commit 414ab15
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 30 deletions.
diff --git a/packages/components/src/confirm-dialog/component.tsx b/packages/components/src/confirm-dialog/component.tsx
@@ -22,7 +22,6 @@ import {
 	WordPressComponentProps,
 } from '../ui/context';
 import { Flex } from '../flex';
-import { VStack } from '../v-stack';
 import Button from '../button';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
@@ -46,7 +45,6 @@ function ConfirmDialog(
 		styles.wrapper,
 		! hasTitle && styles.withoutTitle
 	);
-	const buttonsWrapperClassName = cx( styles.buttonsWrapper );
 	const stackedMarginWrapperClassName = cx( styles.stackedMarginWrapper );
 
 	const [ isOpen, setIsOpen ] = useState< boolean >();
@@ -88,7 +86,7 @@ function ConfirmDialog(
 					onKeyDown={ handleEnter }
 					closeButtonLabel={ __( 'Cancel' ) }
 					isDismissible={ true }
-					forwardedRef={ forwardedRef }
+					ref={ forwardedRef }
 					{ ...otherProps }
 				>
 					<div className={ stackedMarginWrapperClassName }>

diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js
@@ -8,7 +8,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createPortal, useEffect, useRef } from '@wordpress/element';
+import {
+	createPortal,
+	useEffect,
+	useRef,
+	forwardRef,
+} from '@wordpress/element';
 import {
 	useInstanceId,
 	useFocusReturn,
@@ -31,31 +36,32 @@ import Button from '../button';
 // Used to count the number of open modals.
 let openModalCount = 0;
 
-export default function Modal( {
-	bodyOpenClassName = 'modal-open',
-	role = 'dialog',
-	title = '',
-	focusOnMount = true,
-	shouldCloseOnEsc = true,
-	shouldCloseOnClickOutside = true,
-	isDismissable = false, // Deprecated
-	isDismissible = isDismissable || true,
-	/* accessibility */
-	aria = {
-		labelledby: null,
-		describedby: null,
-	},
-	onRequestClose,
-	icon = '',
-	closeButtonLabel,
-	children,
-	style = null,
-	overlayClassName = '',
-	className = '',
-	contentLabel = null,
-	onKeyDown,
-	forwardedRef,
-} ) {
+const Modal = ( props, forwardedRef ) => {
+	const {
+		bodyOpenClassName = 'modal-open',
+		role = 'dialog',
+		title = '',
+		focusOnMount = true,
+		shouldCloseOnEsc = true,
+		shouldCloseOnClickOutside = true,
+		isDismissable = false, // Deprecated
+		isDismissible = isDismissable || true,
+		/* accessibility */
+		aria = {
+			labelledby: null,
+			describedby: null,
+		},
+		onRequestClose,
+		icon = '',
+		closeButtonLabel,
+		children,
+		style = null,
+		overlayClassName = '',
+		className = '',
+		contentLabel = null,
+		onKeyDown,
+	} = props;
+
 	const ref = useRef();
 	const instanceId = useInstanceId( Modal );
 	const headingId = title
@@ -166,4 +172,6 @@ export default function Modal( {
 		</div>,
 		document.body
 	);
-}
+};
+
+export default forwardRef( Modal );