@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.30

package/src/components/List/List.tsx

@@ -54,7 +54,7 @@ export const List: React.FunctionComponent<ListProps> = ({
 }: ListProps) =>
   component === ListComponent.ol ? (
     <ol
-      ref={ref as React.LegacyRef<HTMLOListElement>}
+      ref={ref as React.Ref<HTMLOListElement>}
       type={type}
       {...(isPlain && { role: 'list' })}
       {...props}
@@ -71,7 +71,7 @@ export const List: React.FunctionComponent<ListProps> = ({
     </ol>
   ) : (
     <ul
-      ref={ref as React.LegacyRef<HTMLUListElement>}
+      ref={ref as React.Ref<HTMLUListElement>}
       {...(isPlain && { role: 'list' })}
       {...props}
       className={css(

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -131,7 +131,6 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
           class="pf-v6-c-form__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-5"
             data-ouia-component-type="PF6/Button"
@@ -254,7 +253,6 @@ exports[`LoginForm LoginForm with show password 1`] = `
             class="pf-v6-c-input-group__item"
           >
             <button
-              aria-disabled="false"
               aria-label="Show password"
               class="pf-v6-c-button pf-m-control"
               data-ouia-component-id="OUIA-Generated-Button-control-1"
@@ -294,7 +292,6 @@ exports[`LoginForm LoginForm with show password 1`] = `
           class="pf-v6-c-form__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-6"
             data-ouia-component-type="PF6/Button"
@@ -418,7 +415,6 @@ exports[`LoginForm should render Login form 1`] = `
           class="pf-v6-c-form__actions"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary pf-m-block"
             data-ouia-component-id="OUIA-Generated-Button-primary-1"
             data-ouia-component-type="PF6/Button"

package/src/components/Masthead/examples/Masthead.md

@@ -6,12 +6,11 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.
 
- Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains  the page's header toolbar within `<MastheadContent>`.
+Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains the page's header toolbar within `<MastheadContent>`.
 
 ## Examples
 
@@ -45,7 +44,20 @@ To maintain proper layout and formatting, a `<Masthead>` should contain both a `
 ```ts file="./MastheadInsets.tsx"
 ```
 
-### With icon router link
+### Custom logo component
 
-```ts file="./MastheadIconRouterLink.tsx"
+In addition to being able to pass a string to the `component` property of `MastheadLogo`, you can provide more fine-tuned customization by passing a callback that returns a component.
+
+
+```ts file="./MastheadLogoCustomComponent.tsx"
 ```
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can follow our [custom logo component example](#custom-logo-component) and pass a callback to the `component` property of the `MastheadLogo`:
+
+```nolive
+<MastheadLogo component={(props) => <Link {...props} to="#" />}>
+  <Brand ...brandProps />
+</MastheadLogo>
+```

package/src/components/Masthead/examples/{MastheadIconRouterLink.tsx → MastheadLogoCustomComponent.tsx}

@@ -10,17 +10,16 @@ import {
   Brand
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
-export const MastheadIconRouterLink: React.FunctionComponent = () => (
+export const MastheadLogoCustomComponent: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
     <MastheadMain>
       <MastheadToggle>
         <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
       </MastheadToggle>
       <MastheadBrand>
-        <MastheadLogo component={(props) => <Link {...props} to="#" />}>
+        <MastheadLogo component={(props) => <a {...props} href="#" />}>
           <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadLogo>
       </MastheadBrand>

package/src/components/Menu/Menu.tsx

@@ -90,7 +90,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
   constructor(props: MenuProps) {
     super(props);
     if (props.innerRef) {
-      this.menuRef = props.innerRef as React.RefObject<HTMLDivElement>;
+      this.menuRef = props.innerRef as React.RefObject<HTMLDivElement | null>;
     }
   }
 
@@ -290,7 +290,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       >
         {isRootMenu && (
           <KeyboardHandler
-            containerRef={(this.menuRef as React.RefObject<HTMLDivElement>) || null}
+            containerRef={(this.menuRef as React.RefObject<HTMLDivElement | null>) || null}
             additionalKeyHandler={this.handleExtraKeys}
             createNavigableElements={this.createNavigableElements}
             isActiveElement={(element: Element) =>

package/src/components/Menu/MenuContent.tsx

@@ -57,7 +57,9 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
         <div
           {...rest}
           className={css(styles.menuContent, props.className)}
-          ref={(el) => refCallback(el, menuId, onGetMenuHeight)}
+          ref={(el) => {
+            refCallback(el, menuId, onGetMenuHeight);
+          }}
           style={
             {
               ...(menuHeight && { [cssHeight.name]: menuHeight }),

package/src/components/Menu/MenuItem.tsx

@@ -68,7 +68,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   /** Flag indicating the item is in danger state */
   isDanger?: boolean;
   /** Flyout menu. Should not be used if the to prop is defined. */
-  flyoutMenu?: React.ReactElement;
+  flyoutMenu?: React.ReactElement<any>;
   /** Callback function when mouse leaves trigger */
   onShowFlyout?: (event?: any) => void;
   /** Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
@@ -146,7 +146,9 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const flyoutContext = React.useContext(FlyoutContext);
   const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
-  const ref = React.useRef<HTMLLIElement>();
+  const ref = React.useRef<HTMLLIElement>(undefined);
+  const privateRef = React.useRef(undefined);
+  const innerComponentRef = innerRef || privateRef;
   const flyoutVisible = ref === flyoutRef;
 
   const hasFlyout = flyoutMenu !== undefined;
@@ -259,7 +261,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           menuId,
           typeof drilldownMenu === 'function'
             ? (drilldownMenu() as any).props.id
-            : (drilldownMenu as React.ReactElement).props.id,
+            : (drilldownMenu as React.ReactElement<any>).props.id,
           itemId
         );
     } else {
@@ -351,7 +353,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             {...(!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel })}
             {...(!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' })}
             {...(!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() })}
-            ref={innerRef}
+            ref={innerComponentRef}
             {...(!hasCheckbox && {
               onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
                 if (!isAriaDisabled) {
@@ -433,31 +435,34 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   );
 
   return (
-    <li
-      className={css(
-        styles.menuListItem,
-        isDisabled && styles.modifiers.disabled,
-        isAriaDisabled && styles.modifiers.ariaDisabled,
-        _isOnPath && styles.modifiers.currentPath,
-        isLoadButton && styles.modifiers.load,
-        isLoading && styles.modifiers.loading,
-        isFocused && 'pf-m-focus',
-        isDanger && styles.modifiers.danger,
-        className
-      )}
-      onMouseOver={() => {
-        if (!isAriaDisabled) {
-          onMouseOver();
-        }
-      }}
-      {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
-      ref={ref}
-      role={!hasCheckbox ? 'none' : 'menuitem'}
-      {...(hasCheckbox && { 'aria-label': ariaLabel })}
-      {...props}
-    >
-      {tooltipProps ? <Tooltip {...tooltipProps}>{renderItem}</Tooltip> : renderItem}
-    </li>
+    <>
+      <li
+        className={css(
+          styles.menuListItem,
+          isDisabled && styles.modifiers.disabled,
+          isAriaDisabled && styles.modifiers.ariaDisabled,
+          _isOnPath && styles.modifiers.currentPath,
+          isLoadButton && styles.modifiers.load,
+          isLoading && styles.modifiers.loading,
+          isFocused && 'pf-m-focus',
+          isDanger && styles.modifiers.danger,
+          className
+        )}
+        onMouseOver={() => {
+          if (!isAriaDisabled) {
+            onMouseOver();
+          }
+        }}
+        {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
+        ref={ref}
+        role={!hasCheckbox ? 'none' : 'menuitem'}
+        {...(hasCheckbox && { 'aria-label': ariaLabel })}
+        {...props}
+      >
+        {renderItem}
+      </li>
+      {tooltipProps && <Tooltip {...tooltipProps} triggerRef={innerComponentRef as any} />}
+    </>
   );
 };
 

package/src/components/Menu/__mocks__/Menu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuProps } from '../Menu';
 import cssMenuMinWidth from '@patternfly/react-tokens/dist/esm/c_menu_MinWidth';
 

package/src/components/Menu/__mocks__/MenuContent.tsx

@@ -1,3 +1 @@
-import React from 'react';
-
 export const MenuContent = ({ children }) => <div>{children}</div>;

package/src/components/Menu/__mocks__/MenuGroup.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuGroupProps } from '../MenuGroup';
 
 export const MenuGroup = ({ className, children, label, labelHeadingLevel }: MenuGroupProps) => (

package/src/components/Menu/__mocks__/MenuItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuItemProps } from '../MenuItem';
 
 export const MenuItem = ({ className, children, description, itemId }: MenuItemProps) => (

package/src/components/Menu/__mocks__/MenuList.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuListProps } from '../MenuList';
 
 export const MenuList = ({ className, children }: MenuListProps) => (

package/src/components/Menu/examples/Menu.md

@@ -229,3 +229,15 @@ To control the height of a menu, use the `maxMenuHeight` property. Selecting the
 ```ts file="MenuFilterDrilldown.tsx"
 
 ```
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can pass a callback to the `component` property of the `MenuItem`:
+
+```nolive
+<MenuItem
+  component={(props) => <Link {...props} to="#" />}
+>
+  {...Link Content}
+</MenuItem>
+```

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import {
   Badge,
   Breadcrumb,

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -90,7 +90,9 @@ class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouia
           {...(this.calculateChecked() !== undefined && { onChange: this.handleChange })}
           name={id}
           type="checkbox"
-          ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+          ref={(elem) => {
+            elem && (elem.indeterminate = isChecked === null);
+          }}
           aria-invalid={!isValid}
           disabled={isDisabled}
           {...(defaultChecked !== undefined ? { defaultChecked } : { checked: this.calculateChecked() })}

package/src/components/Modal/Modal.tsx

@@ -183,7 +183,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         {...props}
       />,
       this.getElement(appendTo)
-    ) as React.ReactElement;
+    ) as React.ReactElement<any>;
   }
 }
 

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -101,7 +101,6 @@ exports[`Modal Content Test with onclose 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -66,6 +66,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
         <input
           /* hidden, necessary for react-dropzone */
           {...getInputProps()}
+          hidden
         />
         {children}
       </div>

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

@@ -8,6 +8,7 @@ exports[`MultipleFileUpload renders custom class names 1`] = `
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -26,6 +27,7 @@ exports[`MultipleFileUpload renders with expected class names when horizontal 1`
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
@@ -44,6 +46,7 @@ exports[`MultipleFileUpload renders with expected class names when not horizonta
     tabindex="0"
   >
     <input
+      hidden=""
       multiple=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadButton.test.tsx.snap

@@ -6,7 +6,6 @@ exports[`MultipleFileUploadButton renders custom class names 1`] = `
     class="pf-v6-c-multiple-file-upload__upload test"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-2"
       data-ouia-component-type="PF6/Button"
@@ -29,7 +28,6 @@ exports[`MultipleFileUploadButton renders with aria-label applied to the button
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       aria-label="test"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-3"
@@ -53,7 +51,6 @@ exports[`MultipleFileUploadButton renders with expected class names 1`] = `
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-1"
       data-ouia-component-type="PF6/Button"
@@ -76,7 +73,6 @@ exports[`MultipleFileUploadButton renders with label applied to the button 1`] =
     class="pf-v6-c-multiple-file-upload__upload"
   >
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Button-secondary-4"
       data-ouia-component-type="PF6/Button"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadMain.test.tsx.snap

@@ -9,7 +9,6 @@ exports[`MultipleFileUploadMain passes props to the info component as expected 1
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-4"
         data-ouia-component-type="PF6/Button"
@@ -60,7 +59,6 @@ exports[`MultipleFileUploadMain passes props to the title as expected 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-3"
         data-ouia-component-type="PF6/Button"
@@ -87,7 +85,6 @@ exports[`MultipleFileUploadMain renders custom class names 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-2"
         data-ouia-component-type="PF6/Button"
@@ -114,7 +111,6 @@ exports[`MultipleFileUploadMain renders with expected class names 1`] = `
       class="pf-v6-c-multiple-file-upload__upload"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-secondary"
         data-ouia-component-id="OUIA-Generated-Button-secondary-1"
         data-ouia-component-type="PF6/Button"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -13,7 +13,6 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-2"
@@ -90,7 +89,6 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-4"
@@ -181,7 +179,6 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-3"
@@ -260,7 +257,6 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
       >
         <button
           aria-controls="generated-id-content"
-          aria-disabled="false"
           aria-expanded="true"
           class="pf-v6-c-button pf-m-link"
           data-ouia-component-id="OUIA-Generated-Button-link-1"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -89,7 +89,6 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="buttonAriaLabel"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -206,7 +205,6 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -325,7 +323,6 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -444,7 +441,6 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -580,7 +576,6 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-7"
@@ -699,7 +694,6 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -816,7 +810,6 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -935,7 +928,6 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       class="pf-v6-c-multiple-file-upload__status-item-close"
     >
       <button
-        aria-disabled="false"
         aria-label="Remove from list"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-6"

package/src/components/Nav/Nav.tsx

@@ -57,7 +57,7 @@ export interface NavContextProps {
   isHorizontal?: boolean;
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
-  navRef?: React.RefObject<HTMLElement>;
+  navRef?: React.RefObject<HTMLElement | null>;
 }
 export const navContextDefaults = {};
 export const NavContext = React.createContext<NavContextProps>(navContextDefaults);

package/src/components/Nav/NavItem.tsx

@@ -31,7 +31,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
   /** Component used to render NavItems if  React.isValidElement(children) is false */
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Flyout of a nav item. This should be a Menu component. Should not be used if the to prop is defined. */
-  flyout?: React.ReactElement;
+  flyout?: React.ReactElement<any>;
   /** Callback when flyout is opened or closed */
   onShowFlyout?: () => void;
   /** z-index of the flyout nav item */
@@ -67,9 +67,9 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const { isSidebarOpen } = React.useContext(PageSidebarContext);
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
   const [isHovered, setIsHovered] = React.useState(false);
-  const ref = React.useRef<HTMLLIElement>();
+  const ref = React.useRef<HTMLLIElement>(undefined);
   const flyoutVisible = ref === flyoutRef;
-  const popperRef = React.useRef<HTMLDivElement>();
+  const popperRef = React.useRef<HTMLDivElement>(undefined);
   const hasFlyout = flyout !== undefined;
   const Component = hasFlyout ? 'button' : (component as any);
 
@@ -200,7 +200,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
     );
   };
 
-  const renderClonedChild = (context: any, child: React.ReactElement): React.ReactNode =>
+  const renderClonedChild = (context: any, child: React.ReactElement<any>): React.ReactNode =>
     React.cloneElement(child, {
       onClick: (e: MouseEvent) => context.onSelect(e, groupId, itemId, to, preventDefault, onClick),
       'aria-current': isActive ? 'page' : null,
@@ -256,7 +256,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
         <NavContext.Consumer>
           {(context) =>
             React.isValidElement(children)
-              ? renderClonedChild(context, children as React.ReactElement)
+              ? renderClonedChild(context, children as React.ReactElement<any>)
               : renderDefaultLink(context)
           }
         </NavContext.Consumer>

package/src/components/Nav/examples/NavDrilldown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import { Nav, MenuContent, MenuItem, MenuList, DrilldownMenu, Menu } from '@patternfly/react-core';
 

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

@@ -3,7 +3,6 @@
 exports[`NotificationBadge count 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-read"
     data-ouia-component-id="OUIA-Generated-Button-stateful-3"
@@ -40,7 +39,6 @@ exports[`NotificationBadge count 1`] = `
 exports[`false NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-attention"
     data-ouia-component-id="OUIA-Generated-Button-stateful-2"
@@ -60,7 +58,6 @@ exports[`false NotificationBadge needs attention 1`] = `
 exports[`true NotificationBadge needs attention 1`] = `
 <DocumentFragment>
   <button
-    aria-disabled="false"
     aria-expanded="false"
     class="pf-v6-c-button pf-m-stateful pf-m-attention"
     data-ouia-component-id="OUIA-Generated-Button-stateful-1"