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

package/src/components/Menu/MenuContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createRef, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import { MenuContext } from './MenuContext';
@@ -18,9 +18,9 @@ export interface MenuContentProps extends React.HTMLProps<HTMLElement> {
   getHeight?: (height: string) => void;
 }
 
-export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React.Ref<HTMLDivElement>) => {
+export const MenuContent = forwardRef((props: MenuContentProps, ref: React.Ref<HTMLDivElement>) => {
   const { getHeight, children, menuHeight, maxMenuHeight, ...rest } = props;
-  const menuContentRef = React.createRef<HTMLDivElement>();
+  const menuContentRef = createRef<HTMLDivElement>();
   const refCallback = (el: HTMLElement, menuId: string, onGetMenuHeight: (menuId: string, height: number) => void) => {
     if (el) {
       let clientHeight = el.clientHeight;

package/src/components/Menu/MenuContext.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
-
-export const MenuContext = React.createContext<{
+import { createContext } from 'react';
+export const MenuContext = createContext<{
   menuId?: string;
   parentMenu?: string;
   onSelect?: (event?: any, itemId?: any) => void;
@@ -39,7 +38,7 @@ export const MenuContext = React.createContext<{
   role: 'menu'
 });
 
-export const MenuItemContext = React.createContext<{
+export const MenuItemContext = createContext<{
   itemId?: any;
   isDisabled?: boolean;
 }>({

package/src/components/Menu/MenuFooter.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 

package/src/components/Menu/MenuGroup.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
@@ -43,7 +43,7 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   );
 };
 
-export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
+export const MenuGroup = forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />
 ));
 MenuGroup.displayName = 'MenuGroup';

package/src/components/Menu/MenuItem.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext, forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import topOffset from '@patternfly/react-tokens/dist/esm/c_menu_m_flyout__menu_top_offset';
@@ -85,7 +85,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   id?: string;
 }
 
-const FlyoutContext = React.createContext({
+const FlyoutContext = createContext({
   direction: 'right' as 'left' | 'right'
 });
 
@@ -138,16 +138,16 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     setFlyoutRef,
     disableHover,
     role: menuRole
-  } = React.useContext(MenuContext);
+  } = useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
   if (hasCheckbox && !to) {
     Component = 'label' as any;
   }
-  const [flyoutTarget, setFlyoutTarget] = React.useState(null);
-  const flyoutContext = React.useContext(FlyoutContext);
-  const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
-  const ref = React.useRef<HTMLLIElement>(undefined);
-  const privateRef = React.useRef(undefined);
+  const [flyoutTarget, setFlyoutTarget] = useState(null);
+  const flyoutContext = useContext(FlyoutContext);
+  const [flyoutXDirection, setFlyoutXDirection] = useState(flyoutContext.direction);
+  const ref = useRef<HTMLLIElement>(undefined);
+  const privateRef = useRef(undefined);
   const innerComponentRef = innerRef || privateRef;
   const flyoutVisible = ref === flyoutRef;
 
@@ -202,11 +202,11 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     }
   }, [flyoutVisible, flyoutMenu]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setFlyoutXDirection(flyoutContext.direction);
   }, [flyoutContext]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (flyoutTarget) {
       if (flyoutVisible) {
         const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
@@ -323,7 +323,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isFocused && ref.current) {
       const itemEl = ref.current;
       const parentListEl = itemEl.parentElement;
@@ -466,7 +466,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   );
 };
 
-export const MenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<any>) => (
+export const MenuItem = forwardRef((props: MenuItemProps, ref: React.Ref<any>) => (
   <MenuItemBase {...props} innerRef={ref} />
 ));
 

package/src/components/Menu/MenuItemAction.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+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';
@@ -72,7 +72,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
   </MenuContext.Consumer>
 );
 
