@patternfly/react-core 4.225.8 → 4.225.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.8",
+  "version": "4.225.11",
   "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.8",
-    "@patternfly/react-styles": "^4.75.8",
-    "@patternfly/react-tokens": "^4.77.8",
+    "@patternfly/react-icons": "^4.76.11",
+    "@patternfly/react-styles": "^4.75.11",
+    "@patternfly/react-tokens": "^4.77.11",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.204.1",
+    "@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": "ff8f9ebc9ddd58da42246f9b87ea392ef2245285"
+  "gitHead": "aaeb37eb17dd5180aaa6ac3548fd4ac52c2a6eb7"
 }

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/components/Select/Select.tsx

@@ -297,41 +297,39 @@ export class Select extends React.Component<SelectProps & OUIAProps, SelectState
       this.setState({ viewMoreNextIndex: -1 });
     }
 
-    if (this.props.variant === 'typeahead' || this.props.variant === 'typeaheadmulti') {
-      const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
-        Array.from(prevChildren).some((prevChild: React.ReactElement, index: number) => {
-          const prevChildProps = prevChild.props;
-          const currChild = currChildren[index];
-          const { props: currChildProps } = currChild;
-
-          if (prevChildProps && currChildProps) {
-            return (
-              prevChildProps.value !== currChildProps.value ||
-              prevChildProps.label !== currChildProps.label ||
-              prevChildProps.isDisabled !== currChildProps.isDisabled ||
-              prevChildProps.isPlaceholder !== currChildProps.isPlaceholder
-            );
-          } else {
-            return prevChild !== currChild;
-          }
-        });
-
-      const hasUpdatedChildren =
-        prevProps.children.length !== this.props.children.length ||
-        checkUpdatedChildren(prevProps.children, this.props.children) ||
-        (this.props.isGrouped &&
-          Array.from(prevProps.children).some(
-            (prevChild: React.ReactElement, index: number) =>
-              prevChild.type === SelectGroup &&
-              prevChild.props.children &&
-              this.props.children[index].props.children &&
-              (prevChild.props.children.length !== this.props.children[index].props.children.length ||
-                checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
-          ));
-
-      if (hasUpdatedChildren) {
-        this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
-      }
+    const checkUpdatedChildren = (prevChildren: React.ReactElement[], currChildren: React.ReactElement[]) =>
+      Array.from(prevChildren).some((prevChild: React.ReactElement, index: number) => {
+        const prevChildProps = prevChild.props;
+        const currChild = currChildren[index];
+        const { props: currChildProps } = currChild;
+
+        if (prevChildProps && currChildProps) {
+          return (
+            prevChildProps.value !== currChildProps.value ||
+            prevChildProps.label !== currChildProps.label ||
+            prevChildProps.isDisabled !== currChildProps.isDisabled ||
+            prevChildProps.isPlaceholder !== currChildProps.isPlaceholder
+          );
+        } else {
+          return prevChild !== currChild;
+        }
+      });
+
+    const hasUpdatedChildren =
+      prevProps.children.length !== this.props.children.length ||
+      checkUpdatedChildren(prevProps.children, this.props.children) ||
+      (this.props.isGrouped &&
+        Array.from(prevProps.children).some(
+          (prevChild: React.ReactElement, index: number) =>
+            prevChild.type === SelectGroup &&
+            prevChild.props.children &&
+            this.props.children[index].props.children &&
+            (prevChild.props.children.length !== this.props.children[index].props.children.length ||
+              checkUpdatedChildren(prevChild.props.children, this.props.children[index].props.children))
+        ));
+
+    if (hasUpdatedChildren) {
+      this.updateTypeAheadFilteredChildren(prevState.typeaheadInputValue || '', null);
     }
 
     // for menus with favorites,

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) {