@patternfly/react-core 6.2.0-prerelease.2 → 6.2.0-prerelease.21

package/src/components/JumpLinks/JumpLinks.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import sidebarStyles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
-import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
-import { JumpLinksList } from './JumpLinksList';
-import { formatBreakpointMods } from '../../helpers/util';
-import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links__toggle_Display';
-import { canUseDOM } from '../../helpers/util';
+import { Button } from '../Button';
+import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
+import { JumpLinksList } from './JumpLinksList';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -22,7 +21,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. */
-  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>;
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement | null>;
   /** Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. */
   scrollableSelector?: string;
   /** The index of the child Jump link to make active. */
@@ -46,6 +45,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   toggleAriaLabel?: string;
   /** Class for nav */
   className?: string;
+  /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
+  shouldReplaceNavHistory?: boolean;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -92,6 +93,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   alwaysShowLabel = true,
   toggleAriaLabel = 'Toggle jump links',
   className,
+  shouldReplaceNavHistory = false,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -100,7 +102,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  const navRef = React.useRef<HTMLElement>();
+  const navRef = React.useRef<HTMLElement>(undefined);
 
   let scrollableElement: HTMLElement;
 
@@ -111,7 +113,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       } else if (typeof scrollableRef === 'function') {
         return scrollableRef();
       }
-      return (scrollableRef as React.RefObject<HTMLElement>).current;
+      return (scrollableRef as React.RefObject<HTMLElement | null>).current;
     } else if (scrollableSelector) {
       return document.querySelector(scrollableSelector) as HTMLElement;
     }
@@ -207,7 +209,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  if (shouldReplaceNavHistory) {
+                    window.history.replaceState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  } else {
+                    window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  }
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

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

@@ -16,7 +16,6 @@ exports[`expandable vertical with subsection 1`] = `
           class="pf-v6-c-jump-links__toggle"
         >
           <button
-            aria-disabled="false"
             aria-expanded="false"
             aria-label="Toggle jump links"
             class="pf-v6-c-button pf-m-plain"
@@ -70,7 +69,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-13"
               data-ouia-component-type="PF6/Button"
@@ -96,7 +94,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-14"
               data-ouia-component-type="PF6/Button"
@@ -126,7 +123,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-15"
                   data-ouia-component-type="PF6/Button"
@@ -152,7 +148,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-16"
                   data-ouia-component-type="PF6/Button"
@@ -178,7 +173,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-17"
                   data-ouia-component-type="PF6/Button"
@@ -206,7 +200,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-18"
               data-ouia-component-type="PF6/Button"
@@ -232,7 +225,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-19"
               data-ouia-component-type="PF6/Button"
@@ -279,7 +271,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
               data-ouia-component-type="PF6/Button"
@@ -306,7 +297,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-5"
               data-ouia-component-type="PF6/Button"
@@ -332,7 +322,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-6"
               data-ouia-component-type="PF6/Button"
@@ -386,7 +375,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-7"
               data-ouia-component-type="PF6/Button"
@@ -413,7 +401,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-8"
               data-ouia-component-type="PF6/Button"
@@ -439,7 +426,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-9"
               data-ouia-component-type="PF6/Button"
@@ -486,7 +472,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-1"
               data-ouia-component-type="PF6/Button"
@@ -513,7 +498,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-2"
               data-ouia-component-type="PF6/Button"
@@ -539,7 +523,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-3"
               data-ouia-component-type="PF6/Button"
@@ -593,7 +576,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-10"
               data-ouia-component-type="PF6/Button"
@@ -620,7 +602,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-11"
               data-ouia-component-type="PF6/Button"
@@ -646,7 +627,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-12"
               data-ouia-component-type="PF6/Button"

package/src/components/Label/Label.tsx

@@ -31,6 +31,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   isDisabled?: boolean;
   /** Flag indicating the label is editable. */
   isEditable?: boolean;
+  /** Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. This should be manually set when using the render prop. */
+  isClickable?: boolean;
   /** Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
   editableProps?: any;
   /** Callback when an editable label completes an edit. */
@@ -110,6 +112,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   isCompact = false,
   isDisabled = false,
   isEditable = false,
+  isClickable: isClickableProp = false,
   editableProps,
   textMaxWidth,
   tooltipPosition,
@@ -127,12 +130,12 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 }: LabelProps) => {
   const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
-  const editableButtonRef = React.useRef<HTMLButtonElement>();
-  const editableInputRef = React.useRef<HTMLInputElement>();
+  const editableButtonRef = React.useRef<HTMLButtonElement>(undefined);
+  const editableInputRef = React.useRef<HTMLInputElement>(undefined);
 
   const isOverflowLabel = variant === 'overflow';
   const isAddLabel = variant === 'add';
-  const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+  const isClickable = isClickableProp || (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
 
   let _icon;
   if (status) {
@@ -245,7 +248,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const closeButton = <span className={css(styles.labelActions)}>{closeBtn || defaultCloseButton}</span>;
   const textRef = React.createRef<any>();
   // ref to apply tooltip when rendered is used
-  const componentRef = React.useRef();
+  const componentRef = React.useRef(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
     const currTextRef = isEditable ? editableButtonRef : textRef;

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

@@ -19,7 +19,6 @@ exports[`Label editable label 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -157,7 +156,6 @@ exports[`Label label with close button 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -206,7 +204,6 @@ exports[`Label label with close button and outline variant 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -253,7 +253,6 @@ exports[`LabelGroup label group with closable category 1`] = `
       class="pf-v6-c-label-group__close"
     >
       <button
-        aria-disabled="false"
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"

package/src/components/Label/examples/Label.md

@@ -7,7 +7,6 @@ propComponents: ['Label', 'LabelGroup']
 
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
 import './Label.css';
 
 ## Examples
@@ -30,9 +29,11 @@ import './Label.css';
 
 ```
 
-### Label with router link
+### Label with custom render
 
-```ts file="LabelRouterLink.tsx"
+Labels may be passed a custom renderer to display customized content or for use with router components. When using a custom render, `isClickable` may also be passed to remove the underline text decoration of anchors or router links.
+
+```ts file="LabelCustomRender.tsx"
 
 ```
 
@@ -97,3 +98,19 @@ The contents of a label group can be modified by removing labels or adding new o
 ```ts file="LabelGroupEditableAdd.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 use the `render` property of the `Label`:
+
+```nolive
+<Label
+  render={({ className, content, componentRef }) => (
+    <Link to="/" className={className} innerRef={componentRef}>
+      {content}
+    </Link>
+  )}
+>
+  Label router link
+</Label>
+```

package/src/components/Label/examples/{LabelRouterLink.tsx → LabelCustomRender.tsx}

@@ -1,19 +1,19 @@
 import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
 
-export const LabelRouterLink: React.FunctionComponent = () => (
+export const LabelCustomRender: React.FunctionComponent = () => (
   <Label
     color="blue"
     icon={<InfoCircleIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (
-      <Link to="/" className={className} innerRef={componentRef}>
+      <a className={className} ref={componentRef}>
         {content}
-      </Link>
+      </a>
     )}
     textMaxWidth="16ch"
+    isClickable
   >
     Blue label router link with icon that overflows
   </Label>

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
-  const toggleRef = React.useRef<HTMLDivElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const containerRef = React.useRef<HTMLDivElement>(undefined);
 
   const [idIndex, setIdIndex] = React.useState<number>(3);
   const [isOpen, setIsOpen] = React.useState<boolean>(false);

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,7 @@ 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 flyoutVisible = ref === flyoutRef;
 
   const hasFlyout = flyoutMenu !== undefined;
@@ -259,7 +259,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 {

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"