@patternfly/react-core 5.0.0-alpha.72 → 5.0.0-alpha.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.72",
+  "version": "5.0.0-alpha.74",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "137a089d9d73220b9bc57af7f74530746b32887d"
+  "gitHead": "5752cdb0b25d18d5f471d16cb30dc405e0bf200d"
 }

package/src/components/LabelGroup/examples/LabelGroupEditableAddModal.tsx

@@ -104,7 +104,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
     setIsEditable(false);
   };
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/Modal.tsx

@@ -50,7 +50,7 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Flag to show the modal. */
   isOpen?: boolean;
   /** A callback for when the close button is clicked. */
-  onClose?: () => void;
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Modal handles pressing of the escape key and closes the modal. If you want to handle
    * this yourself you can use this callback function. */
   onEscapePress?: (event: KeyboardEvent) => void;
@@ -135,7 +135,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
   handleEscKeyClick = (event: KeyboardEvent): void => {
     const { onEscapePress } = this.props;
     if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      onEscapePress ? onEscapePress(event) : this.props.onClose?.();
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.(event);
     }
   };
 

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -9,7 +9,7 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
   /** Additional classes added to the close button. */
   className?: string;
   /** A callback for when the close button is clicked. */
-  onClose?: () => void;
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Value to set the data-ouia-component-id.*/
   ouiaId?: number | string;
 }
@@ -23,7 +23,7 @@ export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonPro
   <div className={css(styles.modalBoxClose, className)}>
     <Button
       variant="plain"
-      onClick={onClose}
+      onClick={(event) => onClose(event)}
       aria-label="Close"
       {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
       {...props}

package/src/components/Modal/ModalContent.tsx

@@ -60,7 +60,7 @@ export interface ModalContentProps extends OUIAProps {
   /** Id of the modal box title. */
   labelId: string;
   /** A callback for when the close button is clicked. */
-  onClose?: () => void;
+  onClose?: (event: KeyboardEvent | React.MouseEvent) => void;
   /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
   position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
@@ -187,7 +187,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
       aria-describedby={ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId)}
       {...getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)}
     >
-      {showClose && <ModalBoxCloseButton onClose={onClose} ouiaId={ouiaId} />}
+      {showClose && <ModalBoxCloseButton onClose={(event) => onClose(event)} ouiaId={ouiaId} />}
       {modalBoxHeader}
       {modalBody}
       {modalBoxFooter}

package/src/components/Modal/examples/ModalBasic.tsx

@@ -4,7 +4,7 @@ import { Modal, Button } from '@patternfly/react-core';
 export const ModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -5,7 +5,7 @@ import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalCustomTitleIcon.tsx

@@ -5,7 +5,7 @@ import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 export const ModalCustomTitleIcon: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalCustomWidth.tsx

@@ -4,7 +4,7 @@ import { Modal, Button } from '@patternfly/react-core';
 export const ModalCustomWidth: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalLarge.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 export const ModalLarge: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalMedium.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 export const ModalMedium: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalNoHeaderFooter.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 export const ModalNoHeaderFooter: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalSmall.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 export const ModalSmall: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalTitleIcon.tsx

@@ -4,7 +4,7 @@ import { Modal, Button } from '@patternfly/react-core';
 export const ModalTitleIcon: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalTopAligned.tsx

@@ -4,7 +4,7 @@ import { Modal, Button } from '@patternfly/react-core';
 export const ModalTopAligned: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalWithDescription.tsx

@@ -4,7 +4,7 @@ import { Modal, Button } from '@patternfly/react-core';
 export const ModalWithDescription: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalWithDropdown.tsx

@@ -11,7 +11,7 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
     setIsDropdownOpen(false);
   };
@@ -30,12 +30,12 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
     (element as HTMLElement).focus();
   };
 
-  const onEscapePress = () => {
+  const onEscapePress = (event: KeyboardEvent) => {
     if (isDropdownOpen) {
       setIsDropdownOpen(!isDropdownOpen);
       onFocus();
     } else {
-      handleModalToggle();
+      handleModalToggle(event);
     }
   };
 

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -8,7 +8,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalWithHelp.tsx

@@ -5,7 +5,7 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 export const ModalWithHelp: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 

package/src/components/Modal/examples/ModalWithOverflowingContent.tsx

@@ -4,7 +4,7 @@ import { Modal, ModalVariant, Button } from '@patternfly/react-core';
 export const ModalWithOverflowingContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(prevIsModalOpen => !prevIsModalOpen);
   };
 

package/src/components/Modal/examples/ModalWithWizard.tsx

@@ -4,7 +4,11 @@ import { Modal, ModalVariant, Button, Wizard, WizardHeader, WizardStep } from '@
 export const ModalWithWizard: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
+  };
+
+  const handleWizardToggle = () => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);
   };
 
