@patternfly/react-core 4.233.1 → 4.234.0

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);
     }