@patternfly/react-core 5.1.1-prerelease.1 → 5.1.1-prerelease.11

package/src/components/Drawer/examples/Drawer.md

@@ -13,6 +13,7 @@ propComponents:
     DrawerActions,
     DrawerCloseButton,
     DrawerColorVariant,
+    DrawerPanelFocusTrapObject
   ]
 section: components
 ---
@@ -22,56 +23,67 @@ section: components
 ### Basic
 
 ```ts file="./DrawerBasic.tsx"
+
 ```
 
 ### Panel on right
 
 ```ts file="./DrawerPanelRight.tsx"
+
 ```
 
 ### Panel on left
 
 ```ts file="./DrawerPanelLeft.tsx"
+
 ```
 
 ### Panel on bottom
 
 ```ts file="./DrawerPanelBottom.tsx"
+
 ```
 
 ### Basic inline
 
 ```ts file="./DrawerBasicInline.tsx"
+
 ```
 
 ### Inline panel on right
 
 ```ts file="./DrawerInlinePanelRight.tsx"
+
 ```
 
 ### Inline panel on left
 
 ```ts file="./DrawerInlinePanelLeft.tsx"
+
 ```
 
 ### Stacked content body elements
 
 ```ts file="./DrawerStackedContentBodyElements.tsx"
+
 ```
 
 ### Modified content padding
 
 ```ts file="DrawerModifiedContentPadding.tsx"
+
 ```
 
 ### Modified panel padding
 
 ```ts file="DrawerModifiedPanelPadding.tsx"
+
 ```
 
 ### Additional section above drawer content
 
 ```ts file="DrawerAdditionalSectionAboveContent.tsx"
+
 ```
 
 ### Static drawer
@@ -79,34 +91,53 @@ section: components
 **Note:** For mobile viewports, all drawer variants behave the same way. At the `md` breakpoint, or where `.pf-m-static{-on-[lg, xl, 2xl]}` is applied, the `static drawer` variant’s `close button` is automatically hidden because the drawer panel doesn’t close by design.
 
 ```ts file="DrawerStatic.tsx"
+
 ```
 
 ### Breakpoint
 
 ```ts file="DrawerBreakpoint.tsx"
+
 ```
 
 ### Resizable on right
 
 ```ts file="DrawerResizableOnRight.tsx"
+
 ```
 
 ### Resizable on left
 
 ```ts file="DrawerResizableOnLeft.tsx"
+
 ```
 
 ### Resizable on bottom
 
 ```ts file="DrawerResizableOnBottom.tsx"
+
 ```
 
 ### Resizable on inline
 
 ```ts file="DrawerResizableOnInline.tsx"
+
 ```
 
 ### Panel with secondary background
 
 ```ts file="DrawerSecondaryBackground.tsx"
+
+```
+
+### With focus trap
+
+When a [focus trap](/accessibility/product-development-guide#trapping-focus) is enabled on an element, a user will only be able to interact with the contents of that element until the focus trap is closed or deactivated.
+
+To enable and customize a focus trap on a drawer panel, apply the `focusTrap` property to the `<DrawerPanelContent>` component. Enabling a focus trap with `focusTrap.enabled` will also automatically place focus on the first focusable element when the drawer panel expands, and return focus to the previously focused element when it collapses.
+
+To customize which element receives focus when the drawer panel expands, use the `focusTrap.elementToFocusOnExpand` property.
+
+```ts file="./DrawerFocusTrap.tsx"
+
 ```

package/src/components/Drawer/examples/DrawerFocusTrap.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  Button
+} from '@patternfly/react-core';
+
+export const DrawerFocusTrap: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onClick = () => {
+    setIsExpanded(!isExpanded);
+  };
+
+  const onCloseClick = () => {
+    setIsExpanded(false);
+  };
+
+  // An onKeyDown property must be passed to the Drawer component to handle closing
+  // the drawer panel and deactivating the focus trap via the Escape key.
+  const onEscape = (event: React.KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setIsExpanded(false);
+    }
+  };
+
+  const panelContent = (
+    <DrawerPanelContent focusTrap={{ enabled: true }}>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={onCloseClick} />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const drawerContent =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
+
+  return (
+    <React.Fragment>
+      <Button aria-expanded={isExpanded} onClick={onClick}>
+        Toggle drawer with focus trap
+      </Button>
+      <Drawer onKeyDown={onEscape} isExpanded={isExpanded}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    </React.Fragment>
+  );
+};

