feat(AboutModal): added event parameter to onClose

packages/react-core/src/components/AboutModal/AboutModal.tsx

@@ -15,7 +15,7 @@ export interface AboutModalProps {
   /** Flag to show the about modal  */
   isOpen?: boolean;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Product name  */
   productName?: string;
   /** Trademark information  */
@@ -50,7 +50,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
   static defaultProps: PickOptional<AboutModalProps> = {
     className: '',
     isOpen: false,
-    onClose: (): any => undefined,
+    onClose: (_e): any => undefined,
     productName: '',
     trademark: '',
     backgroundImageSrc: '',
@@ -72,7 +72,7 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
 
   handleEscKeyClick = (event: KeyboardEvent) => {
     if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      this.props.onClose();
+      this.props.onClose?.(event);
     }
   };
 

packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -8,14 +8,14 @@ export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivEl
   /** additional classes added to the About Modal Close button  */
   className?: string;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Set close button aria label */
   'aria-label'?: string;
 }
 
 export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxCloseButtonProps> = ({
   className = '',
-  onClose = () => undefined as any,
+  onClose = _e => undefined as any,
   'aria-label': ariaLabel = 'Close Dialog',
   ...props
 }: AboutModalBoxCloseButtonProps) => (

packages/react-core/src/components/AboutModal/AboutModalContainer.tsx

@@ -19,7 +19,7 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
   /** Flag to show the About Modal  */
   isOpen?: boolean;
   /** A callback for when the close button is clicked  */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent | MouseEvent | KeyboardEvent) => void;
   /** Product Name  */
   productName?: string;
   /** Trademark information  */
@@ -44,7 +44,7 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
   children,
   className = '',
   isOpen = false,
-  onClose = () => undefined,
+  onClose = _e => undefined,
   productName = '',
   trademark,
   brandImageSrc,

packages/react-core/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalBasic: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

packages/react-core/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

packages/react-core/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -6,7 +6,7 @@ import bgImg from './patternfly-orb.svg';
 export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -17,7 +17,7 @@ export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

packages/react-core/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = () => {
+  const toggleModal = (_event: React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={toggleModal}
+        onClose={(event: any) => toggleModal(event)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"

packages/react-integration/demo-app-ts/src/components/demos/AboutModal/AboutModalDemo.tsx

@@ -15,7 +15,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> {
     };
   }
 
-  handleModalToggle = () => {
+  handleModalToggle = (_event: React.MouseEvent) => {
     this.setState(({ isModalOpen }) => ({
       isModalOpen: !isModalOpen
     }));
@@ -31,7 +31,7 @@ export class AboutModalDemo extends React.Component<{}, AboutModalState> {
         </Button>
         <AboutModal
           isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
+          onClose={(event: any) => this.handleModalToggle(event)}
           trademark="Trademark and copyright information here"
           brandImageSrc={brandImg}
           brandImageAlt="Patternfly Logo"