@patternfly/react-core 4.225.6 → 4.225.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.6",
+  "version": "4.225.9",
   "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.76.6",
-    "@patternfly/react-styles": "^4.75.6",
-    "@patternfly/react-tokens": "^4.77.6",
+    "@patternfly/react-icons": "^4.76.9",
+    "@patternfly/react-styles": "^4.75.9",
+    "@patternfly/react-tokens": "^4.77.9",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.203.2",
+    "@patternfly/patternfly": "4.204.1",
     "@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": "aa02779944d6c295b717d656d9dcea638c35a11c"
+  "gitHead": "7a3e116e4af4a97fc5a05d0c05307e75af6d97f5"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -64,13 +64,20 @@ const yearFormat = (date: Date) => date.getFullYear();
 
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
   const defaultDate = new Date(year, month);
+
   const firstDayOfWeek = new Date(defaultDate);
   firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
+
   // We will show a maximum of 6 weeks like Google calendar
   // Assume we just want the numbers for now...
   const calendarWeeks = [];
+
+  if (firstDayOfWeek.getMonth() === defaultDate.getMonth() && firstDayOfWeek.getDate() !== 1) {
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - 7);
+  }
   for (let i = 0; i < 6; i++) {
     const week = [];
+
     for (let j = 0; j < 7; j++) {
       const date = new Date(firstDayOfWeek);
       week.push({

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import { CalendarMonth } from '../CalendarMonth';
+
+test('Renders the first date in a month when a custom weekStart is passed', () => {
+  // custom aria label generation function because of bug with default aria label generation
+  // can be removed once the bug is fixed
+  const formatAria = (date: Date) =>
+    `${date.getDate()} ${date.toLocaleDateString(undefined, { month: 'long' })} ${date.getFullYear()}`;
+
+  render(<CalendarMonth cellAriaLabel={formatAria} weekStart={1} date={new Date(2023, 0)} />);
+
+  const firstDate = screen.queryByRole('button', { name: '1 January 2023' });
+  expect(firstDate).toBeVisible();
+});
+
+test('Renders the last date in a month when a custom weekStart is passed', () => {
+  // custom aria label generation function because of bug with default aria labels
+  // can be removed once the bug is fixed
+  const formatAria = (date: Date) =>
+    `${date.getDate()} ${date.toLocaleDateString(undefined, { month: 'long' })} ${date.getFullYear()}`;
+
+  render(<CalendarMonth cellAriaLabel={formatAria} weekStart={1} date={new Date(2023, 0)} />);
+
+  const lastDate = screen.queryByRole('button', { name: '31 January 2023' });
+  expect(lastDate).toBeVisible();
+});

package/src/components/Switch/Switch.tsx

@@ -91,10 +91,9 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
           className={css(styles.switchInput)}
           type="checkbox"
           onChange={event => onChange(event.target.checked, event)}
-          {...([true, false].includes(defaultChecked) && { defaultChecked })}
-          {...(![true, false].includes(defaultChecked) && { checked: isChecked })}
+          {...(defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked })}
           disabled={isDisabled}
-          aria-labelledby={isAriaLabelledBy ? `${this.id}-on` : null}
+          aria-labelledby={!isAriaLabelledBy ? null : `${this.id}-${isChecked !== true ? 'off' : 'on'}`}
           {...props}
         />
         {label !== undefined ? (

package/src/components/Switch/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -282,7 +282,7 @@ exports[`Switch switch with only label is not checked 1`] = `
   >
     <input
       aria-label=""
-      aria-labelledby="switch-is-not-checked-on"
+      aria-labelledby="switch-is-not-checked-off"
       class="pf-c-switch__input"
       id="switch-is-not-checked"
       type="checkbox"

package/src/components/Switch/examples/Switch.md

@@ -171,8 +171,16 @@ import React from 'react';
 import { Switch } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Switch id="uncontrolled-switch-on" label="Message when on" labelOff="Message when off" defaultChecked={false} />
+  <Switch
+    id="uncontrolled-switch-no-label"
+    aria-label="An uncontrolled switch with no label"
+    defaultChecked={false}
+  />
   <br />
-  <Switch id="uncontrolled-no-label-switch-on" aria-label="Message when on" defaultChecked={true} />
+  <Switch
+    id="uncontrolled-switch-with-label"
+    label="An uncontrolled switch"
+    defaultChecked={false}
+  />
 </React.Fragment>;
 ```

package/src/components/TreeView/TreeView.tsx

@@ -58,7 +58,7 @@ export interface TreeViewProps {
   /** Callback for item selection */
   onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Callback for item checkbox selection */
-  onCheck?: (event: React.ChangeEvent, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parentItem: TreeViewDataItem) => void;
   /** Active items of tree view */
   activeItems?: TreeViewDataItem[];
   /** Internal. Parent item of a TreeViewListItem */

package/src/components/TreeView/TreeViewListItem.tsx

@@ -26,7 +26,7 @@ export interface TreeViewListItemProps {
   /** Callback for item selection. Note: calling event.preventDefault() will prevent the node from toggling. */
   onSelect?: (event: React.MouseEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
   /** Callback for item checkbox selection */
-  onCheck?: (event: React.ChangeEvent, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
+  onCheck?: (event: React.ChangeEvent<HTMLInputElement>, item: TreeViewDataItem, parent: TreeViewDataItem) => void;
   /** Flag indicating if a tree view item has a checkbox */
   hasCheck?: boolean;
   /** Additional properties of the tree view item checkbox */
@@ -115,8 +115,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     <span className={css(styles.treeViewNodeCheck)}>
       <input
         type="checkbox"
-        onChange={(evt: React.ChangeEvent) => onCheck && onCheck(evt, itemData, parentItem)}
-        onClick={(evt: React.MouseEvent) => evt.stopPropagation()}
+        onChange={evt => onCheck && onCheck(evt, itemData, parentItem)}
+        onClick={evt => evt.stopPropagation()}
         ref={elem => elem && (elem.indeterminate = checkProps.checked === null)}
         {...checkProps}
         checked={checkProps.checked === null ? false : checkProps.checked}