@patternfly/react-core 4.198.13 → 4.198.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.13",
+  "version": "4.198.16",
   "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.13",
-    "@patternfly/react-styles": "^4.48.13",
-    "@patternfly/react-tokens": "^4.50.13",
+    "@patternfly/react-icons": "^4.49.16",
+    "@patternfly/react-styles": "^4.48.16",
+    "@patternfly/react-tokens": "^4.50.16",
     "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": "54e64ae9d634521ab81f085c6c1c0aa503d2a123"
+  "gitHead": "752c9d1a3638f356f2e68f670e79356f03ebea8e"
 }

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/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>
   );