@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -46,13 +46,6 @@ interface ToolbarFilterState {
   isMounted: boolean;
 }
 
-const getCategoryKey = (categoryName: string | ToolbarLabelGroup): string => {
-  if (typeof categoryName === 'string') {
-    return categoryName;
-  }
-  return categoryName.key;
-};
-
 class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
@@ -70,16 +63,24 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
   }
 
   componentDidMount() {
-    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
+    const { categoryName, labels } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      labels.length
+    );
     this.setState({ isMounted: true });
   }
 
   componentDidUpdate() {
-    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), this.props.labels.length);
-  }
-
-  componentWillUnmount() {
-    this.context.updateNumberFilters(getCategoryKey(this.props.categoryName), 0);
+    const { categoryName, labels } = this.props;
+    this.context.updateNumberFilters(
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString(),
+      labels.length
+    );
   }
 
   render() {
@@ -98,7 +99,10 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
     } = this.props;
     const { isExpanded: managedIsExpanded, labelGroupContentRef } = this.context;
     const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
-    const categoryKey = getCategoryKey(categoryName);
+    const categoryKey =
+      typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
+        ? categoryName.key
+        : categoryName.toString();
 
     const labelGroup = labels.length ? (
       <ToolbarItem variant="label-group">
@@ -112,11 +116,11 @@ class ToolbarFilter extends Component<ToolbarFilterProps, ToolbarFilterState> {
         >
           {labels.map((label) =>
             typeof label === 'string' ? (
-              <Label variant="outline" key={label} onClose={() => deleteLabel?.(categoryKey, label)}>
+              <Label variant="outline" key={label} onClose={() => deleteLabel(categoryKey, label)}>
                 {label}
               </Label>
             ) : (
-              <Label key={label.key} onClose={() => deleteLabel?.(categoryKey, label)}>
+              <Label key={label.key} onClose={() => deleteLabel(categoryKey, label)}>
                 {label.node}
               </Label>
             )

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -174,15 +174,6 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'wrap' | 'nowrap';
     '2xl'?: 'wrap' | 'nowrap';
   };
-  /** Sets flex-grow at various breakpoints to allow the group to consume available main-axis space */
-  flexGrow?: {
-    default?: 'flexGrow';
-    sm?: 'flexGrow';
-    md?: 'flexGrow';
-    lg?: 'flexGrow';
-    xl?: 'flexGrow';
-    '2xl'?: 'flexGrow';
-  };
   /** 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. */
@@ -203,7 +194,6 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
       columnGap,
       rowGap,
       rowWrap,
-      flexGrow,
       className,
       variant,
       children,
@@ -234,7 +224,6 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(flexGrow, styles, '', getBreakpoint(width)),
               alignItems === 'start' && styles.modifiers.alignItemsStart,
               alignItems === 'center' && styles.modifiers.alignItemsCenter,
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,

package/src/components/Toolbar/ToolbarItem.tsx

@@ -1,9 +1,8 @@
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
-import { formatBreakpointMods, setBreakpointCssVars, toCamel } from '../../helpers/util';
+import { formatBreakpointMods, toCamel } from '../../helpers/util';
 import { Divider } from '../Divider';
 import { PageContext } from '../Page/PageContext';
-import cssToolbarItemWidth from '@patternfly/react-tokens/dist/esm/c_toolbar__item_Width';
 
 export enum ToolbarItemVariant {
   separator = 'separator',
@@ -169,24 +168,6 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'wrap' | 'nowrap';
     '2xl'?: 'wrap' | 'nowrap';
   };
-  /** Sets flex-grow at various breakpoints to allow the item to consume available main-axis space */
-  flexGrow?: {
-    default?: 'flexGrow';
-    sm?: 'flexGrow';
-    md?: 'flexGrow';
-    lg?: 'flexGrow';
-    xl?: 'flexGrow';
-    '2xl'?: 'flexGrow';
-  };
-  /** Width at various breakpoints. */
-  widths?: {
-    default?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    '2xl'?: string;
-  };
   /** id for this data toolbar item */
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
@@ -206,8 +187,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   columnGap,
   rowGap,
   rowWrap,
-  flexGrow,
-  widths,
   align,
   alignSelf,
   alignItems,
@@ -216,7 +195,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   isAllExpanded,
   isOverflowContainer,
   role,
-  style,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -225,15 +203,12 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
       <Divider
         className={css(className)}
         orientation={{ default: 'vertical' }}
-        style={style}
         {...props}
         {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
       />
     );
   }
 
-  const responsiveWidths = widths ? setBreakpointCssVars(widths, cssToolbarItemWidth.name) : {};
-
   return (
     <PageContext.Consumer>
       {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
@@ -251,7 +226,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(rowWrap, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(flexGrow, styles, '', getBreakpoint(width)),
             alignItems === 'start' && styles.modifiers.alignItemsStart,
             alignItems === 'center' && styles.modifiers.alignItemsCenter,
             alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
@@ -263,7 +237,6 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
           role={role}
-          style={{ ...style, ...responsiveWidths }}
           {...props}
         >
           {children}

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

@@ -63,20 +63,4 @@ describe('ToolbarGroup', () => {
       expect(screen.getByTestId('toolbargroup')).toHaveClass(expectedClass);
     });
   });
-
-  describe('ToolbarGroup flexGrow', () => {
-    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
-
-    describe.each(bps)(`flexGrow at various breakpoints`, (bp) => {
-      it(`should render with pf-m-flex-grow when flexGrow is set at ${bp}`, () => {
-        render(
-          <ToolbarGroup data-testid="toolbargroup" flexGrow={{ [bp]: 'flexGrow' }}>
-            Test
-          </ToolbarGroup>
-        );
-        const bpFlexGrowClass = bp === 'default' ? 'pf-m-flex-grow' : `pf-m-flex-grow-on-${bp}`;
-        expect(screen.getByTestId('toolbargroup')).toHaveClass(bpFlexGrowClass);
-      });
-    });
-  });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -63,46 +63,4 @@ describe('ToolbarItem', () => {
       expect(screen.getByTestId('toolbaritem')).toHaveClass(expectedClass);
     });
   });
-
-  describe('ToolbarItem flexGrow', () => {
-    const bps = ['default', 'sm', 'md', 'lg', 'xl', '2xl'];
-
-    describe.each(bps)(`flexGrow at various breakpoints`, (bp) => {
-      it(`should render with pf-m-flex-grow when flexGrow is set at ${bp}`, () => {
-        render(
-          <ToolbarItem data-testid="toolbaritem" flexGrow={{ [bp]: 'flexGrow' }}>
-            Test
-          </ToolbarItem>
-        );
-        const bpFlexGrowClass = bp === 'default' ? 'pf-m-flex-grow' : `pf-m-flex-grow-on-${bp}`;
-        expect(screen.getByTestId('toolbaritem')).toHaveClass(bpFlexGrowClass);
-      });
-    });
-  });
-
-  describe('ToolbarItem widths', () => {
-    it('should apply width CSS variable when widths prop is set', () => {
-      render(
-        <ToolbarItem data-testid="toolbaritem" widths={{ default: '200px' }}>
-          Test
-        </ToolbarItem>
-      );
-      const item = screen.getByTestId('toolbaritem');
-      expect(item).toHaveStyle('--pf-v6-c-toolbar__item--Width: 200px');
-    });
-
-    it('should apply responsive width CSS variables when widths prop has breakpoint values', () => {
-      render(
-        <ToolbarItem data-testid="toolbaritem" widths={{ default: '100px', md: '200px', xl: '300px' }}>
-          Test
-        </ToolbarItem>
-      );
-      const item = screen.getByTestId('toolbaritem');
-      expect(item).toHaveStyle({
-        '--pf-v6-c-toolbar__item--Width': '100px',
-        '--pf-v6-c-toolbar__item--Width-on-md': '200px',
-        '--pf-v6-c-toolbar__item--Width-on-xl': '300px'
-      });
-    });
-  });
 });

