@patternfly/react-core 5.1.0 → 5.1.1-prerelease.2

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

@@ -6,8 +6,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id="test"
+      id="content-id"
+      role="region"
     >
       test
     </div>
@@ -16,9 +18,10 @@ exports[`Detached ExpandableSection renders successfully 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
   >
     <button
-      aria-controls="test"
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -54,7 +57,9 @@ exports[`Disclosure ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section pf-m-display-lg pf-m-limit-width"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -79,9 +84,11 @@ exports[`Disclosure ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
       test 
     </div>
@@ -95,7 +102,9 @@ exports[`ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -120,9 +129,11 @@ exports[`ExpandableSection 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
       test 
     </div>
@@ -136,8 +147,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded"
   >
     <button
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -162,8 +175,10 @@ exports[`Renders ExpandableSection expanded 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>
@@ -177,8 +192,10 @@ exports[`Renders ExpandableSection indented 1`] = `
     class="pf-v5-c-expandable-section pf-m-expanded pf-m-indented"
   >
     <button
+      aria-controls="content-id"
       aria-expanded="true"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -203,8 +220,10 @@ exports[`Renders ExpandableSection indented 1`] = `
       />
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>
@@ -218,7 +237,9 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
     class="pf-v5-c-expandable-section"
   >
     <button
+      aria-controls="content-id"
       class="pf-v5-c-expandable-section__toggle"
+      id="toggle-id"
       type="button"
     >
       <span
@@ -245,9 +266,11 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       </span>
     </button>
     <div
+      aria-labelledby="toggle-id"
       class="pf-v5-c-expandable-section__content"
       hidden=""
-      id=""
+      id="content-id"
+      role="region"
     >
        test 
     </div>

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -12,31 +12,39 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 ### Basic
 
 ```ts file="ExpandableSectionBasic.tsx"
+
 ```
 
 ### Uncontrolled
 
 ```ts file="ExpandableSectionUncontrolled.tsx"
+
 ```
 
 ### Uncontrolled with dynamic toggle text
 
 ```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
+
 ```
 
 ### Detached
 
+When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
+
 ```ts file="ExpandableSectionDetached.tsx"
+
 ```
 
 ### Disclosure variation
 
 ```ts file="ExpandableSectionDisclosure.tsx"
+
 ```
 
 ### Indented
 
 ```ts file="ExpandableSectionIndented.tsx"
+
 ```
 
 ### With custom toggle content
@@ -44,6 +52,7 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
 ```ts file="ExpandableSectionCustomToggle.tsx"
+
 ```
 
 ### Truncate expansion
@@ -51,4 +60,5 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.
 
 ```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
+
 ```

package/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx

@@ -8,16 +8,23 @@ export const ExpandableSectionDetached: React.FunctionComponent = () => {
     setIsExpanded(isExpanded);
   };
 
-  const contentId = 'detached-toggle-content';
+  const contentId = 'detached-expandable-section-content';
+  const toggleId = 'detached-expandable-section-toggle';
   return (
     <Stack hasGutter>
       <StackItem>
-        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+        <ExpandableSection isExpanded={isExpanded} isDetached toggleId={toggleId} contentId={contentId}>
           This content is visible only when the component is expanded.
         </ExpandableSection>
       </StackItem>
       <StackItem>
-        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+        <ExpandableSectionToggle
+          isExpanded={isExpanded}
+          onToggle={onToggle}
+          toggleId={toggleId}
+          contentId={contentId}
+          direction="up"
+        >
           {isExpanded ? 'Show less' : 'Show more'}
         </ExpandableSectionToggle>
       </StackItem>

package/src/components/FileUpload/FileUpload.tsx

@@ -91,7 +91,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   onReadFinished = () => {},
   onReadFailed = () => {},
   onClearClick,
-  onClick = event => event.preventDefault(),
+  onClick = (event) => event.preventDefault(),
   onTextChange,
   onDataChange,
   dropzoneProps = {},
@@ -105,7 +105,7 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
       if (type === fileReaderType.text || type === fileReaderType.dataURL) {
         onReadStarted(event, fileHandle);
         readFile(fileHandle, type as fileReaderType)
-          .then(data => {
+          .then((data) => {
             onReadFinished(event, fileHandle);
             onDataChange?.(event, data as string);
           })

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
+import {
+  FileUpload,
+  Form,
+  FormGroup,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  DropEvent
+} from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/Form/FormContext.tsx

@@ -125,5 +125,6 @@ export const FormContextProvider: React.FC<FormContextProviderProps> = ({ initia
     </FormContext.Provider>
   );
 };
+FormContextProvider.displayName = 'FormContextProvider';
 
 export const useFormContext = () => React.useContext(FormContext);

package/src/components/Form/FormSection.tsx

@@ -22,7 +22,7 @@ export const FormSection: React.FunctionComponent<FormSectionProps> = ({
   ...props
 }: FormSectionProps) => (
   <GenerateId prefix="pf-form-section-title">
-    {sectionId => (
+    {(sectionId) => (
       <section
         className={css(styles.formSection, className)}
         role="group"

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -48,7 +48,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
     >
       {isExpandable && (
         <GenerateId prefix="form-field-group-toggle">
-          {id => (
+          {(id) => (
             <FormFieldGroupToggle
               onToggle={onToggle}
               isExpanded={isExpanded}

package/src/components/FormSelect/FormSelect.tsx

@@ -39,7 +39,7 @@ export interface FormSelectProps
   ouiaSafe?: boolean;
 }
 
-export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId: string }> {
+class FormSelect extends React.Component<FormSelectProps, { ouiaStateId: string }> {
   static displayName = 'FormSelect';
   constructor(props: FormSelectProps) {
     super(props);
@@ -106,3 +106,5 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     );
   }
 }
+
+export { FormSelect };

package/src/components/HelperText/HelperTextItem.tsx

@@ -78,7 +78,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
 
       <span className={css(styles.helperTextItemText)}>
         {children}
-        {isDynamic && <span className="pf-v5-u-screen-reader">: {screenReaderText};</span>}
+        {isDynamic && <span className="pf-v5-screen-reader">: {screenReaderText};</span>}
       </span>
     </Component>
   );

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

@@ -45,7 +45,7 @@ exports[`HelperText dynamic helper text renders successfully 1`] = `
       >
         help test text
         <span
-          class="pf-v5-u-screen-reader"
+          class="pf-v5-screen-reader"
         >
           : default status;
         </span>

package/src/components/InputGroup/InputGroup.tsx

@@ -38,14 +38,14 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
     });
     return childId;
   };
-  const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+  const formCtrls = [FormSelect, TextArea, TextInput].map((comp) => comp.displayName);
   const idItem = getIdItem() as React.ReactElement<{ id: string }>;
   const ref = React.useRef(null);
   const inputGroupRef = innerRef || ref;
 
   const childrenWithId = React.Children.map(children, (child: any) => {
     if (child?.type.displayName === 'InputGroupItem') {
-      const newChildren = React.Children.map(child.props.children, _child => {
+      const newChildren = React.Children.map(child.props.children, (_child) => {
         if (!_child.props) {
           return _child;
         }
@@ -78,6 +78,7 @@ export const InputGroupBase: React.FunctionComponent<InputGroupProps> = ({
     </div>
   );
 };
+InputGroupBase.displayName = 'InputGroupBase';
 
 export const InputGroup = React.forwardRef((props: InputGroupProps, ref: React.Ref<HTMLDivElement>) => (
   <InputGroupBase innerRef={ref} {...props} />

package/src/components/JumpLinks/JumpLinks.tsx

@@ -114,11 +114,15 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
     const scrollPosition = Math.ceil(scrollableElement.scrollTop + offset);
     window.requestAnimationFrame(() => {
       let newScrollItems = scrollItems;
-      // Items might have rendered after this component. Do a quick refresh.
-      if (!newScrollItems[0] || newScrollItems.includes(null)) {
+      // Items might have rendered after this component or offsetTop values may need
+      // to be updated. Do a quick refresh.
+      const requiresRefresh =
+        newScrollItems.every((e) => !e?.offsetTop) || !newScrollItems[0] || newScrollItems.includes(null);
+      if (requiresRefresh) {
         newScrollItems = getScrollItems(children, []);
         setScrollItems(newScrollItems);
       }
+
       const scrollElements = newScrollItems
         .map((e, index) => ({
           y: e ? e.offsetTop : null,
@@ -189,6 +193,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
+                  window.history.pushState('', '', ev.currentTarget.href);
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

package/src/components/JumpLinks/JumpLinksItem.tsx

@@ -29,8 +29,8 @@ export const JumpLinksItem: React.FunctionComponent<JumpLinksItemProps> = ({
   ...props
 }: JumpLinksItemProps) => {
   const childrenArr = React.Children.toArray(children) as any[];
-  const sublists = childrenArr.filter(child => child.type === JumpLinksList);
-  children = childrenArr.filter(child => child.type !== JumpLinksList);
+  const sublists = childrenArr.filter((child) => child.type === JumpLinksList);
+  children = childrenArr.filter((child) => child.type !== JumpLinksList);
 
   return (
     <li

package/src/components/Label/LabelGroup.tsx

@@ -67,7 +67,7 @@ interface LabelGroupState {
   isTooltipVisible: boolean;
 }
 
-export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
+class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
   static displayName = 'LabelGroup';
   constructor(props: LabelGroupProps) {
     super(props);
@@ -105,7 +105,7 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
   }
 
   toggleCollapse = () => {
-    this.setState(prevState => ({
+    this.setState((prevState) => ({
       isOpen: !prevState.isOpen,
       isTooltipVisible: Boolean(
         this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth
@@ -232,7 +232,9 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
     };
 
     return numChildren === 0 && addLabelControl === undefined ? null : (
-      <GenerateId>{randomId => renderLabelGroup(this.props.id || randomId)}</GenerateId>
+      <GenerateId>{(randomId) => renderLabelGroup(this.props.id || randomId)}</GenerateId>
     );
   }
 }
+
+export { LabelGroup };

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

@@ -165,10 +165,8 @@ export const LabelFilled: React.FunctionComponent = () => (
     </Label>
     <br />
     <br />
-    <div style={{width: "250px"}}>
-      <Label>
-        Label that overflows its parent, but has no textMaxWidth on its own
-      </Label>
+    <div style={{ width: '250px' }}>
+      <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>
     </div>
   </React.Fragment>
 );

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

@@ -43,7 +43,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
       Blue link removable
     </Label>
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="blue"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Blue label with icon that overflows
     </Label>
     <br />
@@ -66,7 +72,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
       Green link removable
     </Label>
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="green"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Green label with icon that overflows
     </Label>
     <br />
@@ -89,7 +101,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
       Orange link removable
     </Label>
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="orange"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Orange label with icon that overflows
     </Label>
     <br />
@@ -112,7 +130,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
       Red link removable
     </Label>
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="red"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Red label with icon that overflows
     </Label>
     <br />
@@ -135,7 +159,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
       Purple link removable
     </Label>
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="purple"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Purple label with icon that overflows
     </Label>
     <br />
@@ -158,7 +188,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
       Cyan link removable
     </Label>
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="cyan"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Cyan label with icon that overflows
     </Label>
     <br />
@@ -181,7 +217,13 @@ export const LabelOutline: React.FunctionComponent = () => (
     <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
       Gold link removable
     </Label>
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+    <Label
+      variant="outline"
+      color="gold"
+      icon={<InfoCircleIcon />}
+      onClose={() => Function.prototype}
+      textMaxWidth="16ch"
+    >
       Gold label with icon that overflows
     </Label>
   </React.Fragment>

package/src/components/Label/index.ts

@@ -1,2 +1,2 @@
 export * from './Label';
-export * from './LabelGroup';
+export * from './LabelGroup';

package/src/components/LoginPage/LoginForm.tsx

@@ -121,9 +121,7 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
       <FormGroup label={passwordLabel} isRequired fieldId="pf-login-password-id">
         {isShowPasswordEnabled && (
           <InputGroup>
-            <InputGroupItem isFill>
-              {passwordInput}
-            </InputGroupItem>
+            <InputGroupItem isFill>{passwordInput}</InputGroupItem>
             <InputGroupItem>
               <Button
                 variant="control"

package/src/components/LoginPage/examples/LoginPage.md

@@ -17,8 +17,7 @@ propComponents:
     'LoginMainFooterLinksItem',
   ]
 ---
-
-import brandImg2 from './brandImgColor2.svg';
+import brandImg2 from '../../assets/brandImgColor2.svg';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from './brandImgColor2.svg';
+import brandImg2 from '../../assets/brandImgColor2.svg';
 import {
   LoginFooterItem,
   LoginForm,

package/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from './brandImgColor2.svg';
+import brandImg2 from '../../assets/brandImgColor2.svg';
 import {
   LoginFooterItem,
   LoginForm,

package/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import brandImg2 from './brandImgColor2.svg';
+import brandImg2 from '../../assets/brandImgColor2.svg';
 import {
   LoginFooterItem,
   LoginForm,

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

@@ -7,7 +7,7 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo.svg';
+import pfIcon from '../../assets/pf-logo.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -213,7 +213,7 @@ import React from 'react';
 import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, Brand } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
-import pfIcon from './pf-logo.svg';
+import pfIcon from '../../assets/pf-logo.svg';
 
 <Masthead id="icon-router-link">
   <MastheadToggle>

package/src/components/Menu/MenuItem.tsx

@@ -25,6 +25,10 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
+  /** Navigation link target. Only set when the to property is present. If isExternalLink is also passed in, this property will be set to "_blank". */
+  target?: string;
+  /** Navigation link relationship. Only set when the to property is present. */
+  rel?: string;
   /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
@@ -113,6 +117,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   id,
   'aria-label': ariaLabel,
   tooltipProps,
+  rel,
+  target,
   ...props
 }: MenuItemProps) => {
   const {
@@ -264,7 +270,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       'aria-disabled': isDisabled || isAriaDisabled ? true : null,
       // prevent invalid 'disabled' attribute on <a> tags
       disabled: null,
-      target: isExternalLink ? '_blank' : null
+      target: isExternalLink ? '_blank' : target,
+      rel
     };
   } else if (Component === 'button') {
     additionalProps = {
@@ -309,6 +316,23 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       setFlyoutRef(null);
     }
   };
+
+  React.useEffect(() => {
+    if (isFocused && ref.current) {
+      const itemEl = ref.current;
+      const parentListEl = itemEl.parentElement;
+
+      if (parentListEl) {
+        const isAboveTop = itemEl.offsetTop - parentListEl.offsetTop < parentListEl.scrollTop;
+        const isBelowBottom = itemEl.offsetTop - parentListEl.offsetTop + itemEl.clientHeight;
+
+        if (isAboveTop || isBelowBottom) {
+          itemEl.scrollIntoView({ behavior: 'auto', block: 'nearest' });
+        }
+      }
+    }
+  }, [isFocused]);
+
   const isSelectMenu = menuRole === 'listbox';
 
   const renderItem = (
@@ -428,13 +452,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       {...(hasCheckbox && { 'aria-label': ariaLabel })}
       {...props}
     >
-      {tooltipProps ? (
-        <Tooltip {...tooltipProps}>
-          {renderItem}
-        </Tooltip>
-      ) : (
-        renderItem
-      )}
+      {tooltipProps ? <Tooltip {...tooltipProps}>{renderItem}</Tooltip> : renderItem}
     </li>
   );
 };