package/src/components/Icon/Icon.tsx

@@ -24,6 +24,10 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
   isInProgress?: boolean;
   /** Aria-label for the default progress icon */
   defaultProgressArialabel?: string;
+  /** @beta Flag indicating whether the icon passed as children should be mirrored for
+   * right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
+   */
+  shouldMirrorRTL?: boolean;
 }
 
 export const Icon: React.FunctionComponent<IconComponentProps> = ({
@@ -37,6 +41,7 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
   isInline = false,
   isInProgress = false,
   defaultProgressArialabel = 'Loading...',
+  shouldMirrorRTL = false,
   ...props
 }: IconComponentProps) => {
   const _progressIcon = progressIcon ?? <Spinner diameter="1em" aria-label={defaultProgressArialabel} />;
@@ -52,7 +57,16 @@ export const Icon: React.FunctionComponent<IconComponentProps> = ({
       )}
       {...props}
     >
-      <span className={css(styles.iconContent, styles.modifiers[iconSize], styles.modifiers[status])}>{children}</span>
+      <span
+        className={css(
+          styles.iconContent,
+          styles.modifiers[iconSize],
+          styles.modifiers[status],
+          shouldMirrorRTL && 'pf-v5-m-mirror-inline-rtl'
+        )}
+      >
+        {children}
+      </span>
       {isInProgress && (
         <span className={css(styles.iconProgress, styles.modifiers[progressIconSize], className)}>{_progressIcon}</span>
       )}

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

@@ -194,3 +194,19 @@ test('renders progress icon successfully', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with class pf-v5-m-mirror-inline-rtl on icon passed as children when shouldMirrorRTL is true', () => {
+  render(<Icon shouldMirrorRTL>Icon content</Icon>);
+
+  expect(screen.getByText('Icon content')).toHaveClass('pf-v5-m-mirror-inline-rtl');
+});
+
+test('Does not render with class pf-v5-m-mirror-inline-rtl on progressIcon when shouldMirrorRTL is true', () => {
+  render(
+    <Icon shouldMirrorRTL isInProgress progressIcon="Progress icon">
+      Icon content
+    </Icon>
+  );
+
+  expect(screen.getByText('Progress icon')).not.toHaveClass('pf-v5-m-mirror-inline-rtl');
+});

package/src/components/Nav/NavItem.tsx

@@ -27,7 +27,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Callback for item click */
   onClick?: NavSelectClickHandler;
   /** Component used to render NavItems if  React.isValidElement(children) is false */
