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

package/src/demos/Filters/examples/FilterSingleSelect.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -49,7 +49,7 @@ const columnNames = {
 
 export const FilterSingleSelect: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
   const onFilter = (repo: Repository) => {
     if (searchValue === 'all') {
       return true;
@@ -70,7 +70,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier.
   // This is to prevent state from being based on row order index in case we later add sorting.
   const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const [selectedRepoNames, setSelectedRepoNames] = React.useState<string[]>([]);
+  const [selectedRepoNames, setSelectedRepoNames] = useState<string[]>([]);
   const setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames((prevSelected) => {
       const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name);
@@ -83,8 +83,8 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
   // To allow shift+click to select/deselect multiple rows
-  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState<number | null>(null);
-  const [shifting, setShifting] = React.useState(false);
+  const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState<number | null>(null);
+  const [shifting, setShifting] = useState(false);
 
   const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => {
     // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected
@@ -101,7 +101,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -123,11 +123,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
-  const bulkSelectToggleRef = React.useRef<any>(null);
-  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectMenuRef = useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = useRef<any>(null);
+  const bulkSelectContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
+  const [isBulkSelectOpen, setIsBulkSelectOpen] = useState<boolean>(false);
 
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
@@ -150,7 +150,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -228,11 +228,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   );
 
   // Set up single select menu & state
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [menuSelection, setMenuSelection] = React.useState<string>('all');
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [menuSelection, setMenuSelection] = useState<string>('all');
+  const toggleRef = useRef<HTMLButtonElement>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -249,7 +249,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/demos/HelperText.md

@@ -3,6 +3,7 @@ id: Helper text
 section: components
 ---
 
+import { useEffect, useState } from 'react';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';

package/src/demos/JumpLinks.md

@@ -3,6 +3,7 @@ id: Jump links
 section: components
 ---
 
+import { useContext, useEffect, useRef, useState } from 'react';
 import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -21,6 +22,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl
 This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.
 
 ```js isFullscreen
+import { useEffect, useState } from 'react';
 import {
   PageSection,
   JumpLinks,
@@ -41,13 +43,13 @@ import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/mas
 ScrollspyH2 = () => {
   const headings = [1, 2, 3, 4, 5];
 
-  const [isVertical, setIsVertical] = React.useState(true);
-  const [offsetHeight, setOffsetHeight] = React.useState(10);
+  const [isVertical, setIsVertical] = useState(true);
+  const [offsetHeight, setOffsetHeight] = useState(10);
   const offsetForPadding = 10;
   let masthead;
 
   // Update offset based on the masthead and jump links nav heights.
-  React.useEffect(() => {
+  useEffect(() => {
     masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
 
     if (isVertical) {

package/src/demos/LabelGroupDemos.md

@@ -3,6 +3,7 @@ id: Label
 section: components
 ---
 
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 

package/src/demos/Masthead.md

@@ -3,6 +3,7 @@ id: Masthead
 section: components
 ---
 
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';

package/src/demos/MultipleFileUploadDemos.md

@@ -3,7 +3,7 @@ id: Multiple file upload
 section: components
 subsection: file-upload
 ---
-
+import { useEffect, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 

package/src/demos/Nav.md

@@ -3,6 +3,7 @@ id: Navigation
 section: components
 ---
 
+import { Fragment, useState } from 'react';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -3,6 +3,8 @@ id: Notification drawer
 section: components
 ---
 
+import { Fragment, useRef, useState } from 'react';
+
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -45,7 +45,6 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -56,31 +55,31 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
 export const NotificationDrawerBasic: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
 
   interface UnreadMap {
     [notificationId: string]: boolean;
   }
 
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isUnreadMap, setIsUnreadMap] = React.useState<UnreadMap | null>({
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({
     'notification-1': true,
     'notification-2': true,
     'notification-3': false,
     'notification-4': false
   });
 
-  const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true);
+  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);
 
   interface ActionsMenu {
     [toggleId: string]: boolean;
   }
 
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState<ActionsMenu | {}>({});
+  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
@@ -184,9 +183,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                 onClick={(event: any) => onCloseNotificationDrawer(event)}
                 aria-label="Notifications"
                 isExpanded={isDrawerExpanded}
-              >
-                <BellIcon />
-              </NotificationBadge>
+              />
             </ToolbarItem>
             <ToolbarGroup
               variant="action-group-plain"

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -47,7 +47,6 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -58,14 +57,14 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
 
 export const NotificationDrawerGrouped: React.FunctionComponent = () => {
-  const drawerRef = React.useRef<HTMLElement | null>(null);
+  const drawerRef = useRef<HTMLElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = React.useState(false);
-  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = React.useState(true);
-  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = useState(false);
+  const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = useState(true);
+  const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = useState(false);
 
   interface UnreadMap {
     [groupName: string]: {
@@ -73,8 +72,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     } | null;
   }
 
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
-  const [isUnreadMap, setIsUnreadMap] = React.useState<UnreadMap | null>({
+  const [activeItem, setActiveItem] = useState<number | string>(0);
+  const [isUnreadMap, setIsUnreadMap] = useState<UnreadMap | null>({
     'group-1': {
       'notification-5': true,
       'notification-6': true
@@ -86,13 +85,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     'group-3': null
   });
 
-  const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true);
+  const [shouldShowNotifications, setShouldShowNotifications] = useState(true);
 
   interface ActionsMenu {
     [toggleId: string]: boolean;
   }
 
-  const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState<ActionsMenu | {}>({});
+  const [isActionsMenuOpen, setIsActionsMenuOpen] = useState<ActionsMenu | {}>({});
 
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,
@@ -234,9 +233,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                 onClick={(event: any) => onCloseNotificationDrawer(event)}
                 aria-label="Notifications"
                 isExpanded={isDrawerExpanded}
-              >
-                <BellIcon />
-              </NotificationBadge>
+              />
             </ToolbarItem>
             <ToolbarGroup
               variant="action-group-plain"

package/src/demos/Page.md

@@ -3,6 +3,7 @@ id: Page
 section: components
 ---
 
+import { useState } from 'react';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';

package/src/demos/PasswordGenerator.md

@@ -3,6 +3,7 @@ id: Password generator
 section: patterns
 ---
 
+import { useEffect, useRef, useState } from 'react';
 import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon';
 import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon';
 import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon';
@@ -12,6 +13,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'
 ### Provide a generated password
 
 ```ts
+import { useEffect, useRef, useState } from 'react';
 import {
   InputGroup,
   InputGroupItem,
@@ -38,14 +40,14 @@ const PasswordGenerator: React.FunctionComponent = () => {
     }
     return retVal;
   };
-  const [password, setPassword] = React.useState<string>('');
-  const [generatedPassword, setGeneratedPassword] = React.useState<string>(generatePassword());
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState<boolean>(false);
-  const [passwordHidden, setPasswordHidden] = React.useState<boolean>(true);
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const [password, setPassword] = useState<string>('');
+  const [generatedPassword, setGeneratedPassword] = useState<string>(generatePassword());
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState<boolean>(false);
+  const [passwordHidden, setPasswordHidden] = useState<boolean>(true);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = .useRef(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

package/src/demos/PasswordStrength.md

@@ -3,6 +3,7 @@ id: Password strength
 section: patterns
 ---
 
+import { useState } from 'react';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';

package/src/demos/PrimaryDetail.md

@@ -3,6 +3,7 @@ id: Primary-detail
 section: patterns
 ---
 
+import { Fragment, useState } from 'react';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';

package/src/demos/ProgressDemo.md

@@ -2,7 +2,7 @@
 id: Progress
 section: components
 ---
-
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +10,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     setCurrentValue(nextValue);
@@ -48,10 +49,11 @@ ProgressStepperDemo = () => {
 Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check.
 
 ```js
+import { useState } from 'react';
 import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
 
 ProgressStepperDemo = () => {
-  const [currentValue, setCurrentValue] = React.useState(0);
+  const [currentValue, setCurrentValue] = useState(0);
 
   const onProgressUpdate = (nextValue) => {
     if (nextValue > currentValue) {

package/src/demos/ProgressStepperDemo.md

@@ -3,6 +3,7 @@ id: Progress stepper
 section: components
 ---
 
+import { useState } from 'react';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ## Demos
@@ -10,11 +11,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib
 ### Basic
 
 ```js
+import { useState } from 'react';
 import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
 import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
 
 ProgressStepperDemo = () => {
-  const [currentStep, setCurrentStep] = React.useState(0);
+  const [currentStep, setCurrentStep] = useState(0);
 
   const steps = [
     { title: 'First step', id: 'step1' },

package/src/demos/RTL/RTL.md

@@ -3,6 +3,7 @@ id: Right-to-left
 section: patterns
 ---
 
+import { Fragment, useEffect, useState } from 'react';
 import translationsEn from "./examples/translations.en.json";
 import translationsHe from "./examples/translations.he.json";
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -1,3 +1,4 @@
+import { Fragment, useEffect, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,9 +57,9 @@ import HandPaperIcon from '@patternfly/react-icons/dist/esm/icons/hand-paper-ico
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
 export const PaginatedTableAction = () => {
-  const [translation, setTranslation] = React.useState(translationsEn);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
+  const [translation, setTranslation] = useState(translationsEn);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
 
   const columns = [
     translation.table.columns.servers,
@@ -106,9 +107,9 @@ export const PaginatedTableAction = () => {
   };
 
   const rows = createRows();
-  const [managedRows, setManagedRows] = React.useState(rows);
-  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
-  const [isDirRTL, setIsDirRTL] = React.useState(false);
+  const [managedRows, setManagedRows] = useState(rows);
+  const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10));
+  const [isDirRTL, setIsDirRTL] = useState(false);
 
   const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
 
@@ -117,13 +118,13 @@ export const PaginatedTableAction = () => {
     setTranslation((prevTranslation) => (prevTranslation === translationsEn ? translationsHe : translationsEn));
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const newRows = createRows();
     setManagedRows(newRows);
     setPaginatedRows(newRows.slice((page - 1) * perPage, page * perPage));
   }, [translation]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const html = document.querySelector('html');
     html.dir = isDirRTL ? 'rtl' : 'ltr';
   }, [isDirRTL]);
@@ -226,7 +227,7 @@ export const PaginatedTableAction = () => {
   };
 
   const toolbarItems = (
-    <React.Fragment>
+    <Fragment>
       <Toolbar id="rtl-paginated-table">
         <ToolbarContent>
           <ToolbarItem>
@@ -246,7 +247,7 @@ export const PaginatedTableAction = () => {
           <ToolbarItem variant="pagination">{renderPagination(PaginationVariant.top)}</ToolbarItem>
         </ToolbarContent>
       </Toolbar>
-    </React.Fragment>
+    </Fragment>
   );
 
   const pageNav = (
@@ -277,9 +278,9 @@ export const PaginatedTableAction = () => {
     </PageSidebar>
   );
 
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
 
   const kebabDropdownItems = (
     <>
@@ -431,7 +432,7 @@ export const PaginatedTableAction = () => {
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Page sidebar={sidebar} masthead={masthead} isManagedSidebar>
         <PageBreadcrumb>
           <Breadcrumb aria-label={translation.breadcrumbs.ariaLabel || undefined}>
@@ -498,6 +499,6 @@ export const PaginatedTableAction = () => {
           </Card>
         </PageSection>
       </Page>
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/demos/SearchInput/SearchInput.md

@@ -2,7 +2,7 @@
 id: Search input
 section: components
 ---
-
+import { useEffect, useRef, useState } from 'react';
 import {
 Button,
 Card,
@@ -32,19 +32,20 @@ This demo handles building the advanced search form using the composable Menu, a
 It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core';
 
 import { words } from './words.js';
 
 SearchAutocomplete = () => {
-  const [value, setValue] = React.useState('');
-  const [hint, setHint] = React.useState('');
-  const [autocompleteOptions, setAutocompleteOptions] = React.useState([]);
+  const [value, setValue] = useState('');
+  const [hint, setHint] = useState('');
+  const [autocompleteOptions, setAutocompleteOptions] = useState([]);
 
-  const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false);
+  const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false);
 
-  const searchInputRef = React.useRef(null);
-  const autocompleteRef = React.useRef(null);
+  const searchInputRef = useRef(null);
+  const autocompleteRef = useRef(null);
 
   const onClear = () => {
     setValue('');
@@ -154,7 +155,7 @@ SearchAutocomplete = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {
@@ -206,6 +207,7 @@ keyboard interactions, focus management, and general event handling.
 Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form.
 
 ```js
+import { useEffect, useRef, useState } from 'react';
 import {
   ActionGroup,
   Button,
@@ -230,20 +232,20 @@ import {
 } from '@patternfly/react-core';
 
 AdvancedComposableSearchInput = () => {
-  const [value, setValue] = React.useState('');
-  const [hasWords, setHasWords] = React.useState('');
-  const [dateWithin, setDateWithin] = React.useState('1 day');
-  const [date, setDate] = React.useState();
+  const [value, setValue] = useState('');
+  const [hasWords, setHasWords] = useState('');
+  const [dateWithin, setDateWithin] = useState('1 day');
+  const [date, setDate] = useState();
 
-  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = React.useState(false);
-  const [isDateWithinOpen, setIsDateWithinOpen] = React.useState(false);
+  const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false);
+  const [isDateWithinOpen, setIsDateWithinOpen] = useState(false);
 
-  const isInitialMount = React.useRef(true);
-  const firstAttrRef = React.useRef(null);
-  const searchInputRef = React.useRef(null);
-  const advancedSearchPaneRef = React.useRef(null);
-  const dateWithinToggleRef = React.useRef(undefined);
-  const dateWithinMenuRef = React.useRef(undefined);
+  const isInitialMount = useRef(true);
+  const firstAttrRef = useRef(null);
+  const searchInputRef = useRef(null);
+  const advancedSearchPaneRef = useRef(null);
+  const dateWithinToggleRef = useRef(undefined);
+  const dateWithinMenuRef = useRef(undefined);
 
   const onClear = () => {
     setValue('');
@@ -264,7 +266,7 @@ AdvancedComposableSearchInput = () => {
   // After initial page load, whenever the advanced search menu is opened, the browser focus should be placed on the
   // first advanced search form input. Whenever the advanced search menu is closed, the browser focus should
   // be returned to the search input.
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
     } else {
@@ -320,7 +322,7 @@ AdvancedComposableSearchInput = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {