@patternfly/react-core 4.247.1 → 4.249.0

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

@@ -17,7 +17,8 @@ import {
   Title,
   EmptyStateBody,
   EmptyStatePrimary,
-  Button
+  Button,
+  Bullseye
 } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -36,7 +37,7 @@ const repositories: Repository[] = [
   { name: 'US-Node 1', threads: '5', apps: '25', workspaces: '5', status: 'Stopped', location: 'Raleigh' },
   { name: 'US-Node 2', threads: '5', apps: '30', workspaces: '2', status: 'Down', location: 'Westford' },
   { name: 'US-Node 3', threads: '13', apps: '35', workspaces: '12', status: 'Degraded', location: 'Boston' },
-  { name: 'US-Node 4', threads: '2', apps: '5', workspaces: '18', status: 'Needs Maintainence', location: 'Raleigh' },
+  { name: 'US-Node 4', threads: '2', apps: '5', workspaces: '18', status: 'Needs Maintenance', location: 'Raleigh' },
   { name: 'US-Node 5', threads: '7', apps: '30', workspaces: '5', status: 'Running', location: 'Boston' },
   { name: 'US-Node 6', threads: '5', apps: '20', workspaces: '15', status: 'Stopped', location: 'Raleigh' },
   { name: 'CZ-Node 1', threads: '12', apps: '48', workspaces: '13', status: 'Down', location: 'Brno' },
@@ -56,11 +57,32 @@ const columnNames = {
 
 /* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterSearchInput: React.FunctionComponent = () => {
-  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const selectableRepos = repositories.filter(isRepoSelectable);
+  // Set up repo filtering
+  const [searchValue, setSearchValue] = React.useState('');
+
+  const onSearchChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  const onFilter = (repo: Repository) => {
+    if (searchValue === '') {
+      return true;
+    }
 
+    let input: RegExp;
+    try {
+      input = new RegExp(searchValue, 'i');
+    } catch (err) {
+      input = new RegExp(searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
+    }
+    return repo.name.search(input) >= 0;
+  };
+  const filteredRepos = repositories.filter(onFilter);
+
+  // Set up table row selection
   // 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 setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames(prevSelected => {
@@ -68,8 +90,8 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? selectableRepos.map(r => r.name) : []);
-  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
+    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []); // Selecting all should only select all currently filtered rows
+  const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
@@ -113,21 +135,13 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     };
   }, []);
 
-  const bulkSelectMenuRef = React.createRef<HTMLDivElement>();
-  const bulkSelectToggleRef = React.createRef<any>();
-  const containerRef = React.createRef<HTMLDivElement>();
+  // Set up bulk selection menu
+  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = React.useRef<any>(null);
+  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
 
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleBulkSelectMenuKeys);
-    window.addEventListener('click', handleBulkSelectClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleBulkSelectMenuKeys);
-      window.removeEventListener('click', handleBulkSelectClickOutside);
-    };
-  }, [isBulkSelectOpen, bulkSelectMenuRef]);
-
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
       setIsBulkSelectOpen(false);
@@ -144,11 +158,20 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     ) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsBulkSelectOpen(!isBulkSelectOpen);
-        bulkSelectToggleRef.current?.focus();
+        bulkSelectToggleRef.current?.querySelector('button').focus();
       }
     }
   };
 
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleBulkSelectMenuKeys);
+    window.addEventListener('click', handleBulkSelectClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleBulkSelectMenuKeys);
+      window.removeEventListener('click', handleBulkSelectClickOutside);
+    };
+  }, [isBulkSelectOpen, bulkSelectMenuRef]);
+
   const onBulkSelectToggleClick = (ev: React.MouseEvent) => {
     ev.stopPropagation(); // Stop handleClickOutside from handling
     setTimeout(() => {
@@ -175,8 +198,8 @@ export const FilterSearchInput: React.FunctionComponent = () => {
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="select-checkbox"
-            key="select-checkbox"
+            id="search-input-bulk-select"
+            key="search-input-bulk-select"
             aria-label="Select all"
             isChecked={menuToggleCheckmark}
             onChange={(checked, _event) => selectAllRepos(checked)}
@@ -188,12 +211,13 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   );
 
   const bulkSelectMenu = (
-    // eslint-disable-next-line no-console
     <Menu
+      id="search-input-bulk-select"
       ref={bulkSelectMenuRef}
       onSelect={(_ev, itemId) => {
         selectAllRepos(itemId === 1 || itemId === 2);
         setIsBulkSelectOpen(!isBulkSelectOpen);
+        bulkSelectToggleRef.current?.querySelector('button').focus();
       }}
     >
       <MenuContent>
@@ -207,37 +231,17 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   );
 
   const toolbarBulkSelect = (
-    <div ref={containerRef}>
+    <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
         popper={bulkSelectMenu}
-        appendTo={containerRef.current || undefined}
+        appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
       />
     </div>
   );
 
-  const [searchValue, setSearchValue] = React.useState('');
-
-  const onSearchChange = (value: string) => {
-    setSearchValue(value);
-  };
-
-  const onFilter = (repo: Repository) => {
-    if (searchValue === '') {
-      return true;
-    }
-
-    let input: RegExp;
-    try {
-      input = new RegExp(searchValue, 'i');
-    } catch (err) {
-      input = new RegExp(searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
-    }
-    return repo.name.search(input) >= 0;
-  };
-
   const searchInput = (
     <SearchInput
       placeholder="Filter by server name"
@@ -269,25 +273,6 @@ export const FilterSearchInput: React.FunctionComponent = () => {
     </Toolbar>
   );
 
-  const filteredRepos = repositories.filter(onFilter).map((repo, rowIndex) => (
-    <Tr key={repo.name}>
-      <Td
-        select={{
-          rowIndex,
-          onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),
-          isSelected: isRepoSelected(repo),
-          disable: !isRepoSelectable(repo)
-        }}
-      />
-      <Td dataLabel={columnNames.name}>{repo.name}</Td>
-      <Td dataLabel={columnNames.threads}>{repo.threads}</Td>
-      <Td dataLabel={columnNames.apps}>{repo.apps}</Td>
-      <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
-      <Td dataLabel={columnNames.status}>{repo.status}</Td>
-      <Td dataLabel={columnNames.location}>{repo.location}</Td>
-    </Tr>
-  ));
-
   const emptyState = (
     <EmptyState>
       <EmptyStateIcon icon={SearchIcon} />
@@ -316,16 +301,54 @@ export const FilterSearchInput: React.FunctionComponent = () => {
           <Tr>
             <Th />
             <Th width={20}>{columnNames.name}</Th>
-            <Th width={20}>{columnNames.threads}</Th>
-            <Th width={20}>{columnNames.apps}</Th>
-            <Th width={20}>{columnNames.workspaces}</Th>
+            <Th width={10}>{columnNames.threads}</Th>
+            <Th width={10}>{columnNames.apps}</Th>
+            <Th width={10}>{columnNames.workspaces}</Th>
             <Th width={20}>{columnNames.status}</Th>
             <Th width={20}>{columnNames.location}</Th>
           </Tr>
         </Thead>
-        <Tbody>{filteredRepos.length > 0 && filteredRepos}</Tbody>
+        <Tbody>
+          {filteredRepos.length > 0 &&
+            filteredRepos.map((repo, rowIndex) => (
+              <Tr key={repo.name}>
+                <Td
+                  select={{
+                    rowIndex,
+                    onSelect: (_event, isSelecting) => onSelectRepo(repo, rowIndex, isSelecting),
+                    isSelected: isRepoSelected(repo),
+                    disable: !isRepoSelectable(repo)
+                  }}
+                />
+                <Td dataLabel={columnNames.name} modifier="truncate">
+                  {repo.name}
+                </Td>
+                <Td dataLabel={columnNames.threads} modifier="truncate">
+                  {repo.threads}
+                </Td>
+                <Td dataLabel={columnNames.apps} modifier="truncate">
+                  {repo.apps}
+                </Td>
+                <Td dataLabel={columnNames.workspaces} modifier="truncate">
+                  {repo.workspaces}
+                </Td>
+                <Td dataLabel={columnNames.status} modifier="truncate">
+                  {repo.status}
+                </Td>
+                <Td dataLabel={columnNames.location} modifier="truncate">
+                  {repo.location}
+                </Td>
+              </Tr>
+            ))}
+          {filteredRepos.length === 0 && (
+            <Tr>
+              <Td colSpan={8}>
+                <Bullseye>{emptyState}</Bullseye>
+              </Td>
+            </Tr>
+          )}
+        </Tbody>
       </TableComposable>
-      {filteredRepos.length === 0 && emptyState}
     </React.Fragment>
   );
 };

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

@@ -29,7 +29,7 @@ const repositories: Repository[] = [
   { name: 'US-Node 1', threads: '5', apps: '25', workspaces: '5', status: 'Stopped', location: 'Raleigh' },
   { name: 'US-Node 2', threads: '5', apps: '30', workspaces: '2', status: 'Down', location: 'Westford' },
   { name: 'US-Node 3', threads: '13', apps: '35', workspaces: '12', status: 'Degraded', location: 'Boston' },
-  { name: 'US-Node 4', threads: '2', apps: '5', workspaces: '18', status: 'Needs Maintainence', location: 'Raleigh' },
+  { name: 'US-Node 4', threads: '2', apps: '5', workspaces: '18', status: 'Needs Maintenance', location: 'Raleigh' },
   { name: 'US-Node 5', threads: '7', apps: '30', workspaces: '5', status: 'Running', location: 'Boston' },
   { name: 'US-Node 6', threads: '5', apps: '20', workspaces: '15', status: 'Stopped', location: 'Raleigh' },
   { name: 'CZ-Node 1', threads: '12', apps: '48', workspaces: '13', status: 'Down', location: 'Brno' },
@@ -49,12 +49,28 @@ const columnNames = {
 
 /* eslint-disable patternfly-react/no-anonymous-functions */
 export const FilterSingleSelect: React.FunctionComponent = () => {
-  // Set up table selection
-  const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example
-  const selectableRepos = repositories.filter(isRepoSelectable);
+  // Set up repo filtering
+  const [searchValue, setSearchValue] = React.useState('');
+  const onFilter = (repo: Repository) => {
+    if (searchValue === 'all') {
+      return true;
+    }
 
+    let input: RegExp;
+    try {
+      input = new RegExp(searchValue, 'i');
+    } catch (err) {
+      input = new RegExp(searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
+    }
+    return repo.status.search(input) >= 0;
+  };
+
+  const filteredRepos = repositories.filter(onFilter);
+
+  // Set up table selection
   // 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 setRepoSelected = (repo: Repository, isSelecting = true) =>
     setSelectedRepoNames(prevSelected => {
@@ -62,8 +78,8 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       return isSelecting && isRepoSelectable(repo) ? [...otherSelectedRepoNames, repo.name] : otherSelectedRepoNames;
     });
   const selectAllRepos = (isSelecting = true) =>
-    setSelectedRepoNames(isSelecting ? selectableRepos.map(r => r.name) : []);
-  const areAllReposSelected = selectedRepoNames.length === selectableRepos.length;
+    setSelectedRepoNames(isSelecting ? filteredRepos.map(r => r.name) : []);
+  const areAllReposSelected = selectedRepoNames.length === filteredRepos.length && filteredRepos.length > 0;
   const areSomeReposSelected = selectedRepoNames.length > 0;
   const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name);
 
@@ -108,21 +124,12 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   }, []);
 
   // Set up bulk selection menu
-  const bulkSelectMenuRef = React.createRef<HTMLDivElement>();
-  const bulkSelectToggleRef = React.createRef<any>();
-  const bulkSelectcontainerRef = React.createRef<HTMLDivElement>();
+  const bulkSelectMenuRef = React.useRef<HTMLDivElement>(null);
+  const bulkSelectToggleRef = React.useRef<any>(null);
+  const bulkSelectContainerRef = React.useRef<HTMLDivElement>(null);
 
   const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState<boolean>(false);
 
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleBulkSelectMenuKeys);
-    window.addEventListener('click', handleBulkSelectClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleBulkSelectMenuKeys);
-      window.removeEventListener('click', handleBulkSelectClickOutside);
-    };
-  }, [isBulkSelectOpen, bulkSelectMenuRef]);
-
   const handleBulkSelectClickOutside = (event: MouseEvent) => {
     if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) {
       setIsBulkSelectOpen(false);
@@ -139,11 +146,20 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
     ) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsBulkSelectOpen(!isBulkSelectOpen);
