@patternfly/react-core 6.3.1 → 6.4.0-prerelease.1

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

@@ -1,7 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { JumpLinks } from '../JumpLinks';
 import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
+import * as utils from '../../../helpers/util';
+
+jest.spyOn(utils, 'getUniqueId').mockReturnValue('unique_id_mock');
 
 test('simple jumplinks', () => {
   const { asFragment } = render(
@@ -75,3 +78,195 @@ test('expandable vertical with subsection', () => {
   );
   expect(asFragment()).toMatchSnapshot();
 });
+
+// Revamped tests begin here
+
+const jumpLinksItems = (
+  <>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#" isActive>
+      Active section
+    </JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+  </>
+);
+
+const expandableJumpLinksItems = (
+  <>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#">
+      Section with active subsection
+      <JumpLinksList>
+        <JumpLinksItem href="#" isActive>
+          Active subsection
+        </JumpLinksItem>
+        <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+        <JumpLinksItem href="#">Inactive subsection</JumpLinksItem>
+      </JumpLinksList>
+    </JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+    <JumpLinksItem href="#">Inactive section</JumpLinksItem>
+  </>
+);
+
+test('renders label be default', () => {
+  render(<JumpLinks label="Jump to section">{jumpLinksItems}</JumpLinks>);
+  expect(screen.getByText(/Jump to section/i)).toBeTruthy();
+});
+
+test('does not render label when alwaysShowLabel is false', () => {
+  render(
+    <JumpLinks label="Jump to section" alwaysShowLabel={false}>
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(screen.queryByText(/Jump to section/i)).toBeFalsy();
+});
+
+test('uses aria-labelledby over aria-label when label and alwaysShowLabel are passed in', () => {
+  render(<JumpLinks label="Jump to section">{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('uses aria-labelledby over aria-label when expandable is passed in', () => {
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('random id is used with aria-labelledby by default in expandable case', () => {
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+});
+
+test('random id is used with aria-labelledby by default in label case', () => {
+  render(
+    <JumpLinks label="Jump to section" alwaysShowLabel>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+});
+
+test('custom labelId is used with aria-labelledby when it is passed in in expandable case', () => {
+  render(
+    <JumpLinks labelId="custom-id" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+});
+
+test('custom labelId is used with aria-labelledby when it is passed in in label case', () => {
+  render(
+    <JumpLinks label="Jump to section" labelId="custom-id" alwaysShowLabel>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+});
+
+test('uses aria-label instead of aria-labelledby by default', () => {
+  render(<JumpLinks aria-label="Custom aria label">{jumpLinksItems}</JumpLinks>);
+  const navigation = screen.getByRole('navigation', { name: /Custom aria label/i });
+  expect(navigation).toHaveAttribute('aria-label', 'Custom aria label');
+  expect(navigation).not.toHaveAttribute('aria-labelledby');
+});
+
+test('uses aria-label instead of aria-labelledby when label is provided but alwaysShowLabel is false', () => {
+  render(
+    <JumpLinks label="Jump to section" aria-label="Custom aria label" alwaysShowLabel={false}>
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation', { name: /Custom aria label/i });
+  expect(navigation).toHaveAttribute('aria-label', 'Custom aria label');
+  expect(navigation).not.toHaveAttribute('aria-labelledby');
+});
+
+test('aria-labelledby is used with provided labelId even when aria-label is also provided in expandable case', () => {
+  render(
+    <JumpLinks labelId="custom-id" aria-label="Custom aria label" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation');
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('aria-labelledby is used with provided labelId even when aria-label is also provided in label case', () => {
+  render(
+    <JumpLinks labelId="custom-id" aria-label="Custom aria label" label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  const navigation = screen.getByRole('navigation');
+  expect(navigation).toHaveAttribute('aria-labelledby', 'custom-id');
+  expect(navigation).not.toHaveAttribute('aria-label');
+});
+
+test('does not throw error when there is a label passed in"', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks alwaysShowLabel label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('does not throw error when there is an aria-label passed in"', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks alwaysShowLabel aria-label="Jump to section">
+      {jumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('throws error when no label or ariaLabel are passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(<JumpLinks alwaysShowLabel>{jumpLinksItems}</JumpLinks>);
+  expect(warnMock).toHaveBeenCalled();
+});
+
+test('does not throw error when there is a toggleAriaLabel and expandable prop passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks label="Jump to section" toggleAriaLabel="Jump to section" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('does not throw error when there is an aria-label and expandable prop passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(
+    <JumpLinks aria-label="Jump to section" expandable={{ default: 'expandable' }}>
+      {expandableJumpLinksItems}
+    </JumpLinks>
+  );
+  expect(warnMock).not.toHaveBeenCalled();
+});
+
+test('throws error when there is no toggle aria-label or aria-label but expandable is passed in', () => {
+  const warnMock = jest.fn() as any;
+  global.console = { warn: warnMock } as any;
+  render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
+  expect(warnMock).toHaveBeenCalled();
+});

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

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -17,11 +17,11 @@ exports[`expandable vertical with subsection 1`] = `
         >
           <button
             aria-expanded="false"
-            aria-label="Toggle jump links"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
+            id="unique_id_mock"
             type="button"
           >
             <span
@@ -52,13 +52,9 @@ exports[`expandable vertical with subsection 1`] = `
             </span>
           </button>
         </div>
-        <div
-          class="pf-v6-c-jump-links__label"
-        >
-          Jump to section
-        </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -349,7 +345,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -360,11 +356,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="unique_id_mock"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -550,7 +548,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-label="Jump to section"
+    aria-labelledby="unique_id_mock"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -561,11 +559,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
+          id="unique_id_mock"
         >
           Jump to section
         </div>
       </div>
       <ul
+        aria-labelledby="unique_id_mock"
         class="pf-v6-c-jump-links__list"
         role="list"
       >

package/src/components/JumpLinks/examples/JumpLinksBasic.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksBasic: React.FunctionComponent = () => (
-  <JumpLinks>
+  <JumpLinks aria-label="Jump to basic example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksExpandableVerticalWithSubsection.tsx

@@ -1,11 +1,11 @@
 import { JumpLinks, JumpLinksItem, JumpLinksList } from '@patternfly/react-core';
 
 export const JumpLinksExpandableVerticalWithSubsection: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section" expandable={{ default: 'expandable' }}>
+  <JumpLinks isVertical label="Jump to expandable vertical section" expandable={{ default: 'expandable' }}>
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#">
       Section with active subsection
-      <JumpLinksList>
+      <JumpLinksList aria-label="Expandable vertical section subsection">
         <JumpLinksItem href="#" isActive>
           Active subsection
         </JumpLinksItem>

package/src/components/JumpLinks/examples/JumpLinksVertical.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVertical: React.FunctionComponent = () => (
-  <JumpLinks isVertical>
+  <JumpLinks isVertical aria-label="Jump to vertical example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksVerticalWithLabel.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksVerticalWithLabel: React.FunctionComponent = () => (
-  <JumpLinks isVertical label="Jump to section">
+  <JumpLinks isVertical label="Jump to vertical example sections with labels">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksWithCenteredList.tsx

@@ -1,7 +1,7 @@
 import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksWithCenteredList: React.FunctionComponent = () => (
-  <JumpLinks isCentered>
+  <JumpLinks isCentered aria-label="Jump to centered example sections">
     <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     <JumpLinksItem href="#" isActive>
       Active section

package/src/components/JumpLinks/examples/JumpLinksWithLabel.tsx

@@ -2,14 +2,14 @@ import { JumpLinks, JumpLinksItem } from '@patternfly/react-core';
 
 export const JumpLinksWithLabel: React.FunctionComponent = () => (
   <>
-    <JumpLinks label="Jump to section">
+    <JumpLinks label="Jump to first section in jump links with label example">
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
       <JumpLinksItem href="#" isActive>
         Active section
       </JumpLinksItem>
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
     </JumpLinks>
-    <JumpLinks isCentered label="Jump to section">
+    <JumpLinks isCentered label="Jump to second section in jump links with label example">
       <JumpLinksItem href="#">Inactive section</JumpLinksItem>
       <JumpLinksItem href="#" isActive>
         Active section

package/src/components/Label/LabelGroup.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { fillTemplate } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
@@ -205,12 +205,12 @@ class LabelGroup extends Component<LabelGroupProps, LabelGroupState> {
         <div className={css(styles.labelGroupClose)}>
           <Button
             variant="plain"
-            hasNoPadding
+            size="sm"
             aria-label={closeBtnAriaLabel}
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesCircleIcon />}
+            icon={<TimesIcon />}
           />
         </div>
       );

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

@@ -255,7 +255,7 @@ exports[`LabelGroup label group with closable category 1`] = `
       <button
         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"
+        class="pf-v6-c-button pf-m-plain pf-m-small"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
@@ -271,11 +271,11 @@ exports[`LabelGroup label group with closable category 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 512 512"
+            viewBox="0 0 352 512"
             width="1em"
           >
             <path
-              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
             />
           </svg>
         </span>

package/src/components/Menu/Menu.tsx

@@ -4,6 +4,7 @@ import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 import { MenuContext } from './MenuContext';
+import type { MenuItemProps } from './MenuItem';
 import { canUseDOM } from '../../helpers/util';
 import { KeyboardHandler } from '../../helpers';
 export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'ref' | 'onSelect'>, OUIAProps {
@@ -14,7 +15,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   /** ID of the menu */
   id?: string;
   /** Callback for updating when item selection changes. You can also specify onClick on the MenuItem. */
-  onSelect?: (event?: React.MouseEvent, itemId?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent, itemId?: MenuItemProps['itemId']) => void;
   /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the MenuItem. */
   selected?: any | any[];
   /** Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. */
@@ -183,7 +184,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
       !(event.target as HTMLElement).classList.contains(breadcrumbStyles.breadcrumbLink)
     ) {
       this.activeMenu = (event.target as HTMLElement).closest(`.${styles.menu}`);
-      this.setState({ disableHover: true });
     }
 
     if ((event.target as HTMLElement).tagName === 'INPUT') {

package/src/components/Menu/MenuContainer.tsx

@@ -1,22 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { onToggleArrowKeydownDefault, Popper } from '../../helpers';
+import type { PopperOptions } from '../../helpers/Popper/Popper';
 
-export interface MenuPopperProps {
-  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
-  direction?: 'up' | 'down';
-  /** Horizontal position of the popper */
-  position?: 'right' | 'left' | 'center' | 'start' | 'end';
-  /** Custom width of the popper. If the value is "trigger", it will set the width to the dropdown toggle's width */
-  width?: string | 'trigger';
-  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the dropdown toggle's width */
-  minWidth?: string | 'trigger';
-  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the dropdown toggle's width */
-  maxWidth?: string | 'trigger';
-  /** Enable to flip the popper when it reaches the boundary */
-  enableFlip?: boolean;
-  /** Flag to prevent the popper from overflowing its container and becoming partially obscured. */
-  preventOverflow?: boolean;
-}
+/** @deprecated Use PopperOptions instead */
+export type MenuPopperProps = PopperOptions;
 
 export interface MenuContainerProps {
   /** Menu to be rendered */
@@ -39,7 +26,7 @@ export interface MenuContainerProps {
   /** z-index of the dropdown menu */
   zIndex?: number;
   /** Additional properties to pass to the Popper */
-  popperProps?: MenuPopperProps;
+  popperProps?: PopperOptions;
   /** @beta Flag indicating the first menu item should be focused after opening the dropdown. */
   shouldFocusFirstItemOnOpen?: boolean;
   /** Flag indicating if scroll on focus of the first menu item should occur. */

package/src/components/Menu/MenuGroup.tsx

@@ -20,22 +20,28 @@ export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
 const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   children,
   className = '',
-  label = '',
+  label,
   titleId,
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
 }: MenuGroupProps) => {
   const Wrapper = typeof label === 'function' ? label : HeadingLevel;
+  const hasLabel = label !== undefined && label !== null && label !== '';
+
   return (
     <section {...props} className={css(styles.menuGroup, className)} ref={innerRef}>
       <>
-        {['function', 'string'].includes(typeof label) ? (
-          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
-            {label}
-          </Wrapper>
-        ) : (
-          label
+        {hasLabel && (
+          <>
+            {['function', 'string'].includes(typeof label) ? (
+              <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
+                {label}
+              </Wrapper>
+            ) : (
+              label
+            )}
+          </>
         )}
         {children}
       </>

package/src/components/Menu/MenuItem.tsx

@@ -210,10 +210,10 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     if (flyoutTarget) {
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
-        const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
+        const flyoutItems = Array.from(flyoutMenu?.getElementsByTagName('UL')[0]?.children || []).filter(
           (el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains(styles.divider))
         );
-        (flyoutItems[0].firstChild as HTMLElement).focus();
+        (flyoutItems[0]?.firstChild as HTMLElement)?.focus();
       } else {
         flyoutTarget.focus();
       }

package/src/components/Menu/MenuItemAction.tsx

@@ -1,7 +1,6 @@
 import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
-import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import { MenuContext, MenuItemContext } from './MenuContext';
 import { Button } from '../Button';
 export interface MenuItemActionProps extends React.HTMLProps<HTMLDivElement> {
@@ -60,9 +59,11 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
                 ref={innerRef}
                 role="menuitem"
                 variant="plain"
+                isFavorite={isFavorited !== null}
+                isFavorited={isFavorited ?? false}
                 tabIndex={-1}
                 isDisabled={isDisabled || isDisabledContext}
-                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon /> : icon}
+                icon={isFavorited === null ? icon : undefined}
               />
             </div>
           );

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

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
 import { Menu } from '../Menu';
-import { MenuItem } from '../MenuItem';
+import { MenuItem, MenuItemProps } from '../MenuItem';
 import { MenuList } from '../MenuList';
 import { MenuContent } from '../MenuContent';
 
@@ -16,6 +16,44 @@ describe('Menu', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('should accept onSelect with various types', () => {
+    const onSelectMock = jest.fn();
+
+    const items: MenuItemProps[] = [
+      { itemId: 1, children: 'Item 1', key: 'item1' },
+      { itemId: new Date(1), children: 'Item 2', key: 'item2' },
+      { itemId: 'item3', children: 'Item 3', key: 'item3' },
+      { itemId: { some: 'object' }, children: 'Item 4', key: 'item4' },
+      { itemId: NaN, children: 'Item 5', key: 'item5' },
+      { itemId: null, children: 'Item 6', key: 'item6' },
+      { itemId: 0n, children: 'Item 7', key: 'item7' },
+      { itemId: true, children: 'Item 8', key: 'item8' },
+      { itemId: false, children: 'Item 9', key: 'item9' },
+      { itemId: -0, children: 'Item 10', key: 'item10' },
+      { itemId: '', children: 'Item 11', key: 'item11' }
+    ];
+
+    render(
+      <Menu activeItemId={0} onSelect={onSelectMock}>
+        <MenuContent>
+          <MenuList>
+            {items.map((item) => (
+              <MenuItem key={item.key} itemId={item.itemId}>
+                {item.children}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuContent>
+      </Menu>
+    );
+
+    for (const item of items) {
+      const menuItem = screen.getByText(item.children as string);
+      menuItem.click();
+      expect(onSelectMock).toHaveBeenCalledWith(expect.anything(), item.itemId);
+    }
+  });
+
   describe('with isPlain', () => {
     test('should render Menu with plain styles applied', () => {
       render(

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

@@ -14,8 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps',
-    'TooltipProps'
+    'TooltipProps',
+    'PopperOptions'
   ]
 ouia: true
 ---
@@ -241,4 +241,4 @@ Router links can be used for in-app linking in React environments to prevent pag
 >
   {...Link Content}
 </MenuItem>
-```
+```

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -50,6 +50,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLabel?: string;
   /** Associates the progress bar with it's label for accessibility purposes. Required when title not used */
   progressAriaLabelledBy?: string;
+  /** Adds an accessible description to the ProgressBar via space separated list of ids. Required when helperText is passed in. */
+  progressAriaDescribedBy?: string;
   /** Modifies the text announced by assistive technologies when the progress bar updates. */
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
@@ -74,6 +76,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressVariant,
   progressAriaLabel,
   progressAriaLabelledBy,
+  progressAriaDescribedBy,
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
@@ -161,6 +164,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           variant={variant}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
+          aria-describedby={progressAriaDescribedBy}
           id={progressId}
           helperText={progressHelperText}
         />