@@ -35,17 +39,17 @@ export const ModalWithWizard: React.FunctionComponent = () => {
               title="Wizard modal"
               titleId="modal-wizard-label"
               description="This is a wizard inside of a modal."
-              onClose={handleModalToggle}
+              onClose={handleWizardToggle}
               closeButtonAriaLabel="Close wizard"
             />
           }
-          onClose={handleModalToggle}
+          onClose={handleWizardToggle}
         >
           {numberedSteps}
           <WizardStep
             name="Review"
             id="with-wizard-review-step"
-            footer={{ nextButtonText: 'Finish', onNext: handleModalToggle }}
+            footer={{ nextButtonText: 'Finish', onNext: handleWizardToggle }}
           >
             Review step
           </WizardStep>

package/src/components/Radio/Radio.tsx

@@ -28,7 +28,7 @@ export interface RadioProps
   /** Name for group of radios */
   name: string;
   /** A callback for when the radio selection changes. */
-  onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Aria label for the radio. */
   'aria-label'?: string;
   /** Description text of the radio. */
@@ -62,7 +62,7 @@ export class Radio extends React.Component<RadioProps, { ouiaStateId: string }>
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    this.props.onChange(event.currentTarget.checked, event);
+    this.props.onChange(event, event.currentTarget.checked);
   };
 
   render() {

package/src/components/Radio/__tests__/Radio.test.tsx

@@ -79,7 +79,7 @@ describe('Radio', () => {
     render(<Radio id="check" {...props} aria-label="check" name="check" />);
 
     await user.click(screen.getByRole('radio'));
-    expect(props.onChange).toHaveBeenCalledWith(true, expect.any(Object));
+    expect(props.onChange).toHaveBeenCalledWith(expect.any(Object), true);
   });
 
   test('Radio description', () => {

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -6,7 +6,7 @@ export const SimpleModal = () => {
   const [isTimePickerOpen, setIsTimePickerOpen] = React.useState(false);
   const dateRef = React.useRef(null);
 
-  const handleModalToggle = () => {
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,7 +16,7 @@ export const SimpleModal = () => {
     } else if (isTimePickerOpen) {
       setIsTimePickerOpen(false);
     } else {
-      handleModalToggle();
+      handleModalToggle(event);
     }
   };
 

package/src/deprecated/components/Wizard/examples/Wizard.md

@@ -227,7 +227,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Create"
             isChecked={getStartedStepRadio === 'Create'}
-            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
             label="Create a new thing"
             name="radio-step-start"
             id="radio-step-start-1"
@@ -235,7 +235,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Update"
             isChecked={getStartedStepRadio === 'Update'}
-            onChange={(_, event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ getStartedStepRadio: event.currentTarget.value })}
             label="Update an existing thing"
             name="radio-step-start"
             id="radio-step-start-2"
@@ -250,7 +250,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Quick"
             isChecked={createStepRadio === 'Quick'}
-            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ createStepRadio: event.currentTarget.value })}
             label="Quick create"
             name="radio-step-create"
             id="radio-step-create-1"
@@ -258,7 +258,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Custom"
             isChecked={createStepRadio === 'Custom'}
-            onChange={(_, event) => this.setState({ createStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ createStepRadio: event.currentTarget.value })}
             label="Custom create"
             name="radio-step-create"
             id="radio-step-create-2"
@@ -273,7 +273,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Quick"
             isChecked={updateStepRadio === 'Quick'}
-            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ updateStepRadio: event.currentTarget.value })}
             label="Quick update"
             name="radio-step-update"
             id="radio-step-update-1"
@@ -281,7 +281,7 @@ class ProgressiveWizard extends React.Component {
           <Radio
             value="Custom"
             isChecked={updateStepRadio === 'Custom'}
-            onChange={(_, event) => this.setState({ updateStepRadio: event.currentTarget.value })}
+            onChange={(event) => this.setState({ updateStepRadio: event.currentTarget.value })}
             label="Custom update"
             name="radio-step-update"
             id="radio-step-update-2"

package/src/deprecated/components/Wizard/examples/WizardInModal.tsx

@@ -4,9 +4,15 @@ import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardInModal: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const handleModalToggle = () => {
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsOpen(!isOpen);
+  };
+
+  const handleWizardToggle = () => {
     setIsOpen(!isOpen);
   };
+
   const steps = [
     { name: 'First step', component: <p>Step 1 content</p> },
     { name: 'Second step', component: <p>Step 2 content</p> },
@@ -14,7 +20,9 @@ export const WizardInModal: React.FunctionComponent = () => {
     { name: 'Fourth step', component: <p>Step 4 content</p> },
     { name: 'Review', component: <p>Review step content</p>, nextButtonText: 'Finish' }
   ];
+
   const title = 'Wizard in modal example';
+
   return (
     <React.Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
@@ -25,7 +33,7 @@ export const WizardInModal: React.FunctionComponent = () => {
         description="Simple Wizard Description"
         descriptionComponent="div"
         steps={steps}
-        onClose={handleModalToggle}
+        onClose={handleWizardToggle}
         isOpen={isOpen}
       />
     </React.Fragment>