@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/demos/CardDemos.md

@@ -18,7 +18,7 @@ import chart_color_red_100 from '@patternfly/react-tokens/dist/esm/chart_color_r
 
 ### Horizontal card grid
 
-The following demo shows how you may use a `<Grid>` within a card for scenarios that require multiple subsections. 
+The following demo shows how you may use a `<Grid>` within a card for scenarios that require multiple subsections.
 
 ```js
 import React from 'react';
@@ -56,7 +56,7 @@ class CardGridDemo extends React.Component {
       });
     };
 
-    this.onActionToggle = isDropdownOpen => {
+    this.onActionToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -857,7 +857,11 @@ const StatusPlain: React.FunctionComponent = () => {
         >
           <NotificationDrawerList isHidden={!drawerExpanded}>
             <NotificationDrawerListItem variant="danger">
-              <NotificationDrawerListItemHeader variant="danger" headingLevel="h5" title="Critical alert regarding control plane" />
+              <NotificationDrawerListItemHeader
+                variant="danger"
+                headingLevel="h5"
+                title="Critical alert regarding control plane"
+              />
               <NotificationDrawerListItemBody>
                 This is a long description to show how the title will wrap if it is long and wraps to multiple lines.
               </NotificationDrawerListItemBody>
@@ -2541,7 +2545,9 @@ const TrendCard1: React.FunctionComponent = () => {
               <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
                 <FlexItem>
                   <CardTitle>
-                    <Title headingLevel="h4" size="lg">1,050,765 IOPS</Title>
+                    <Title headingLevel="h4" size="lg">
+                      1,050,765 IOPS
+                    </Title>
                   </CardTitle>
                 </FlexItem>
                 <FlexItem>
@@ -2701,7 +2707,7 @@ CardLogViewDemo = () => {
     setIsOpen(!isOpen);
   };
 
-  const onActionToggle = isOpen => {
+  const onActionToggle = (_event, isOpen) => {
     setIsOpen(isOpen);
   };
 
@@ -2821,7 +2827,7 @@ CardEventViewDemo = () => {
     setIsOpen(!isOpen);
   };
 
-  const onActionToggle = isOpen => {
+  const onActionToggle = (_event, isOpen) => {
     setIsOpen(isOpen);
   };
 

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

@@ -10,7 +10,6 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   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)) {
@@ -123,15 +122,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -23,7 +23,6 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const [filteredIds, setFilteredIds] = React.useState<string[]>(['*']);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -266,15 +265,5 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-        appendTo={containerRef.current || undefined}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -60,7 +60,6 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   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) {
@@ -199,15 +198,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -6,22 +6,21 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<number>(0);
   const toggleRef = React.useRef<HTMLButtonElement>();
   const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   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);
     }
   };
@@ -110,15 +109,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -26,7 +26,6 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   const [menuHeights, setMenuHeights] = React.useState<MenuHeightsType>({});
   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)) {
@@ -248,15 +247,5 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -23,7 +23,6 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
   const [toggleSelected, setToggleSelected] = React.useState<string>('basic');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   const handleToggleSwitch = (selected: boolean, e: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
     setToggleSelected(e.currentTarget.id);
@@ -33,7 +32,7 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
     if (isOpen && menuRef && menuRef.current && menuRef.current.contains(event.target as Node)) {
       if (event.key === 'Escape' || event.key === 'Tab') {
         setIsOpen(!isOpen);
-        toggleRef.current.focus();
+        toggleRef?.current?.focus();
       }
     }
   };
@@ -227,15 +226,12 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
         />
       </ToggleGroup>
       <br />
-      <div ref={containerRef}>
-        <Popper
-          trigger={buildToggle()}
-          popper={menu}
-          appendTo={containerRef.current}
-          isVisible={isOpen}
-          popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
-        />
-      </div>
+      <Popper
+        trigger={buildToggle()}
+        popper={menu}
+        isVisible={isOpen}
+        popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
+      />
     </React.Fragment>
   );
 };

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

@@ -34,7 +34,6 @@ export const ComposableFlyout: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const menuRef = React.useRef<HTMLDivElement>(null);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -101,15 +100,5 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -30,7 +30,6 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
   const [activeItem, setActiveItem] = React.useState<string | null>(null);
   const [selected, setSelected] = React.useState<string[]>([]);
-  const containerRef = React.useRef<HTMLDivElement>();
   const menuToggleRef = React.useRef<MenuToggleElement>({} as MenuToggleElement);
   const textInputRef = React.useRef<HTMLInputElement>();
   const menuRef = React.useRef<HTMLDivElement>();
@@ -241,15 +240,12 @@ export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () =>
     </Menu>
   );
   return (
-    <div ref={containerRef as React.Ref<HTMLDivElement>}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        appendTo={containerRef.current}
-        isVisible={isMenuOpen}
-        onDocumentClick={onDocumentClick}
-        onDocumentKeyDown={onDocumentKeydown}
-      />
-    </div>
+    <Popper
+      trigger={toggle}
+      popper={menu}
+      isVisible={isMenuOpen}
+      onDocumentClick={onDocumentClick}
+      onDocumentKeyDown={onDocumentKeydown}
+    />
   );
 };

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

@@ -6,19 +6,18 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('');
   const menuRef = React.useRef<HTMLDivElement>();
   const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
 
   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);
     }
   };
@@ -93,9 +92,5 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

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

@@ -97,5 +97,5 @@ export const ComposableSimpleCheckboxSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper appendTo={toggleRef.current || undefined} trigger={toggle} popper={menu} isVisible={isOpen} />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

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

@@ -5,7 +5,6 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
   const menuRef = React.useRef<HTMLDivElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleMenuKeys = (event: KeyboardEvent) => {
     if (!isOpen) {
@@ -67,9 +66,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

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

@@ -7,7 +7,6 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string>('Select a value');
   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)) {
@@ -80,9 +79,5 @@ export const ComposableSimpleSelect: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper trigger={toggle} popper={menu} appendTo={containerRef.current || undefined} isVisible={isOpen} />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };

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

@@ -14,7 +14,6 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const containerRef = React.useRef<HTMLDivElement>(null);
   const menuRef = React.useRef<HTMLDivElement>();
 
   const statusOptions: TreeViewDataItem[] = [
@@ -266,15 +265,5 @@ export const ComposableTreeViewMenu: React.FunctionComponent = () => {
       </PanelMain>
     </Panel>
   );
-  return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle}
-        popper={menu}
-        isVisible={isOpen}
-        appendTo={containerRef.current || undefined}
-        popperMatchesTriggerWidth={false}
-      />
-    </div>
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };

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

@@ -175,8 +175,6 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
     <Popper
       trigger={
         <MenuToggle
-          // Needed to append the menu closer to the toggle in DOM
-          id="temp-toggle-id"
           variant="typeahead"
           onClick={toggleMenuOpen}
           innerRef={menuToggleRef}
@@ -229,7 +227,6 @@ export const ComposableTypeaheadSelect: React.FunctionComponent = () => {
       isVisible={isMenuOpen}
       onDocumentClick={onDocumentClick}
       onDocumentKeyDown={onDocumentKeydown}
-      appendTo={() => document.getElementById('temp-toggle-id')}
     />
   );
 };

package/src/demos/DataListDemo.md

@@ -70,15 +70,15 @@ class ExpandableDataList extends React.Component {
       );
     };
 
-    this.onToggle1 = isOpen1 => {
+    this.onToggle1 = (_event, isOpen1) => {
       this.setState({ isOpen1 });
     };
 
-    this.onToggle2 = isOpen2 => {
+    this.onToggle2 = (_event, isOpen2) => {
       this.setState({ isOpen2 });
     };
 
-    this.onToggle3 = isOpen3 => {
+    this.onToggle3 = (_event, isOpen3) => {
       this.setState({ isOpen3 });
     };
 

package/src/demos/Nav.md

@@ -396,7 +396,7 @@ class PageLayoutHorizontalNav extends React.Component {
       activeItem: 0
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -408,7 +408,7 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -754,7 +754,7 @@ class HorizontalNavWithSubnav extends React.Component {
       activeSubNavItem: 7
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -766,7 +766,7 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });
@@ -1219,7 +1219,7 @@ class PageLayoutManualNav extends React.Component {
       isNavOpenMobile: false
     };
 
-    this.onDropdownToggle = isDropdownOpen => {
+    this.onDropdownToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
@@ -1231,7 +1231,7 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
-    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+    this.onKebabDropdownToggle = (_event, isKebabDropdownOpen) => {
       this.setState({
         isKebabDropdownOpen
       });