@patternfly/react-core 4.232.13 → 4.234.0

package/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx

@@ -8,21 +8,21 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -36,7 +36,11 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     };
   }, [isOpen, menuRef]);
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number) => {
+  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+      return;
+    }
+
     if (selectedItems.includes(itemId)) {
       setSelectedItems(selectedItems.filter(id => id !== itemId));
     } else {
@@ -125,7 +129,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
         trigger={toggle}
         popper={menu}
         isVisible={isOpen}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         popperMatchesTriggerWidth={false}
       />
     </div>

package/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx

@@ -21,24 +21,24 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const [refFullOptions, setRefFullOptions] = React.useState<Element[]>();
   const [favorites, setFavorites] = React.useState<string[]>([]);
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -132,7 +132,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   ];
 
   const createFavorites = (favIds: string[]) => {
-    const favorites = [];
+    const favorites: unknown[] = [];
 
     menuItems.forEach(item => {
       if (item.type === MenuList) {
@@ -219,9 +219,10 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       return;
     }
 
-    const filteredIds = refFullOptions
-      .filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
-      .map(item => item.id);
+    const filteredIds =
+      refFullOptions
+        ?.filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map(item => item.id) || [];
     setFilteredIds(filteredIds);
   };
 
@@ -275,7 +276,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
         popper={menu}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
       />
     </div>
   );

package/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx

@@ -54,39 +54,37 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     'Azure 2'
   ];
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<ItemData | string>(
-    typeof items[0] === 'string' ? items[0] : items[0].text
-  );
+  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>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuFooterBtnRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuFooterBtnRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuFooterBtnRef.current.contains(event.target as Node)) {
+    if (menuFooterBtnRef.current?.contains(event.target as Node)) {
       if (event.key === 'Tab') {
         if (event.shiftKey) {
           return;
         }
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
-    if (menuRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };

package/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx

@@ -24,21 +24,21 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -248,7 +248,7 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />

package/src/demos/ComposableMenu/examples/ComposableFlyout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 // eslint-disable-next-line no-console
-const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => console.log('selected', itemId);
+const onSelect = (event?: React.MouseEvent, itemId?: string | number) => console.log('selected', itemId);
 
 interface FlyoutMenuProps {
   children?: React.ReactElement;
@@ -31,24 +31,24 @@ const FlyoutMenu: React.FunctionComponent<FlyoutMenuProps> = ({ depth, children
 
 export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const menuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -105,7 +105,7 @@ export const ComposableFlyout: React.FunctionComponent = () => {
       <Popper
         trigger={toggle}
         popper={menu}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         isVisible={isOpen}
         popperMatchesTriggerWidth={false}
       />

package/src/demos/ComposableMenu/examples/ComposableSimpleCheckboxSelect.tsx

@@ -4,8 +4,8 @@ import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper, Badge } from
 export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = React.useCallback(
     event => {
@@ -50,12 +50,15 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: number | string) => {
-    const item = itemId as number;
-    if (selectedItems.includes(item)) {
-      setSelectedItems(selectedItems.filter(id => id !== item));
+  const onSelect = (event?: React.MouseEvent, itemId?: string | number) => {
+    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+      return;
+    }
+
+    if (selectedItems.includes(itemId)) {
+      setSelectedItems(selectedItems.filter(id => id !== itemId));
     } else {
-      setSelectedItems([...selectedItems, item]);
+      setSelectedItems([...selectedItems, itemId]);
     }
   };
 
@@ -94,5 +97,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper appendTo={toggleRef.current} trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper appendTo={toggleRef.current || undefined} trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

package/src/demos/ComposableMenu/examples/ComposableSimpleDropdown.tsx

@@ -3,24 +3,24 @@ import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patt
 
 export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -69,7 +69,7 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   );
   return (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
     </div>
   );
 };

package/src/demos/ComposableMenu/examples/ComposableSimpleSelect.tsx

@@ -5,21 +5,21 @@ import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 export const ComposableSimpleSelect: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current.contains(event.target as Node)) {
+    if (isOpen && menuRef.current?.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
     }
   };
 
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -58,8 +58,17 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
       {selected}
     </MenuToggle>
   );
+
+  function onSelect(event?: React.MouseEvent, itemId?: string | number) {
+    if (typeof itemId === 'undefined') {
+      return;
+    }
+
+    setSelected(itemId.toString());
+  }
+
   const menu = (
-    <Menu ref={menuRef} id="select-menu" onSelect={(_ev, itemId) => setSelected(itemId.toString())} selected={selected}>
+    <Menu ref={menuRef} id="select-menu" onSelect={onSelect} selected={selected}>
       <MenuContent>
         <MenuList>
           <MenuItem itemId="Option 1">Option 1</MenuItem>
@@ -73,7 +82,7 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
   );
   return (
     <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
+      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
     </div>
   );
 };

package/src/demos/ComposableMenu/examples/ComposableTreeViewMenu.tsx

@@ -13,8 +13,8 @@ import {
 export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
   const menuRef = React.useRef<HTMLDivElement>();
 
   const statusOptions: TreeViewDataItem[] = [
@@ -93,7 +93,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const areSomeDescendantsChecked = (dataItem: TreeViewDataItem) =>
     dataItem.children ? dataItem.children.some(child => areSomeDescendantsChecked(child)) : isChecked(dataItem);
   const flattenTree = (tree: TreeViewDataItem[]) => {
-    let result = [];
+    let result: TreeViewDataItem[] = [];
     tree.forEach(item => {
       result.push(item);
       if (item.children) {
@@ -105,6 +105,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
 
   const mapTree = (item: TreeViewDataItem) => {
     const hasCheck = areAllDescendantsChecked(item);
+    item.checkProps = item.checkProps || {};
     // Reset checked properties to be updated
     item.checkProps.checked = false;
 
@@ -143,7 +144,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const onCheck = (evt: React.ChangeEvent, treeViewItem: TreeViewDataItem, treeType: string) => {
     const checked = (evt.target as HTMLInputElement).checked;
 
-    let options = [];
+    let options: TreeViewDataItem[] = [];
     switch (treeType) {
       case 'status':
         options = statusOptions;
@@ -169,21 +170,21 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
     if (!isOpen) {
       return;
     }
-    if (menuRef.current.contains(event.target as Node) || toggleRef.current.contains(event.target as Node)) {
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
       // The escape key when pressed while inside the menu should close the menu and refocus the toggle
       if (event.key === 'Escape') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef.current?.focus();
       }
 
       // The tab key when pressed while inside the menu and on the contained last tree view should close the menu and refocus the toggle
       // Shift tab should keep the default behavior to return to a previous tree view
       if (event.key === 'Tab' && !event.shiftKey) {
-        const treeList = menuRef.current.querySelectorAll('.pf-c-tree-view');
+        const treeList = menuRef.current?.querySelectorAll('.pf-c-tree-view') || [];
         if (treeList[treeList.length - 1].contains(event.target as Node)) {
           event.preventDefault();
           setIsOpen(!isOpen);
-          toggleRef.current.focus();
+          toggleRef.current?.focus();
         }
       }
     }
@@ -191,7 +192,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
 
   // Controls that a click outside the menu while the menu is open should close the menu
   const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current.contains(event.target as Node)) {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
       setIsOpen(false);
     }
   };
@@ -266,7 +267,7 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
         trigger={toggle}
         popper={menu}
         isVisible={isOpen}
-        appendTo={containerRef.current}
+        appendTo={containerRef.current || undefined}
         popperMatchesTriggerWidth={false}
       />
     </div>

package/src/demos/ComposableMenu/examples/ComposableTypeaheadSelect.tsx

@@ -55,7 +55,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
 
   const focusOnInput = () => menuToggleRef.current?.querySelector('input')?.focus();
 
-  const onMenuSelect = (_event: React.MouseEvent<Element, MouseEvent>, itemId: string | number) => {
+  const onMenuSelect = (event?: React.MouseEvent, itemId?: string | number) => {
     if (itemId) {
       setInputValue(itemId.toString());
       setIsSelected(true);
@@ -124,7 +124,7 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
   };
 
   // Close the menu when a click occurs outside of the menu toggle content
-  const onDocumentClick = (event: MouseEvent) => {
+  const onDocumentClick = (event?: MouseEvent) => {
     if (!menuToggleRef.current?.contains(event?.target as HTMLElement)) {
       setIsMenuOpen(false);
     }