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

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;
 }
 
-export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
+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 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       spaceItems,
       className,
       children,
+      isExpanded,
+      onToggle,
+      chipContainerRef,
+      clearAllFilters,
+      showClearFiltersButton,
+      clearFiltersButtonText,
       ...props
     } = this.props;
 
@@ -79,67 +101,92 @@ export 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>
     );
   }
 }
+
+export { ToolbarToggleGroup };

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>
 `;

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

@@ -65,7 +65,7 @@ describe('Toolbar', () => {
             <ToolbarFilter
               chips={['New', 'Pending']}
               deleteChip={(category, chip) => {}}
-              deleteChipGroup={category => {}}
+              deleteChipGroup={(category) => {}}
               categoryName="Status"
             >
               test content
@@ -102,8 +102,7 @@ describe('Toolbar', () => {
     );
 
     expect(asFragment()).toMatchSnapshot();
-    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
-    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
-    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
+    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(1);
+    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(1);
   });
 });

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

@@ -1,23 +1,26 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
-import { ToolbarContentContext } from '../ToolbarUtils';
+import { Toolbar } from '../Toolbar';
+import { ToolbarContent } from '../ToolbarContent';
 
 describe('ToolbarToggleGroup', () => {
   it('should warn on bad props', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
+    const items = (
+      <React.Fragment>
+        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null}>
+          test
+        </ToolbarToggleGroup>
+      </React.Fragment>
+    );
+
     render(
-      <ToolbarContentContext.Provider
-        value={{
-          expandableContentId: 'some-id',
-          expandableContentRef: { current: undefined },
-          chipContainerRef: { current: undefined }
-        }}
-      >
-        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />
-      </ToolbarContentContext.Provider>
+      <Toolbar id="toolbar-with-filter" className="pf-m-toggle-group-container" collapseListedFiltersBreakpoint="xl">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
     );
 
     expect(myMock).toHaveBeenCalled();

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

@@ -34,14 +34,6 @@ exports[`Toolbar should render inset 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-0"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"
@@ -99,49 +91,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-with-filter-expandable-content-3"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-        <div
-          class="pf-v5-c-toolbar__group pf-m-chip-container"
-        >
-          <div
-            class="pf-v5-c-toolbar__group"
-          />
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Save filters
-            </button>
-          </div>
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Clear all filters
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content"
@@ -385,14 +334,6 @@ exports[`Toolbar should render with page inset flag 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-1"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"

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

@@ -0,0 +1,258 @@
+import React from 'react';
+import {
+  MenuToggle,
+  MenuToggleElement,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarToggleGroup,
+  ToolbarGroup,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  ToolbarFilter,
+  Badge
+} from '@patternfly/react-core';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+
+export const Test: React.FunctionComponent = () => {
+  const statusChipContainerRef = React.useRef<HTMLDivElement>();
+  const riskChipContainerRef = React.useRef<HTMLDivElement>();
+
+  const [isStatusGroupExpanded, setIsStatusGroupExpanded] = React.useState(false);
+  const [isRiskGroupExpanded, setIsRiskGroupExpanded] = React.useState(false);
+
+  const [isStatusMenuExpanded, setIsStatusExpanded] = React.useState(false);
+  const [isRiskMenuExpanded, setIsRiskExpanded] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('');
+  const [filters, setFilters] = React.useState({
+    risk: ['Low'],
+    status: ['New', 'Pending']
+  });
+
+  const closeToggleGroups = () => {
+    setIsStatusGroupExpanded(false);
+    setIsRiskGroupExpanded(false);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('resize', closeToggleGroups); // Resize observer to toggle off expand groups is required to properly reformat toolbar when growing
+    return () => {
+      window.removeEventListener('resize', closeToggleGroups);
+    };
+  }, []);
+
+  const onInputChange = (newValue: string) => {
+    setInputValue(newValue);
+  };
+
+  const onStatusToggle = () => {
+    setIsStatusExpanded(!isStatusMenuExpanded);
+  };
+
+  const onRiskToggle = () => {
+    setIsRiskExpanded(!isRiskMenuExpanded);
+  };
+
+  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
+    const checked = (event?.target as HTMLInputElement).checked;
+    setFilters((prev) => {
+      const prevSelections = prev[type];
+      return {
+        ...prev,
+        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)
+      };
+    });
+  };
+
+  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
+    onSelect('status', event, selection);
+  };
+
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent | undefined, selection: string) => {
+    onSelect('risk', event, selection);
+  };
+
+  const onDelete = (type: string, id: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });
+    } else {
+      setFilters({ risk: [], status: [] });
+    }
+  };
+
+  const onDeleteGroup = (type: string) => {
+    if (type === 'Risk') {
+      setFilters({ risk: [], status: filters.status });
+    } else if (type === 'Status') {
+      setFilters({ risk: filters.risk, status: [] });
+    }
+  };
+
+  const statusToggleGroupItems = (
+    <React.Fragment>
+      <ToolbarItem variant="search-filter">
+        <SearchInput
+          aria-label="Consumer toggle groups example search input"
+          onChange={(_event, value) => onInputChange(value)}
+          value={inputValue}
+          onClear={() => {
+            onInputChange('');
+          }}
+        />
+      </ToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarFilter
+          chips={filters.status}
+          deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
+          categoryName="Status"
+          isExpanded={isStatusGroupExpanded}
+          expandableChipContainerRef={statusChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
+        >
+          <Select
+            aria-label="Status"
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onStatusToggle}
+                isExpanded={isStatusMenuExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Status
+                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
+              </MenuToggle>
+            )}
+            onSelect={(event, selection) => onStatusSelect(event, selection as string)}
+            selected={filters.status}
+            isOpen={isStatusMenuExpanded}
+            onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)}
+          >
+            <SelectList>
+              <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
+                New
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusPending"
+                value="Pending"
+                isSelected={filters.status.includes('Pending')}
+              >
+                Pending
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusRunning"
+                value="Running"
+                isSelected={filters.status.includes('Running')}
+              >
+                Running
+              </SelectOption>
+              <SelectOption
+                hasCheckbox
+                key="statusCancelled"
+                value="Cancelled"
+                isSelected={filters.status.includes('Cancelled')}
+              >
+                Cancelled
+              </SelectOption>
+            </SelectList>
+          </Select>
+        </ToolbarFilter>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const riskToggleGroupItems = (
+    <ToolbarGroup variant="filter-group">
+      <ToolbarFilter
+        chips={filters.risk}
+        deleteChip={(category, chip) => onDelete(category as string, chip as string)}
+        categoryName="Risk"
+        isExpanded={isRiskGroupExpanded}
+        expandableChipContainerRef={riskChipContainerRef} // Required to link the toolbar filter chip group to the custom expandable group
+      >
+        <Select
+          aria-label="Risk"
+          role="menu"
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={onRiskToggle}
+              isExpanded={isRiskMenuExpanded}
+              style={
+                {
+                  width: '140px'
+                } as React.CSSProperties
+              }
+            >
+              Risk
+              {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
+            </MenuToggle>
+          )}
+          onSelect={(event, selection) => onRiskSelect(event, selection as string)}
+          selected={filters.risk}
+          isOpen={isRiskMenuExpanded}
+          onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}
+        >
+          <SelectList>
+            <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
+              Low
+            </SelectOption>
+            <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
+              Medium
+            </SelectOption>
+            <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
+              High
+            </SelectOption>
+          </SelectList>
+        </Select>
+      </ToolbarFilter>
+    </ToolbarGroup>
+  );
+
+  return (
+    <Toolbar id="toolbar-multiple-toggle-groups" className="pf-m-toggle-group-container">
+      <ToolbarContent>
+        <ToolbarToggleGroup
+          isExpanded={isStatusGroupExpanded} // Required to control expanded state
+          onToggle={() => {
+            setIsStatusGroupExpanded(!isStatusGroupExpanded);
+            setIsRiskGroupExpanded(false);
+          }} // Required to control expanded state
+          toggleIcon={<FilterIcon />}
+          breakpoint="md"
+          chipContainerRef={statusChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Status')}
+          clearFiltersButtonText="Clear status filter"
+        >
+          {statusToggleGroupItems}
+        </ToolbarToggleGroup>
+        <ToolbarToggleGroup
+          isExpanded={isRiskGroupExpanded} // Required to control expanded state
+          onToggle={() => {
+            setIsRiskGroupExpanded(!isRiskGroupExpanded);
+            setIsStatusGroupExpanded(false);
+          }} // Required to control expanded state
+          toggleIcon={<FilterIcon />}
+          breakpoint="xl"
+          chipContainerRef={riskChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Risk')}
+          clearFiltersButtonText={'Clear risk filter'}
+        >
+          {riskToggleGroupItems}
+        </ToolbarToggleGroup>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};