@patternfly/react-core 6.7.0-prerelease.3 → 6.7.0-prerelease.4

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.7.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.7.0-prerelease.3","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.7.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.7.0-prerelease.3","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.7.0-prerelease.2","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.7.0-prerelease.3","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.7.0-prerelease.3",
+  "version": "6.7.0-prerelease.4",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.7.0-prerelease.1",
-    "@patternfly/react-styles": "^6.7.0-prerelease.1",
-    "@patternfly/react-tokens": "^6.7.0-prerelease.2",
+    "@patternfly/react-icons": "^6.7.0-prerelease.2",
+    "@patternfly/react-styles": "^6.7.0-prerelease.2",
+    "@patternfly/react-tokens": "^6.7.0-prerelease.3",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.50",
+    "@patternfly/patternfly": "6.7.0-prerelease.1",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "32056428bd221fb8009157d7f7d29bae84f7fe3f"
+  "gitHead": "59fa2ced55ee25977627a4ee87024e65702eefa5"
 }

package/src/components/Toolbar/Toolbar.tsx

@@ -3,7 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContext } from './ToolbarUtils';
 import { ToolbarLabelGroupContent } from './ToolbarLabelGroupContent';
-import { formatBreakpointMods, canUseDOM } from '../../helpers/util';
+import { formatBreakpointMods, canUseDOM, getBreakpoint } from '../../helpers/util';
+import { getResizeObserver } from '../../helpers/resizeObserver';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
 import { PageContext } from '../Page/PageContext';
@@ -34,6 +35,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   children?: React.ReactNode;
   /** Id of the data toolbar */
   id?: string;
+  /** Flag indicating if the toolbar is a container for CSS container queries */
+  isContainer?: boolean;
   /** Flag indicating the toolbar height should expand to the full height of the container */
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
@@ -84,6 +87,9 @@ interface FilterInfo {
 class Toolbar extends Component<ToolbarProps, ToolbarState> {
   static displayName = 'Toolbar';
   labelGroupContentRef = createRef<HTMLDivElement>();
+  toolbarRef = createRef<HTMLDivElement>();
+  resizeObserver: () => void = () => {};
+  containerBreakpoint: ReturnType<typeof getBreakpoint>;
   staticFilterInfo = {};
   hasNoPadding = false;
   state = {
@@ -100,8 +106,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
     }));
   };
 
