@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/components/Tabs/Tabs.tsx

@@ -136,7 +136,7 @@ interface TabsState {
   overflowingTabCount: number;
 }
 
-export class Tabs extends React.Component<TabsProps, TabsState> {
+class Tabs extends React.Component<TabsProps, TabsState> {
   static displayName = 'Tabs';
   tabList = React.createRef<HTMLUListElement>();
   leftScrollButtonRef = React.createRef<HTMLButtonElement>();
@@ -208,7 +208,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       React.Children.toArray(this.props.children)
         .filter((child): child is TabElement => React.isValidElement(child))
         .filter(({ props }) => props.tabContentRef && props.tabContentRef.current)
-        .forEach(child => (child.props.tabContentRef.current.hidden = true));
+        .forEach((child) => (child.props.tabContentRef.current.hidden = true));
       // most recently selected tabContent
       if (tabContentRef.current) {
         tabContentRef.current.hidden = false;
@@ -223,7 +223,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
 
   countOverflowingElements = (container: HTMLUListElement) => {
     const elements = Array.from(container.children);
-    return elements.filter(element => !isElementInView(container, element as HTMLElement, false)).length;
+    return elements.filter((element) => !isElementInView(container, element as HTMLElement, false)).length;
   };
 
   handleScrollButtons = () => {
@@ -468,7 +468,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         >
           {expandable && isVertical && (
             <GenerateId>
-              {randomId => (
+              {(randomId) => (
                 <div className={css(styles.tabsToggle)}>
                   <div className={css(styles.tabsToggleButton)}>
                     <Button
@@ -532,12 +532,12 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
         </Component>
         {filteredChildren
           .filter(
-            child =>
+            (child) =>
               child.props.children &&
               !(unmountOnExit && child.props.eventKey !== localActiveKey) &&
               !(mountOnEnter && shownKeys.indexOf(child.props.eventKey) === -1)
           )
-          .map(child => (
+          .map((child) => (
             <TabContent
               key={child.props.eventKey}
               activeKey={localActiveKey}
@@ -550,3 +550,5 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     );
   }
 }
+
+export { Tabs };

package/src/components/TextArea/TextArea.tsx

@@ -36,6 +36,10 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   value?: string | number;
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
+  /** Callback function when text area is focused */
+  onFocus?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
+  /** Callback function when text area is blurred (focus leaves) */
+  onBlur?: (event?: React.FocusEvent<HTMLTextAreaElement>) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
@@ -44,7 +48,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   innerRef?: React.RefObject<any>;
 }
 
-export class TextAreaBase extends React.Component<TextAreaProps> {
+class TextAreaBase extends React.Component<TextAreaProps> {
   static displayName = 'TextArea';
   static defaultProps: TextAreaProps = {
     innerRef: React.createRef<HTMLTextAreaElement>(),
@@ -114,6 +118,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       autoResize,
       onChange,
       /* eslint-enable @typescript-eslint/no-unused-vars */
+      onBlur,
+      onFocus,
       ...props
     } = this.props;
     const orientation = `resize${capitalize(resizeOrientation)}` as
@@ -136,6 +142,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       >
         <textarea
           onChange={this.handleChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
           {...(typeof this.props.defaultValue !== 'string' && { value })}
           aria-invalid={validated === ValidatedOptions.error}
           required={isRequired}

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -5,8 +5,12 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const timerRef = React.useRef<number | null>(null);
   const simulateNetworkCall = (callback: Function) => {
-    setTimeout(callback, 2000);
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    timerRef.current = setTimeout(callback, 2000);
   };
 
   const handleTextAreaChange = (value: string) => {

package/src/components/TextInput/TextInput.tsx

@@ -85,6 +85,7 @@ interface TextInputState {
   ouiaStateId: string;
 }
 
+// eslint-disable-next-line patternfly-react/no-anonymous-functions
 export class TextInputBase extends React.Component<TextInputProps, TextInputState> {
   static displayName = 'TextInputBase';
   static defaultProps: TextInputProps = {

package/src/components/TextInput/examples/TextInputBasic.tsx

@@ -3,5 +3,12 @@ import { TextInput } from '@patternfly/react-core';
 
 export const TextInputBasic: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');
-  return <TextInput value={value} type="text" onChange={(_event, value) => setValue(value)} aria-label="text input example" />;
+  return (
+    <TextInput
+      value={value}
+      type="text"
+      onChange={(_event, value) => setValue(value)}
+      aria-label="text input example"
+    />
+  );
 };

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -33,7 +33,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
 
   /** callback for removing a chip from the chip selections */
   const deleteChip = (chipToDelete: string) => {
-    const newChips = currentChips.filter(chip => !Object.is(chip, chipToDelete));
+    const newChips = currentChips.filter((chip) => !Object.is(chip, chipToDelete));
     setCurrentChips(newChips);
   };
 
@@ -53,7 +53,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
     <TextInputGroup>
       <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
         <ChipGroup>
-          {currentChips.map(currentChip => (
+          {currentChips.map((currentChip) => (
             <Chip key={currentChip} onClick={() => deleteChip(currentChip)}>
               {currentChip}
             </Chip>

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/TimePicker/TimePicker.tsx

@@ -93,7 +93,7 @@ interface TimePickerState {
   maxTimeState: string;
 }
 
-export class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
+class TimePicker extends React.Component<TimePickerProps, TimePickerState> {
   static displayName = 'TimePicker';
   private baseComponentRef = React.createRef<any>();
   private toggleRef = React.createRef<HTMLDivElement>();
@@ -564,3 +564,5 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     );
   }
 }
+
+export { TimePicker };

package/src/components/TimePicker/TimePickerUtils.tsx

@@ -26,10 +26,7 @@ export const makeTimeOptions = (
       }
     }
     hour = hour12 ? hour.toString() : hour.toString().padStart(2, '0');
-    const minutes = iter
-      .getMinutes()
-      .toString()
-      .padStart(2, '0');
+    const minutes = iter.getMinutes().toString().padStart(2, '0');
     const timeOption = `${hour}${delimiter}${minutes}${hour12 ? suffix : ''}`;
     // time option is valid if within min/max constraints
     if (isWithinMinMax(minTime, maxTime, timeOption, delimiter, includeSeconds)) {

package/src/components/TimePicker/examples/TimePicker.md

@@ -15,66 +15,32 @@ Appending the TimePicker to the `document.body` may cause accessibility issues,
 
 ### Basic 12 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-SimpleTimePicker = () => {
-  const onChange = (_event, time, hour, minute, seconds, isValid) => {
-    console.log('time', time);
-    console.log('hour', hour);
-    console.log('minute', minute);
-    console.log('seconds', seconds);
-    console.log('isValid', isValid);
-  };
-
-  return <TimePicker time="3:35 AM" onChange={onChange} />;
-};
+```ts file="./TimePickerBasic12Hour.tsx"
 ```
 
 ### Basic 24 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="2020-10-14T18:06:02Z" is24Hour />;
+```ts file="./TimePickerBasic24Hour.tsx"
 ```
 
 ### Custom delimiter
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour delimiter="h" placeholder="" />;
+```ts file="./TimePickerCustomDelimiter.tsx"
 ```
 
 ### Minimum/maximum times
 
 The `minTime`/`maxTime` props restrict the options shown for the user to select from as well as trigger the `invalidMinMaxErrorMessage` if the user enters a time outside this range.
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />;
+```ts file="./TimePickerMinMaxTimes.tsx"
 ```
 
 ### With seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="3:35:20 PM" includeSeconds />;
+```ts file="./TimePickerWithSeconds.tsx"
 ```
 
 ### Basic 24 hours with seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="12:35:50" includeSeconds is24Hour />;
+```ts file="./TimePickerBasic24HoursWithSeconds.tsx"
 ```

package/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic12Hour: React.FunctionComponent = () => {
+  const onChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour: number,
+    minute: number,
+    seconds: number,
+    isValid: boolean
+  ) => {
+    console.log('time', time);
+    console.log('hour', hour);
+    console.log('minute', minute);
+    console.log('seconds', seconds);
+    console.log('isValid', isValid);
+  };
+
+  return <TimePicker time="3:35 AM" onChange={onChange} />;
+};

package/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24Hour: React.FunctionComponent = () => <TimePicker time="2020-10-14T18:06:02Z" is24Hour />;

package/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24HourWithSeconds: React.FunctionComponent = () => (
+  <TimePicker time="12:35:50" includeSeconds is24Hour />
+);

package/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerCustomDelimiter: React.FunctionComponent = () => (
+  <TimePicker is24Hour delimiter="h" placeholder="" />
+);

package/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerMinMaxTimes: React.FunctionComponent = () => (
+  <TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />
+);

package/src/components/TimePicker/examples/TimePickerWithSeconds.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerWithSeconds: React.FunctionComponent = () => <TimePicker time="3:35:20 PM" includeSeconds />;

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -24,7 +24,7 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: ToggleGroupProps) => {
-  const toggleGroupItemList = React.Children.map(children, child =>
+  const toggleGroupItemList = React.Children.map(children, (child) =>
     !(React.isValidElement(child) && child.type === ToggleGroupItem)
       ? child
       : React.cloneElement<ToggleGroupItemProps>(child, areAllGroupsDisabled ? { isDisabled: true } : {})

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

@@ -8,7 +8,7 @@ export const ToggleGroupCompact: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup isCompact aria-label="Compact variant toggle group">

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

@@ -9,7 +9,7 @@ export const ToggleGroupDefaultMultiple: React.FunctionComponent = () => {
   const [disableAll, setDisableAll] = React.useState(false);
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   const disableAllClick = () => {
     setDisableAll(!disableAll);

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

@@ -12,7 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup aria-label="Icon variant toggle group">

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

@@ -12,7 +12,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   });
   const handleItemClick = (event, isSelected: boolean) => {
     const id = event.currentTarget.id;
-    setIsSelected(prevIsSelected => ({ ...prevIsSelected, [id]: isSelected }));
+    setIsSelected((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
   };
   return (
     <ToggleGroup aria-label="Text and icon toggle group">

package/src/components/Toolbar/Toolbar.tsx

@@ -67,7 +67,7 @@ interface FilterInfo {
   [key: string]: number;
 }
 
-export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
+class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   chipGroupContentRef = React.createRef<HTMLDivElement>();
   staticFilterInfo = {};
@@ -81,7 +81,7 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
   isToggleManaged = () => !(this.props.isExpanded || !!this.props.toggleIsExpanded);
 
   toggleIsExpanded = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isManagedToggleExpanded: !prevState.isManagedToggleExpanded
     }));
   };
@@ -200,7 +200,9 @@ export class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
     return this.props.id ? (
       this.renderToolbar(this.props.id)
     ) : (
-      <GenerateId>{randomId => this.renderToolbar(randomId)}</GenerateId>
+      <GenerateId>{(randomId) => this.renderToolbar(randomId)}</GenerateId>
     );
   }
 }
+
+export { Toolbar };

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -33,7 +33,7 @@ export interface ToolbarChipGroupContentProps extends React.HTMLProps<HTMLDivEle
   customChipGroupContent?: React.ReactNode;
 }
 
-export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
+class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupContentProps> {
   static displayName = 'ToolbarChipGroupContent';
   static defaultProps: PickOptional<ToolbarChipGroupContentProps> = {
     clearFiltersButtonText: 'Clear all filters',
@@ -104,3 +104,5 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
     );
   }
 }
+
+export { ToolbarChipGroupContent };

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> {
@@ -35,7 +34,7 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   toolbarId?: string;
 }
 
-export class ToolbarContent extends React.Component<ToolbarContentProps> {
+class ToolbarContent extends React.Component<ToolbarContentProps> {
   static displayName = 'ToolbarContent';
   private expandableContentRef = React.createRef<HTMLDivElement>();
   private chipContainerRef = React.createRef<HTMLDivElement>();
@@ -70,6 +69,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               className
             )}
+            ref={this.expandableContentRef}
             {...props}
           >
             <ToolbarContext.Consumer>
@@ -77,6 +77,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                 clearAllFilters: clearAllFiltersContext,
                 clearFiltersButtonText: clearFiltersButtonContext,
                 showClearFiltersButton: showClearFiltersButtonContext,
+                isExpanded: isExpandedContext,
                 toolbarId: toolbarIdContext
               }) => {
                 const expandableContentId = `${
@@ -87,7 +88,11 @@ export 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 @@ export 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>
                 );
               }}
@@ -122,3 +118,5 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
     );
   }
 }
+
+export { ToolbarContent };

package/src/components/Toolbar/ToolbarExpandableContent.tsx

@@ -26,7 +26,7 @@ export interface ToolbarExpandableContentProps extends React.HTMLProps<HTMLDivEl
   showClearFiltersButton: boolean;
 }
 
-export class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
+class ToolbarExpandableContent extends React.Component<ToolbarExpandableContentProps> {
   static displayName = 'ToolbarExpandableContent';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -37,10 +37,10 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
 
   render() {
     const {
+      children,
       className,
       expandableContentRef,
       chipContainerRef,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
       clearAllFilters,
       clearFiltersButtonText,
@@ -54,8 +54,12 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
     };
 
     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} />
@@ -73,3 +77,5 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
     );
   }
 }
+
+export { ToolbarExpandableContent };

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,13 +39,15 @@ 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 {
   isMounted: boolean;
 }
 
-export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
+class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFilterState> {
   static displayName = 'ToolbarFilter';
   static contextType = ToolbarContext;
   context!: React.ContextType<typeof ToolbarContext>;
@@ -90,9 +94,12 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
       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
@@ -108,7 +115,7 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
           collapsedText={chipGroupCollapsedText}
           expandedText={chipGroupExpandedText}
         >
-          {chips.map(chip =>
+          {chips.map((chip) =>
             typeof chip === 'string' ? (
               <Chip key={chip} onClick={() => deleteChip(categoryKey, chip)}>
                 {chip}
@@ -123,7 +130,7 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
       </ToolbarItem>
     ) : null;
 
-    if (!isExpanded && this.state.isMounted) {
+    if (!_isExpanded && this.state.isMounted) {
       return (
         <React.Fragment>
           {showToolbarItem && <ToolbarItem {...props}>{children}</ToolbarItem>}
@@ -138,9 +145,14 @@ export class ToolbarFilter extends React.Component<ToolbarFilterProps, ToolbarFi
           <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>
     );
   }
 }
+
+export { ToolbarFilter };