-        bulkSelectToggleRef.current?.focus();
+        bulkSelectToggleRef.current?.querySelector('button').focus();
       }
     }
   };
 
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleBulkSelectMenuKeys);
+    window.addEventListener('click', handleBulkSelectClickOutside);
+    return () => {
+      window.removeEventListener('keydown', handleBulkSelectMenuKeys);
+      window.removeEventListener('click', handleBulkSelectClickOutside);
+    };
+  }, [isBulkSelectOpen, bulkSelectMenuRef]);
+
   const onBulkSelectToggleClick = (ev: React.MouseEvent) => {
     ev.stopPropagation(); // Stop handleClickOutside from handling
     setTimeout(() => {
@@ -170,8 +186,8 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
       splitButtonOptions={{
         items: [
           <MenuToggleCheckbox
-            id="select-checkbox"
-            key="select-checkbox"
+            id="single-bulk-select"
+            key="single-bulk-select"
             aria-label="Select all"
             isChecked={menuToggleCheckmark}
             onChange={(checked, _event) => selectAllRepos(checked)}
@@ -183,12 +199,12 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   );
 
   const bulkSelectMenu = (
-    // eslint-disable-next-line no-console
     <Menu
       ref={bulkSelectMenuRef}
       onSelect={(_ev, itemId) => {
         selectAllRepos(itemId === 1 || itemId === 2);
         setIsBulkSelectOpen(!isBulkSelectOpen);
+        bulkSelectToggleRef.current?.querySelector('button').focus();
       }}
     >
       <MenuContent>
@@ -202,34 +218,17 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   );
 
   const toolbarBulkSelect = (
-    <div ref={bulkSelectcontainerRef}>
+    <div ref={bulkSelectContainerRef}>
       <Popper
         trigger={bulkSelectToggle}
         popper={bulkSelectMenu}
-        appendTo={bulkSelectcontainerRef.current || undefined}
+        appendTo={bulkSelectContainerRef.current || undefined}
         isVisible={isBulkSelectOpen}
         popperMatchesTriggerWidth={false}
       />
     </div>
   );
 
-  // Set up table filtering
-  const [searchValue, setSearchValue] = React.useState('');
-
-  const onFilter = (repo: Repository) => {
-    if (searchValue === 'all') {
-      return true;
-    }
-
-    let input: RegExp;
-    try {
-      input = new RegExp(searchValue, 'i');
-    } catch (err) {
-      input = new RegExp(searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'i');
-    }
-    return repo.status.search(input) >= 0;
-  };
-
   // Set up single select menu & state
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [menuSelection, setMenuSelection] = React.useState<string>('all');
@@ -308,7 +307,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   );
 
   const menu = (
-    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={menuSelection}>
+    <Menu ref={menuRef} id="single-select-menu" onSelect={onSelect} selected={menuSelection}>
       <MenuContent>
         <MenuList>
           <MenuItem itemId="all">All statuses</MenuItem>
@@ -359,15 +358,15 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
           <Tr>
             <Th />
             <Th width={20}>{columnNames.name}</Th>
-            <Th width={20}>{columnNames.threads}</Th>
-            <Th width={20}>{columnNames.apps}</Th>
-            <Th width={20}>{columnNames.workspaces}</Th>
+            <Th width={10}>{columnNames.threads}</Th>
+            <Th width={10}>{columnNames.apps}</Th>
+            <Th width={10}>{columnNames.workspaces}</Th>
             <Th width={20}>{columnNames.status}</Th>
             <Th width={20}>{columnNames.location}</Th>
           </Tr>
         </Thead>
         <Tbody>
-          {repositories.filter(onFilter).map((repo, rowIndex) => (
+          {filteredRepos.map((repo, rowIndex) => (
             <Tr key={repo.name}>
               <Td
                 select={{
@@ -377,12 +376,24 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
                   disable: !isRepoSelectable(repo)
                 }}
               />
-              <Td dataLabel={columnNames.name}>{repo.name}</Td>
-              <Td dataLabel={columnNames.threads}>{repo.threads}</Td>
-              <Td dataLabel={columnNames.apps}>{repo.apps}</Td>
-              <Td dataLabel={columnNames.workspaces}>{repo.workspaces}</Td>
-              <Td dataLabel={columnNames.status}>{repo.status}</Td>
-              <Td dataLabel={columnNames.location}>{repo.location}</Td>
+              <Td dataLabel={columnNames.name} modifier="truncate">
+                {repo.name}
+              </Td>
+              <Td dataLabel={columnNames.threads} modifier="truncate">
+                {repo.threads}
+              </Td>
+              <Td dataLabel={columnNames.apps} modifier="truncate">
+                {repo.apps}
+              </Td>
+              <Td dataLabel={columnNames.workspaces} modifier="truncate">
+                {repo.workspaces}
+              </Td>
+              <Td dataLabel={columnNames.status} modifier="truncate">
+                {repo.status}
+              </Td>
+              <Td dataLabel={columnNames.location} modifier="truncate">
+                {repo.location}
+              </Td>
             </Tr>
           ))}
         </Tbody>