-  component?: React.ReactNode;
+  component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
   flyout?: React.ReactElement;
   /** Callback when flyout is opened or closed */

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -44,7 +44,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         formAdditionalItems={
           useCustomFooter ? (
             <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
                 Link
               </Button>
             </FormGroup>

package/src/components/Tile/examples/Tile.md

@@ -12,32 +12,36 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
 
-### Basic
-
+### Basic tile
+Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.
 ```ts file="./TileBasic.tsx"
 ```
 
-### With subtext
-
+### With subtext 
+Tile subtext can provide users with additional context. To add subtext, pass a short description to the `<Tile>` component. 
 ```ts file="./TileWithSubtext.tsx"
 ```
 
 ### With icon
-
+Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the `icon` property.
 ```ts file="./TileWithIcon.tsx"
 ```
 
-### Stacked
-
+### With stacked icon
+You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the `isStacked` property.
 ```ts file="./TileStacked.tsx"
 ```
 
-### Stacked with large icons
+### With large icons
+You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the  `isDisplayLarge` property. 
 
+Be aware that `isDisplayLarge` can only be used when  `isStacked` is also applied. 
 ```ts file="./TileStackedWithLargeIcons.tsx"
 ```
 
-### With extra content
+### With long subtext
+To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component `Flex` into `<Tile>`. 
 
+You can also change the type of `Flex` you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is `default: “flex_1”`, and changing the number in the default will also change where the sentence breaks.
 ```ts file="./TileWithExtraContent.tsx"
-```
+```

package/src/components/Toolbar/ToolbarContent.tsx

@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { formatBreakpointMods } from '../../helpers/util';
-import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -70,6 +69,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               className
             )}
+            ref={this.expandableContentRef}
             {...props}
           >
             <ToolbarContext.Consumer>
@@ -77,6 +77,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                 clearAllFilters: clearAllFiltersContext,
                 clearFiltersButtonText: clearFiltersButtonContext,
                 showClearFiltersButton: showClearFiltersButtonContext,
+                isExpanded: isExpandedContext,
                 toolbarId: toolbarIdContext
               }) => {
                 const expandableContentId = `${
@@ -87,7 +88,11 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                     value={{
                       expandableContentRef: this.expandableContentRef,
                       expandableContentId,
-                      chipContainerRef: this.chipContainerRef
+                      chipContainerRef: this.chipContainerRef,
+                      isExpanded: isExpanded || isExpandedContext,
+                      clearAllFilters: clearAllFilters || clearAllFiltersContext,
+                      clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext,
+                      showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext
                     }}
                   >
                     <div
@@ -103,15 +108,6 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                     >
                       {children}
                     </div>
-                    <ToolbarExpandableContent
-                      id={expandableContentId}
-                      isExpanded={isExpanded}
-                      expandableContentRef={this.expandableContentRef}
-                      chipContainerRef={this.chipContainerRef}
-                      clearAllFilters={clearAllFilters || clearAllFiltersContext}
-                      showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
-                      clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                    />
                   </ToolbarContentContext.Provider>
                 );
               }}

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -37,10 +37,10 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
 
   render() {
     const {
+      children,
       className,
       expandableContentRef,
       chipContainerRef,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
       clearAllFilters,
       clearFiltersButtonText,
@@ -54,8 +54,12 @@ class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentP
     };
 
     return (
-      <div className={css(styles.toolbarExpandableContent, className)} ref={expandableContentRef} {...props}>
-        <ToolbarGroup />
+      <div
+        className={css(styles.toolbarExpandableContent, isExpanded && styles.modifiers.expanded, className)}
+        ref={expandableContentRef}
+        {...props}
+      >
+        <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
           <ToolbarGroup className={styles.modifiers.chipContainer}>
             <ToolbarGroup ref={chipContainerRef} />

package/src/components/Toolbar/ToolbarFilter.tsx

@@ -21,6 +21,8 @@ export interface ToolbarChip {
 }
 
 export interface ToolbarFilterProps extends ToolbarItemProps {
+  /** Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups. */
+  isExpanded?: boolean;
   /** An array of strings to be displayed as chips in the expandable content */
   chips?: (string | ToolbarChip)[];
   /** Callback passed by consumer used to close the entire chip group */
@@ -37,6 +39,8 @@ export interface ToolbarFilterProps extends ToolbarItemProps {
   categoryName: string | ToolbarChipGroup;
   /** Flag to show the toolbar item */
   showToolbarItem?: boolean;
+  /** Reference to a chip container created with a custom expandable content group, for non-managed multiple toolbar toggle groups. */
+  expandableChipContainerRef?: React.RefObject<HTMLDivElement>;
 }
 
 interface ToolbarFilterState {
@@ -90,9 +94,12 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
       chipGroupCollapsedText,
       categoryName,
       showToolbarItem,
+      isExpanded,
+      expandableChipContainerRef,
       ...props
     } = this.props;
-    const { isExpanded, chipGroupContentRef } = this.context;
+    const { isExpanded: managedIsExpanded, chipGroupContentRef } = this.context;
+    const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
     const categoryKey =
       typeof categoryName !== 'string' && categoryName.hasOwnProperty('key')
         ? categoryName.key
@@ -123,7 +130,7 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
       </ToolbarItem>
     ) : null;
 
-    if (!isExpanded && this.state.isMounted) {
+    if (!_isExpanded && this.state.isMounted) {
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
@@ -138,6 +145,9 @@ class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterSta
           <React.Fragment>
             {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
             {chipContainerRef.current && ReactDOM.createPortal(chipGroup, chipContainerRef.current)}
+            {expandableChipContainerRef &&
+              expandableChipContainerRef.current &&
+              ReactDOM.createPortal(chipGroup, expandableChipContainerRef.current)}
           </React.Fragment>
         )}
       </ToolbarContentContext.Consumer>

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -8,8 +8,13 @@ import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
 import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
+import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
+  /** Flag indicating when toggle group is expanded for non-managed toolbar toggle groups. */
+  isExpanded?: boolean;
+  /** Callback for toggle group click event for non-managed toolbar toggle groups. */
+  onToggle?: (event: React.MouseEvent) => void;
   /** An icon to be rendered when the toggle group has collapsed down */
   toggleIcon: React.ReactNode;
   /** Controls when filters are shown and when the toggle button is hidden. */
@@ -46,10 +51,21 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
     '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
   };
+  /** Reference to a chip container group for filters inside the toolbar toggle group */
+  chipContainerRef?: React.RefObject<any>;
+  /** Optional callback for clearing all filters in the toolbar toggle group */
+  clearAllFilters?: () => void;
+  /** Flag indicating that the clear all filters button should be visible in the toolbar toggle group */
+  showClearFiltersButton?: boolean;
+  /** Text to display in the clear all filters button of the toolbar toggle group */
+  clearFiltersButtonText?: string;
 }
 
 class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
+  toggleRef = React.createRef<HTMLButtonElement>();
+  expandableContentRef = React.createRef<HTMLDivElement>();
+
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;
     const lgBreakpointValue = parseInt(globalBreakpointLg.value);
@@ -67,6 +83,12 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       spaceItems,
       className,
       children,
+      isExpanded,
+      onToggle,
+      chipContainerRef,
+      clearAllFilters,
+      showClearFiltersButton,
+      clearFiltersButtonText,
       ...props
     } = this.props;
 