-export const MenuItemAction = React.forwardRef((props: MenuItemActionProps, ref: React.Ref<HTMLButtonElement>) => (
+export const MenuItemAction = forwardRef((props: MenuItemActionProps, ref: React.Ref<HTMLButtonElement>) => (
   <MenuItemActionBase {...props} innerRef={ref} />
 ));
 MenuItemAction.displayName = 'MenuItemAction';

package/src/components/Menu/MenuList.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 import { MenuContext } from './MenuContext';
@@ -23,7 +23,7 @@ export const MenuList: React.FunctionComponent<MenuListProps> = ({
   'aria-label': ariaLabel,
   ...props
 }: MenuListProps) => {
-  const { role } = React.useContext(MenuContext);
+  const { role } = useContext(MenuContext);
 
   return (
     <ul

package/src/components/Menu/MenuSearch.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
@@ -9,7 +9,7 @@ export interface MenuSearchProps extends React.HTMLProps<HTMLElement> {
   innerRef?: React.Ref<any>;
 }
 
-export const MenuSearch = React.forwardRef((props: MenuSearchProps, ref: React.Ref<HTMLDivElement>) => (
+export const MenuSearch = forwardRef((props: MenuSearchProps, ref: React.Ref<HTMLDivElement>) => (
   <div {...props} className={css(styles.menuSearch, props.className)} ref={ref} />
 ));
 MenuSearch.displayName = 'MenuSearch';

package/src/components/Menu/MenuSearchInput.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
@@ -9,7 +9,7 @@ export interface MenuSearchInputProps extends React.HTMLProps<HTMLElement> {
   innerRef?: React.Ref<any>;
 }
 
-export const MenuSearchInput = React.forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
+export const MenuSearchInput = forwardRef((props: MenuSearchInputProps, ref: React.Ref<HTMLDivElement>) => (
   // Update to use the styles object when core adds the class
   <div {...props} className={css(`${styles.menuSearch}-input`, props.className)} ref={ref} />
 ));

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

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 

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

@@ -20,6 +20,7 @@ propComponents:
 ouia: true
 ---
 
+import { Fragment } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core';
 
 export const MenuBasic: React.FunctionComponent = () => {
@@ -16,7 +16,7 @@ export const MenuBasic: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Menu activeItemId={activeItem} onSelect={onSelect} isPlain={isPlain}>
         <MenuContent>
           <MenuList>
@@ -56,6 +56,6 @@ export const MenuBasic: React.FunctionComponent = () => {
           name="toggle-plain"
         />
       </div>
-    </React.Fragment>
+    </Fragment>
   );
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core';
 
 export const MenuDangerMenuItem: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Menu,
   MenuContent,

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Menu,
   MenuList,

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollable: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithCheckbox: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

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

@@ -1,4 +1,4 @@
-import React, { type JSX } from 'react';
+import { type JSX, useState } from 'react';
 import {
   Badge,
   Breadcrumb,
@@ -26,12 +26,12 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
-  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element | null>();
-  const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<any>({});
+  const [activeMenu, setActiveMenu] = useState<string>('breadcrumbs-rootMenu');
+  const [breadcrumb, setBreadcrumb] = useState<JSX.Element | null>();
+  const [withMaxMenuHeight, setWithMaxMenuHeight] = useState(false);
 
   const onToggle = (isOpen: boolean, key: string) => {
     switch (key) {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
@@ -55,7 +55,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} onActionClick={onFavorite} activeItemId={activeItem}>
       <MenuContent>
         {favorites.length > 0 && (
-          <React.Fragment>
+          <Fragment>
             <MenuGroup label="Favorites" labelHeadingLevel="h3">
               <MenuList>
                 {items
@@ -77,7 +77,7 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
               </MenuList>
             </MenuGroup>
             <Divider />
-          </React.Fragment>
+          </Fragment>
         )}
         <MenuGroup label="All actions" labelHeadingLevel="h3">
           <MenuList>

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core';
 
 export const MenuWithFooter: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithLinks: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
 
 export const MenuWithSeparators: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core';
 
 export const MenuWithTitledGroups: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core';
 
 export const MenuWithViewMore: React.FunctionComponent = () => {

package/src/components/MenuToggle/MenuToggle.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, forwardRef, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
@@ -72,7 +72,7 @@ interface MenuToggleState {
   ouiaStateId: string;
 }
 
-class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
+class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
   displayName = 'MenuToggleBase';
   static defaultProps: MenuToggleProps = {
     className: '',
@@ -146,7 +146,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       <>
         {icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
         {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
-        {React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
+        {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
         {isTypeahead ? (
           <button
             type="button"
@@ -234,7 +234,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
   }
 }
 
-export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
+export const MenuToggle = forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 

package/src/components/MenuToggle/MenuToggleAction.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
 import { css } from '@patternfly/react-styles';
 
@@ -15,7 +15,7 @@ export interface MenuToggleActionProps {
   id?: string;
 }
 
-class MenuToggleAction extends React.Component<MenuToggleActionProps> {
+class MenuToggleAction extends Component<MenuToggleActionProps> {
   static displayName = 'MenuToggleAction';
   static defaultProps: MenuToggleActionProps = {
     className: '',

package/src/components/MenuToggle/MenuToggleCheckbox.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component } from 'react';
 import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
@@ -33,7 +33,7 @@ export interface MenuToggleCheckboxProps
   ouiaSafe?: boolean;
 }
 
-class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
+class MenuToggleCheckbox extends Component<MenuToggleCheckboxProps, { ouiaStateId: string }> {
   static displayName = 'MenuToggleCheckbox';
   static defaultProps: PickOptional<MenuToggleCheckboxProps> = {
     isValid: true,

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuToggle } from '../MenuToggle';
 import { MenuToggleCheckbox } from '../MenuToggleCheckbox';
 import { Badge } from '../../Badge';

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

@@ -6,8 +6,8 @@ cssPrefix: pf-v6-c-menu-toggle
 propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 ---
 
+import { Fragment } from 'react';
 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/assets/avatarImg.svg';
@@ -20,7 +20,6 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 A toggle is collapsed until it is selected by a user.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 <MenuToggle>Collapsed</MenuToggle>
@@ -32,7 +31,6 @@ import { MenuToggle } from '@patternfly/react-core';
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 <MenuToggle isExpanded>Expanded</MenuToggle>;
@@ -52,7 +50,6 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 <MenuToggle isDisabled>Disabled</MenuToggle>
@@ -64,7 +61,6 @@ import { MenuToggle } from '@patternfly/react-core';
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts
-import React from 'react';
 import { MenuToggle, Badge } from '@patternfly/react-core';
 
 <React.Fragment>
@@ -80,7 +76,6 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
@@ -114,7 +109,6 @@ You can also pass images into the `icon` property. The following example passes
 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/assets/avatarImg.svg';
 
@@ -130,7 +124,6 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 
@@ -153,7 +146,6 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -171,7 +163,6 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 <React.Fragment>
@@ -236,7 +227,6 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 <div style={{ height: "80px" }}>
@@ -253,7 +243,6 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 const fullWidth: React.FunctionComponent = () => {

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuTogglePlaceholder: React.FunctionComponent = () => (

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size="sm">Small toggle</MenuToggle>;

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { MenuToggleAction, MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <MenuToggle
       splitButtonItems={[
         <MenuToggleAction id="split-button-action-example-with-toggle-button" key="split-action" aria-label="Action">
@@ -37,5 +37,5 @@ export const MenuToggleSplitButtonAction: React.FunctionComponent = () => (
       ]}
       aria-label="Menu toggle with action split button"
     />
-  </React.Fragment>
+  </Fragment>
 );

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <MenuToggle
       splitButtonItems={[
         <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
@@ -23,5 +23,5 @@ export const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (
       ]}
       aria-label="Menu toggle with checkbox split button"
     />
-  </React.Fragment>
+  </Fragment>
 );

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

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <MenuToggle
       splitButtonItems={[
         <MenuToggleCheckbox
@@ -41,5 +41,5 @@ export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = ()
       ]}
       aria-label="Secondary menu toggle with checkbox split button"
     />
-  </React.Fragment>
+  </Fragment>
 );