package/src/components/Toolbar/examples/Toolbar.md

@@ -8,11 +8,11 @@ section: components
 import { Fragment, useState, useLayoutEffect, useRef } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 ## Examples
 
@@ -154,11 +154,3 @@ The toolbar content section will wrap by default, but you can set the `rowRap` p
 ```ts file="./ToolbarItemSpacers.tsx"
 
 ```
-
-### FlexGrow and widths
-
-You can use the `flexGrow` prop to make toolbar items or groups expand to fill available space. The `widths` prop allows you to set custom widths at various breakpoints.
-
-```ts file="./ToolbarFlexGrowAndWidths.tsx"
-
-```

package/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx

@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -63,7 +63,6 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onStatusToggle()}
                 isExpanded={statusIsExpanded}
@@ -94,7 +93,6 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onRiskToggle()}
                 isExpanded={riskIsExpanded}
@@ -126,7 +124,7 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );

package/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx

@@ -12,7 +12,7 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -68,7 +68,6 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onStatusToggle()}
                 isExpanded={statusIsExpanded}
@@ -99,7 +98,6 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => onRiskToggle()}
                 isExpanded={riskIsExpanded}
@@ -131,7 +129,7 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
   );
 
   const items = (
-    <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
       {toggleGroupItems}
     </ToolbarToggleGroup>
   );

