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

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 () => {

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -60,8 +60,8 @@ const columnNames = {
 
 export const FilterFaceted: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelections, setStatusSelections] = React.useState<string[]>([]);
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelections, setStatusSelections] = useState<string[]>([]);
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -80,7 +80,7 @@ export const FilterFaceted: 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);
@@ -93,8 +93,8 @@ export const FilterFaceted: 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
@@ -111,7 +111,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -133,11 +133,11 @@ export const FilterFaceted: 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)) {
@@ -160,7 +160,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -239,10 +239,10 @@ export const FilterFaceted: React.FunctionComponent = () => {
   );
 
   // Set up location checkbox select
-  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 handleKeys = (event: KeyboardEvent) => {
     if (isOpen && menuRef.current?.contains(event.target as Node)) {
@@ -259,7 +259,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleKeys);
     window.addEventListener('click', handleClickOutside);
     return () => {

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -59,8 +59,8 @@ const columnNames = {
 
 export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelections, setLocationSelections] = React.useState<string[]>([]);
-  const [statusSelection, setStatusSelection] = React.useState('');
+  const [locationSelections, setLocationSelections] = useState<string[]>([]);
+  const [statusSelection, setStatusSelection] = useState('');
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -77,7 +77,7 @@ export const FilterMixedSelectGroup: 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);
@@ -90,8 +90,8 @@ export const FilterMixedSelectGroup: 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
@@ -108,7 +108,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -130,11 +130,11 @@ export const FilterMixedSelectGroup: 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)) {
@@ -157,7 +157,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -236,10 +236,10 @@ export const FilterMixedSelectGroup: 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)) {
@@ -256,7 +256,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -329,10 +329,10 @@ export const FilterMixedSelectGroup: 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)) {
@@ -349,7 +349,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   Toolbar,
   ToolbarContent,
@@ -57,8 +57,8 @@ const columnNames = {
 
 export const FilterSameSelectGroup: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [locationSelection, setLocationSelection] = React.useState('All locations');
-  const [statusSelection, setStatusSelection] = React.useState('All statuses');
+  const [locationSelection, setLocationSelection] = useState('All locations');
+  const [statusSelection, setStatusSelection] = useState('All statuses');
 
   const onFilter = (repo: Repository) => {
     // Search status with status selection
@@ -78,7 +78,7 @@ export const FilterSameSelectGroup: 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);
@@ -91,8 +91,8 @@ export const FilterSameSelectGroup: 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
@@ -109,7 +109,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -131,11 +131,11 @@ export const FilterSameSelectGroup: 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)) {
@@ -158,7 +158,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {
@@ -237,10 +237,10 @@ export const FilterSameSelectGroup: 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)) {
@@ -257,7 +257,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleStatusMenuKeys);
     window.addEventListener('click', handleStatusClickOutside);
     return () => {
@@ -331,10 +331,10 @@ export const FilterSameSelectGroup: 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)) {
@@ -351,7 +351,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleLocationMenuKeys);
     window.addEventListener('click', handleLocationClickOutside);
     return () => {

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import {
   SearchInput,
   Toolbar,
@@ -56,7 +56,7 @@ const columnNames = {
 
 export const FilterSearchInput: React.FunctionComponent = () => {
   // Set up repo filtering
-  const [searchValue, setSearchValue] = React.useState('');
+  const [searchValue, setSearchValue] = useState('');
 
   const onSearchChange = (value: string) => {
     setSearchValue(value);
@@ -81,7 +81,7 @@ export const FilterSearchInput: 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);
@@ -94,8 +94,8 @@ export const FilterSearchInput: 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
@@ -112,7 +112,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     setRecentSelectedRowIndex(rowIndex);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Shift') {
         setShifting(true);
@@ -134,11 +134,11 @@ export const FilterSearchInput: 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)) {
@@ -161,7 +161,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     }
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('keydown', handleBulkSelectMenuKeys);
     window.addEventListener('click', handleBulkSelectClickOutside);
     return () => {