@patternfly/react-core 6.3.0-prerelease.8 → 6.3.0

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -8,7 +8,7 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -70,38 +70,22 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 </Fragment>
 ```
 
-### With icons
+### Settings toggle
+
+To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
+```ts file="./MenuToggleSettings.tsx"
+
+```
+
+### Custom icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+```ts file="./MenuToggleCustomIcon.tsx"
 
-<Fragment>
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="primary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-    isDisabled
-  >
-    Icon
-  </MenuToggle>
-</Fragment>;
 ```
 
 ### With avatar and text
@@ -202,13 +186,13 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split toggle with checkbox and toggle text 
+### Split toggle with checkbox and toggle text
 
 To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 

package/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx

@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const MenuToggleCustomIcon: React.FC = () => (
+  <Fragment>
+    <MenuToggle icon={<PlusIcon />} variant="primary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+      Icon
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -0,0 +1,8 @@
+import { Fragment } from 'react/jsx-runtime';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSettings: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+  </Fragment>
+);

package/src/components/Nav/NavExpandable.tsx

@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                 </button>
               )}
             </PageSidebarContext.Consumer>
-            <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
+            <section
+              className={css(styles.navSubnav)}
+              aria-labelledby={this.id}
+              hidden={expandedState ? null : true}
+              {...(!expandedState && { inert: '' })}
+            >
               {srText && (
                 <h2 className="pf-v6-screen-reader" id={this.id}>
                   {srText}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-labelledby="''"
       class="pf-v6-c-nav__subnav"
       hidden=""
+      inert=""
     >
       <h2
         class="pf-v6-screen-reader"

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavExpandable } from '../NavExpandable';
+
+test('Renders with the inert attribute by default', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with the inert attribute when isExpanded is true', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
+});

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

@@ -223,6 +223,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -355,6 +356,7 @@ exports[`Nav Expandable Nav List 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -486,6 +488,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <h2
             class="pf-v6-screen-reader"

package/src/components/Page/PageToggleButton.tsx

@@ -10,6 +10,10 @@ export interface PageToggleButtonProps extends ButtonProps {
   onSidebarToggle?: () => void;
   /** Button id */
   id?: string;
+  /** Adds an accessible name to the toggle button. */
+  'aria-label'?: string;
+  /** Flag indicating whether the hamburger button variation with animations should be used. */
+  isHamburgerButton?: boolean;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
@@ -17,6 +21,8 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
   isSidebarOpen = true,
   onSidebarToggle = () => undefined as any,
   id = 'nav-toggle',
+  'aria-label': ariaLabel = 'Side navigation toggle',
+  isHamburgerButton,
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -32,12 +38,13 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
         <Button
           id={id}
           onClick={sidebarToggle}
-          aria-label="Side navigation toggle"
+          aria-label={ariaLabel}
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
+          isHamburger={isHamburgerButton}
           {...props}
         >
-          {children}
+          {!isHamburgerButton && children}
         </Button>
       );
     }}

package/src/components/Page/examples/Page.md

@@ -8,7 +8,7 @@ propComponents:
 
 import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,9 +17,7 @@ import {
   Card,
   CardBody
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-/* eslint-disable camelcase */
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -41,14 +39,12 @@ export const PageCenteredSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="centered-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -72,7 +68,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
+            <code>{pageSectionWidthLimitMaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Page/examples/PageGroupSection.tsx

@@ -22,7 +22,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -44,14 +43,12 @@ export const PageGroupSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="group-section-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-padding-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-variations-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="multiple-sidebar-body-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -14,7 +14,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageUncontrolledNav: React.FunctionComponent = () => {
   const headerToolbar = (
@@ -29,9 +28,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="uncontrolled-nav-toggle" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageVerticalNav: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="vertical-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="fill-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">

package/src/components/Popover/Popover.tsx

@@ -422,10 +422,22 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
           new Promise((resolve) => {
             const interval = setInterval(() => {
               if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
-                resolve();
                 clearInterval(interval);
+                resolve();
               }
             }, 10);
+
+            // Clear interval if promise is never resolved (component unmount)
+            const timeout = setTimeout(() => {
+              clearInterval(interval);
+              resolve(); // Resolve to prevent hanging promise
+            }, 5000); // 5 second timeout as safety net
+
+            // Store cleanup function for potential external cleanup
+            (resolve as any)._cleanup = () => {
+              clearInterval(interval);
+              clearTimeout(timeout);
+            };
           }),
         tabbableOptions: { displayCheck: 'none' },
 

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
-import { GenerateId, KeyTypes } from '../../helpers';
+import { GenerateId } from '../../helpers';
 import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
@@ -89,6 +89,19 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
   }, [isSearchMenuOpen]);
 
   useEffect(() => {
+    const onDocClick = (event: Event) => {
+      const clickedWithinSearchInput = parentRef && parentRef.current.contains(event.target as Node);
+      if (isSearchMenuOpen && !clickedWithinSearchInput) {
+        onToggleAdvancedMenu(event as any);
+      }
+    };
+
+    const onEscPress = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && isSearchMenuOpen) {
+        onToggleAdvancedMenu(event as any);
+      }
+    };
+
     document.addEventListener('mousedown', onDocClick);
     document.addEventListener('touchstart', onDocClick);
     document.addEventListener('keydown', onEscPress);
@@ -98,28 +111,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
       document.removeEventListener('touchstart', onDocClick);
       document.removeEventListener('keydown', onEscPress);
     };
-  });
-
-  const onDocClick = (event: Event) => {
-    const clickedWithinSearchInput = parentRef && parentRef.current.contains(event.target as Node);
-    if (isSearchMenuOpen && !clickedWithinSearchInput) {
-      onToggleAdvancedMenu(event as any);
-    }
-  };
-
-  const onEscPress = (event: KeyboardEvent) => {
-    if (
-      isSearchMenuOpen &&
-      event.key === KeyTypes.Escape &&
-      parentRef &&
-      parentRef.current.contains(event.target as Node)
-    ) {
-      onToggleAdvancedMenu(event as any);
-      if (parentInputRef) {
-        parentInputRef.current.focus();
-      }
-    }
-  };
+  }, [isSearchMenuOpen, parentRef, onToggleAdvancedMenu]);
 
   const onSearchHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     event.preventDefault();