adds support for close button ref for modal panel

Author: vraja-pro

packages/ui-library/src/components/modal/index.js

@@ -96,17 +96,18 @@ CloseButton.defaultProps = {
  * @param {string} [className] Additional class names.
  * @param {boolean} [hasCloseButton] Whether the modal has a close button.
  * @param {string} [closeButtonScreenReaderText] The screen reader text of the close button. Used when hasCloseButton is true.
+ * @param {Object} [closeButtonRef] Ref forwarded to the close button element.
  * @param {Object} [props] Additional props.
  * @returns {JSX.Element} The panel.
  */
-const Panel = forwardRef( ( { children, className = "", hasCloseButton = true, closeButtonScreenReaderText = "Close", ...props }, ref ) => {
+const Panel = forwardRef( ( { children, className = "", hasCloseButton = true, closeButtonScreenReaderText = "Close", closeButtonRef = null, ...props }, ref ) => {
 	return (
 		<Dialog.Panel
 			ref={ ref }
 			className={ classNames( "yst-modal__panel", className ) }
 			{ ...props }
 		>
-			{ hasCloseButton && <CloseButton screenReaderText={ closeButtonScreenReaderText } /> }
+			{ hasCloseButton && <CloseButton ref={ closeButtonRef } screenReaderText={ closeButtonScreenReaderText } /> }
 			{ children }
 		</Dialog.Panel>
 	);
@@ -118,11 +119,13 @@ Panel.propTypes = {
 	className: PropTypes.string,
 	hasCloseButton: PropTypes.bool,
 	closeButtonScreenReaderText: PropTypes.string,
+	closeButtonRef: PropTypes.object,
 };
 Panel.defaultProps = {
 	className: "",
 	hasCloseButton: true,
 	closeButtonScreenReaderText: "Close",
+	closeButtonRef: null,
 };
 
 export const classNameMap = {