@patternfly/react-core 4.225.7 → 4.225.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.7",
+  "version": "4.225.10",
   "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.7",
-    "@patternfly/react-styles": "^4.75.7",
-    "@patternfly/react-tokens": "^4.77.7",
+    "@patternfly/react-icons": "^4.76.10",
+    "@patternfly/react-styles": "^4.75.10",
+    "@patternfly/react-tokens": "^4.77.10",
     "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.2",
     "@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": "f819a9821412c2387151f719a8a587ab5bd1b7b7"
+  "gitHead": "ae1f341cfd4e094892f9fba068aece48bef36dd3"
 }

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({
@@ -338,7 +345,9 @@ export const CalendarMonth = ({
                       tabIndex={isFocused ? 0 : -1}
                       disabled={!isValid}
                       aria-label={
-                        cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}`
+                        cellAriaLabel
+                          ? cellAriaLabel(date)
+                          : `${dayFormat(date)} ${monthFormat(date)} ${yearFormat(date)}`
                       }
                       {...(isFocused && { ref: focusRef })}
                     >

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

@@ -0,0 +1,57 @@
+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.getByRole('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.getByRole('button', { name: '31 January 2023' });
+  expect(lastDate).toBeVisible();
+});
+
+test('Previous month dates have correct month in aria label', () => {
+  render(<CalendarMonth date={new Date(2024, 5)} />);
+
+  const previousMonthDate = screen.getByRole('button', { name: '31 May 2024' });
+  expect(previousMonthDate).toBeVisible();
+});
+
+test('Next month dates have correct month in aria label', () => {
+  render(<CalendarMonth date={new Date(2024, 6)} />);
+
+  const nextMonthDate = screen.getByRole('button', { name: '1 August 2024' });
+  expect(nextMonthDate).toBeVisible();
+});
+
+test('Previous year dates have correct year in aria label', () => {
+  render(<CalendarMonth date={new Date(2024, 0)} />);
+
+  const previousYearDate = screen.getByRole('button', { name: '31 December 2023' });
+  expect(previousYearDate).toBeVisible();
+});
+
+test('Next year dates have correct year in aria label', () => {
+  render(<CalendarMonth date={new Date(2024, 11)} />);
+
+  const nextYearDate = screen.getByRole('button', { name: '1 January 2025' });
+  expect(nextYearDate).toBeVisible();
+});

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -12,7 +12,6 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 
 ## Demos
 
@@ -32,13 +31,10 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Card,
-  CardBody,
-  Drawer,
-  DrawerContent,
-  DrawerContentBody,
   Dropdown,
   DropdownGroup,
+  DropdownPosition,
+  DropdownDirection,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -46,8 +42,7 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStatePrimary,
-  Gallery,
-  GalleryItem,
+  EmptyStateVariant,
   KebabToggle,
   Nav,
   NavItem,
@@ -79,7 +74,6 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -87,7 +81,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 class BasicNotificationDrawer extends React.Component {
   constructor(props) {
@@ -548,13 +542,10 @@ import {
   BreadcrumbItem,
   Button,
   ButtonVariant,
-  Card,
-  CardBody,
-  Drawer,
-  DrawerContent,
-  DrawerContentBody,
   Dropdown,
   DropdownGroup,
+  DropdownPosition,
+  DropdownDirection,
   DropdownToggle,
   DropdownItem,
   DropdownSeparator,
@@ -562,8 +553,7 @@ import {
   EmptyStateBody,
   EmptyStateIcon,
   EmptyStatePrimary,
-  Gallery,
-  GalleryItem,
+  EmptyStateVariant,
   KebabToggle,
   Nav,
   NavItem,
@@ -597,16 +587,14 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import { css } from '@patternfly/react-styles';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
 
 class GroupedNotificationDrawer extends React.Component {
   constructor(props) {