@patternfly/react-core 4.198.12 → 4.198.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.12",
+  "version": "4.198.15",
   "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.49.12",
-    "@patternfly/react-styles": "^4.48.12",
-    "@patternfly/react-tokens": "^4.50.12",
+    "@patternfly/react-icons": "^4.49.15",
+    "@patternfly/react-styles": "^4.48.15",
+    "@patternfly/react-tokens": "^4.50.15",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "2f37e9854ab448a91848398d42e93c6d31fb07d1"
+  "gitHead": "16259ba437f75ad2818da8ff55a1994340971e26"
 }

package/src/components/Form/FormFieldGroup.tsx

@@ -6,7 +6,7 @@ export interface FormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: React.ReactNode;
 }
 

package/src/components/Form/FormFieldGroupExpandable.tsx

@@ -7,11 +7,11 @@ export interface FormFieldGroupExpandableProps extends React.HTMLProps<HTMLDivEl
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: React.ReactNode;
   /** Flag indicating if the form field group is initially expanded */
   isExpanded?: boolean;
-  /** Aria-label to use on the form filed group toggle button */
+  /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
 }
 

package/src/components/Form/FormFieldGroupHeader.tsx

@@ -2,17 +2,21 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
+// typo - rename to FormFieldGroupHeaderTitleTextObject during breaking change release
 export interface FormFiledGroupHeaderTitleTextObject {
   /** Title text. */
   text: React.ReactNode;
   /** The applied to the title div for accessibility */
   id: string;
 }
+
+export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {}
+
 export interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;
   /** Field group header title text */
-  titleText?: FormFiledGroupHeaderTitleTextObject;
+  titleText?: FormFieldGroupHeaderTitleTextObject;
   /** Field group header title description */
   titleDescription?: React.ReactNode;
   /** Field group header actions */

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -9,7 +9,7 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   children?: React.ReactNode;
   /** Additional classes added to the form field group. */
   className?: string;
-  /** Form filed group header */
+  /** Form field group header */
   header?: any;
   /** Flag indicating if the field group is expandable */
   isExpandable?: boolean;
@@ -17,7 +17,7 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
   isExpanded?: boolean;
   /** Function callback called when user clicks toggle button */
   onToggle?: () => void;
-  /** Aria-label to use on the form filed group toggle button */
+  /** Aria-label to use on the form field group toggle button */
   toggleAriaLabel?: string;
 }
 

package/src/components/Form/__tests__/FormFieldGroup.test.tsx

@@ -5,7 +5,7 @@ import { FormFieldGroupHeader } from '../FormFieldGroupHeader';
 import { Button } from '../../Button';
 import { render } from '@testing-library/react';
 
-test('Check form filed group example against snapshot', () => {
+test('Check form field group example against snapshot', () => {
   const FieldGroup = (
     <FormFieldGroup
       header={

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -85,7 +85,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
 </div>
 `;
 
-exports[`Check form filed group example against snapshot 1`] = `
+exports[`Check form field group example against snapshot 1`] = `
 <div>
   <div
     class="pf-c-form__field-group"

package/src/components/Form/examples/Form.md

@@ -12,7 +12,7 @@ propComponents:
     'FormFieldGroup',
     'FormFieldGroupExpandable',
     'FormFieldGroupHeader',
-    'FormFiledGroupHeaderTitleTextObject',
+    'FormFieldGroupHeaderTitleTextObject',
     'Button',
     'Popover',
   ]

package/src/components/Label/Label.tsx

@@ -197,8 +197,11 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const componentRef = React.useRef();
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
-    setIsTooltipVisible(textRef.current && textRef.current.offsetWidth < textRef.current.scrollWidth);
-  }, []);
+    const currTextRef = isEditable ? editableButtonRef : textRef;
+    if (!isEditableActive) {
+      setIsTooltipVisible(currTextRef.current && currTextRef.current.offsetWidth < currTextRef.current.scrollWidth);
+    }
+  }, [isEditableActive]);
   const content = (
     <React.Fragment>
       {icon && <span className={css(styles.labelIcon)}>{icon}</span>}

package/src/components/Menu/MenuItem.tsx

@@ -58,13 +58,15 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   isOnPath?: boolean;
   /** Accessibility label */
   'aria-label'?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
 }
 
 const FlyoutContext = React.createContext({
   direction: 'right' as 'left' | 'right'
 });
 
-export const MenuItem: React.FunctionComponent<MenuItemProps> = ({
+const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   itemId = null,
@@ -86,6 +88,7 @@ export const MenuItem: React.FunctionComponent<MenuItemProps> = ({
   onShowFlyout,
   drilldownMenu,
   isOnPath,
+  innerRef,
   ...props
 }: MenuItemProps) => {
   const {
@@ -293,6 +296,7 @@ export const MenuItem: React.FunctionComponent<MenuItemProps> = ({
         aria-current={getAriaCurrent()}
         disabled={isDisabled}
         role="menuitem"
+        ref={innerRef}
         onClick={(event: any) => {
           onItemSelect(event, onSelect);
           _drill && _drill();
@@ -352,4 +356,8 @@ export const MenuItem: React.FunctionComponent<MenuItemProps> = ({
   );
 };
 
+export const MenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<any>) => (
+  <MenuItemBase {...props} innerRef={ref} />
+));
+
 MenuItem.displayName = 'MenuItem';

package/src/components/Menu/examples/Menu.md

@@ -1246,39 +1246,41 @@ class ViewMoreMenu extends React.Component {
       isLoading: false,
       numOptions: 3
     };
+    this.activeItemRef = React.createRef();
+    this.viewMoreRef = React.createRef();
 
     this.menuOptions = [
-      <MenuItem key={0} itemId={0}>
+      <MenuItem key={0} itemId={'view-more-0'}>
         Action
       </MenuItem>,
       <MenuItem
-        key={2}
-        itemId={1}
+        key={1}
+        itemId={'view-more-1'}
         to="#default-link2"
         // just for demo so that navigation is not triggered
         onClick={event => event.preventDefault()}
       >
         Link
       </MenuItem>,
-      <MenuItem key={3} isDisabled>
+      <MenuItem key={2} itemId="view-more-2" isDisabled>
         Disabled action
       </MenuItem>,
-      <MenuItem key={4} isDisabled to="#default-link4">
+      <MenuItem key={3} itemId="view-more-3" isDisabled to="#default-link4">
         Disabled link
       </MenuItem>,
-      <MenuItem key={5} itemId={2}>
+      <MenuItem key={4} itemId="view-more-4" ref={this.activeItemRef}>
         Action 2
       </MenuItem>,
-      <MenuItem key={6} itemId={3}>
+      <MenuItem key={5} itemId="view-more-5">
         Action 3
       </MenuItem>,
-      <MenuItem key={7} itemId={4}>
+      <MenuItem key={6} itemId="view-more-6">
         Action 4
       </MenuItem>,
-      <MenuItem key={8} itemId={5}>
+      <MenuItem key={7} itemId="view-more-7">
         Action 5
       </MenuItem>,
-      <MenuItem key={9} itemId={6}>
+      <MenuItem key={8} itemId="view-more-8">
         Final option
       </MenuItem>
     ];
@@ -1290,25 +1292,38 @@ class ViewMoreMenu extends React.Component {
       });
     };
 
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
+    this.simulateNetworkCall = networkCallback => {
+      setTimeout(networkCallback, 2000);
     };
 
-    this.getNextValidRef = startingIndex => {
-      let index = startingIndex;
-      while (index < this.menuOptions.length && this.menuOptions[index].ref === null) {
-        index++;
+    this.getNextValidItem = (startingIndex, maxLength) => {
+      let validItem;
+      for (let i = startingIndex; i < maxLength; i++) {
+        if (this.menuOptions[i].props.isDisabled) {
+          continue;
+        } else {
+          validItem = this.menuOptions[i];
+          break;
+        }
       }
-      return this.menuOptions[index].ref.current;
+      return validItem;
+    };
+
+    this.loadMoreOptions = stateCallback => {
+      const newLength =
+        this.state.numOptions + 3 <= this.menuOptions.length ? this.state.numOptions + 3 : this.menuOptions.length;
+      const prevPosition = this.state.numOptions;
+      const nextValidItem = this.getNextValidItem(prevPosition, newLength);
+
+      this.setState({ numOptions: newLength, isLoading: false, activeItem: nextValidItem.props.itemId }, stateCallback);
     };
 
-    this.onViewMoreClick = () => {
+    this.onViewMoreClick = event => {
       this.setState({ isLoading: true });
       this.simulateNetworkCall(() => {
-        const newLength =
-          this.state.numOptions + 3 <= this.menuOptions.length ? this.state.numOptions + 3 : this.menuOptions.length;
-        const prevPosition = this.state.numOptions;
-        this.setState({ numOptions: newLength, isLoading: false });
+        this.loadMoreOptions(() => {
+          this.activeItemRef.current.focus();
+        });
       });
     };
 
@@ -1321,15 +1336,14 @@ class ViewMoreMenu extends React.Component {
 
       this.setState({ isLoading: true });
       this.simulateNetworkCall(() => {
-        const newLength =
-          this.state.numOptions + 3 <= this.menuOptions.length ? this.state.numOptions + 3 : this.menuOptions.length;
-        const prevPosition = this.state.numOptions;
-
-        this.setState({ numOptions: newLength, isLoading: false }, () => {
-          const nextFocus = this.getNextValidRef(prevPosition).querySelector('button, a');
-          this.getNextValidRef(0).querySelector('button, a').tabIndex = -1;
-          nextFocus.tabIndex = 0;
-          nextFocus.focus();
+        this.loadMoreOptions(() => {
+          if (this.viewMoreRef.current) {
+            this.viewMoreRef.current.tabIndex = -1;
+          }
+          const firstMenuItem = this.activeItemRef.current.closest('ul').firstChild;
+          firstMenuItem.querySelector('button, a').tabIndex = -1;
+          this.activeItemRef.current.tabIndex = 0;
+          this.activeItemRef.current.focus();
         });
       });
     };
@@ -1341,7 +1355,17 @@ class ViewMoreMenu extends React.Component {
       <Menu activeItemId={activeItem} onSelect={this.onSelect}>
         <MenuContent>
           <MenuList>
-            {this.menuOptions.slice(0, numOptions)}
+            {this.menuOptions.slice(0, numOptions).map(option => {
+              const props = option.props;
+
+              return (
+                <MenuItem
+                  key={option.key}
+                  {...props}
+                  ref={props.itemId === this.state.activeItem ? this.activeItemRef : null}
+                />
+              );
+            })}
             {numOptions !== this.menuOptions.length && (
               <MenuItem
                 {...(!isLoading && { isLoadButton: true })}
@@ -1349,6 +1373,7 @@ class ViewMoreMenu extends React.Component {
                 onKeyDown={this.onViewMoreKeyDown}
                 onClick={this.onViewMoreClick}
                 itemId="loader"
+                ref={this.viewMoreRef}
               >
                 {isLoading ? <Spinner size="lg" /> : 'View more'}
               </MenuItem>

package/src/components/Nav/NavGroup.tsx

@@ -5,7 +5,7 @@ import { getUniqueId } from '../../helpers/util';
 
 export interface NavGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Title shown for the group */
-  title: string;
+  title?: string;
   /** Anything that can be rendered inside of the group */
   children?: React.ReactNode;
   /** Additional classes added to the container */
@@ -20,12 +20,23 @@ export const NavGroup: React.FunctionComponent<NavGroupProps> = ({
   className = '',
   id = getUniqueId(),
   ...props
-}: NavGroupProps) => (
-  <section className={css(styles.navSection, className)} aria-labelledby={id} {...props}>
-    <h2 className={css(styles.navSectionTitle)} id={id}>
-      {title}
-    </h2>
-    <ul className={css(styles.navList, className)}>{children}</ul>
-  </section>
-);
+}: NavGroupProps) => {
+  if (!title && !props['aria-label']) {
+    // eslint-disable-next-line no-console
+    console.warn("For accessibility reasons an aria-label should be specified on nav groups if a title isn't");
+  }
+
+  const labelledBy = title ? id : undefined;
+
+  return (
+    <section className={css(styles.navSection, className)} aria-labelledby={labelledBy} {...props}>
+      {title && (
+        <h2 className={css(styles.navSectionTitle)} id={id}>
+          {title}
+        </h2>
+      )}
+      <ul className={css(styles.navList, className)}>{children}</ul>
+    </section>
+  );
+};
 NavGroup.displayName = 'NavGroup';

package/src/components/Nav/examples/Nav.md

@@ -55,6 +55,8 @@ class NavDefaultList extends React.Component {
 
 ### Grouped
 
+Note: to keep nav groups accessible an `aria-label` should be supplied if the `title` prop is not passed.
+
 ```js
 import React from 'react';
 import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList, NavGroup } from '@patternfly/react-core';

package/src/components/NotificationDrawer/NotificationDrawer.tsx

@@ -8,15 +8,21 @@ export interface NotificationDrawerProps extends React.HTMLProps<HTMLDivElement>
   children?: React.ReactNode;
   /**  Additional classes added to the notification drawer */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
 }
 
-export const NotificationDrawer: React.FunctionComponent<NotificationDrawerProps> = ({
+const NotificationDrawerBase: React.FunctionComponent<NotificationDrawerProps> = ({
   children,
   className = '',
+  innerRef,
   ...props
 }: NotificationDrawerProps) => (
-  <div {...props} className={css(styles.notificationDrawer, className)}>
+  <div ref={innerRef} {...props} className={css(styles.notificationDrawer, className)}>
     {children}
   </div>
 );
+export const NotificationDrawer = React.forwardRef((props: NotificationDrawerProps, ref: React.Ref<any>) => (
+  <NotificationDrawerBase innerRef={ref} {...props} />
+));
 NotificationDrawer.displayName = 'NotificationDrawer';

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`className is added to the root element 1`] = `"pf-c-notification-drawer extra-class"`;
+exports[`className is added to the root element 1`] = `"extra-class"`;
 
 exports[`renders with PatternFly Core styles 1`] = `
 <div>

package/src/components/Tabs/Tab.tsx

@@ -4,6 +4,7 @@ import { OUIAProps } from '../../helpers';
 import { TabButton } from './TabButton';
 import { TabsContext } from './TabsContext';
 import { css } from '@patternfly/react-styles';
+import { Tooltip } from '../Tooltip';
 
 export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'title'>, OUIAProps {
   /** content rendered inside the Tab content area. */
@@ -30,6 +31,8 @@ export interface TabProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLB
   inoperableEvents?: string[];
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
+  tooltip?: React.ReactElement<any>;
 }
 
 const TabBase: React.FunctionComponent<TabProps> = ({
@@ -45,6 +48,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   inoperableEvents = ['onClick', 'onKeyPress'],
   href,
   innerRef,
+  tooltip,
   ...props
 }: TabProps) => {
   const preventedEvents = inoperableEvents.reduce(
@@ -69,31 +73,34 @@ const TabBase: React.FunctionComponent<TabProps> = ({
       return null;
     }
   };
-  return (
-    <li
-      className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}
-      ref={innerRef}
+
+  const tabButton = (
+    <TabButton
+      parentInnerRef={innerRef}
+      className={css(
+        styles.tabsLink,
+        isDisabled && href && styles.modifiers.disabled,
+        isAriaDisabled && styles.modifiers.ariaDisabled
+      )}
+      disabled={isButtonElement ? isDisabled : null}
+      aria-disabled={isDisabled || isAriaDisabled}
+      tabIndex={getDefaultTabIdx()}
+      onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
+      {...(isAriaDisabled ? preventedEvents : null)}
+      id={`pf-tab-${eventKey}-${childId || uniqueId}`}
+      aria-controls={ariaControls}
+      tabContentRef={tabContentRef}
+      ouiaId={childOuiaId}
+      href={href}
+      {...props}
     >
-      <TabButton
-        className={css(
-          styles.tabsLink,
-          isDisabled && href && styles.modifiers.disabled,
-          isAriaDisabled && styles.modifiers.ariaDisabled
-        )}
-        disabled={isButtonElement ? isDisabled : null}
-        aria-disabled={isDisabled || isAriaDisabled}
-        tabIndex={getDefaultTabIdx()}
-        onClick={(event: any) => handleTabClick(event, eventKey, tabContentRef)}
-        {...(isAriaDisabled ? preventedEvents : null)}
-        id={`pf-tab-${eventKey}-${childId || uniqueId}`}
-        aria-controls={ariaControls}
-        tabContentRef={tabContentRef}
-        ouiaId={childOuiaId}
-        href={href}
-        {...props}
-      >
-        {title}
-      </TabButton>
+      {title}
+    </TabButton>
+  );
+
+  return (
+    <li className={css(styles.tabsItem, eventKey === localActiveKey && styles.modifiers.current, childClassName)}>
+      {tooltip ? <Tooltip {...tooltip.props}>{tabButton}</Tooltip> : tabButton}
     </li>
   );
 };

package/src/components/Tabs/TabButton.tsx

@@ -10,6 +10,8 @@ export interface TabButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement |
   href?: string;
   /** child reference for case in which a TabContent section is defined outside of a Tabs component */
   tabContentRef?: React.Ref<any>;
+  /** Parents' innerRef passed down for properly displaying Tooltips */
+  parentInnerRef?: React.Ref<any>;
 }
 
 export const TabButton: React.FunctionComponent<TabButtonProps> = ({
@@ -17,12 +19,14 @@ export const TabButton: React.FunctionComponent<TabButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   tabContentRef,
   ouiaId,
+  parentInnerRef,
   ouiaSafe,
   ...props
 }: TabButtonProps) => {
   const Component = (props.href ? 'a' : 'button') as any;
+
   return (
-    <Component {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
+    <Component ref={parentInnerRef} {...getOUIAProps(TabButton.displayName, ouiaId, ouiaSafe)} {...props}>
       {children}
     </Component>
   );