@@ -79,64 +101,87 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <ToolbarContext.Consumer>
-            {({ isExpanded, toggleIsExpanded }) => (
-              <ToolbarContentContext.Consumer>
-                {({ expandableContentRef, expandableContentId }) => {
-                  if (expandableContentRef.current && expandableContentRef.current.classList) {
-                    if (isExpanded) {
-                      expandableContentRef.current.classList.add(styles.modifiers.expanded);
-                    } else {
-                      expandableContentRef.current.classList.remove(styles.modifiers.expanded);
-                    }
-                  }
+            {({ toggleIsExpanded: managedOnToggle }) => {
+              const _onToggle = onToggle !== undefined ? onToggle : managedOnToggle;
+
+              return (
+                <ToolbarContentContext.Consumer>
+                  {({
+                    expandableContentRef,
+                    expandableContentId,
+                    chipContainerRef: managedChipContainerRef,
+                    isExpanded: managedIsExpanded,
+                    clearAllFilters: clearAllFiltersContext,
+                    clearFiltersButtonText: clearFiltersButtonContext,
+                    showClearFiltersButton: showClearFiltersButtonContext
+                  }) => {
+                    const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
+                    const _chipContainerRef =
+                      chipContainerRef !== undefined ? chipContainerRef : managedChipContainerRef;
+
+                    const breakpointMod: {
+                      md?: 'show';
+                      lg?: 'show';
+                      xl?: 'show';
+                      '2xl'?: 'show';
+                    } = {};
+                    breakpointMod[breakpoint] = 'show';
 
-                  const breakpointMod: {
-                    md?: 'show';
-                    lg?: 'show';
-                    xl?: 'show';
-                    '2xl'?: 'show';
-                  } = {};
-                  breakpointMod[breakpoint] = 'show';
+                    const expandableContent = (
+                      <ToolbarExpandableContent
+                        id={expandableContentId}
+                        expandableContentRef={this.expandableContentRef}
+                        isExpanded={_isExpanded}
+                        clearAllFilters={clearAllFilters || clearAllFiltersContext}
+                        showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
+                        clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
+                        chipContainerRef={_chipContainerRef}
+                      >
+                        {children}
+                      </ToolbarExpandableContent>
+                    );
 
-                  return (
-                    <div
-                      className={css(
-                        styles.toolbarGroup,
-                        styles.modifiers.toggleGroup,
-                        variant &&
-                          styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
-                        formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
-                        formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-                        formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
-                        formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
-                        formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
-                        className
-                      )}
-                      {...props}
-                    >
+                    const toggleButton = (
                       <div className={css(styles.toolbarToggle)}>
                         <Button
                           variant="plain"
-                          onClick={toggleIsExpanded}
+                          onClick={_onToggle}
                           aria-label="Show Filters"
-                          {...(isExpanded && { 'aria-expanded': true })}
-                          aria-haspopup={isExpanded && this.isContentPopup()}
+                          {...(_isExpanded && { 'aria-expanded': true })}
+                          aria-haspopup={_isExpanded && this.isContentPopup()}
                           aria-controls={expandableContentId}
+                          ref={this.toggleRef}
                         >
                           {toggleIcon}
                         </Button>
                       </div>
-                      {isExpanded
-                        ? (ReactDOM.createPortal(
-                            children,
-                            expandableContentRef.current.firstElementChild
-                          ) as React.ReactElement)
-                        : children}
-                    </div>
-                  );
-                }}
-              </ToolbarContentContext.Consumer>
-            )}
+                    );
+
+                    return (
+                      <div
+                        className={css(
+                          styles.toolbarGroup,
+                          styles.modifiers.toggleGroup,
+                          variant &&
+                            styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
+                          formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+                          formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+                          className
+                        )}
+                        {...props}
+                      >
+                        {toggleButton}
+                        {_isExpanded && ReactDOM.createPortal(expandableContent, expandableContentRef.current)}
+                        {!_isExpanded && children}
+                      </div>
+                    );
+                  }}
+                </ToolbarContentContext.Consumer>
+              );
+            }}
           </ToolbarContext.Consumer>
         )}
       </PageContext.Consumer>

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -31,12 +31,17 @@ interface ToolbarContentContextProps {
   expandableContentRef: RefObject<HTMLDivElement>;
   expandableContentId: string;
   chipContainerRef: RefObject<any>;
+  isExpanded?: boolean;
+  clearAllFilters?: () => void;
+  clearFiltersButtonText?: string;
+  showClearFiltersButton?: boolean;
 }
 
 export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
-  chipContainerRef: null
+  chipContainerRef: null,
+  clearAllFilters: () => {}
 });
 
 export const globalBreakpoints = {

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

@@ -12,14 +12,6 @@ exports[`ToolbarContent should match snapshot (auto-generated) 1`] = `
         ReactNode
       </div>
     </div>
-    <div
-      class="pf-v5-c-toolbar__expandable-content"
-      id="string-expandable-content-0"
-    >
-      <div
-        class="pf-v5-c-toolbar__group"
-      />
-    </div>
   </div>
 </DocumentFragment>
 `;