@patternfly/react-core 4.226.1 → 4.226.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.226.1",
+  "version": "4.226.2",
   "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",
@@ -34,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.77.1",
-    "@patternfly/react-styles": "^4.76.1",
-    "@patternfly/react-tokens": "^4.78.1",
+    "@patternfly/react-icons": "^4.77.2",
+    "@patternfly/react-styles": "^4.76.2",
+    "@patternfly/react-tokens": "^4.78.2",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.204.2",
+    "@patternfly/patternfly": "4.204.3",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "a8c0fc47245d670f26681e0c58769f91302d85a7"
+  "gitHead": "fb67d6b2dfbfd2b4080e1313101f4d663a0a09c3"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -57,6 +57,11 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   onSelectToggle?: (open: boolean) => void;
   /** Flag to set browser focus on the passed date **/
   isDateFocused?: boolean;
+  /** Callback when month or year is changed */
+  onMonthChange?: (
+    newDate?: Date,
+    event?: React.MouseEvent | React.ChangeEvent | React.FormEvent<HTMLInputElement>
+  ) => void;
 }
 
 // Must be numeric given current header design
@@ -114,6 +119,7 @@ export const CalendarMonth = ({
   validators = [() => true],
   className,
   onSelectToggle = () => {},
+  onMonthChange = () => {},
   rangeStart,
   prevMonthAriaLabel = 'Previous month',
   nextMonthAriaLabel = 'Next month',
@@ -162,10 +168,11 @@ export const CalendarMonth = ({
     }
   }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
 
-  const onMonthClick = (newDate: Date) => {
+  const onMonthClick = (newDate: Date, ev: React.MouseEvent) => {
     setFocusedDate(newDate);
     setHoveredDate(newDate);
     setShouldFocus(false);
+    onMonthChange(newDate, ev);
   };
 
   const onKeyDown = (ev: React.KeyboardEvent<HTMLTableSectionElement>) => {
@@ -222,7 +229,11 @@ export const CalendarMonth = ({
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
-          <Button variant="plain" aria-label={prevMonthAriaLabel} onClick={() => onMonthClick(prevMonth)}>
+          <Button
+            variant="plain"
+            aria-label={prevMonthAriaLabel}
+            onClick={(ev: React.MouseEvent) => onMonthClick(prevMonth, ev)}
+          >
             <AngleLeftIcon aria-hidden={true} />
           </Button>
         </div>
@@ -240,7 +251,7 @@ export const CalendarMonth = ({
                 setIsSelectOpen(!isSelectOpen);
                 onSelectToggle(!isSelectOpen);
               }}
-              onSelect={(_ev, monthNum) => {
+              onSelect={(ev, monthNum) => {
                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
                 // to see the SelectOption as a child so it doesn't close the Popover.
                 setTimeout(() => {
@@ -251,6 +262,7 @@ export const CalendarMonth = ({
                   setFocusedDate(newDate);
                   setHoveredDate(newDate);
                   setShouldFocus(false);
+                  onMonthChange(newDate, ev);
                 }, 0);
               }}
               variant="single"
@@ -268,18 +280,23 @@ export const CalendarMonth = ({
               aria-label={yearInputAriaLabel}
               type="number"
               value={yearFormatted}
-              onChange={year => {
+              onChange={(year: string, ev: React.FormEvent<HTMLInputElement>) => {
                 const newDate = new Date(focusedDate);
                 newDate.setFullYear(+year);
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
+                onMonthChange(newDate, ev);
               }}
             />
           </div>
         </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
-          <Button variant="plain" aria-label={nextMonthAriaLabel} onClick={() => onMonthClick(nextMonth)}>
+          <Button
+            variant="plain"
+            aria-label={nextMonthAriaLabel}
+            onClick={(ev: React.MouseEvent) => onMonthClick(nextMonth, ev)}
+          >
             <AngleRightIcon aria-hidden={true} />
           </Button>
         </div>

package/src/components/CalendarMonth/examples/CalendarMonth.md

@@ -8,11 +8,6 @@ beta: true
 
 ## Examples
 
-### Default
-
-```ts file="./CalendarMonthDefault.tsx"
-```
-
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"

package/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx

@@ -4,10 +4,15 @@ import { CalendarMonth } from '@patternfly/react-core';
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
 
+  const onMonthChange = (newDate: Date) => {
+    // eslint-disable-next-line no-console
+    console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
+  };
+
   return (
     <React.Fragment>
       <pre>Selected date: {date.toString()}</pre>
-      <CalendarMonth date={date} onChange={setDate} />
+      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
     </React.Fragment>
   );
 };

package/src/components/Pagination/examples/Pagination.md

@@ -28,9 +28,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -68,9 +68,9 @@ class PaginationBottom extends React.Component {
         page: pageNumber
       });
     };
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -149,9 +149,9 @@ class PaginationDisabled extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -193,9 +193,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -236,9 +236,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -279,9 +279,9 @@ class PaginationTop extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }
@@ -330,9 +330,9 @@ class PaginationSticky extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
   }

package/src/components/Toolbar/examples/Toolbar.md

@@ -1169,9 +1169,9 @@ class ToolbarStacked extends React.Component {
       });
     };
 
-    this.onPerPageSelect = (_event, perPage) => {
+    this.onPerPageSelect = (_event, perPage, page) => {
       this.setState({
-        perPage
+        page, perPage
       });
     };
 

package/src/components/Wizard/Wizard.tsx

@@ -367,6 +367,12 @@ export class Wizard extends React.Component<WizardProps, WizardState> {
     }
   }
 
+  componentDidUpdate(prevProps: Readonly<WizardProps>) {
+    if (prevProps.startAtStep !== this.props.startAtStep) {
+      this.setState({ currentStep: this.props.startAtStep });
+    }
+  }
+
   render() {
     const {
       /* eslint-disable @typescript-eslint/no-unused-vars */

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

@@ -342,3 +342,34 @@ describe('Wizard', () => {
 
     expect(screen.getByRole('button',{ name: "A-2" })).toBeDisabled();
   });
+
+test('startAtStep can be used to externally control the current step of the wizard', () => {
+  const WizardTest = () => {
+    const [step, setStep] = React.useState(1);
+
+    const incrementStep = () => {
+      setStep(prevStep => prevStep + 1);
+    };
+
+    const steps: WizardStep[] = [
+      { name: 'A', component: <p>Step 1</p> },
+      { name: 'B', component: <p>Step 2</p> },
+      { name: 'C', component: <p>Step 3</p> }
+    ];
+
+    return (
+      <>
+        <Wizard steps={steps} startAtStep={step} />
+        <button onClick={() => incrementStep()}>Increment step</button>
+      </>
+    );
+  };
+
+  render(<WizardTest />);
+
+  expect(screen.queryByText('Step 2')).not.toBeInTheDocument();
+
+  userEvent.click(screen.getByRole('button', { name: 'Increment step'}))
+
+  expect(screen.getByText('Step 2')).toBeVisible();
+});

package/src/components/CalendarMonth/examples/CalendarMonthDefault.tsx

@@ -1,4 +0,0 @@
-import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
-
-export const CalendarMonthDefault: React.FunctionComponent = () => <CalendarMonth date={new Date()} />;