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

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,

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   SearchInput,
   Toolbar,
@@ -61,9 +61,9 @@ const columnNames = {
 
 export const FilterAttributeSearch: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelection, setStatusSelection] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelection, setStatusSelection] = useState('');
 
   const onSearchChange = (value: string) => {
     setSearchValue(value);
@@ -97,7 +97,7 @@ export const FilterAttributeSearch: 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);
@@ -110,8 +110,8 @@ export const FilterAttributeSearch: 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
@@ -128,7 +128,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -150,11 +150,11 @@ export const FilterAttributeSearch: 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)) {
@@ -177,7 +177,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -266,10 +266,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up status single select
-  const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState<boolean>(false);
-  const statusToggleRef = React.useRef<HTMLButtonElement>(null);
-  const statusMenuRef = React.useRef<HTMLDivElement>(null);
-  const statusContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isStatusMenuOpen, setIsStatusMenuOpen] = useState<boolean>(false);
+  const statusToggleRef = useRef<HTMLButtonElement>(null);
+  const statusMenuRef = useRef<HTMLDivElement>(null);
+  const statusContainerRef = useRef<HTMLDivElement>(null);
 
   const handleStatusMenuKeys = (event: KeyboardEvent) => {
     if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) {
@@ -286,7 +286,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -358,10 +358,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState<boolean>(false);
-  const locationToggleRef = React.useRef<HTMLButtonElement>(null);
-  const locationMenuRef = React.useRef<HTMLDivElement>(null);
-  const locationContainerRef = React.useRef<HTMLDivElement>(null);
+  const [isLocationMenuOpen, setIsLocationMenuOpen] = useState<boolean>(false);
+  const locationToggleRef = useRef<HTMLButtonElement>(null);
+  const locationMenuRef = useRef<HTMLDivElement>(null);
+  const locationContainerRef = useRef<HTMLDivElement>(null);
 
   const handleLocationMenuKeys = (event: KeyboardEvent) => {
     if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) {
@@ -378,7 +378,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {
@@ -471,11 +471,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   );
 
   // Set up attribute selector
-  const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Servers' | 'Status' | 'Location'>('Servers');
-  const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false);
-  const attributeToggleRef = React.useRef<HTMLButtonElement>(null);
-  const attributeMenuRef = React.useRef<HTMLDivElement>(null);
-  const attributeContainerRef = React.useRef<HTMLDivElement>(null);
+  const [activeAttributeMenu, setActiveAttributeMenu] = useState<'Servers' | 'Status' | 'Location'>('Servers');
+  const [isAttributeMenuOpen, setIsAttributeMenuOpen] = useState(false);
+  const attributeToggleRef = useRef<HTMLButtonElement>(null);
+  const attributeMenuRef = useRef<HTMLDivElement>(null);
+  const attributeContainerRef = useRef<HTMLDivElement>(null);
 
   const handleAttribueMenuKeys = (event: KeyboardEvent) => {
     if (!isAttributeMenuOpen) {
@@ -498,7 +498,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleAttribueMenuKeys);
     window.addEventListener('click', handleAttributeClickOutside);
     return () => {

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Menu,
   MenuContent,
@@ -52,7 +52,7 @@ const columnNames = {
 
 export const FilterCheckboxSelect: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [selections, setSelections] = React.useState<string[]>([]);
+  const [selections, setSelections] = useState<string[]>([]);
   const onFilter = (repo: Repository) => {
     if (selections.length === 0) {
       return true;
@@ -75,7 +75,7 @@ export const FilterCheckboxSelect: 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);
@@ -88,8 +88,8 @@ export const FilterCheckboxSelect: 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
@@ -106,7 +106,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -128,11 +128,11 @@ export const FilterCheckboxSelect: 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)) {
@@ -155,7 +155,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -233,10 +233,10 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   );
 
   // Set up checkbox select menu
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  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 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)) {
@@ -253,7 +253,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleMenuKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {