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

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>
   );
 };

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

@@ -25,7 +25,7 @@ export const MenuBasic: React.FunctionComponent = () => {
               itemId={1}
               to="#default-link2"
               // just for demo so that navigation is not triggered
-              onClick={event => event.preventDefault()}
+              onClick={(event) => event.preventDefault()}
             >
               Link
             </MenuItem>
@@ -33,10 +33,14 @@ export const MenuBasic: React.FunctionComponent = () => {
             <MenuItem isDisabled to="#default-link4">
               Disabled link
             </MenuItem>
-            <MenuItem isAriaDisabled tooltipProps={{content: "aria-disabled action", position: "top"}}>
+            <MenuItem isAriaDisabled tooltipProps={{ content: 'aria-disabled action', position: 'top' }}>
               Aria-disabled action
             </MenuItem>
-            <MenuItem isAriaDisabled to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+            <MenuItem
+              isAriaDisabled
+              to="#default-link5"
+              tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+            >
               Aria-disabled link
             </MenuItem>
           </MenuList>

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

@@ -8,7 +8,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.indexOf(item) !== -1) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

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

@@ -33,7 +33,7 @@ export const MenuScrollable: React.FunctionComponent = () => {
             itemId={15}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

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

@@ -33,7 +33,7 @@ export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {
             itemId={15}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

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

@@ -11,7 +11,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.indexOf(item) !== -1) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

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

@@ -8,7 +8,7 @@ export const MenuWithCheckbox: React.FunctionComponent = () => {
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;
     if (selectedItems.includes(item)) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+      setSelectedItems(selectedItems.filter((id) => id !== item));
     } else {
       setSelectedItems([...selectedItems, item]);
     }

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

@@ -20,7 +20,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
     if (actionId === 'fav') {
       const isFavorite = favorites.includes(itemId);
       if (isFavorite) {
-        setFavorites(favorites.filter(fav => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== itemId));
       } else {
         setFavorites([...favorites, itemId]);
       }
@@ -59,8 +59,8 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
             <MenuGroup label="Favorites" labelHeadingLevel="h3">
               <MenuList>
                 {items
-                  .filter(item => favorites.includes(item.itemId))
-                  .map(item => {
+                  .filter((item) => favorites.includes(item.itemId))
+                  .map((item) => {
                     const { text, description, itemId, action, actionId } = item;
                     return (
                       <MenuItem
@@ -81,7 +81,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
         )}
         <MenuGroup label="All actions" labelHeadingLevel="h3">
           <MenuList>
-            {items.map(item => {
+            {items.map((item) => {
               const { text, description, itemId, action, actionId } = item;
               const isFavorited = favorites.includes(item.itemId);
               return (

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

@@ -20,7 +20,7 @@ export const MenuWithFooter: React.FunctionComponent = () => {
             itemId={1}
             to="#default-link2"
             // just for demo so that navigation is not triggered
-            onClick={event => event.preventDefault()}
+            onClick={(event) => event.preventDefault()}
           >
             Link
           </MenuItem>

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

@@ -15,7 +15,7 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
       itemId={'view-more-1'}
       to="#default-link2"
       // just for demo so that navigation is not triggered
-      onClick={event => event.preventDefault()}
+      onClick={(event) => event.preventDefault()}
     >
       Link
     </MenuItem>,
@@ -95,7 +95,7 @@ export const MenuWithViewMore: React.FunctionComponent = () => {
     <Menu activeItemId={activeItem} onSelect={onSelect}>
       <MenuContent>
         <MenuList>
-          {visibleOptions.map(option => {
+          {visibleOptions.map((option) => {
             const props = option.props;
 
             return <MenuItem key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;

package/src/components/MenuToggle/MenuToggle.tsx

@@ -47,7 +47,7 @@ export interface MenuToggleProps
   innerRef?: React.Ref<MenuToggleElement>;
 }
 
-export class MenuToggleBase extends React.Component<MenuToggleProps> {
+class MenuToggleBase extends React.Component<MenuToggleProps> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',

package/src/components/MenuToggle/MenuToggleAction.tsx

@@ -15,7 +15,7 @@ export interface MenuToggleActionProps {
   id?: string;
 }
 
-export class MenuToggleAction extends React.Component<MenuToggleActionProps> {
+class MenuToggleAction extends React.Component<MenuToggleActionProps> {
   static displayName = 'MenuToggleAction';
   static defaultProps: MenuToggleActionProps = {
     className: '',
@@ -40,3 +40,5 @@ export class MenuToggleAction extends React.Component<MenuToggleActionProps> {
     );
   }
 }
+
+export { MenuToggleAction };

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -33,7 +33,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,
@@ -90,7 +90,7 @@ export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps,
           {...(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: isChecked })}
@@ -106,3 +106,5 @@ export class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps,
     );
   }
 }
+
+export { MenuToggleCheckbox };

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

@@ -10,7 +10,7 @@ import './MenuToggle.css'
 
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ## Examples
@@ -118,7 +118,7 @@ This can be used alongside a text label that provides more context for the image
 ```ts
 import React from 'react';
 import { MenuToggle, Avatar } from '@patternfly/react-core';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 <React.Fragment>
   <MenuToggle icon={<Avatar src={imgAvatar} alt="avatar" />}>Ned Username</MenuToggle>{' '}

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

@@ -1,5 +1,11 @@
 import React from 'react';
-import { MenuToggle, TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
+import {
+  MenuToggle,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button
+} from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const MenuToggleTypeahead: React.FunctionComponent = () => {
@@ -10,10 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
 
   return (
-    <MenuToggle
-      variant="typeahead"
-      isFullWidth
-    >
+    <MenuToggle variant="typeahead" isFullWidth>
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}
@@ -32,4 +35,4 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
       </TextInputGroup>
     </MenuToggle>
   );
-}
+};