@patternfly/react-core 6.2.0-prerelease.8 → 6.2.0

package/src/components/Timestamp/examples/TimestampCustomTooltip.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampCustomTooltip: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampDefault.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp } from '@patternfly/react-core';
 
 export const TimestampDefault: React.FunctionComponent = () => (

package/src/components/Timestamp/examples/TimestampDefaultTooltip.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Timestamp, TimestampTooltipVariant } from '@patternfly/react-core';
 
 export const TimestampDefaultTooltip: React.FunctionComponent = () => {

package/src/components/Title/Title.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Title/title';
 import { useOUIAProps, OUIAProps } from '../../helpers';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Title } from '../Title';
 import styles from '@patternfly/react-styles/css/components/Title/title';

package/src/components/Title/examples/Title.md

@@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-title
 propComponents: ['Title']
 ---
 
+import { Fragment } from 'react';
+
 ## Examples
 ### Default Sizes
 ```ts file="./TitleDefaultSizes.tsx"

package/src/components/Title/examples/TitleCustomSizes.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Title, TitleSizes } from '@patternfly/react-core';
 
 export const TitleCustomSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Title headingLevel="h1" size={TitleSizes['4xl']}>
       4xl title
     </Title>
@@ -21,5 +21,5 @@ export const TitleCustomSizes: React.FunctionComponent = () => (
     <Title headingLevel="h6" size="md">
       md title
     </Title>
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Title/examples/TitleDefaultSizes.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Title } from '@patternfly/react-core';
 
 export const TitleDefaultSizes: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Title headingLevel="h1">H1-styled title</Title>
     <Title headingLevel="h2">H2-styled title</Title>
     <Title headingLevel="h3">H3-styled title</Title>
     <Title headingLevel="h4">H4-styled title</Title>
     <Title headingLevel="h5">H5-styled title</Title>
     <Title headingLevel="h6">H6-styled title</Title>
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { ToggleGroupItem, ToggleGroupItemProps } from './ToggleGroupItem';
@@ -24,10 +24,10 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, (child) =>
-    !(React.isValidElement(child) && child.type === ToggleGroupItem)
+  const toggleGroupItemList = Children.map(children, (child) =>
+    !(isValidElement(child) && child.type === ToggleGroupItem)
       ? child
-      : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
+      : cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})
   );
 
   return (

package/src/components/ToggleGroup/ToggleGroupItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 import { ToggleGroupItemVariant, ToggleGroupItemElement } from './ToggleGroupItemElement';

package/src/components/ToggleGroup/ToggleGroupItemElement.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

package/src/components/ToggleGroup/__tests__/ToggleGroupItemElement.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToggleGroupItemElement, ToggleGroupItemVariant } from '../ToggleGroupItemElement';
 

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -6,6 +6,7 @@ propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
 import './toggleGroup.css';
 
+import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

package/src/components/ToggleGroup/examples/ToggleGroupCompact.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupCompact: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-compact-1': false,
     'toggle-group-compact-2': false
   });

package/src/components/ToggleGroup/examples/ToggleGroupDefaultMultiple.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-multiple-1': false,
     'toggle-group-multiple-2': false
   });
-  const [disableAll, setDisableAll] = React.useState(false);
+  const [disableAll, setDisableAll] = useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));

package/src/components/ToggleGroup/examples/ToggleGroupDefaultSingle.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 
 export const ToggleGroupDefaultSingle: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState('');
+  const [isSelected, setIsSelected] = useState('');
   const handleItemClick = (event, _isSelected: boolean) => {
     const id = event.currentTarget.id;
     setIsSelected(id);

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'toggle-group-icons-1': false,
     'toggle-group-icons-2': false,
     'toggle-group-icons-3': true

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
-  const [isSelected, setIsSelected] = React.useState({
+  const [isSelected, setIsSelected] = useState({
     'text-icons-1': false,
     'text-icons-2': false,
     'text-icons-3': true

package/src/components/Toolbar/Toolbar.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 import { css } from '@patternfly/react-styles';
@@ -57,6 +57,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   ouiaSafe?: boolean;
   /** Background color variant of the toolbar */
   colorVariant?: ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary';
+  /** Flag indicating the toolbar padding is removed */
+  hasNoPadding?: boolean;
 }
 
 export interface ToolbarState {
@@ -74,10 +76,11 @@ interface FilterInfo {
   [key: string]: number;
 }
 
-class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
+class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
-  labelGroupContentRef = React.createRef<HTMLDivElement>();
+  labelGroupContentRef = createRef<HTMLDivElement>();
   staticFilterInfo = {};
+  hasNoPadding = false;
   state = {
     isManagedToggleExpanded: false,
     filterInfo: {},
@@ -128,6 +131,7 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
 
   renderToolbar = (randomId: string) => {
     const {
+      hasNoPadding,
       clearAllFilters,
       clearFiltersButtonText,
       collapseListedFiltersBreakpoint,
@@ -159,6 +163,7 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
           <div
             className={css(
               styles.toolbar,
+              hasNoPadding && styles.modifiers.noPadding,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
@@ -16,6 +16,15 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Value to set for content wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -32,10 +41,10 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   toolbarId?: string;
 }
 
-class ToolbarContent extends React.Component<ToolbarContentProps> {
+class ToolbarContent extends Component<ToolbarContentProps> {
   static displayName = 'ToolbarContent';
-  private expandableContentRef = React.createRef<HTMLDivElement>();
-  private labelContainerRef = React.createRef<HTMLDivElement>();
+  private expandableContentRef = createRef<HTMLDivElement>();
+  private labelContainerRef = createRef<HTMLDivElement>();
   private static currentId = 0;
 
   static defaultProps: ToolbarContentProps = {
@@ -50,6 +59,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
+      rowWrap,
       alignItems,
       clearAllFilters,
       showClearFiltersButton,
@@ -95,6 +105,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                     <div
                       className={css(
                         styles.toolbarContentSection,
+                        formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
                         alignItems === 'baseline' && styles.modifiers.alignItemsBaseline

package/src/components/Toolbar/ToolbarExpandIconWrapper.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 
-import { RefObject } from 'react';
 import { ToolbarGroup } from './ToolbarGroup';
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
@@ -15,7 +14,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   /** Flag indicating the expandable content is expanded */
   isExpanded?: boolean;
   /** Expandable content reference for passing to data toolbar children */
-  expandableContentRef?: RefObject<HTMLDivElement>;
+  expandableContentRef?: RefObject<HTMLDivElement | null>;
   /** Label container reference for passing to data toolbar children */
   labelContainerRef?: RefObject<any>;
   /** optional callback for clearing all filters in the toolbar */
@@ -26,7 +25,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   showClearFiltersButton: boolean;
 }
 
-class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
+class ToolbarExpandableContent extends Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, Fragment } from 'react';
 import * as ReactDOM from 'react-dom';
 import { ToolbarItem, ToolbarItemProps } from './ToolbarItem';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
@@ -30,7 +30,7 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   deleteLabel?: (category: string | ToolbarLabelGroup, label: ToolbarLabel | string) => void;
   /** Customizable "Show Less" text string for the label group */
   labelGroupExpandedText?: string;
-  /** Customizeable template string for the label group. Use variable "${remaining}" for the overflow label count. */
+  /** Customizable template string for the label group. Use variable "${remaining}" for the overflow label count. */
   labelGroupCollapsedText?: string;
   /** Content to be rendered inside the data toolbar item associated with the label group */
   children: React.ReactNode;
@@ -39,14 +39,14 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
   /** Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
-  expandableLabelContainerRef?: React.RefObject<HTMLDivElement>;
+  expandableLabelContainerRef?: React.RefObject<HTMLDivElement | null>;
 }
 
 interface ToolbarFilterState {
   isMounted: boolean;
 }
 
-class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -131,24 +131,24 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
 
     if (!_isExpanded && this.state.isMounted) {
       return (
-        <React.Fragment>
+        <Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
           {labelGroupContentRef?.current?.firstElementChild !== null &&
             ReactDOM.createPortal(labelGroup, labelGroupContentRef.current.firstElementChild)}
-        </React.Fragment>
+        </Fragment>
       );
     }
 
     return (
       <ToolbarContentContext.Consumer>
         {({ labelContainerRef }) => (
-          <React.Fragment>
+          <Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
             {labelContainerRef.current && ReactDOM.createPortal(labelGroup, labelContainerRef.current)}
             {expandableLabelContainerRef &&
               expandableLabelContainerRef.current &&
               ReactDOM.createPortal(labelGroup, expandableLabelContainerRef.current)}
-          </React.Fragment>
+          </Fragment>
         )}
       </ToolbarContentContext.Consumer>
     );

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
@@ -157,6 +157,15 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
+  /** Value to set for row wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
   /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
@@ -165,7 +174,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   innerRef?: React.RefObject<any>;
 }
 
-class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
+class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
   render() {
     const {
       visibility,
@@ -175,6 +184,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       gap,
       columnGap,
       rowGap,
+      rowWrap,
       className,
       variant,
       children,
@@ -203,6 +213,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
@@ -223,6 +234,6 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   }
 }
 
-export const ToolbarGroup = React.forwardRef((props: ToolbarGroupProps, ref: any) => (
+export const ToolbarGroup = forwardRef((props: ToolbarGroupProps, ref: any) => (
   <ToolbarGroupWithRef {...props} innerRef={ref} />
 ));

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
@@ -152,6 +151,15 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
       | 'rowGap_3xl'
       | 'rowGap_4xl';
   };
+  /** Value to set for row wrapping at various breakpoints */
+  rowWrap?: {
+    default?: 'wrap' | 'nowrap';
+    sm?: 'wrap' | 'nowrap';
+    md?: 'wrap' | 'nowrap';
+    lg?: 'wrap' | 'nowrap';
+    xl?: 'wrap' | 'nowrap';
+    '2xl'?: 'wrap' | 'nowrap';
+  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -169,6 +177,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   gap,
   columnGap,
   rowGap,
+  rowWrap,
   align,
   alignSelf,
   alignItems,
@@ -197,6 +206,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -1,9 +1,8 @@
-import * as React from 'react';
+import { Component, RefObject } from 'react';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { canUseDOM } from '../../helpers/util';
 
-import { RefObject } from 'react';
 import { ToolbarItem } from './ToolbarItem';
 import { Button } from '../Button';
 import { ToolbarGroup } from './ToolbarGroup';
@@ -33,7 +32,7 @@ export interface ToolbarLabelGroupContentProps extends React.HTMLProps<HTMLDivEl
   customLabelGroupContent?: React.ReactNode;
 }
 
-class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentProps> {
+class ToolbarLabelGroupContent extends Component<ToolbarLabelGroupContentProps> {
   static displayName = 'ToolbarLabelGroupContent';
   static defaultProps: PickOptional<ToolbarLabelGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, createRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
@@ -151,10 +151,10 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   clearFiltersButtonText?: string;
 }
 
-class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
+class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
-  toggleRef = React.createRef<HTMLButtonElement>();
-  expandableContentRef = React.createRef<HTMLDivElement>();
+  toggleRef = createRef<HTMLButtonElement>();
+  expandableContentRef = createRef<HTMLDivElement>();
 
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { RefObject } from 'react';
+import { createContext, RefObject } from 'react';
 import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_md';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_xl';
@@ -8,7 +7,7 @@ import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/t_global_brea
 export interface ToolbarContextProps {
   isExpanded: boolean;
   toggleIsExpanded: () => void;
-  labelGroupContentRef: RefObject<HTMLDivElement>;
+  labelGroupContentRef: RefObject<HTMLDivElement | null>;
   updateNumberFilters: (categoryName: string, numberOfFilters: number) => void;
   numberOfFilters: number;
   clearAllFilters?: () => void;
@@ -18,7 +17,7 @@ export interface ToolbarContextProps {
   customLabelGroupContent?: React.ReactNode;
 }
 
-export const ToolbarContext = React.createContext<ToolbarContextProps>({
+export const ToolbarContext = createContext<ToolbarContextProps>({
   isExpanded: false,
   toggleIsExpanded: () => {},
   labelGroupContentRef: null,
@@ -28,7 +27,7 @@ export const ToolbarContext = React.createContext<ToolbarContextProps>({
 });
 
 interface ToolbarContentContextProps {
-  expandableContentRef: RefObject<HTMLDivElement>;
+  expandableContentRef: RefObject<HTMLDivElement | null>;
   expandableContentId: string;
   labelContainerRef: RefObject<any>;
   isExpanded?: boolean;
@@ -37,7 +36,7 @@ interface ToolbarContentContextProps {
   showClearFiltersButton?: boolean;
 }
 
-export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
+export const ToolbarContentContext = createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
   labelContainerRef: null,

package/src/components/Toolbar/__tests__/Generated/ToolbarChipGroupContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarLabelGroupContent } from '../../ToolbarLabelGroupContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarContent } from '../../ToolbarContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarExpandableContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarExpandableContent } from '../../ToolbarExpandableContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Toolbar/__tests__/Generated/ToolbarGroup.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarGroup } from '../../ToolbarGroup';
 // any missing imports can usually be resolved by adding them here