From 2c9c286e94ef8a8bbf05e136e976fe60dc3dc19f Mon Sep 17 00:00:00 2001
From: diana-villalvazo-wgu <diana.villalvazo@wgu.edu>
Date: Tue, 24 Feb 2026 14:18:25 -0700
Subject: [PATCH] fix: convert modalCloseButton to Typescript

Co-authored-by: GitHub Copilot <noreply@github.com>
---
 ...alCloseButton.jsx => ModalCloseButton.tsx} | 51 ++++++++++---------
 src/Modal/ModalDialog.tsx                     |  1 -
 src/index.ts                                  |  3 +-
 3 files changed, 28 insertions(+), 27 deletions(-)
 rename src/Modal/{ModalCloseButton.jsx => ModalCloseButton.tsx} (51%)

diff --git a/src/Modal/ModalCloseButton.jsx b/src/Modal/ModalCloseButton.tsx
similarity index 51%
rename from src/Modal/ModalCloseButton.jsx
rename to src/Modal/ModalCloseButton.tsx
index dec5f3b704..b4ca77f3e3 100644
--- a/src/Modal/ModalCloseButton.jsx
+++ b/src/Modal/ModalCloseButton.tsx
@@ -1,19 +1,38 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
+import {
+  useContext, ReactNode, ElementType, forwardRef, createElement,
+} from 'react';
 import classNames from 'classnames';
 import ModalContext from './ModalContext';
 import Button from '../Button';
 
-const ModalCloseButton = React.forwardRef(({ as, children, ...props }, ref) => {
+export interface ModalCloseButtonProps {
+  /** Specifies the base element */
+  as?: ElementType;
+  /** Specifies the content of the button */
+  children?: ReactNode;
+  /** Specifies class name to append to the base element */
+  className?: string;
+  /** Specifies the callback function when the close button is clicked */
+  onClick?: () => void;
+  [key: string]: any; // For spreading other props
+}
+
+const ModalCloseButton = forwardRef(({
+  as = Button,
+  children = null,
+  className,
+  onClick,
+  ...props
+}: ModalCloseButtonProps, ref: React.Ref<HTMLButtonElement>) => {
   const { onClose } = useContext(ModalContext);
   const type = as;
   const componentProps = {
     ...props,
-    className: classNames('pgn__modal-close-button', props.className),
+    className: classNames('pgn__modal-close-button', className),
     onClick: () => {
       onClose();
-      if (props.onClick) {
-        props.onClick();
+      if (onClick) {
+        onClick();
       }
     },
     ref,
@@ -21,25 +40,9 @@ const ModalCloseButton = React.forwardRef(({ as, children, ...props }, ref) => {
 
   // Use the non-jsx syntax to create this element so we can more
   // finely control the component type (defaulted to Button via defaultProps)
-  return React.createElement(type, componentProps, children);
+  return createElement(type, componentProps, children);
 });
 
-ModalCloseButton.propTypes = {
-  /** Specifies the base element */
-  as: PropTypes.elementType,
-  /** Specifies the content of the button */
-  children: PropTypes.node,
-  /** Specifies class name to append to the base element */
-  className: PropTypes.string,
-  /** Specifies the callback function when the close button is clicked */
-  onClick: PropTypes.func,
-};
-
-ModalCloseButton.defaultProps = {
-  as: Button,
-  onClick: undefined,
-  className: undefined,
-  children: null,
-};
+ModalCloseButton.displayName = 'ModalCloseButton';
 
 export default ModalCloseButton;
diff --git a/src/Modal/ModalDialog.tsx b/src/Modal/ModalDialog.tsx
index 0d0f71c1f4..9f7c8fd982 100644
--- a/src/Modal/ModalDialog.tsx
+++ b/src/Modal/ModalDialog.tsx
@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
 import { useIntl } from 'react-intl';
 import ModalLayer from './ModalLayer';
-// @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
 import ModalDialogHeader from './ModalDialogHeader';
 // @ts-ignore for now - this needs to be converted to TypeScript
diff --git a/src/index.ts b/src/index.ts
index 7e11e26a8c..6427bb8092 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -38,6 +38,7 @@ export {
 export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalCloseButton } from './Modal/ModalCloseButton';
 export { default as ModalContext } from './Modal/ModalContext';
 export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
@@ -109,8 +110,6 @@ export { default as MenuItem } from './Menu/MenuItem';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
 // @ts-ignore: has yet to be converted to TypeScript
-export { default as ModalCloseButton } from './Modal/ModalCloseButton';
-// @ts-ignore: has yet to be converted to TypeScript
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as MarketingModal } from './Modal/MarketingModal';