npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.33 → 6.2.0-prerelease.34 - Mend

@patternfly/react-core 6.2.0-prerelease.33 → 6.2.0-prerelease.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (713) hide show

package/src/components/Select/examples/SelectViewMore.tsx CHANGED Viewed

@@ -1,12 +1,13 @@
+import { useEffect, useRef, useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
 export const SelectViewMore: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isLoading, setIsLoading] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [selectOptions, setSelectOptions] = React.useState([
+  const [selectOptions, setSelectOptions] = useState([
     <SelectOption key={0} value="Option 1">
       Option 1
     </SelectOption>,
@@ -38,13 +39,13 @@ export const SelectViewMore: React.FunctionComponent = () => {
       Final Option 10
     </SelectOption>
   ]);
-  const [numOptions, setNumOptions] = React.useState(3);
-  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
-  const activeItemRef = React.useRef<HTMLElement>(null);
-  const viewMoreRef = React.useRef<HTMLLIElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [numOptions, setNumOptions] = useState(3);
+  const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = useRef<HTMLElement>(null);
+  const viewMoreRef = useRef<HTMLLIElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
-  React.useEffect(() => {
+  useEffect(() => {
     activeItemRef.current?.focus();
   }, [visibleOptions]);

package/src/components/SimpleList/examples/SimpleList.md CHANGED Viewed

@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-v6-c-simple-list
 propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem']
 ---
+import { useState } from 'react';
 ## Examples

package/src/components/SimpleList/examples/SimpleListUncontrolled.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core';
 export const SimpleListUncontrolled: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [activeItem, setActiveItem] = useState(0);
   const onSelect = (
     selectedItem: React.RefObject<HTMLButtonElement | null> | React.RefObject<HTMLAnchorElement | null>,

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

@@ -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 CHANGED Viewed

@@ -1,3 +1,4 @@
+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';
@@ -5,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 CHANGED Viewed

@@ -1,9 +1,10 @@
+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 CHANGED Viewed

@@ -1,7 +1,8 @@
+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 CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core';
 export const SliderDiscrete: React.FunctionComponent = () => {
@@ -11,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 CHANGED Viewed

@@ -1,8 +1,9 @@
+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 CHANGED Viewed

@@ -1,12 +1,13 @@
+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/Switch/examples/Switch.md CHANGED Viewed

@@ -6,7 +6,7 @@ propComponents: ['Switch']
 ouia: true
 ---
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 ## Examples

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

@@ -1,7 +1,8 @@
+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 CHANGED Viewed

@@ -1,7 +1,8 @@
+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/SwitchReversed.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+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/SwitchWithoutLabel.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+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/examples/Tabs.md CHANGED Viewed

@@ -2,11 +2,11 @@
 id: Tabs
 section: components
 cssPrefix: pf-v6-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
+propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject', 'TabAction']
 ouia: true
 ---
-import { Fragment } from 'react';
+import { createRef, Fragment, useEffect, useRef, useState } from 'react';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';

package/src/components/Tabs/examples/TabsBoxSecondary.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 export const TabsBoxSecondary: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState<boolean>(true);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = useState<boolean>(true);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsChildrenMounting.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsChildrenMounting: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core';
 export const TabContentWithBodyPadding: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -11,9 +11,9 @@ export const TabContentWithBodyPadding: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
   return (
     <Fragment>

package/src/components/Tabs/examples/TabsDefault.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 export const TabsDefault: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsDefaultOverflow.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsDefaultOverflow: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsDynamic.tsx CHANGED Viewed

@@ -1,11 +1,12 @@
+import { useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsDynamic: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const [newTabNumber, setNewTabNumber] = React.useState<number>(4);
-  const tabComponentRef = React.useRef<any>(undefined);
-  const firstMount = React.useRef(true);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const [newTabNumber, setNewTabNumber] = useState<number>(4);
+  const tabComponentRef = useRef<any>(undefined);
+  const firstMount = useRef(true);
   const onClose = (event: any, tabIndex: string | number) => {
     const tabIndexNum = tabIndex as number;
@@ -27,7 +28,7 @@ export const TabsDynamic: React.FunctionComponent = () => {
     setNewTabNumber(newTabNumber + 1);
   };
-  React.useEffect(() => {
+  useEffect(() => {
     if (firstMount.current) {
       firstMount.current = false;
       return;

package/src/components/Tabs/examples/TabsFilled.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsFilled: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsFilledWithIcons.tsx CHANGED Viewed

@@ -1,11 +1,12 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 export const TabsFilledWithIcons: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsHelp.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { createRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 export const TabsHelp: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
   const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled'];
@@ -27,7 +28,7 @@ export const TabsHelp: React.FunctionComponent = () => {
       role="region"
     >
       {tabs.map((tab, index) => {
-        const ref = React.createRef<HTMLElement>();
+        const ref = createRef<HTMLElement>();
         return (
           <Tab

package/src/components/Tabs/examples/TabsHelpAndClose.tsx CHANGED Viewed

@@ -1,12 +1,13 @@
+import { createRef, useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 export const TabsHelpAndClose: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<number>(0);
-  const [tabs, setTabs] = React.useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
-  const tabComponentRef = React.useRef<any>(undefined);
-  const firstMount = React.useRef(true);
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);
+  const tabComponentRef = useRef<any>(undefined);
+  const firstMount = useRef(true);
   const onClose = (event: any, tabIndex: string | number) => {
     const tabIndexNum = tabIndex as number;
@@ -35,7 +36,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
     />
   );
-  React.useEffect(() => {
+  useEffect(() => {
     if (firstMount.current) {
       firstMount.current = false;
       return;
@@ -54,7 +55,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
       ref={tabComponentRef}
     >
       {tabs.map((tab, index) => {
-        const ref = React.createRef<HTMLElement>();
+        const ref = createRef<HTMLElement>();
         return (
           <Tab

package/src/components/Tabs/examples/TabsHorizontalOverflow.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsHorizontalOverflow: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [showTabCount, setShowTabCount] = React.useState(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [showTabCount, setShowTabCount] = useState(false);
   const handleTabClick = (_event: any, tabIndex: string | number) => {
     setActiveTabKey(tabIndex);

package/src/components/Tabs/examples/TabsIconAndText.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';
 import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
 import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
@@ -7,7 +8,7 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
 export const TabsIconAndText: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsInset.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsInset: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsNav.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 export const TabsNav: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsNavSubtab.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';
 export const TabsNavSubtab: React.FunctionComponent = () => {
-  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
-  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
+  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);
   // Toggle currently active primary tab
   const handleTabClickFirst = (

package/src/components/Tabs/examples/TabsPageInsets.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsPageInsets: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsSeparateContent.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core';
 export const TabsSeparateContent: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -11,9 +11,9 @@ export const TabsSeparateContent: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
   return (
     <Fragment>

package/src/components/Tabs/examples/TabsSubtabs.tsx CHANGED Viewed

@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';
 export const TabsSubtabs: React.FunctionComponent = () => {
-  const [activeTabKey1, setActiveTabKey1] = React.useState<string | number>(0);
-  const [activeTabKey2, setActiveTabKey2] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);
+  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active primary tab
   const handleTabClickFirst = (

package/src/components/Tabs/examples/TabsToggledSeparateContent.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { createRef, Fragment, useState } from 'react';
 import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core';
 export const TabsToggledSeparateContent: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isTab2Hidden, setIsTab2Hidden] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isTab2Hidden, setIsTab2Hidden] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -12,9 +12,9 @@ export const TabsToggledSeparateContent: React.FunctionComponent = () => {
     setActiveTabKey(tabIndex);
   };
-  const contentRef1 = React.createRef<HTMLElement>();
-  const contentRef2 = React.createRef<HTMLElement>();
-  const contentRef3 = React.createRef<HTMLElement>();
+  const contentRef1 = createRef<HTMLElement>();
+  const contentRef2 = createRef<HTMLElement>();
+  const contentRef3 = createRef<HTMLElement>();
   return (
     <Fragment>

package/src/components/Tabs/examples/TabsTooltipReactRef.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { createRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 export const TabsTooltipReactRef: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
@@ -15,7 +16,7 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => {
     setIsBox(checked);
   };
-  const tooltipRef = React.createRef<HTMLElement>();
+  const tooltipRef = createRef<HTMLElement>();
   return (
     <div>

package/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsVertical.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';
 export const TabsVertical: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isBox, setIsBox] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isBox, setIsBox] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,

package/src/components/Tabs/examples/TabsVerticalExpandable.tsx CHANGED Viewed

@@ -1,8 +1,9 @@
+import { useState } from 'react';
 import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
 export const TabsVerticalExpandable: React.FunctionComponent = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
-  const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   // Toggle currently active tab
   const handleTabClick = (
     event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,