package/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx

@@ -14,10 +14,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
   const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);
@@ -110,7 +110,6 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setStatusIsExpanded(!statusIsExpanded)}
                 isExpanded={statusIsExpanded}
@@ -143,7 +142,6 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setRiskIsExpanded(!riskIsExpanded)}
                 isExpanded={riskIsExpanded}
@@ -171,7 +169,7 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
@@ -179,10 +177,10 @@ export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
+          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
+          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
     </Fragment>

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -12,8 +12,8 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarGroups: React.FunctionComponent = () => {
   const firstOptions = ['A', 'B', 'C'];
@@ -62,7 +62,6 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('first')}
               isExpanded={firstIsExpanded}
@@ -93,7 +92,6 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('second')}
               isExpanded={secondIsExpanded}
@@ -124,7 +122,6 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('third')}
               isExpanded={thirdIsExpanded}
@@ -160,10 +157,10 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
+        <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
+        <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
       </ToolbarItem>
     </Fragment>
   );

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -23,8 +23,8 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -136,7 +136,6 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onResourceToggle()}
               isExpanded={resourceIsExpanded}
@@ -171,7 +170,6 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
-              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onStatusToggle()}
               isExpanded={statusIsExpanded}
@@ -205,7 +203,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarToggleGroup variant="label-group" toggleIcon={<RhUiFilterFillIcon />} breakpoint="lg">
+          <ToolbarToggleGroup variant="label-group" toggleIcon={<FilterIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
           <ToolbarItem>

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -18,10 +18,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
-import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
-import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
@@ -147,7 +147,6 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onStatusToggle}
                 isExpanded={isStatusExpanded}
@@ -179,7 +178,6 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onRiskToggle}
                 isExpanded={isRiskExpanded}
@@ -207,7 +205,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
@@ -215,10 +213,10 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
+          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
+          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -109,7 +109,6 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setPositionSelectOpen(!positionSelectOpen)}
                 isExpanded={positionSelectOpen}
@@ -193,7 +192,6 @@ export const TooltipOptions: React.FunctionComponent = () => {
             selected={flipBehavior}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
-                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setFlipSelectOpen(!flipSelectOpen)}
                 isExpanded={flipSelectOpen}

package/src/components/TreeView/TreeView.tsx

@@ -84,8 +84,6 @@ export interface TreeViewProps {
   icon?: React.ReactNode;
   /** ID of the tree view. */
   id?: string;
-  /** ID of the root tree view list. */
-  rootListId?: string;
   /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
    * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
    * Can only be applied to the root tree view list.
@@ -115,8 +113,6 @@ export interface TreeViewProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
-  /** @hide Flag indicating whether the tree view list should be inert. */
-  inert?: boolean;
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
@@ -145,8 +141,6 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
   hasAnimations: hasAnimationsProp,
-  rootListId,
-  inert,
   ...props
 }: TreeViewProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
@@ -157,8 +151,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       isMultiSelectable={isMultiSelectable}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
-      id={rootListId}
-      inert={inert}
+      {...props}
     >
       {data.map((item) => (
         <TreeViewListItem

package/src/components/TreeView/TreeViewList.tsx

@@ -23,8 +23,6 @@ export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
    * this or the aria-label property must be passed in.
    */
   'aria-labelledby'?: string;
-  /** @hide Flag indicating whether the tree view list should be inert. */
-  inert?: boolean;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

package/src/components/TreeView/TreeViewListItem.tsx

@@ -6,7 +6,6 @@ import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
-import { IS_INERT } from '../../helpers/inert';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -226,7 +225,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: internalIsExpanded ? undefined : IS_INERT
+        inert: internalIsExpanded ? undefined : ''
       })
   );
 

package/src/components/TreeView/TreeViewSearch.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -33,7 +33,7 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
       <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
       <div className={css(formStyles.formControlUtilities)}>
         <div className={css(formStyles.formControlIcon)}>
-          <RhMicronsSearchIcon />
+          <SearchIcon />
         </div>
       </div>
     </div>