@patternfly/react-core 4.271.2 → 4.272.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.271.2",
+  "version": "4.272.0",
   "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": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "27ec34e45b7fb806e04e402be185ff819b1bb781"
+  "gitHead": "98f8a725aca70798a70fa397ac93e3f870a32b29"
 }

package/src/components/TimePicker/TimePicker.tsx

@@ -42,7 +42,14 @@ export interface TimePickerProps
   /** True if the time is 24 hour time. False if the time is 12 hour time */
   is24Hour?: boolean;
   /** Optional event handler called each time the value in the time picker input changes. */
-  onChange?: (time: string, hour?: number, minute?: number, seconds?: number, isValid?: boolean) => void;
+  onChange?: (
+    event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour?: number,
+    minute?: number,
+    seconds?: number,
+    isValid?: boolean
+  ) => void;
   /** Optional validator can be provided to override the internal time validator. */
   validateTime?: (time: string) => boolean;
   /** Id of the time picker */
@@ -389,7 +396,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     const { delimiter, is24Hour, includeSeconds, setIsOpen } = this.props;
     const time = parseTime(e.target.textContent, timeRegex, delimiter, !is24Hour, includeSeconds);
     if (time !== timeState) {
-      this.onInputChange(time);
+      this.onInputChange(time, e);
     }
 
     this.inputRef.current.focus();
@@ -407,12 +414,13 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     e.stopPropagation();
   };
 
-  onInputChange = (newTime: string) => {
+  onInputChange = (newTime: string, event: React.FormEvent<HTMLInputElement>) => {
     const { onChange } = this.props;
     const { timeRegex } = this.state;
 
     if (onChange) {
       onChange(
+        event,
         newTime,
         getHours(newTime, timeRegex),
         getMinutes(newTime, timeRegex),

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

@@ -35,7 +35,14 @@ describe('TimePicker', () => {
       render(<TimePicker onChange={onChange} {...inputProps} aria-label="time picker" />);
 
       await user.type(screen.getByLabelText('time picker'), String(inputProps.value));
-      expect(onChange).toHaveBeenCalledWith(inputProps.value, expects.hour, expects.minutes, expects.seconds, true);
+      expect(onChange).toHaveBeenCalledWith(
+        expect.any(Object),
+        inputProps.value,
+        expects.hour,
+        expects.minutes,
+        expects.seconds,
+        true
+      );
     };
 
     test('should return the correct value using the AM/PM pattern - midnight', async () => {

package/src/components/TimePicker/examples/TimePicker.md

@@ -19,7 +19,7 @@ import React from 'react';
 import { TimePicker } from '@patternfly/react-core';
 
 SimpleTimePicker = () => {
-  const onChange = (time, hour, minute, seconds, isValid) => {
+  const onChange = (_event, time, hour, minute, seconds, isValid) => {
     console.log('time', time);
     console.log('hour', hour);
     console.log('minute', minute);

package/src/components/Wizard/Wizard.tsx

@@ -112,6 +112,8 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. */
+  onExpandDrawer?: () => void;
 }
 
 interface WizardState {
@@ -149,7 +151,8 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     isOpen: undefined,
     isNavExpandable: false,
     hasDrawer: false,
-    isDrawerExpanded: false
+    isDrawerExpanded: false,
+    onExpandDrawer: () => undefined as any
   };
   private titleId: string;
   private descriptionId: string;
@@ -408,6 +411,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
       onCurrentStepChanged,
       hasDrawer,
       isDrawerExpanded,
+      onExpandDrawer,
       ...rest
       /* eslint-enable @typescript-eslint/no-unused-vars */
     } = this.props;
@@ -539,6 +543,7 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
           <WizardToggle
             hasDrawer={hasDrawer}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             mainAriaLabel={mainAriaLabel}
             isInPage={isOpen === undefined}
             mainAriaLabelledBy={(title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId)}

package/src/components/Wizard/WizardBody.tsx

@@ -22,6 +22,7 @@ export interface WizardBodyProps {
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
   /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
@@ -32,6 +33,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
   mainComponent = 'div',
   hasDrawer,
   isDrawerExpanded,
+  onExpandDrawer,
   activeStep
 }: WizardBodyProps) => {
   const MainComponent = mainComponent;
@@ -40,7 +42,7 @@ export const WizardBody: React.FunctionComponent<WizardBodyProps> = ({
       <WizardDrawerWrapper
         hasDrawer={hasDrawer && activeStep.drawerPanelContent}
         wrapper={(children: React.ReactNode) => (
-          <Drawer isInline isExpanded={isDrawerExpanded}>
+          <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpandDrawer}>
             <DrawerContent panelContent={activeStep.drawerPanelContent}>{children}</DrawerContent>
           </Drawer>
         )}

package/src/components/Wizard/WizardToggle.tsx

@@ -33,6 +33,8 @@ export interface WizardToggleProps {
   hasDrawer?: boolean;
   /** Flag indicating the wizard drawer is expanded */
   isDrawerExpanded?: boolean;
+  /** Callback function for when the drawer is toggled */
+  onExpandDrawer?: () => void;
 }
 
 export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
@@ -48,7 +50,8 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
   mainAriaLabel = null,
   isInPage = true,
   hasDrawer,
-  isDrawerExpanded
+  isDrawerExpanded,
+  onExpandDrawer
 }: WizardToggleProps) => {
   let activeStepIndex;
   let activeStepName;
@@ -99,6 +102,7 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
             hasNoBodyPadding={hasNoBodyPadding}
             activeStep={activeStep}
             isDrawerExpanded={isDrawerExpanded}
+            onExpandDrawer={onExpandDrawer}
             hasDrawer={hasDrawer}
           >
             {hasDrawer && !isDrawerExpanded && activeStep.drawerToggleButton}

package/src/components/Wizard/examples/WizardWithDrawer.tsx

@@ -14,6 +14,10 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
 
   const drawerRef = React.useRef<HTMLSpanElement>(null);
 
+  const onExpandDrawer = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
+
   const onOpenClick = () => {
     setIsDrawerExpanded(true);
   };
@@ -117,6 +121,7 @@ export const WizardWithDrawer: React.FunctionComponent = () => {
       <Wizard
         height={400}
         isDrawerExpanded={isDrawerExpanded}
+        onExpandDrawer={onExpandDrawer}
         hasDrawer
         navAriaLabel={`${title} steps`}
         steps={steps}

package/src/demos/DatePicker/DatePicker.md

@@ -80,7 +80,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onFromTimeChange = (time, hour, minute) => {
+  const onFromTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(from)) {
       const updatedFromDate = new Date(from);
       updatedFromDate.setHours(hour);
@@ -99,7 +99,7 @@ DateTimeRangePicker = () => {
     }
   };
   
-  const onToTimeChange = (time, hour, minute) => {
+  const onToTimeChange = (_event, time, hour, minute) => {
     if (isValidDate(to)) {
       const updatedToDate = new Date(to);
       updatedToDate.setHours(hour);

package/src/demos/Wizard/WizardDemo.md

@@ -289,6 +289,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -539,6 +540,7 @@ class WizardModalWithDrawerDemo extends React.Component {
           navAriaLabel={`${title} steps`}
           hasDrawer
           isDrawerExpanded={isDrawerExpanded}
+          onExpandDrawer={this.onExpand}
           mainAriaLabel={`${title} content`}
           titleId="wiz-modal-demo-title"
           descriptionId="wiz-modal-demo-description"
@@ -877,6 +879,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}
@@ -1194,6 +1197,7 @@ class FullPageWizard extends React.Component {
             <Wizard
               hasDrawer
               isDrawerExpanded={isDrawerExpanded}
+              onExpandDrawer={this.onExpand}
               navAriaLabel={`${title} steps`}
               mainAriaLabel={`${title} content`}
               steps={steps}

package/src/next/components/Wizard/examples/WizardKitchenSink.tsx

@@ -76,14 +76,21 @@ const CustomWizardFooter = () => {
 
 const StepContentWithDrawer = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const drawerRef = React.useRef<HTMLSpanElement>(null);
+
+  const onWizardExpand = () => {
+    drawerRef.current && drawerRef.current.focus();
+  };
 
   return (
-    <Drawer isInline isExpanded={isDrawerExpanded}>
+    <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>
       <DrawerContent
         panelContent={
           <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.light200}>
             <DrawerHead>
-              <span tabIndex={isDrawerExpanded ? 0 : -1}>drawer content</span>
+              <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
+                drawer content
+              </span>
               <DrawerActions>
                 <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />
               </DrawerActions>