@patternfly/react-core 5.0.0-alpha.8 → 5.0.0-alpha.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.8",
+  "version": "5.0.0-alpha.9",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "1c5b0a362bcd0d6cf448b11f4af9ca641ca398d6"
+  "gitHead": "81e9bbe05401ce5c3a1acf80765ed713ec5402a0"
 }

package/src/components/BackToTop/BackToTop.tsx

@@ -10,7 +10,7 @@ interface BackToTopProps extends React.DetailedHTMLProps<React.HTMLProps<HTMLDiv
   className?: string;
   /** Title to appear in back to top button. */
   title?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Selector for the scrollable element to spy on. Not passing a selector defaults to spying on window scroll events. */
   scrollableSelector?: string;

package/src/components/Button/Button.tsx

@@ -80,7 +80,7 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   tabIndex?: number;
   /** Adds danger styling to secondary or link button variants */
   isDanger?: boolean;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
   countOptions?: BadgeCountObject;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -18,9 +18,11 @@ export const CodeBlock: React.FunctionComponent<CodeBlockProps> = ({
   ...props
 }: CodeBlockProps) => (
   <div className={css(styles.codeBlock, className)} {...props}>
-    <div className={css(styles.codeBlockHeader)}>
-      <div className={css(styles.codeBlockActions)}>{actions && actions}</div>
-    </div>
+    {actions && (
+      <div className={css(styles.codeBlockHeader)}>
+        <div className={css(styles.codeBlockActions)}>{actions}</div>
+      </div>
+    )}
     <div className={css(styles.codeBlockContent)}>{children}</div>
   </div>
 );

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

@@ -5,13 +5,6 @@ exports[`CodeBlock renders successfully 1`] = `
   <div
     class="pf-c-code-block"
   >
-    <div
-      class="pf-c-code-block__header"
-    >
-      <div
-        class="pf-c-code-block__actions"
-      />
-    </div>
     <div
       class="pf-c-code-block__content"
     >

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -91,7 +91,6 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
     const spinner = (
       <Spinner
         diameter="1em"
-        isSVG
         aria-valuetext={defaultProgressAriaValueText}
         aria-live="polite"
         aria-label={defaultProgressAriaLabel}

package/src/components/Icon/Icon.tsx

@@ -39,11 +39,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   defaultProgressArialabel = 'Loading...',
   ...props
 }: IconComponentProps) => {
-  const _progressIcon = progressIcon ? (
-    progressIcon
-  ) : (
-    <Spinner diameter="1em" isSVG aria-label={defaultProgressArialabel} />
-  );
+  const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
 
   return (
     <span

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -16,7 +16,7 @@ export const IconProgress: React.FunctionComponent = () => {
           name="toggle-icon-progress-custom"
         />
       </div>
-      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" isSVG aria-label="Loading..." />}>
+      <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
         <CheckCircleIcon />
       </Icon>
     </React.Fragment>

package/src/components/Menu/MenuGroup.tsx

@@ -11,7 +11,7 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   label?: React.ReactNode;
   /** ID for title label */
   titleId?: string;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Group label heading level. Default is h1. */
   labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/Menu/MenuInput.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 export interface MenuInputProps extends React.HTMLProps<HTMLElement> {
   /** Items within input */
   children?: React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/Menu/MenuItemAction.tsx

@@ -19,7 +19,7 @@ export interface MenuItemActionProps extends Omit<React.HTMLProps<HTMLButtonElem
   isDisabled?: boolean;
   /** Identifies the action item in the onActionClick on the Menu */
   actionId?: any;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
 }
 

package/src/components/MenuToggle/MenuToggle.tsx

@@ -41,7 +41,7 @@ export interface MenuToggleProps
   icon?: React.ReactNode;
   /** Optional badge rendered inside the toggle, after the children content */
   badge?: BadgeProps | React.ReactNode;
-  /** Forwarded ref */
+  /** @hide Forwarded ref */
   innerRef?: React.Ref<MenuToggleElement>;
 }
 

package/src/components/NotificationBadge/NotificationBadge.tsx

@@ -28,16 +28,13 @@ export interface NotificationBadgeProps extends Omit<ButtonProps, 'variant'> {
    * notification badge.
    */
   isExpanded?: boolean;
-  /** @deprecated Use the variant prop instead - Adds styling to the notification badge to indicate it has been read. */
-  isRead?: boolean;
   /** Determines the variant of the notification badge. */
   variant?: NotificationBadgeVariant | 'read' | 'unread' | 'attention';
 }
 
 export const NotificationBadge: React.FunctionComponent<NotificationBadgeProps> = ({
-  isRead,
   children,
-  variant = isRead ? 'read' : 'unread',
+  variant = NotificationBadgeVariant.read,
   count = 0,
   attentionIcon = <AttentionBellIcon />,
   icon = <BellIcon />,

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

@@ -2,13 +2,6 @@ import { NotificationBadge } from '../NotificationBadge';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
-Object.values([true, false]).forEach(isRead => {
-  test(`${isRead} NotificationBadge`, () => {
-    const { asFragment } = render(<NotificationBadge isRead={isRead} />);
-    expect(asFragment()).toMatchSnapshot();
-  });
-});
-
 Object.values([true, false]).forEach(attentionVariant => {
   test(`${attentionVariant} NotificationBadge needs attention`, () => {
     const { asFragment } = render(

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

@@ -6,7 +6,7 @@ exports[`NotificationBadge count 1`] = `
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-5"
+    data-ouia-component-id="OUIA-Generated-Button-plain-3"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -37,45 +37,13 @@ exports[`NotificationBadge count 1`] = `
 </DocumentFragment>
 `;
 
-exports[`false NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-2"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-unread"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`false NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-4"
+    data-ouia-component-id="OUIA-Generated-Button-plain-2"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"
@@ -89,45 +57,13 @@ exports[`false NotificationBadge needs attention 1`] = `
 </DocumentFragment>
 `;
 
-exports[`true NotificationBadge 1`] = `
-<DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-expanded="false"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    type="button"
-  >
-    <span
-      class="pf-c-notification-badge pf-m-read"
-    >
-      <svg
-        aria-hidden="true"
-        fill="currentColor"
-        height="1em"
-        role="img"
-        style="vertical-align: -0.125em;"
-        viewBox="0 0 896 1024"
-        width="1em"
-      >
-        <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
-        />
-      </svg>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
 exports[`true NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
     aria-expanded="false"
     class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-3"
+    data-ouia-component-id="OUIA-Generated-Button-plain-1"
     data-ouia-component-type="PF4/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Select/SelectMenu.tsx

@@ -40,6 +40,7 @@ export interface SelectMenuProps extends Omit<React.HTMLProps<HTMLElement>, 'che
   keyHandler?: (index: number, innerIndex: number, position: string) => void;
   /** Flag indicating select has an inline text input for filtering */
   hasInlineFilter?: boolean;
+  /** @hide forwarded ref */
   innerRef?: any;
   /** Content rendered in the footer of the select menu */
   footer?: React.ReactNode;

package/src/components/Spinner/Spinner.tsx

@@ -9,15 +9,13 @@ export enum spinnerSize {
   xl = 'xl'
 }
 
-export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'size'> {
+export interface SpinnerProps extends React.SVGProps<SVGSVGElement> {
   /** Additional classes added to the Spinner. */
   className?: string;
   /** Size variant of progress. */
   size?: 'sm' | 'md' | 'lg' | 'xl';
   /** Text describing that current loading status or progress */
   'aria-valuetext'?: string;
-  /** Whether to use an SVG (new) rather than a span (old) */
-  isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
   /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
@@ -33,37 +31,24 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   className = '',
   size = 'xl',
   'aria-valuetext': ariaValueText = 'Loading...',
-  isSVG = true,
   diameter,
   isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
-}: SpinnerProps) => {
-  const Component = isSVG ? 'svg' : ('span' as any);
-
-  return (
-    <Component
-      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
-      role="progressbar"
-      aria-valuetext={ariaValueText}
-      {...(isSVG && { viewBox: '0 0 100 100' })}
-      {...(diameter && { style: { '--pf-c-spinner--diameter': diameter } })}
-      {...(ariaLabel && { 'aria-label': ariaLabel })}
-      {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
-      {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
-      {...props}
-    >
-      {isSVG ? (
-        <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
-      ) : (
-        <React.Fragment>
-          <span className={css(styles.spinnerClipper)} />
-          <span className={css(styles.spinnerLeadBall)} />
-          <span className={css(styles.spinnerTailBall)} />
-        </React.Fragment>
-      )}
-    </Component>
-  );
-};
+}: SpinnerProps) => (
+  <svg
+    className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
+    role="progressbar"
+    aria-valuetext={ariaValueText}
+    viewBox="0 0 100 100"
+    {...(diameter && { style: { ['--pf-c-spinner--diameter']: diameter } as React.CSSProperties })}
+    {...(ariaLabel && { 'aria-label': ariaLabel })}
+    {...(ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy })}
+    {...(!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' })}
+    {...props}
+  >
+    <circle className={styles.spinnerPath} cx="50" cy="50" r="45" fill="none" />
+  </svg>
+);
 Spinner.displayName = 'Spinner';

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

@@ -25,10 +25,4 @@ test('large spinner', () => {
 test('extra large spinner', () => {
   const { asFragment } = render(<Spinner size="xl" />);
   expect(asFragment()).toMatchSnapshot();
-});
-
-test('non-SVG spinner', () => {
-  const { asFragment } = render(<Spinner isSVG={false} />)
-
-  expect(asFragment()).toMatchSnapshot();
-})
+});

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

@@ -60,27 +60,6 @@ exports[`medium spinner 1`] = `
 </DocumentFragment>
 `;
 
-exports[`non-SVG spinner 1`] = `
-<DocumentFragment>
-  <span
-    aria-label="Contents"
-    aria-valuetext="Loading..."
-    class="pf-c-spinner pf-m-xl"
-    role="progressbar"
-  >
-    <span
-      class="pf-c-spinner__clipper"
-    />
-    <span
-      class="pf-c-spinner__lead-ball"
-    />
-    <span
-      class="pf-c-spinner__tail-ball"
-    />
-  </span>
-</DocumentFragment>
-`;
-
 exports[`simple spinner 1`] = `
 <DocumentFragment>
   <svg

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -1,4 +1,4 @@
 import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
-export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner aria-label="Contents of the basic example" />;

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

@@ -2,5 +2,5 @@ import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerCustomSize: React.FunctionComponent = () => (
-  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+  <Spinner diameter="80px" aria-label="Contents of the custom size example" />
 );

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -6,23 +6,23 @@ export const SpinnerInline: React.FunctionComponent = () => (
     <TextContent>
       <Text component="h1">
         Heading
-        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+        <Spinner isInline aria-label="Spinner in a heading" />
       </Text>
       <Text component="p">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
       </Text>
       <Text component="h2">
         Second level
-        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+        <Spinner isInline aria-label="spinner in a subheading" />
       </Text>
       <Text component="p">
         Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
-        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
-        urna vel cursus venenatis. Suspendisse potenti.
+        <Spinner isInline aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium urna vel
+        cursus venenatis. Suspendisse potenti.
       </Text>
       <small>
         Sometimes you need small text
-        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+        <Spinner isInline aria-label="Spinner in a small element" />
       </small>
     </TextContent>
   </React.Fragment>

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -3,9 +3,9 @@ import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerSizeVariations: React.FunctionComponent = () => (
   <React.Fragment>
-    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
-    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
-    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
-    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+    <Spinner size="sm" aria-label="Contents of the small example" />
+    <Spinner size="md" aria-label="Contents of the medium example" />
+    <Spinner size="lg" aria-label="Contents of the large example" />
+    <Spinner size="xl" aria-label="Contents of the extra large example" />
   </React.Fragment>
 );

package/src/components/Tabs/Tab.tsx

@@ -33,7 +33,7 @@ export interface TabProps
   isAriaDisabled?: boolean;
   /** Events to prevent when the button is in an aria-disabled state */
   inoperableEvents?: string[];
-  /** Forwarded ref */
+  /** @hide 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>;

package/src/components/Tabs/TabContent.tsx

@@ -15,7 +15,7 @@ export interface TabContentProps extends Omit<React.HTMLProps<HTMLElement>, 'ref
   activeKey?: number | string;
   /** uniquely identifies the controlling Tab if used outside Tabs component */
   eventKey?: number | string;
-  /** Callback for the section ref */
+  /** @hide Callback for the section ref */
   innerRef?: React.Ref<any>;
   /** id passed from parent to identify the content section */
   id: string;

package/src/components/TextArea/TextArea.tsx

@@ -44,7 +44,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the text area. */
+  /** @hide A reference object to attach to the text area. */
   innerRef?: React.RefObject<any>;
 }
 

package/src/components/TextInput/TextInput.tsx

@@ -61,7 +61,7 @@ export interface TextInputProps
   value?: string | number;
   /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the text input box. */
+  /** @hide A reference object to attach to the text input box. */
   innerRef?: React.RefObject<any>;
   /** Trim text on left */
   isLeftTruncated?: boolean;

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -37,13 +37,13 @@ export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivEle
   value?: string | number;
   /** Placeholder value for the input */
   placeholder?: string;
-  /** A reference object to attach to the input box */
+  /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
   /** Name for the input */
   name?: string;
 }
 
-export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps> = ({
+const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> = ({
   children,
   className,
   icon,
@@ -99,4 +99,10 @@ export const TextInputGroupMain: React.FunctionComponent<TextInputGroupMainProps
   );
 };
 
+export const TextInputGroupMain = React.forwardRef(
+  (props: TextInputGroupMainProps, ref: React.Ref<HTMLInputElement>) => (
+    <TextInputGroupMainBase innerRef={ref as React.MutableRefObject<any>} {...props} />
+  )
+);
+
 TextInputGroupMain.displayName = 'TextInputGroupMain';

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -49,7 +49,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
-  /** Reference to pass to this group if it has .pf-m-chip-container modifier */
+  /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }