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/demos/examples/HelperText/HelperTextStatic.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 export const HelperTextStaticText: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
+  const [value, setValue] = useState('');
   const handleInputChange = (_event, inputValue: string) => {
     setValue(inputValue);

package/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx CHANGED Viewed

@@ -1,14 +1,15 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
 export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState('');
-  const [inputValidation, setInputValidation] = React.useState({
+  const [value, setValue] = useState('');
+  const [inputValidation, setInputValidation] = useState({
     ruleLength: 'indeterminate',
     ruleCharacterTypes: 'indeterminate'
   });
   const { ruleLength, ruleCharacterTypes } = inputValidation;
-  React.useEffect(() => {
+  useEffect(() => {
     let lengthVariant = ruleLength;
     let typeVariant = ruleCharacterTypes;

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -49,14 +50,14 @@ interface NavOnSelectProps {
 }
 export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(0);
-  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);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -104,7 +105,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
     }
   };
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -66,17 +66,17 @@ interface NavOnSelectProps {
 }
 export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-  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 toggleRef = React.useRef<HTMLButtonElement>(null);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+  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 toggleRef = useRef<HTMLButtonElement>(null);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -138,7 +138,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     setIsOpen(!isOpen);
   };
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
@@ -249,8 +249,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     const filteredCopy = items
       .map((group) => {
         if (group.type === MenuGroup) {
-          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.itemId)) {
                   return child;
@@ -266,7 +266,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
             keepDivider = false;
           }
         } else if (group.type === MenuList) {
-          const filteredGroup = React.cloneElement(group, {
+          const filteredGroup = cloneElement(group, {
             children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.itemId)) {
                 return child;

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { FileRejection } from 'react-dropzone';
 import {
   MultipleFileUpload,
@@ -20,12 +21,12 @@ interface readFile {
 }
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
-  const [isHorizontal, setIsHorizontal] = React.useState(false);
-  const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
-  const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
-  const [showStatus, setShowStatus] = React.useState(false);
-  const [statusIcon, setStatusIcon] = React.useState('inProgress');
-  const [modalText, setModalText] = React.useState('');
+  const [isHorizontal, setIsHorizontal] = useState(false);
+  const [currentFiles, setCurrentFiles] = useState<File[]>([]);
+  const [readFileData, setReadFileData] = useState<readFile[]>([]);
+  const [showStatus, setShowStatus] = useState(false);
+  const [statusIcon, setStatusIcon] = useState('inProgress');
+  const [modalText, setModalText] = useState('');
   // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed
   if (!showStatus && currentFiles.length > 0) {
@@ -33,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   }
   // determine the icon that should be shown for the overall status list
-  React.useEffect(() => {
+  useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
     } else if (readFileData.every((file) => file.loadResult === 'success')) {

package/src/demos/examples/Nav/NavDrilldown.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import {
   Page,
@@ -30,7 +30,7 @@ function getNavLayer(menuId: string): number {
   return 1;
 }
-const subMenuTwo: JSX.Element = (
+const subMenuTwo: React.JSX.Element = (
   <DrilldownMenu id="subMenu-2">
     <MenuItem itemId="subMenu-2-breadcrumb" direction="up">
       SubMenu 1 - Item 1
@@ -47,7 +47,7 @@ const subMenuTwo: JSX.Element = (
   </DrilldownMenu>
 );
-const subMenuOne: JSX.Element = (
+const subMenuOne: React.JSX.Element = (
   <DrilldownMenu id="subMenu-1">
     <MenuItem itemId="subMenu-1-breadcrumb" direction="up">
       Item 1

package/src/demos/examples/Nav/NavExpandable.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavExpandableDemo: React.FunctionComponent = () => {
-  const [activeGroup, setActiveGroup] = React.useState<string | number>('grp-1');
-  const [activeItem, setActiveItem] = React.useState<string | number>('grp-1_itm-1');
+  const [activeGroup, setActiveGroup] = useState<string | number>('grp-1');
+  const [activeItem, setActiveItem] = useState<string | number>('grp-1_itm-1');
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavFlyout.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -44,13 +45,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 export const NavFlyout: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<number | string>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavGrouped.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Content,
   Nav,
@@ -12,7 +13,7 @@ import {
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavGrouped: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<number | string>('grp-1_itm-1');
+  const [activeItem, setActiveItem] = useState<number | string>('grp-1_itm-1');
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -42,10 +42,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 export const NavHorizontal: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,11 +46,11 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper';
 export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -46,13 +46,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 export const NavManual: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isMobileView, setIsMobileView] = React.useState(false);
-  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true);
-  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isMobileView, setIsMobileView] = useState(false);
+  const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true);
+  const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Nav/NavWithSubnav.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   CardBody,
@@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 export const NavWithSubnav: React.FunctionComponent = () => {
-  const [activeItem, setActiveItem] = React.useState<string | number>(0);
-  const [activeSubNavItem, setActiveSubNavItem] = React.useState<string | number>(7);
+  const [activeItem, setActiveItem] = useState<string | number>(0);
+  const [activeSubNavItem, setActiveSubNavItem] = useState<string | number>(7);
   const onNavSelect = (
     _event: React.FormEvent<HTMLInputElement>,

package/src/demos/examples/Page/PageContextSelector.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,12 +54,12 @@ interface NavOnSelectProps {
 }
 export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
-  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const onSidebarToggle = () => {
     setIsSidebarOpen(!isSidebarOpen);

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -53,10 +54,10 @@ interface NavOnSelectProps {
 }
 export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Avatar,
   Brand,
@@ -56,10 +57,10 @@ interface NavOnSelectProps {
 }
 export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
-  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
-  const [activeItem, setActiveItem] = React.useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(1);
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type JSX, useState } from 'react';
+import { useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
@@ -8,7 +8,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
   type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
   interface PassStrength {
     variant: HelperTextItemVariant;
-    icon: JSX.Element;
+    icon: React.JSX.Element;
     text: string;
   }

package/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Badge,
   Button,
@@ -53,20 +53,20 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx';
 export const PrimaryDetailCardView: React.FunctionComponent = () => {
-  const [totalItemCount, setTotalItemCount] = React.useState(10);
-  const [cardData, setCardData] = React.useState(data);
-  const [isChecked, setIsChecked] = React.useState(false);
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const [areAllSelected, setAreAllSelected] = React.useState<boolean>(false);
-  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
-  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false);
-  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false);
-  const [page, setPage] = React.useState(1);
-  const [perPage, setPerPage] = React.useState(10);
-  const [filters, setFilters] = React.useState<Record<string, string[]>>({ products: [] });
-  const [state, setState] = React.useState({});
-  const [activeCard, setActiveCard] = React.useState(-1);
+  const [totalItemCount, setTotalItemCount] = useState(10);
+  const [cardData, setCardData] = useState(data);
+  const [isChecked, setIsChecked] = useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
+  const [areAllSelected, setAreAllSelected] = useState<boolean>(false);
+  const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState(false);
+  const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState(false);
+  const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = useState(false);
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+  const [filters, setFilters] = useState<Record<string, string[]>>({ products: [] });
+  const [state, setState] = useState({});
+  const [activeCard, setActiveCard] = useState(-1);
   interface ProductType {
     id: number;

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -32,10 +32,10 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 export const PrimaryDetailDataListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1');
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1');
+  const [isExpanded, setIsExpanded] = useState(false);
   const onDropdownToggle = () => {
     setIsDropdownOpen(!isDropdownOpen);

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 export const PrimaryDetailFullPage: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Button,
   ButtonVariant,
@@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [
 ];
 export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState('');
-  const [inputValue, setInputValue] = React.useState('');
-  const [statusIsOpen, setStatusIsOpen] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | number | undefined>('Status');
-  const [riskIsOpen, setRiskIsOpen] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | number | undefined>('Risk');
-  const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('');
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const [statusIsOpen, setStatusIsOpen] = useState(false);
+  const [statusSelected, setStatusSelected] = useState<string | number | undefined>('Status');
+  const [riskIsOpen, setRiskIsOpen] = useState(false);
+  const [riskSelected, setRiskSelected] = useState<string | number | undefined>('Risk');
+  const [selectedDataListItemId, setSelectedDataListItemId] = useState('');
   const onStatusSelect = (_event: React.MouseEvent<Element> | undefined, value: string | number | undefined) => {
     setStatusSelected(value);

package/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   Card,
   Content,
@@ -23,8 +23,8 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => {
-  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1);
-  const [isExpanded, setIsExpanded] = React.useState(false);
+  const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1);
+  const [isExpanded, setIsExpanded] = useState(false);
   const onSelectListItem = (_listItem, listItemProps) => {
     const id = listItemProps.children;

package/src/demos/examples/Tabs/ModalTabs.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useCallback, useState } from 'react';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import {
   PageSection,
@@ -47,11 +47,11 @@ const products: Product[] = [
 ];
 export const ModalTabs: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(true);
-  const [selectedProduct, setSelectedProduct] = React.useState<Product | undefined>(products[0]);
-  const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  const [selectedProduct, setSelectedProduct] = useState<Product | undefined>(products[0]);
+  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
-  const onCardClick = React.useCallback(
+  const onCardClick = useCallback(
     (product: Product) => () => {
       setSelectedProduct(product);
       setIsModalOpen(true);
@@ -59,13 +59,13 @@ export const ModalTabs: React.FunctionComponent = () => {
     []
   );
-  const closeModal = React.useCallback(() => {
+  const closeModal = useCallback(() => {
     setSelectedProduct(undefined);
     setIsModalOpen(false);
     setActiveTabKey(0);
   }, []);
-  const onTabSelect = React.useCallback(
+  const onTabSelect = useCallback(
     (_event: React.MouseEvent<HTMLElement, MouseEvent>, tabIndex: string | number) => setActiveTabKey(tabIndex),
     []
   );