@patternfly/react-core 4.225.9 → 4.225.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.9",
+  "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.9",
-    "@patternfly/react-styles": "^4.75.9",
-    "@patternfly/react-tokens": "^4.77.9",
+    "@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.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": "7a3e116e4af4a97fc5a05d0c05307e75af6d97f5"
+  "gitHead": "ae1f341cfd4e094892f9fba068aece48bef36dd3"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -345,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

@@ -12,7 +12,7 @@ test('Renders the first date in a month when a custom weekStart is passed', () =
 
   render(<CalendarMonth cellAriaLabel={formatAria} weekStart={1} date={new Date(2023, 0)} />);
 
-  const firstDate = screen.queryByRole('button', { name: '1 January 2023' });
+  const firstDate = screen.getByRole('button', { name: '1 January 2023' });
   expect(firstDate).toBeVisible();
 });
 
@@ -24,6 +24,34 @@ test('Renders the last date in a month when a custom weekStart is passed', () =>
 
   render(<CalendarMonth cellAriaLabel={formatAria} weekStart={1} date={new Date(2023, 0)} />);
 
-  const lastDate = screen.queryByRole('button', { name: '31 January 2023' });
+  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) {

package/src/demos/PrimaryDetail.md

@@ -5,6 +5,7 @@ section: demos
 
 import DashboardWrapper from './examples/DashboardWrapper';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -954,12 +955,17 @@ import React from 'react';
 import {
   Button,
   Card,
+  CardActions,
   CardHeader,
   CardBody,
   CardTitle,
+  Checkbox,
   Divider,
   Dropdown,
+  DropdownToggle,
+  DropdownToggleCheckbox,
   DropdownItem,
+  DropdownPosition,
   DropdownSeparator,
   Drawer,
   DrawerActions,
@@ -969,14 +975,10 @@ import {
   DrawerContentBody,
   DrawerHead,
   DrawerPanelContent,
-  DrawerSection,
   Flex,
   FlexItem,
   Gallery,
   KebabToggle,
-  OverflowMenu,
-  OverflowMenuControl,
-  OverflowMenuItem,
   PageSection,
   PageSectionVariants,
   Pagination,
@@ -990,10 +992,10 @@ import {
   Toolbar,
   ToolbarItem,
   ToolbarContent,
-  ToolbarFilter,
-  ToolbarToggleGroup
+  ToolbarFilter
 } from '@patternfly/react-core';
 import DashboardWrapper from './examples/DashboardWrapper';
+import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import pfIcon from './pf-logo-small.svg';
 import activeMQIcon from './activemq-core_200x150.png';
 import avroIcon from './camel-avro_200x150.png';
@@ -1012,7 +1014,12 @@ class PrimaryDetailCardView extends React.Component {
     this.state = {
       page: 1,
       perPage: 10,
+      totalItemCount: 10,
       isDrawerExpanded: false,
+      isChecked: false,
+      selectedItems: [],
+      areAllSelected: false,
+      splitButtonDropdownIsOpen: false,
       activeCard: null,
       filters: {
         products: []
@@ -1032,7 +1039,7 @@ class PrimaryDetailCardView extends React.Component {
       }));
     };
 
-    this.onToolbarDropdownSelect = event => {
+    this.onToolbarDropdownSelect = _event => {
       this.setState({
         isLowerToolbarDropdownOpen: !this.state.isLowerToolbarDropdownOpen
       });
@@ -1044,24 +1051,23 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onToolbarKebabDropdownSelect = event => {
+    this.onToolbarKebabDropdownSelect = _event => {
       this.setState({
         isLowerToolbarKebabDropdownOpen: !this.state.isLowerToolbarKebabDropdownOpen
       });
     };
 
-    this.deleteItem = item => event => {
-      const filter = getter => val => getter(val) !== item.id;
-      this.setState({
-        res: this.state.res.filter(filter(({ id }) => id)),
-        selectedItems: this.state.selectedItems.filter(filter(id => id))
-      });
+    this.checkAllSelected = (selected, total) => {
+      if (selected && selected < total) {
+        return null;
+      }
+      return selected === total;
     };
 
     this.onNameSelect = (event, selection) => {
       const checked = event.target.checked;
       this.setState(prevState => {
-        const prevSelections = prevState.filters['products'];
+        const prevSelections = prevState.filters.products;
         return {
           filters: {
             ...prevState.filters,
@@ -1095,22 +1101,27 @@ class PrimaryDetailCardView extends React.Component {
       });
     };
 
-    this.onKeyDown = event => {
-      if (event.target !== event.currentTarget || event.currentTarget.id === this.state.activeCard) {
-        return;
-      }
-      if ([13, 32].includes(event.keyCode)) {
-        event.preventDefault();
-        const newSelected = event.currentTarget.id;
-        this.setState({
-          activeCard: newSelected,
-          isDrawerExpanded: true
-        });
-      }
+    this.onCheckboxClick = (event, productId) => {
+      event.stopPropagation();
+      this.setState(prevState =>
+        prevState.selectedItems.includes(productId * 1) || this.state.selectedItems.includes(productId * 1)
+          ? {
+              selectedItems: [...this.state.selectedItems.filter(id => productId * 1 !== id)],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length - 1, prevState.totalItemCount)
+            }
+          : {
+              selectedItems: [...prevState.selectedItems, productId * 1],
+              areAllSelected: this.checkAllSelected(prevState.selectedItems.length + 1, prevState.totalItemCount)
+            }
+      );
     };
 
     this.onCardClick = event => {
       if (event.currentTarget.id === this.state.activeCard) {
+        this.setState({
+          isDrawerExpanded: !this.state.isDrawerExpanded,
+          activeCard: null
+        });
         return;
       }
 
@@ -1140,6 +1151,135 @@ class PrimaryDetailCardView extends React.Component {
     this.onSetPage = (_evt, page) => {
       this.setState({ page });
     };
+
+    this.selectPage = () => {
+      const { totalItemCount, perPage } = this.state;
+      let collection = [];
+
+      collection = this.getAllItems();
+
+      this.setState(
+        {
+          selectedItems: collection,
+          areAllSelected: totalItemCount === perPage ? true : false
+        },
+        this.updateSelected
+      );
+    };
+
+    this.selectAll = () => {
+      let collection = [];
+      for (let i = 0; i <= 9; i++) {
+        collection = [...collection, i];
+      }
+
+      this.setState(
+        {
+          selectedItems: collection,
+          isChecked: true,
+          areAllSelected: true
+        },
+        this.updateSelected
+      );
+    };
+
+    this.selectNone = () => {
+      this.setState(
+        {
+          selectedItems: [],
+          isChecked: false,
+          areAllSelected: false,
+          isDrawerExpanded: false,
+          activeCard: null
+        },
+        this.updateSelected
+      );
+    };
+
+    this.splitCheckboxSelectAll = e => {
+      const { checked } = e.target;
+      const { isChecked } = this.state;
+      let collection = [];
+
+      if (checked) {
+        for (let i = 0; i <= 9; i++) {
+          collection = [...collection, i];
+        }
+      }
+
+      this.setState(
+        {
+          selectedItems: collection,
+          areAllSelected: checked,
+          isDrawerExpanded: false,
+          activeCard: null,
+          isChecked
+        },
+        this.updateSelected
+      );
+    };
+
+    this.onSplitButtonSelect = _event => {
+      this.setState((prevState, _props) => ({
+        splitButtonDropdownIsOpen: !prevState.splitButtonDropdownIsOpen,
+        isDrawerExpanded: false,
+        activeCard: null
+      }));
+    };
+
+    this.onSplitButtonToggle = isOpen => {
+      this.setState({
+        splitButtonDropdownIsOpen: isOpen
+      });
+    };
+
+    this.onCardKebabDropdownToggle = (event, key, isCardKebabDropdownOpen) => {
+      event.stopPropagation();
+      this.setState({
+        [key]: isCardKebabDropdownOpen
+      });
+    };
+
+    this.onCardKebabDropdownSelect = (key, _event) => {
+      this.setState({
+        [key]: !this.state[key]
+      });
+    };
+
+    this.deleteItem = (event, item) => {
+      event.stopPropagation();
+      const filter = getter => val => getter(val) !== item.id;
+      const filteredCards = this.state.res.filter(filter(({ id }) => id));
+      this.setState({
+        res: filteredCards,
+        selectedItems: this.state.selectedItems.filter(filter(id => id)),
+        totalItemCount: this.state.totalItemCount - 1,
+        isDrawerExpanded: false,
+        activeCard: null
+      });
+    };
+
+    this.onKeyDown = event => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+
+      if ([13, 32].includes(event.keyCode)) {
+        if (event.currentTarget.id === this.state.activeCard) {
+          this.setState({
+            isDrawerExpanded: !this.state.isDrawerExpanded,
+            activeCard: null
+          });
+          return;
+        }
+        event.preventDefault();
+        const newSelected = event.currentTarget.id;
+        this.setState({
+          activeCard: newSelected,
+          isDrawerExpanded: true
+        });
+      }
+    };
   }
 
   getAllItems() {
@@ -1197,16 +1337,60 @@ class PrimaryDetailCardView extends React.Component {
     );
   }
 
+  buildSelectDropdown() {
+    const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
+    const numSelected = selectedItems.length;
+    const allSelected = areAllSelected;
+    const anySelected = numSelected > 0;
+    const someChecked = anySelected ? null : false;
+    const isChecked = allSelected ? true : someChecked;
+    const splitButtonDropdownItems = [
+      <DropdownItem key="item-1" onClick={this.selectNone}>
+        Select none (0 items)
+      </DropdownItem>,
+      <DropdownItem key="item-2" onClick={this.selectPage}>
+        Select page ({this.state.res.length} items)
+      </DropdownItem>,
+      <DropdownItem key="item-3" onClick={this.selectAll}>
+        Select all ({this.state.totalItemCount} items)
+      </DropdownItem>
+    ];
+
+    return (
+      <Dropdown
+        position={DropdownPosition.left}
+        onSelect={this.onSplitButtonSelect}
+        toggle={
+          <DropdownToggle
+            splitButtonItems={[
+              <DropdownToggleCheckbox
+                id="example-checkbox-2"
+                key="split-checkbox"
+                aria-label={anySelected ? 'Deselect all' : 'Select all'}
+                isChecked={areAllSelected}
+                onClick={this.splitCheckboxSelectAll}
+              ></DropdownToggleCheckbox>
+            ]}
+            onToggle={this.onSplitButtonToggle}
+          >
+            {numSelected !== 0 && (
+              <React.Fragment>{allSelected ? this.state.totalItemCount : numSelected} selected</React.Fragment>
+            )}
+          </DropdownToggle>
+        }
+        isOpen={splitButtonDropdownIsOpen}
+        dropdownItems={splitButtonDropdownItems}
+      />
+    );
+  }
+
   render() {
     const {
       isDrawerExpanded,
+      isChecked,
+      selectedItems,
       activeCard,
-      isUpperToolbarDropdownOpen,
-      isLowerToolbarDropdownOpen,
-      isUpperToolbarKebabDropdownOpen,
       isLowerToolbarKebabDropdownOpen,
-      isCardKebabDropdownOpen,
-      activeItem,
       filters,
       res
     } = this.state;
@@ -1231,35 +1415,30 @@ class PrimaryDetailCardView extends React.Component {
 
     const toolbarItems = (
       <React.Fragment>
-        <ToolbarItem variant="overflow-menu">
-          <OverflowMenu breakpoint="xl">
-            <OverflowMenuItem isPersistent>{this.buildFilterDropdown()}</OverflowMenuItem>
-            <OverflowMenuItem isPersistent>
-              <Button variant="primary">Create a Project</Button>
-            </OverflowMenuItem>
-            <OverflowMenuControl hasAdditionalOptions>
-              <Dropdown
-                onSelect={this.onToolbarKebabDropdownSelect}
-                toggle={
-                  <KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />
-                }
-                isOpen={isLowerToolbarKebabDropdownOpen}
-                isPlain
-                dropdownItems={toolbarKebabDropdownItems}
-                isFlipEnabled
-                menuAppendTo="parent"
-              />
-            </OverflowMenuControl>
-          </OverflowMenu>
+        <ToolbarItem>{this.buildSelectDropdown()}</ToolbarItem>
+        <ToolbarItem>
+          <Button variant="primary">Create instance</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Action</Button>
+        </ToolbarItem>
+        <ToolbarItem hasAdditionalOptions>
+          <Dropdown
+            onSelect={this.onToolbarKebabDropdownSelect}
+            toggle={<KebabToggle onToggle={this.onToolbarKebabDropdownToggle} id="card-view-data-toolbar-dropdown" />}
+            isOpen={isLowerToolbarKebabDropdownOpen}
+            isPlain
+            dropdownItems={toolbarKebabDropdownItems}
+            isFlipEnabled
+            menuAppendTo="parent"
+          />
         </ToolbarItem>
       </React.Fragment>
     );
 
     const filtered =
       filters.products.length > 0
-        ? res.filter(card => {
-            return filters.products.length === 0 || filters.products.includes(card.name);
-          })
+        ? res.filter(card => filters.products.length === 0 || filters.products.includes(card.name))
         : res;
 
     const icons = {
@@ -1276,27 +1455,54 @@ class PrimaryDetailCardView extends React.Component {
     };
 
     const drawerContent = (
-      <Gallery hasGutter role='region' aria-label="Selectable card container">
+      <Gallery hasGutter role="region" aria-label="Selectable card container">
         {filtered.map((product, key) => (
-          <React.Fragment>
-            <Card
-              isHoverable
-              key={key}
-              id={'card-view-' + key}
-              onKeyDown={this.onKeyDown}
-              onClick={this.onCardClick}
-              onSelectableInputChange={this.onChange}
-              isSelectable
-              isSelected={activeCard === 'card-view-' + key}
-              hasSelectableInput
-            >
-              <CardHeader>
-                <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
-              </CardHeader>
-              <CardTitle>{product.name}</CardTitle>
-              <CardBody>{product.description}</CardBody>
-            </Card>
-          </React.Fragment>
+          <Card
+            isHoverable
+            key={product.name}
+            id={'card-view-' + key}
+            onKeyDown={this.onKeyDown}
+            onClick={this.onCardClick}
+            onSelectableInputChange={this.onChange}
+            isSelectableRaised
+            isSelected={activeCard === 'card-view-' + key}
+            hasSelectableInput
+          >
+            <CardHeader>
+              <img src={icons[product.icon]} alt={`${product.name} icon`} style={{ height: '50px' }} />
+              <CardActions>
+                <Dropdown
+                  isPlain
+                  position="right"
+                  onSelect={e => this.onCardKebabDropdownSelect(key, e)}
+                  toggle={
+                    <KebabToggle
+                      onToggle={(isCardKebabDropdownOpen, event) =>
+                        this.onCardKebabDropdownToggle(event, key, isCardKebabDropdownOpen)
+                      }
+                    />
+                  }
+                  isOpen={this.state[key]}
+                  dropdownItems={[
+                    <DropdownItem key="trash" onClick={e => this.deleteItem(e, product)} position="right">
+                      <TrashIcon />
+                      Delete
+                    </DropdownItem>
+                  ]}
+                />
+                <Checkbox
+                  checked={isChecked}
+                  onClick={event => this.onCheckboxClick(event, product.id)}
+                  value={product.id}
+                  isChecked={selectedItems.includes(product.id)}
+                  aria-label="card checkbox example"
+                  id={`check-${product.id}`}
+                />
+              </CardActions>
+            </CardHeader>
+            <CardTitle>{product.name}</CardTitle>
+            <CardBody>{product.description}</CardBody>
+          </Card>
         ))}
       </Gallery>
     );
@@ -1321,10 +1527,10 @@ class PrimaryDetailCardView extends React.Component {
               </p>
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard * 10} title="Title" />
+              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 10} title="Title" />
             </FlexItem>
             <FlexItem>
-              <Progress value={activeCard * 5} title="Title" />
+              <Progress value={activeCard && activeCard.charAt(activeCard.length - 1) * 5} title="Title" />
             </FlexItem>
           </Flex>
         </DrawerPanelBody>