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

package/src/components/Wizard/examples/WizardStepStatus.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Radio, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -11,11 +12,11 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
-  const [errorMessage, setErrorMessage] = React.useState<string>();
-  const [successMessage, setSuccessMessage] = React.useState<string>();
+  const [errorMessage, setErrorMessage] = useState<string>();
+  const [successMessage, setSuccessMessage] = useState<string>();
 
   return (
     <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>
@@ -25,7 +26,7 @@ const SomeContextProvider = ({ children }: SomeContextProviderProps) => {
 };
 
 const StepContentWithAction = () => {
-  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = React.useContext(SomeContext);
+  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);
 
   return (
     <>

package/src/components/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -1,3 +1,4 @@
+import { createContext, useContext, useState } from 'react';
 import { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';
 
 interface SomeContextProps {
@@ -9,10 +10,10 @@ interface SomeContextProviderProps {
   children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
-const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);
+const SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);
 
 const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {
-  const [isToggleStepChecked, setIsToggleStepChecked] = React.useState(false);
+  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);
 
   return (
     <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>
@@ -22,7 +23,7 @@ const SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = (
 };
 
 const StepContentWithAction: React.FunctionComponent = () => {
-  const { isToggleStepChecked, setIsToggleStepChecked } = React.useContext(SomeContext);
+  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);
 
   return (
     <Checkbox

package/src/components/Wizard/examples/WizardValidateOnButtonPress.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react';
 import {
   Button,
   ActionList,
@@ -28,15 +29,15 @@ interface ValidationProgressProps {
 }
 
 const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
-  const [percentValidated, setPercentValidated] = React.useState(0);
+  const [percentValidated, setPercentValidated] = useState(0);
 
-  const tick = React.useCallback(() => {
+  const tick = useCallback(() => {
     if (percentValidated < 100) {
       setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     return () => {
@@ -153,10 +154,10 @@ const SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid,
 };
 
 export const WizardValidateOnButtonPress: React.FunctionComponent = () => {
-  const [ageValue, setAgeValue] = React.useState('Thirty');
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
-  const [isFirstStepValid, setIsFirstStepValid] = React.useState(false);
-  const [hasErrorOnSubmit, setHasErrorOnSubmit] = React.useState(false);
+  const [ageValue, setAgeValue] = useState('Thirty');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const [isFirstStepValid, setIsFirstStepValid] = useState(false);
+  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);
 
   // eslint-disable-next-line no-console
   const onClose = () => console.log('Some close action occurs here.');

package/src/components/Wizard/examples/WizardWithCustomFooter.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -29,7 +30,7 @@ const CustomWizardFooter = () => {
 
 const CustomStepTwoFooter = () => {
   const { goToNextStep, goToPrevStep, close } = useWizardContext();
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   async function onNext() {
     setIsLoading(true);
@@ -88,7 +89,7 @@ const ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ is
 };
 
 export const WizardWithCustomFooter: React.FunctionComponent = () => {
-  const [isSubmitting, setIsSubmitting] = React.useState<boolean>();
+  const [isSubmitting, setIsSubmitting] = useState<boolean>();
 
   async function onSubmit(): Promise<void> {
     setIsSubmitting(true);

package/src/components/Wizard/examples/WizardWithSubmitProgress.tsx

@@ -1,3 +1,4 @@
+import { useCallback, useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -16,15 +17,15 @@ interface ValidationProgressProps {
 }
 
 const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {
-  const [percentValidated, setPercentValidated] = React.useState(0);
+  const [percentValidated, setPercentValidated] = useState(0);
 
-  const tick = React.useCallback(() => {
+  const tick = useCallback(() => {
     if (percentValidated < 100) {
       setPercentValidated((prevValue) => prevValue + 20);
     }
   }, [percentValidated]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
 
     return () => {
@@ -60,7 +61,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
 };
 
 export const WizardWithSubmitProgress: React.FunctionComponent = () => {
-  const [isSubmitted, setIsSubmitted] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   // eslint-disable-next-line no-console
   const onClose = () => console.log('Some close action occurs here.');

package/src/components/Wizard/examples/WizardWithinModal.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const WizardWithinModal: React.FunctionComponent = () => {
-  const [isModelOpen, setIsModalOpen] = React.useState(false);
+  const [isModelOpen, setIsModalOpen] = useState(false);
 
   return (
     <>

package/src/demos/AlertGroup.md

@@ -3,7 +3,7 @@ id: Alert
 section: components
 ---
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

package/src/demos/BackToTop.md

@@ -2,6 +2,7 @@
 id: Back to top
 section: components
 ---
+import { useState } from 'react';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 ## Demos

package/src/demos/Button.md

@@ -3,6 +3,7 @@ id: Button
 section: components
 ---
 
+import { useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 ## Demos 
@@ -14,11 +15,12 @@ The following demo shows the intended flow for a button that visually indicates
 Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. 
 
 ```ts
+import { useState } from 'react';
 import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 const ProgressButton: React.FunctionComponent = () => {
-  const [loginState, setLoginState] = React.useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
+  const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn');
 
   return (
     <Form>

package/src/demos/CustomMenus/ApplicationLauncher.md

@@ -18,6 +18,8 @@ propComponents:
   ]
 ---
 
+import { cloneElement, Fragment, useRef, useState } from 'react';
+
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 

package/src/demos/CustomMenus/ContextSelector.md

@@ -19,6 +19,7 @@ propComponents:
   ]
 ---
 
+import { useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu.

package/src/demos/CustomMenus/CustomMenus.md

@@ -4,6 +4,8 @@ section: components
 subsection: menus
 ---
 
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
+
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';

package/src/demos/CustomMenus/OptionsMenu.md

@@ -6,6 +6,7 @@ source: react-demos
 propComponents: ['MenuToggle', 'Divider', 'Select', 'SelectList', 'SelectOption', 'SelectGroup']
 ---
 
+import { useRef, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 As the `<OptionsMenu>` component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [select](/components/menus/select) component that is built off of menu.

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOption } 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';
@@ -5,9 +6,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 export const ActionsMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => {
     if (typeof value === 'string' || typeof value === 'undefined') {

package/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { cloneElement, Fragment, useRef, useState } from 'react';
 import {
   MenuToggle,
   MenuSearch,
@@ -17,11 +17,11 @@ import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 const MockLink: React.FunctionComponent = ({ to, ...props }: any) => <a href={to} {...props}></a>;
 
 export const ApplicationLauncherDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
-  const [favorites, setFavorites] = React.useState<string[]>([]);
-  const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [refFullOptions, setRefFullOptions] = useState<Element[]>();
+  const [favorites, setFavorites] = useState<string[]>([]);
+  const [filteredIds, setFilteredIds] = useState<string[]>(['*']);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setTimeout(() => {
@@ -123,8 +123,8 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     const filteredCopy = items
       .map((group) => {
         if (group.type === DropdownGroup) {
-          const filteredGroup = React.cloneElement(group, {
-            children: React.cloneElement(group.props.children, {
+          const filteredGroup = cloneElement(group, {
+            children: cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.value)) {
                   return child;
@@ -140,7 +140,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
             keepDivider = false;
           }
         } else if (group.type === DropdownList) {
-          const filteredGroup = React.cloneElement(group, {
+          const filteredGroup = cloneElement(group, {
             children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.value)) {
                 return child;

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   MenuFooter,
@@ -52,12 +53,12 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
     'AWS 2',
     'Azure 2'
   ];
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text);
-  const [filteredItems, setFilteredItems] = React.useState<ItemArrayType>(items);
-  const [searchInputValue, setSearchInputValue] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState(typeof items[0] === 'string' ? items[0] : items[0].text);
+  const [filteredItems, setFilteredItems] = useState<ItemArrayType>(items);
+  const [searchInputValue, setSearchInputValue] = useState<string>('');
+  const menuRef = useRef<HTMLDivElement>(null);
+  const menuFooterBtnRef = useRef<HTMLButtonElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/DateSelectDemo.tsx

@@ -1,9 +1,10 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Select, SelectList, SelectOption, Timestamp } from '@patternfly/react-core';
 
 export const DateSelectDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<number>(0);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<number>(0);
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   Menu,
@@ -18,13 +19,13 @@ interface MenuHeightsType {
 }
 
 export const DrilldownMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
-  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
-  const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [activeMenu, setActiveMenu] = useState<string>('rootMenu');
+  const [menuDrilledIn, setMenuDrilledIn] = useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = useState<MenuHeightsType>({});
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/FavoritesDemo.tsx

@@ -1,4 +1,4 @@
-import { type JSX, Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { MenuToggle, Divider, Dropdown, DropdownGroup, DropdownList, DropdownItem } from '@patternfly/react-core';
 
 export const FavoritesDemo: React.FunctionComponent = () => {
@@ -47,7 +47,7 @@ export const FavoritesDemo: React.FunctionComponent = () => {
   ];
 
   const createFavorites = (favIds: string[]) => {
-    const favorites: JSX.Element[] = [];
+    const favorites: React.JSX.Element[] = [];
 
     menuItems.forEach((item) => {
       if (item.type === DropdownList) {

package/src/demos/CustomMenus/examples/FlyoutDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuContainer } from '@patternfly/react-core';
 
 /* eslint-disable no-console */
@@ -30,9 +31,9 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
 );
 
 export const FlyoutDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
 
   let curFlyout = <FlyoutMenu depth={1} />;
   for (let i = 2; i < 14; i++) {

package/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Menu,
   MenuList,
@@ -12,11 +13,11 @@ import {
 } from '@patternfly/react-core';
 
 export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState(0);
-  const [input, setInput] = React.useState('');
-  const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<any>(undefined);
-  const menuRef = React.useRef<any>(undefined);
+  const [activeItem, setActiveItem] = useState(0);
+  const [input, setInput] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleRef = useRef<any>(undefined);
+  const menuRef = useRef<any>(undefined);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx

@@ -1,9 +1,10 @@
+import { useRef, useState } from 'react';
 import { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } from '@patternfly/react-core';
 
 export const OptionsMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('');
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   MenuToggle,
   Panel,
@@ -10,10 +11,10 @@ import {
 } from '@patternfly/react-core';
 
 export const TreeViewMenuDemo: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [checkedItems, setCheckedItems] = useState<TreeViewDataItem[]>([]);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(undefined);
 
   const statusOptions: TreeViewDataItem[] = [
     {

package/src/demos/DataList/examples/DataListActionable.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Button,
   Content,
@@ -19,8 +20,8 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const DataListActionable: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [isDeleted, setIsDeleted] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isDeleted, setIsDeleted] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Content,
@@ -33,11 +33,11 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']);
-  const [isOpen1, setIsOpen1] = React.useState(false);
-  const [isOpen2, setIsOpen2] = React.useState(false);
-  const [isOpen3, setIsOpen3] = React.useState(false);
-  const [allExpanded, setAllExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(['ex-toggle1', 'ex-toggle3']);
+  const [isOpen1, setIsOpen1] = useState(false);
+  const [isOpen2, setIsOpen2] = useState(false);
+  const [isOpen3, setIsOpen3] = useState(false);
+  const [allExpanded, setAllExpanded] = useState(false);
 
   const onToggleAll = () => {
     setAllExpanded((prevAllExpanded) => !prevAllExpanded);

package/src/demos/DataList/examples/DataListStaticBottomPagination.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   Content,
@@ -31,9 +31,9 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 
 export const DataListStaticBottomPagination: React.FunctionComponent = () => {
-  const [page, setPage] = React.useState<number | undefined>(1);
-  const [perPage, setPerPage] = React.useState<number>(10);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const [page, setPage] = useState<number | undefined>(1);
+  const [perPage, setPerPage] = useState<number>(10);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
 
   const handleSetPage = (
     _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent,

package/src/demos/DataListDemo.md

@@ -3,6 +3,8 @@ id: Data list
 section: components
 ---
 
+import { Fragment, useState } from 'react';
+
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';

package/src/demos/DatePicker/DatePicker.md

@@ -14,11 +14,12 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.
 
 ```js
+import { useState } from 'react';
 import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
 
 DateRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
+  const [from, setFrom] = useState();
+  const [to, setTo] = useState();
 
   const toValidator = (date) =>
     isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';

package/src/demos/DateTimePicker.md

@@ -4,6 +4,7 @@ section: components
 subsection: date-and-time
 ---
 
+import { useState } from 'react';
 import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
 
@@ -20,11 +21,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
 ### Date and time range picker
 
 ```js
+import { useState } from 'react';
 import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
 
 DateTimeRangePicker = () => {
-  const [from, setFrom] = React.useState();
-  const [to, setTo] = React.useState();
+  const [from, setFrom] = useState();
+  const [to, setTo] = useState();
 
   const toValidator = (date) => {
     return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)

package/src/demos/DescriptionList/DescriptionList.md

@@ -3,6 +3,7 @@ id: Description list
 section: components
 ---
 
+import { useRef, useState } from 'react';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

package/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx

@@ -1,3 +1,4 @@
+import { useRef, useState } from 'react';
 import {
   Gallery,
   Content,
@@ -20,9 +21,9 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListInDrawer: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLDivElement>(null);
-  const btnRef = React.useRef<HTMLDivElement>(null);
-  const [isExpanded, setIsExpanded] = React.useState(true);
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const btnRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(true);
 
   const onExpand = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/demos/ExpandableSection/ExpandableSection.md

@@ -3,6 +3,8 @@ id: Expandable section
 section: components
 ---
 
+import { useState } from 'react';
+
 ## Demos
 
 

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core';
 
 export const ExpandableTextDemo: React.FunctionComponent = () => {
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
 
   const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {
     setIsExpanded(isExpanded);

package/src/demos/Filters/FilterDemos.md

@@ -3,7 +3,7 @@ id: Filters
 section: patterns
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
 Popper,
 SearchInput,