fix: convert modalCloseButton to Typescript

Co-authored-by: GitHub Copilot <noreply@github.com>

Author: diana-villalvazo-wgu

src/Modal/ModalCloseButton.jsx src/Modal/ModalCloseButton.tsxsrc/Modal/ModalCloseButton.jsx renamed to src/Modal/ModalCloseButton.tsx

@@ -1,45 +1,48 @@
-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,
   };
 
   // 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;

src/index.ts

@@ -12,6 +12,7 @@ export { default as Bubble } from './Bubble';
 export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
+export { default as CloseButton } from './CloseButton';
 export { default as Container, type ContainerSize } from './Container';
 export {
   default as Form,
@@ -76,8 +77,6 @@ export {
   // @ts-ignore: has yet to be converted to TypeScript
 } from './Carousel';
 // @ts-ignore: has yet to be converted to TypeScript
-export { default as CloseButton } from './CloseButton';
-// @ts-ignore: has yet to be converted to TypeScript
 export { default as Layout, Col, Row } from './Layout';
 // @ts-ignore: has yet to be converted to TypeScript
 export { default as Collapse } from './Collapse';