@patternfly/react-core 6.2.0-prerelease.9 → 6.2.1-prerelease.0

package/src/components/Slider/Slider.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import { useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 import { SliderStep } from './SliderStep';
@@ -117,23 +116,23 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   'aria-labelledby': ariaLabelledby,
   ...props
 }: SliderProps) => {
-  const sliderRailRef = React.useRef<HTMLDivElement>();
-  const thumbRef = React.useRef<HTMLDivElement>();
+  const sliderRailRef = useRef<HTMLDivElement>(undefined);
+  const thumbRef = useRef<HTMLDivElement>(undefined);
 
   const [localValue, setValue] = useState(value);
   const [localInputValue, setLocalInputValue] = useState(inputValue);
 
   let isRTL: boolean;
 
-  React.useEffect(() => {
+  useEffect(() => {
     isRTL = getLanguageDirection(sliderRailRef.current) === 'rtl';
   });
 
-  React.useEffect(() => {
+  useEffect(() => {
     setValue(value);
   }, [value]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setLocalInputValue(inputValue);
   }, [inputValue]);
 
@@ -143,7 +142,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   // calculate style value percentage
   const stylePercent = ((localValue - min) * 100) / (max - min);
   const style = { [cssSliderValue.name]: `${stylePercent}%` } as React.CSSProperties;
-  const widthChars = React.useMemo(() => localInputValue.toString().length, [localInputValue]);
+  const widthChars = useMemo(() => localInputValue.toString().length, [localInputValue]);
   const inputStyle = { [cssFormControlWidthChars.name]: widthChars } as React.CSSProperties;
 
   const onChangeHandler = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
@@ -303,8 +302,8 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     }
   };
 
-  const callbackThumbMove = React.useCallback(handleThumbMove, [min, max, customSteps, onChange]);
-  const callbackThumbUp = React.useCallback(handleThumbDragEnd, [min, max, customSteps, onChange]);
+  const callbackThumbMove = useCallback(handleThumbMove, [min, max, customSteps, onChange]);
+  const callbackThumbUp = useCallback(handleThumbDragEnd, [min, max, customSteps, onChange]);
 
   const handleThumbKeys = (e: React.KeyboardEvent) => {
     const key = e.key;

package/src/components/Slider/SliderStep.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
 import sliderStepInsetInlineStart from '@patternfly/react-tokens/dist/esm/c_slider__step_InsetInlineStart';

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Slider } from '../Slider';
 import { Button } from '../../Button';

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

@@ -552,7 +552,6 @@ exports[`slider renders slider with input actions 1`] = `
       class="pf-v6-c-slider__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Minus"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -612,7 +611,6 @@ exports[`slider renders slider with input actions 1`] = `
       class="pf-v6-c-slider__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Plus"
         class="pf-v6-c-button pf-m-plain"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Slider/examples/Slider.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 
+import { useState } from 'react';
 import { Slider, Button, Content, ContentVariants } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';

package/src/components/Slider/examples/SliderActions.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
@@ -6,10 +6,10 @@ import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
 import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon';
 
 export const SliderActions: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState(50);
-  const [value2, setValue2] = React.useState(50);
-  const [inputValue, setInputValue] = React.useState(50);
-  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [value1, setValue1] = useState(50);
+  const [value2, setValue2] = useState(50);
+  const [inputValue, setInputValue] = useState(50);
+  const [isDisabled, setIsDisabled] = useState(false);
 
   const onChange1 = (_event: SliderOnChangeEvent, value: number) => {
     setValue1(Math.floor(Number(value)));

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { useState } from 'react';
 import { Checkbox, Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
-  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
-  const [value, setValue] = React.useState(50);
-  const [valueCustom, setValueCustom] = React.useState(50);
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = useState(false);
+  const [value, setValue] = useState(50);
+  const [valueCustom, setValueCustom] = useState(50);
 
   return (
     <>

package/src/components/Slider/examples/SliderDisabled.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(50);
+  const [value, setValue] = useState(50);
   const steps = [
     { value: 0, label: '0' },
     { value: 12.5, label: '1', isLabelHidden: true },

package/src/components/Slider/examples/SliderDiscrete.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 
 export const SliderDiscrete: React.FunctionComponent = () => {
@@ -12,7 +12,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
     value7: 25
   };
 
-  const [numValue, setNumValue] = React.useState(initialValues);
+  const [numValue, setNumValue] = useState(initialValues);
 
   const handleChange = (value: number, name: string) => {
     setNumValue({ ...numValue, [name]: value });

package/src/components/Slider/examples/SliderThumbValueInput.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderThumbValueInput: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(50);
-  const [inputValue, setInputValue] = React.useState(50);
+  const [value, setValue] = useState(50);
+  const [inputValue, setInputValue] = useState(50);
 
   const onChange = (
     _event: SliderOnChangeEvent,

package/src/components/Slider/examples/SliderValueInput.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
-  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
-  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
-  const [valuePercent, setValuePercent] = React.useState(50);
-  const [inputValuePercent, setInputValuePercent] = React.useState(50);
-  const [valueContinuous, setValueContinuous] = React.useState(50);
-  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+  const [valueDiscrete, setValueDiscrete] = useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = useState(5);
+  const [valuePercent, setValuePercent] = useState(50);
+  const [inputValuePercent, setInputValuePercent] = useState(50);
+  const [valueContinuous, setValueContinuous] = useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = useState(50);
 
   const stepsDiscrete = [
     { value: 0, label: '0' },

package/src/components/Spinner/Spinner.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Spinner/spinner';
 import { css } from '@patternfly/react-styles';
 import cssDiameter from '@patternfly/react-tokens/dist/esm/c_spinner_diameter';

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Spinner } from '../Spinner';
 

package/src/components/Spinner/examples/Spinner.md

@@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-spinner
 propComponents: ['Spinner']
 ---
 
+import { Fragment } from 'react';
+
 ## Examples
 ### Basic
 ```ts file="./SpinnerBasic.tsx"

package/src/components/Spinner/examples/SpinnerBasic.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerBasic: React.FunctionComponent = () => <Spinner aria-label="Contents of the basic example" />;

package/src/components/Spinner/examples/SpinnerCustomSize.tsx

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

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Spinner, Content } from '@patternfly/react-core';
 
 export const SpinnerInline: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Content>
       <h1>
         Heading
@@ -23,5 +23,5 @@ export const SpinnerInline: React.FunctionComponent = () => (
         <Spinner isInline aria-label="Spinner in a small element" />
       </small>
     </Content>
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Spinner/examples/SpinnerSizeVariations.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Spinner } from '@patternfly/react-core';
 
 export const SpinnerSizeVariations: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Spinner size="sm" aria-label="Contents of the small example" />
     <Spinner size="md" aria-label="Contents of the medium example" />
     <Spinner size="lg" aria-label="Contents of the large example" />
     <Spinner size="xl" aria-label="Contents of the extra large example" />
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Switch/Switch.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, Fragment } from 'react';
 import styles from '@patternfly/react-styles/css/components/Switch/switch';
 import { css } from '@patternfly/react-styles';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
@@ -40,7 +40,7 @@ export interface SwitchProps
   ouiaSafe?: boolean;
 }
 
-class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
+class Switch extends Component<SwitchProps & OUIAProps, { ouiaStateId: string }> {
   static displayName = 'Switch';
   id: string;
 
@@ -111,7 +111,7 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
           {...props}
         />
         {label !== undefined ? (
-          <React.Fragment>
+          <Fragment>
             <span className={css(styles.switchToggle)}>
               {hasCheckIcon && (
                 <span className={css(styles.switchToggleIcon)}>
@@ -126,7 +126,7 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
             >
               {label}
             </span>
-          </React.Fragment>
+          </Fragment>
         ) : (
           <span className={css(styles.switchToggle)}>
             <div className={css(styles.switchToggleIcon)}>

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

@@ -1,5 +1,3 @@
-import * as React from 'react';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 

package/src/components/Switch/examples/Switch.md

@@ -6,6 +6,8 @@ propComponents: ['Switch']
 ouia: true
 ---
 
+import { Fragment, useState } from 'react';
+
 ## Examples
 
 To keep inline with accessibility guidelines, the label for a switch must never dynamically change. A dynamically changing label (such as one label for an "on" state and another label for an "off" state) can be confusing as the contexts for each label changes as the switch state does. This applies to both visible text labels as well as labels provided via `aria-label`.

package/src/components/Switch/examples/SwitchBasic.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchBasic: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);

package/src/components/Switch/examples/SwitchCheckedWithLabel.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchCheckedWithLabel: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);

package/src/components/Switch/examples/SwitchDisabled.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchDisabled: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Switch id="disabled-switch-on" label="Togglable option for disabled checked example" isChecked isDisabled />
     <br />
     <Switch
@@ -25,5 +25,5 @@ export const SwitchDisabled: React.FunctionComponent = () => (
       isChecked={false}
       isDisabled
     />
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Switch/examples/SwitchReversed.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchReversed: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);

package/src/components/Switch/examples/SwitchUncontrolled.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { Fragment } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchUncontrolled: React.FunctionComponent = () => (
-  <React.Fragment>
+  <Fragment>
     <Switch
       id="uncontrolled-switch-no-label"
       aria-label="Togglable option for uncontrolled and no visible label example"
@@ -14,5 +14,5 @@ export const SwitchUncontrolled: React.FunctionComponent = () => (
       label="Togglable option for uncontrolled example"
       defaultChecked={false}
     />
-  </React.Fragment>
+  </Fragment>
 );

package/src/components/Switch/examples/SwitchWithoutLabel.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import { useState } from 'react';
 import { Switch } from '@patternfly/react-core';
 
 export const SwitchWithoutLabel: React.FunctionComponent = () => {
-  const [isChecked, setIsChecked] = React.useState<boolean>(true);
+  const [isChecked, setIsChecked] = useState<boolean>(true);
 
   const handleChange = (_event: React.FormEvent<HTMLInputElement>, checked: boolean) => {
     setIsChecked(checked);

package/src/components/Tabs/OverflowTab.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
@@ -38,13 +38,13 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   focusTimeoutDelay = 0,
   ...props
 }: OverflowTabProps) => {
-  const menuRef = React.useRef<HTMLDivElement>();
-  const overflowTabRef = React.useRef<HTMLButtonElement>();
-  const overflowLIRef = React.useRef<HTMLLIElement>();
+  const menuRef = useRef<HTMLDivElement>(undefined);
+  const overflowTabRef = useRef<HTMLButtonElement>(undefined);
+  const overflowLIRef = useRef<HTMLLIElement>(undefined);
 
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
-  const { localActiveKey, handleTabClick } = React.useContext(TabsContext);
+  const { localActiveKey, handleTabClick } = useContext(TabsContext);
 
   const closeMenu = () => {
     setIsExpanded(false);
@@ -66,7 +66,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('click', handleClick);
     window.addEventListener('keydown', handleMenuKeys);
 
@@ -138,7 +138,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       {overflowTab}
       <Popper
         triggerRef={overflowTabRef}
@@ -149,7 +149,7 @@ export const OverflowTab: React.FunctionComponent<OverflowTabProps> = ({
         appendTo={overflowLIRef.current}
         zIndex={zIndex}
       />
-    </React.Fragment>
+    </Fragment>
   );
 };
 

package/src/components/Tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { OUIAProps } from '../../helpers';
 import { TabButton } from './TabButton';
@@ -76,7 +76,7 @@ const TabBase: React.FunctionComponent<TabProps> = ({
     {}
   );
   const { mountOnEnter, localActiveKey, unmountOnExit, uniqueId, handleTabClick, handleTabClose } =
-    React.useContext(TabsContext);
+    useContext(TabsContext);
   let ariaControls = tabContentId ? `${tabContentId}` : `pf-tab-section-${eventKey}-${childId || uniqueId}`;
   if ((mountOnEnter || unmountOnExit) && eventKey !== localActiveKey) {
     ariaControls = undefined;
@@ -142,5 +142,5 @@ const TabBase: React.FunctionComponent<TabProps> = ({
   );
 };
 
-export const Tab = React.forwardRef((props: TabProps, ref: React.Ref<any>) => <TabBase innerRef={ref} {...props} />);
+export const Tab = forwardRef((props: TabProps, ref: React.Ref<any>) => <TabBase innerRef={ref} {...props} />);
 Tab.displayName = 'Tab';

package/src/components/Tabs/TabAction.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/Tabs/tabs';
 import { Button } from '../Button';
@@ -46,7 +46,7 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   </span>
 );
 
-export const TabAction = React.forwardRef((props: TabActionProps, ref: React.Ref<HTMLElement>) => (
+export const TabAction = forwardRef((props: TabActionProps, ref: React.Ref<HTMLElement>) => (
   <TabActionBase {...props} innerRef={ref} />
 ));
 

package/src/components/Tabs/TabButton.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 
 export interface TabButtonProps extends Omit<React.HTMLProps<HTMLAnchorElement | HTMLButtonElement>, 'ref'>, OUIAProps {

package/src/components/Tabs/TabContent.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { forwardRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/TabContent/tab-content';
 import { css } from '@patternfly/react-styles';
 import { getOUIAProps, OUIAProps } from '../../helpers';
@@ -86,6 +86,6 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   return null;
 };
 
-export const TabContent = React.forwardRef((props: TabContentProps, ref: React.Ref<HTMLElement>) => (
+export const TabContent = forwardRef((props: TabContentProps, ref: React.Ref<HTMLElement>) => (
   <TabContentBase {...props} innerRef={ref} />
 ));

package/src/components/Tabs/TabContentBody.tsx

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

package/src/components/Tabs/TabTitleIcon.tsx

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

package/src/components/Tabs/TabTitleText.tsx

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

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Children, Component, createRef, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Tabs/tabs';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
@@ -139,10 +139,10 @@ interface TabsState {
   overflowingTabCount: number;
 }
 
-class Tabs extends React.Component<TabsProps, TabsState> {
+class Tabs extends Component<TabsProps, TabsState> {
   static displayName = 'Tabs';
-  tabList = React.createRef<HTMLUListElement>();
-  leftScrollButtonRef = React.createRef<HTMLButtonElement>();
+  tabList = createRef<HTMLUListElement>();
+  leftScrollButtonRef = createRef<HTMLButtonElement>();
   private direction = 'ltr';
   constructor(props: TabsProps) {
     super(props);
@@ -211,8 +211,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
 
     // process any tab content sections outside of the component
     if (tabContentRef) {
-      React.Children.toArray(this.props.children)
-        .filter((child): child is TabElement => React.isValidElement(child))
+      Children.toArray(this.props.children)
+        .filter((child): child is TabElement => isValidElement(child))
         .filter(({ props }) => props.tabContentRef && props.tabContentRef.current)
         .forEach((child) => (child.props.tabContentRef.current.hidden = true));
       // most recently selected tabContent
@@ -359,7 +359,7 @@ class Tabs extends React.Component<TabsProps, TabsState> {
     if (
       prevProps.children &&
       children &&
-      React.Children.toArray(prevProps.children).length !== React.Children.toArray(children).length
+      Children.toArray(prevProps.children).length !== Children.toArray(children).length
     ) {
       this.handleScrollButtons();
     }
@@ -387,8 +387,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       return null;
     }
 
-    const childrenHasTabWithActiveEventKey = React.Children.toArray(nextProps.children)
-      .filter((child): child is TabElement => React.isValidElement(child))
+    const childrenHasTabWithActiveEventKey = Children.toArray(nextProps.children)
+      .filter((child): child is TabElement => isValidElement(child))
       .some(({ props }) => props.eventKey === prevState.uncontrolledActiveKey);
 
     // if uncontrolledActiveKey is an existing eventKey of any Tab of nextProps.children --> don't update uncontrolledActiveKey
@@ -450,8 +450,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
       uncontrolledIsExpandedLocal,
       overflowingTabCount
     } = this.state;
-    const filteredChildren = React.Children.toArray(children)
-      .filter((child): child is TabElement => React.isValidElement(child))
+    const filteredChildren = Children.toArray(children)
+      .filter((child): child is TabElement => isValidElement(child))
       .filter(({ props }) => !props.isHidden);
 
     const filteredChildrenWithoutOverflow = filteredChildren.slice(0, filteredChildren.length - overflowingTabCount);

package/src/components/Tabs/TabsContext.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { createContext } from 'react';
 
 export interface TabsContextProps {
   variant: 'default' | 'secondary';
@@ -18,7 +18,7 @@ export interface TabsContextProps {
   ) => void;
 }
 
-export const TabsContext = React.createContext<TabsContextProps>({
+export const TabsContext = createContext<TabsContextProps>({
   variant: 'default',
   mountOnEnter: false,
   unmountOnExit: false,

package/src/components/Tabs/__tests__/Generated/TabContent.test.tsx

@@ -1,7 +1,6 @@
 /**
  * This test was generated
  */
-import * as React from 'react';
 import { render } from '@testing-library/react';
 import { TabContent } from '../../TabContent';
 // any missing imports can usually be resolved by adding them here

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { StrictMode } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
@@ -181,14 +181,14 @@ test('Renders tabs passed via overflowingTabs when expanded in strict mode', asy
 
   const consoleError = jest.spyOn(console, 'error');
   const { asFragment } = render(
-    <React.StrictMode>
+    <StrictMode>
       <OverflowTab
         overflowingTabs={[
           { title: 'Tab one', eventKey: 1 },
           { title: 'Tab two', eventKey: 2 }
         ]}
       />
-    </React.StrictMode>
+    </StrictMode>
   );
 
   await user.click(screen.getByRole('tab', { name: 'More' }));