@patternfly/react-core 4.267.2 → 4.267.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.267.2",
+  "version": "4.267.4",
   "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",
@@ -77,5 +77,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "d0a31d9e7658776d5a4fd38beb13584fb90df4b8"
+  "gitHead": "e1bb5650695acd2a2de69b29c8a9857161e4a8a1"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -20,6 +20,15 @@ export enum Weekday {
   Saturday
 }
 
+export interface CalendarMonthInlineProps {
+  /** Component wrapping the calendar month when used inline. Recommended to be 'article'. */
+  component?: keyof JSX.IntrinsicElements;
+  /** Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component. */
+  title?: React.ReactNode;
+  /** Id of the accessible label of the calendar month. Recommended to map to the title. */
+  ariaLabelledby?: string;
+}
+
 /** Additional properties that extend from and can be passed to the main component. These
  * properties allow customizing the calendar formatting and aria-labels.
  */
@@ -49,6 +58,8 @@ export interface CalendarFormat {
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
   /** Accessible label for the year input. */
   yearInputAriaLabel?: string;
+  /** Props used to ensure accessibility when displaying the calendar month inline. */
+  inlineProps?: CalendarMonthInlineProps;
 }
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
@@ -133,6 +144,7 @@ export const CalendarMonth = ({
   yearInputAriaLabel = 'Select year',
   cellAriaLabel,
   isDateFocused = false,
+  inlineProps,
   ...props
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
@@ -232,7 +244,8 @@ export const CalendarMonth = ({
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
   const yearFormatted = yearFormat(focusedDate);
-  return (
+
+  const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
@@ -386,4 +399,16 @@ export const CalendarMonth = ({
       </table>
     </div>
   );
+
+  if (inlineProps !== undefined) {
+    const Component = (inlineProps.component ? inlineProps.component : 'article') as any;
+    return (
+      <Component {...(inlineProps.ariaLabelledby && { 'aria-labelledby': inlineProps.ariaLabelledby })}>
+        {inlineProps.title}
+        {calendarToRender}
+      </Component>
+    );
+  }
+  return calendarToRender;
 };
+CalendarMonth.displayName = 'CalendarMonth';

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

@@ -55,3 +55,12 @@ test('Next year dates have correct year in aria label', () => {
   const nextYearDate = screen.getByRole('button', { name: '1 January 2025' });
   expect(nextYearDate).toBeVisible();
 });
+
+test('InlineProps render correct wrapper component and attributes', () => {
+  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
+
+  const article = screen.getByRole('article');
+  expect(article).toHaveAttribute('aria-labelledby', 'hi');
+  const title = screen.getByText('Title');
+  expect(title).toBeVisible();
+});

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

@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 cssPrefix: pf-c-calendar-month
-propComponents: ['CalendarMonth', 'CalendarFormat']
+propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 
 ## Examples

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

@@ -1,10 +1,27 @@
 import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
+import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';
 
 export const CalendarMonthDateRange: React.FunctionComponent = () => {
   const startDate = new Date(2020, 10, 11);
   const endDate = new Date(2020, 10, 24);
   const disablePreStartDates = (date: Date) => date >= startDate;
 
-  return <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
+  const inlineProps: CalendarMonthInlineProps = {
+    component: 'article',
+    title: (
+      <Title id="display-range" headingLevel="h4">
+        Calendar month displaying a range
+      </Title>
+    ),
+    ariaLabelledby: 'display-range'
+  };
+
+  return (
+    <CalendarMonth
+      validators={[disablePreStartDates]}
+      date={endDate}
+      rangeStart={startDate}
+      inlineProps={inlineProps}
+    />
+  );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
+import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';
 
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
@@ -9,10 +9,20 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
 
+  const inlineProps: CalendarMonthInlineProps = {
+    component: 'article',
+    title: (
+      <Title headingLevel="h4" id="favorite-date">
+        Select your favorite date
+      </Title>
+    ),
+    ariaLabelledby: 'favorite-date'
+  };
+
   return (
-    <React.Fragment>
+    <>
+      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} inlineProps={inlineProps} />
       <pre>Selected date: {date.toString()}</pre>
-      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
-    </React.Fragment>
+    </>
   );
 };

package/src/components/Menu/MenuItem.tsx

@@ -22,7 +22,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   className?: string;
   /** Identifies the component in the Menu onSelect or onActionClick callback */
   itemId?: any;
-  /** Target navigation link */
+  /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
   /** @beta Flag indicating the item has a checkbox */
   hasCheck?: boolean;
@@ -54,7 +54,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isFocused?: boolean;
   /** Flag indicating the item is in danger state */
   isDanger?: boolean;
-  /** @beta Flyout menu */
+  /** @beta Flyout menu. Should not be used if the to prop is defined. */
   flyoutMenu?: React.ReactElement;
   /** @beta Callback function when mouse leaves trigger */
   onShowFlyout?: (event?: any) => void;
@@ -202,6 +202,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
 
     if (key === ' ' || key === 'Enter' || key === 'ArrowRight' || type === 'click') {
       event.stopPropagation();
+      event.preventDefault();
       if (!flyoutVisible) {
         showFlyout(true);
         setFlyoutTarget(target as HTMLElement);

package/src/components/Nav/NavItem.tsx

@@ -14,7 +14,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   styleChildren?: boolean;
   /** Additional classes added to the nav item */
   className?: string;
-  /** Target navigation link */
+  /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
@@ -28,7 +28,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   onClick?: NavSelectClickHandler;
   /** Component used to render NavItems if  React.isValidElement(children) is false */
   component?: React.ReactNode;
-  /** Flyout of a nav item. This should be a Menu component. */
+  /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
   flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
@@ -68,8 +68,14 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const ref = React.useRef<HTMLLIElement>();
   const flyoutVisible = ref === flyoutRef;
   const popperRef = React.useRef<HTMLDivElement>();
-  const Component = component as any;
   const hasFlyout = flyout !== undefined;
+  const Component = hasFlyout ? 'button' : (component as any);
+
+  // A NavItem should not be both a link and a flyout
+  if (to && hasFlyout) {
+    // eslint-disable-next-line no-console
+    console.error('NavItem cannot have both "to" and "flyout" props.');
+  }
 
   const showFlyout = (show: boolean, override?: boolean) => {
     if ((!flyoutVisible || override) && show) {
@@ -106,11 +112,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     const key = event.key;
     const target = event.target as HTMLElement;
 
-    if (!(popperRef?.current?.contains(target) || (hasFlyout && ref?.current?.contains(target)))) {
-      return;
-    }
-
-    if (key === ' ' || key === 'ArrowRight') {
+    if ((key === ' ' || key === 'Enter' || key === 'ArrowRight') && hasFlyout && ref?.current?.contains(target)) {
       event.stopPropagation();
       event.preventDefault();
       if (!flyoutVisible) {
@@ -119,7 +121,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       }
     }
 
-    if (key === 'Escape' || key === 'ArrowLeft') {
+    // We only want the NavItem to handle closing a flyout menu if only the first level flyout is open.
+    // Otherwise, MenuItem should handle closing its flyouts
+    if ((key === 'Escape' || key === 'ArrowLeft') && popperRef?.current?.querySelectorAll('.pf-c-menu').length === 1) {
       if (flyoutVisible) {
         event.stopPropagation();
         event.preventDefault();
@@ -165,6 +169,8 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     'aria-expanded': flyoutVisible
   };
 
+  const tabIndex = isNavOpen ? null : -1;
+
   const renderDefaultLink = (context: any): React.ReactNode => {
     const preventLinkDefault = preventDefault || !to;
     return (
@@ -178,7 +184,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
           className
         )}
         aria-current={isActive ? 'page' : null}
-        tabIndex={isNavOpen ? null : '-1'}
+        tabIndex={tabIndex}
         {...(hasFlyout && { ...ariaFlyoutProps })}
         {...props}
       >
@@ -195,7 +201,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
       ...(styleChildren && {
         className: css(styles.navLink, isActive && styles.modifiers.current, child.props && child.props.className)
       }),
-      tabIndex: child.props.tabIndex || isNavOpen ? null : -1,
+      tabIndex: child.props.tabIndex || tabIndex,
       children: hasFlyout ? (
         <React.Fragment>
           {child.props.children}

package/src/components/Nav/examples/NavFlyout.tsx

@@ -19,12 +19,7 @@ export const NavFlyout: React.FunctionComponent = () => {
     <Menu key={depth} containsFlyout isNavFlyout id={`nav-flyout-menu-${depth}`} onSelect={onMenuSelect}>
       <MenuContent>
         <MenuList>
-          <MenuItem
-            onClick={onMenuItemClick}
-            flyoutMenu={children}
-            itemId={`nav-flyout-next-menu-${depth}`}
-            to={`#next-menu-link-${depth}`}
-          >
+          <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
           {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
@@ -38,12 +33,7 @@ export const NavFlyout: React.FunctionComponent = () => {
               Menu {depth} item {index}
             </MenuItem>
           ))}
-          <MenuItem
-            onClick={onMenuItemClick}
-            flyoutMenu={children}
-            itemId={`nav-flyout-next-menu-2-${depth}`}
-            to={`#next-menu-2-link-${depth}`}
-          >
+          <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-2-${depth}`}>
             Next menu
           </MenuItem>
         </MenuList>
@@ -81,7 +71,6 @@ export const NavFlyout: React.FunctionComponent = () => {
           preventDefault
           flyout={curFlyout}
           id="nav-flyout-default-link-3"
-          to="#nav-flyout-default-link-3"
           itemId="nav-flyout-default-link-3"
           isActive={activeItem === 'nav-flyout-default-link-3'}
         >

package/src/demos/Nav.md

@@ -1463,7 +1463,7 @@ class VerticalPage extends React.Component {
       <Menu key={depth} containsFlyout isNavFlyout id={`menu-${depth}`} onSelect={this.onMenuSelect}>
         <MenuContent>
           <MenuList>
-            <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`} to={`#menu-link-${depth}`}>
+            <MenuItem flyoutMenu={children} itemId={`next-menu-${depth}`}>
               Additional settings
             </MenuItem>
             {[...Array(numFlyouts - depth).keys()].map(j => (
@@ -1471,7 +1471,7 @@ class VerticalPage extends React.Component {
                 Settings menu {depth} item {j}
               </MenuItem>
             ))}
-            <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`} to={`#second-menu-link-${depth}`}>
+            <MenuItem flyoutMenu={children} itemId={`next-menu-2-${depth}`}>
               Additional settings
             </MenuItem>
           </MenuList>