-  closeExpandableContent = (e: any) => {
-    if (e.target.innerWidth !== this.state.windowWidth) {
+  closeExpandableContent = (e?: any) => {
+    if (e && e.target.innerWidth !== this.state.windowWidth) {
       this.setState(() => ({
         isManagedToggleExpanded: false,
         windowWidth: e.target.innerWidth
@@ -109,19 +115,58 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
     }
   };
 
+  closeExpandableContentOnContainerResize = () => {
+    const containerWidth = this.toolbarRef.current?.clientWidth;
+    if (!containerWidth) {
+      return;
+    }
+
+    const breakpoint = getBreakpoint(containerWidth);
+    const isInitialMeasurement = this.containerBreakpoint === undefined;
+    if (breakpoint !== this.containerBreakpoint) {
+      this.containerBreakpoint = breakpoint;
+      if (!isInitialMeasurement && this.state.isManagedToggleExpanded) {
+        this.setState({ isManagedToggleExpanded: false });
+      }
+    }
+  };
+
+  setupResizeHandling = () => {
+    if (!this.isToggleManaged() || !canUseDOM) {
+      return;
+    }
+
+    this.containerBreakpoint = undefined;
+    const reference = this.props.isContainer ? this.toolbarRef.current : undefined;
+    const handler = this.props.isContainer ? this.closeExpandableContentOnContainerResize : this.closeExpandableContent;
+
+    this.resizeObserver = getResizeObserver(reference, handler, true);
+  };
+
+  cleanupResizeHandling = () => {
+    this.resizeObserver();
+    this.resizeObserver = () => {};
+  };
+
   componentDidMount() {
     if (canUseDOM) {
       this.setState({ windowWidth: window.innerWidth });
     }
-    if (this.isToggleManaged() && canUseDOM) {
-      window.addEventListener('resize', this.closeExpandableContent);
+    this.setupResizeHandling();
+  }
+
+  componentDidUpdate(prevProps: ToolbarProps) {
+    const wasToggleManaged = !(prevProps.isExpanded || !!prevProps.toggleIsExpanded);
+    const isToggleManaged = this.isToggleManaged();
+
+    if (prevProps.isContainer !== this.props.isContainer || wasToggleManaged !== isToggleManaged) {
+      this.cleanupResizeHandling();
+      this.setupResizeHandling();
     }
   }
 
   componentWillUnmount() {
-    if (this.isToggleManaged() && canUseDOM) {
-      window.removeEventListener('resize', this.closeExpandableContent);
-    }
+    this.cleanupResizeHandling();
   }
 
   updateNumberFilters = (categoryName: string, numberOfFilters: number) => {
@@ -146,6 +191,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       toggleIsExpanded,
       className,
       children,
+      isContainer,
       isFullHeight,
       isStatic,
       isStickyBase,
@@ -169,56 +215,73 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
-          <div
-            className={css(
-              styles.toolbar,
-              hasNoPadding && styles.modifiers.noPadding,
-              isFullHeight && styles.modifiers.fullHeight,
-              isStatic && styles.modifiers.static,
-              isSticky && styles.modifiers.sticky,
-              isStickyBase && styles.modifiers.stickyBase,
-              isStickyStuck && styles.modifiers.stickyStuck,
-              isVertical && styles.modifiers.vertical,
-              formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
-              colorVariant === 'primary' && styles.modifiers.primary,
-              colorVariant === 'secondary' && styles.modifiers.secondary,
-              colorVariant === 'no-background' && styles.modifiers.noBackground,
-              className
-            )}
-            id={randomId}
-            {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
-            {...props}
-          >
-            <ToolbarContext.Provider
-              value={{
-                isExpanded,
-                toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
-                labelGroupContentRef: this.labelGroupContentRef,
-                updateNumberFilters: this.updateNumberFilters,
-                numberOfFilters,
-                clearAllFilters,
-                clearFiltersButtonText,
-                showClearFiltersButton,
-                toolbarId: randomId,
-                customLabelGroupContent
-              }}
+        {(pageContext) => {
+          const toolbarContent = (
+            <div
+              className={css(
+                styles.toolbar,
+                hasNoPadding && styles.modifiers.noPadding,
+                isContainer && styles.modifiers.container,
+                isFullHeight && styles.modifiers.fullHeight,
+                isStatic && styles.modifiers.static,
+                isSticky && styles.modifiers.sticky,
+                isStickyBase && styles.modifiers.stickyBase,
+                isStickyStuck && styles.modifiers.stickyStuck,
+                isVertical && styles.modifiers.vertical,
+                formatBreakpointMods(
+                  inset,
+                  styles,
+                  '',
+                  !isContainer ? pageContext.getBreakpoint(pageContext.width) : undefined
+                ),
+                colorVariant === 'primary' && styles.modifiers.primary,
+                colorVariant === 'secondary' && styles.modifiers.secondary,
+                colorVariant === 'no-background' && styles.modifiers.noBackground,
+                className
+              )}
+              id={randomId}
+              ref={this.toolbarRef}
+              {...getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : generatedOuiaId)}
+              {...props}
             >
-              {children}
-              <ToolbarLabelGroupContent
-                isExpanded={isExpanded}
-                labelGroupContentRef={this.labelGroupContentRef}
-                clearAllFilters={clearAllFilters}
-                showClearFiltersButton={showClearFiltersButton}
-                clearFiltersButtonText={clearFiltersButtonText}
-                numberOfFilters={numberOfFilters}
-                numberOfFiltersText={numberOfFiltersText}
-                collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
-                customLabelGroupContent={customLabelGroupContent}
-              />
-            </ToolbarContext.Provider>
-          </div>
-        )}
+              <ToolbarContext.Provider
+                value={{
+                  isExpanded,
+                  toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
+                  labelGroupContentRef: this.labelGroupContentRef,
+                  updateNumberFilters: this.updateNumberFilters,
+                  numberOfFilters,
+                  clearAllFilters,
+                  clearFiltersButtonText,
+                  showClearFiltersButton,
+                  toolbarId: randomId,
+                  customLabelGroupContent,
+                  isContainer,
+                  toolbarRef: this.toolbarRef
+                }}
+              >
+                {children}
+                <ToolbarLabelGroupContent
+                  isExpanded={isExpanded}
+                  labelGroupContentRef={this.labelGroupContentRef}
+                  clearAllFilters={clearAllFilters}
+                  showClearFiltersButton={showClearFiltersButton}
+                  clearFiltersButtonText={clearFiltersButtonText}
+                  numberOfFilters={numberOfFilters}
+                  numberOfFiltersText={numberOfFiltersText}
+                  collapseListedFiltersBreakpoint={collapseListedFiltersBreakpoint}
+                  customLabelGroupContent={customLabelGroupContent}
+                />
+              </ToolbarContext.Provider>
+            </div>
+          );
+
+          return isContainer ? (
+            <PageContext.Provider value={{ ...pageContext, width: null }}>{toolbarContent}</PageContext.Provider>
+          ) : (
+            toolbarContent
+          );
+        }}
       </PageContext.Consumer>
     );
   };

package/src/components/Toolbar/ToolbarItem.tsx

@@ -21,6 +21,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
+    sm?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
     lg?: 'hidden' | 'visible';
     xl?: 'hidden' | 'visible';

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -3,12 +3,11 @@ import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarGroupProps } from './ToolbarGroup';
-import { ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
+import { globalBreakpoints, ToolbarContext, ToolbarContentContext } from './ToolbarUtils';
 import { Button } from '../Button';
-import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 import { formatBreakpointMods, toCamel } from '../../helpers/util';
-import { PageContext } from '../Page/PageContext';
 import { ToolbarExpandableContent } from './ToolbarExpandableContent';
+import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** Flag indicating when toggle group is expanded for non-managed toolbar toggle groups. */
@@ -156,10 +155,9 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
   toggleRef = createRef<HTMLButtonElement>();
   expandableContentRef = createRef<HTMLDivElement>();
 
-  isContentPopup = () => {
-    const viewportSize = typeof window !== 'undefined' ? window.innerWidth : 1200;
-    const lgBreakpointValue = parseInt(globalBreakpointLg.value);
-    return viewportSize < lgBreakpointValue;
+  isContentPopup = (width?: number) => {
+    const size = width ?? (typeof window !== 'undefined' ? window.innerWidth : 1200);
+    return size < globalBreakpoints.lg;
   };
 
   render() {
@@ -191,7 +189,7 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <ToolbarContext.Consumer>
-            {({ toggleIsExpanded: managedOnToggle }) => {
+            {({ toggleIsExpanded: managedOnToggle, isContainer, toolbarRef }) => {
               const _onToggle = onToggle !== undefined ? onToggle : managedOnToggle;
 
               return (
@@ -238,7 +236,10 @@ class ToolbarToggleGroup extends Component<ToolbarToggleGroupProps> {
                           onClick={_onToggle}
                           aria-label="Show Filters"
                           {...(_isExpanded && { 'aria-expanded': true })}
-                          aria-haspopup={_isExpanded && this.isContentPopup()}
+                          aria-haspopup={
+                            _isExpanded &&
+                            this.isContentPopup(isContainer ? toolbarRef?.current?.clientWidth : undefined)
+                          }
                           aria-controls={_isExpanded ? expandableContentId : undefined}
                           ref={this.toggleRef}
                           icon={toggleIcon}

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -15,6 +15,10 @@ export interface ToolbarContextProps {
   showClearFiltersButton?: boolean;
   toolbarId?: string;
   customLabelGroupContent?: React.ReactNode;
+  /** Flag indicating if the toolbar is a container */
+  isContainer?: boolean;
+  /** Ref to the toolbar root element */
+  toolbarRef?: RefObject<HTMLDivElement | null>;
 }
 
 export const ToolbarContext = createContext<ToolbarContextProps>({

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

@@ -299,4 +299,42 @@ describe('Toolbar', () => {
     );
     expect(screen.getByTestId('toolbar-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
   });
+
+  it('renders the container modifier when isContainer is true', () => {
+    render(<Toolbar isContainer data-testid="toolbar-container" />);
+
+    expect(screen.getByTestId('toolbar-container')).toHaveClass(styles.modifiers.container);
+  });
+
+  it('renders all responsive visibility modifiers', () => {
+    render(<ToolbarItem data-testid="toolbar-item" visibility={{ md: 'hidden', xl: 'visible' }} />);
+
+    const item = screen.getByTestId('toolbar-item');
+
+    expect(item).toHaveClass('pf-m-hidden-on-md');
+    expect(item).toHaveClass('pf-m-visible-on-xl');
+  });
+
+  it('renders all responsive row wrap modifiers', () => {
+    render(<ToolbarContent data-testid="toolbar-content" rowWrap={{ md: 'nowrap', xl: 'wrap' }} />);
+
+    const contentSection = screen.getByTestId('toolbar-content').querySelector('div');
+
+    expect(contentSection).toHaveClass('pf-m-nowrap-on-md');
+    expect(contentSection).toHaveClass('pf-m-wrap-on-xl');
+  });
+
+  it('renders the toggle group breakpoint modifier', () => {
+    render(
+      <Toolbar>
+        <ToolbarContent>
+          <ToolbarToggleGroup data-testid="toolbar-toggle-group" breakpoint="xl" toggleIcon={<span />}>
+            Content
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('toolbar-toggle-group')).toHaveClass('pf-m-show-on-xl');
+  });
 });

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

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
 import { Toolbar } from '../Toolbar';
 import { ToolbarContent } from '../ToolbarContent';
@@ -25,4 +26,24 @@ describe('ToolbarToggleGroup', () => {
 
     expect(myMock).toHaveBeenCalled();
   });
+
+  it('sets aria-haspopup when expandable content is a popup in a narrow toolbar container', () => {
+    const clientWidthMock = jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(600);
+
+    render(
+      <Toolbar isContainer>
+        <ToolbarContent>
+          <ToolbarToggleGroup breakpoint="lg" toggleIcon={<span />}>
+            Filter controls
+          </ToolbarToggleGroup>
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    const toggle = screen.getByRole('button', { name: 'Show Filters' });
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute('aria-haspopup', 'true');
+    clientWidthMock.mockRestore();
+  });
 });

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

@@ -6,6 +6,7 @@ section: components
 ---
 
 import { Fragment, useState, useLayoutEffect, useRef } from 'react';
+import './ToolbarContainerQuery.css';
 
 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';
@@ -78,6 +79,21 @@ To change the background color of a toolbar, use the `colorVariant` property on
 
 ```
 
+## Responsive toolbar behavior
+
+Toolbar width-based responsive modifiers use `@container` CSS queries with the global PatternFly breakpoints. Responsive inset modifiers (via the `inset` property) are an exception and use viewport media queries. Insets are an exception and rely on viewport media queries.
+
+By default, the PatternFly CSS establishes the `container-name` property with a value of `pf-v6-contain-toolbar` on `:root`, so the breakpoints behave like viewport breakpoints.
+
+Alternatively, if another wrapping element creates a container in the CSS with a `container-name` property value of `pf-v6-contain-toolbar` and `container-type` value of `inline-size` or `size` , the breakpoints will apply to that container's width instead.
+
+### Toolbar as container
+Add `isContainer` to the toolbar so width-based modifiers respond to the toolbar's width. Resize the dashed box in this example to see items and groups show and hide at the global breakpoints.
+
+```ts file="./ToolbarContainerQuery.tsx"
+
+```
+
 ## Examples with toggle groups and filters
 
 The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.

package/src/components/Toolbar/examples/ToolbarContainerQuery.css

@@ -0,0 +1,8 @@
+.toolbar-container-query-resize {
+  width: 100%;
+  min-width: 300px;
+  padding: var(--pf-t--global--spacer--sm);
+  overflow: auto;
+  resize: horizontal;
+  border: var(--pf-t--global--border--width--extra-strong) dashed var(--pf-t--global--border--color--default);
+}

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

@@ -0,0 +1,35 @@
+import { Button, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+
+export const ToolbarContainerQuery: React.FunctionComponent = () => (
+  <div className="toolbar-container-query-resize">
+    <Toolbar id="toolbar-container-query-example" isContainer>
+      <ToolbarContent>
+        <ToolbarItem visibility={{ md: 'hidden' }}>
+          <Button variant="secondary">Hide on md</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Item</Button>
+        </ToolbarItem>
+        <ToolbarItem visibility={{ default: 'hidden', sm: 'visible' }}>
+          <Button variant="secondary">Show on sm</Button>
+        </ToolbarItem>
+        <ToolbarGroup visibility={{ xl: 'hidden' }}>
+          <ToolbarItem>
+            <Button variant="secondary">Hide group on xl</Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="secondary">Hide group on xl</Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarGroup visibility={{ default: 'hidden', lg: 'visible' }}>
+          <ToolbarItem>
+            <Button variant="secondary">Show group on lg</Button>
+          </ToolbarItem>
+          <ToolbarItem>
+            <Button variant="secondary">Show group on lg</Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
+  </div>
+);