feat(ExpandableSection): Add event to onToggle

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

@@ -38,7 +38,7 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
   /** Callback function to toggle the expandable section. Detached expandable sections should
    * use the onToggle property of the expandable section toggle sub-component.
    */
-  onToggle?: (isExpanded: boolean) => void;
+  onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
   /** React node that appears in the attached toggle in place of the toggleText property. */
   toggleContent?: React.ReactNode;
   /** Text that appears in the attached toggle. */
@@ -96,7 +96,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     toggleTextExpanded: '',
     toggleTextCollapsed: '',
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onToggle: (isExpanded): void => undefined,
+    onToggle: (event, isExpanded): void => undefined,
     isActive: false,
     isDetached: false,
     displaySize: 'default',
@@ -202,8 +202,8 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
     // uncontrolled
     if (isExpanded === undefined) {
       propOrStateIsExpanded = this.state.isExpanded;
-      onToggle = isOpen => {
-        this.setState({ isExpanded: isOpen }, () => onToggleProp(this.state.isExpanded));
+      onToggle = (event, isOpen) => {
+        this.setState({ isExpanded: isOpen }, () => onToggleProp(event, this.state.isExpanded));
       };
     }
 
@@ -219,7 +219,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
         className={css(styles.expandableSectionToggle)}
         type="button"
         aria-expanded={propOrStateIsExpanded}
-        onClick={() => onToggle(!propOrStateIsExpanded)}
+        onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
       >
         {variant !== ExpandableSectionVariant.truncate && (
           <span className={css(styles.expandableSectionToggleIcon)}>

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx

@@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core';
 export const ExpandableSectionBasic: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -5,7 +5,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core';
 export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx

@@ -4,7 +4,7 @@ import { ExpandableSection } from '@patternfly/react-core';
 export const ExpandableSectionIndented: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx

@@ -4,7 +4,7 @@ import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-c
 export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 

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

@@ -19,9 +19,9 @@ export class ExpandableSectionDemo extends React.Component<null, ExpandableSecti
     window.scrollTo(0, 0);
   }
 
-  onToggle = (isOpen: boolean) => this.setState({ isExpanded: isOpen });
+  onToggle = (_event: React.MouseEvent, isOpen: boolean) => this.setState({ isExpanded: isOpen });
   onToggleDetached = (isOpen: boolean) => this.setState({ isDetachedExpanded: isOpen });
-  onToggleDisclosure = (isOpen: boolean) => this.setState({ isDisclosureExpanded: isOpen });
+  onToggleDisclosure = (_event: React.MouseEvent, isOpen: boolean) => this.setState({ isDisclosureExpanded: isOpen });
 
   render() {
     const { isExpanded, isDetachedExpanded, isDisclosureExpanded } = this.state;

packages/react-integration/demo-app-ts/src/components/demos/ExpandableSectionDemo/ExpandableSectionTruncateDemo.tsx

@@ -5,11 +5,11 @@ export const ExpandableSectionTruncateDemo: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [isResizableExpanded, setIsResizableExpanded] = React.useState(false);
 
-  const onToggle = (isExpanded: boolean) => {
+  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);
   };
 
-  const onResizableToggle = (isResizableExpanded: boolean) => {
+  const onResizableToggle = (_event: React.MouseEvent, isResizableExpanded: boolean) => {
     setIsResizableExpanded(isResizableExpanded);
   };