Updated appendTo based on new Popper logic

patternfly · Feb 10, 2023 · 0fb481c · 0fb481c
1 parent 149a6c4
commit 0fb481c
Show file tree

Hide file tree

Showing 14 changed files with 86 additions and 184 deletions.
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableActionsMenu.tsx b/packages/react-core/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)) {
@@ -60,11 +59,9 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-        {isOpen ? 'Expanded' : 'Collapsed'}
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
   );
   const menu = (
     <Menu
@@ -125,13 +122,5 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      isVisible={isOpen}
-      appendTo={containerRef.current || undefined}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableApplicationLauncher.tsx b/packages/react-core/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) {
@@ -68,18 +67,16 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   }, [isOpen, menuRef]);
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle
-        aria-label="Toggle"
-        ref={toggleRef}
-        variant="plain"
-        onClick={onToggleClick}
-        isExpanded={isOpen}
-        style={{ width: 'auto' }}
-      >
-        <ThIcon />
-      </MenuToggle>
-    </div>
+    <MenuToggle
+      aria-label="Toggle"
+      ref={toggleRef}
+      variant="plain"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={{ width: 'auto' }}
+    >
+      <ThIcon />
+    </MenuToggle>
   );
 
   const menuItems = [
@@ -268,13 +265,5 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-      appendTo={containerRef.current || undefined}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableContextSelector.tsx b/packages/react-core/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) {
@@ -113,11 +112,9 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-        {selected}
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {selected}
+    </MenuToggle>
   );
 
   const onSelect = (ev: React.MouseEvent<Element, MouseEvent>, itemId: string) => {
@@ -201,13 +198,5 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
       </MenuFooter>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      appendTo={containerRef.current}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDateSelect.tsx b/packages/react-core/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);
     }
   };
@@ -92,12 +91,10 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
-        <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
-        {dateText[selected]}
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen} style={{ minWidth: '250px' }}>
+      <span style={{ verticalAlign: 'middle', marginRight: '8px' }}>{toggleText[selected]}</span>
+      {dateText[selected]}
+    </MenuToggle>
   );
   const menu = (
     // eslint-disable-next-line no-console
@@ -112,13 +109,5 @@ export const ComposableSimpleDropdown: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      appendTo={containerRef.current}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDrilldownMenu.tsx b/packages/react-core/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)) {
@@ -93,11 +92,9 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-        {isOpen ? 'Expanded' : 'Collapsed'}
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
   );
   const menu = (
     <Menu
@@ -250,13 +247,5 @@ export const ComposableDrilldownMenu: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      appendTo={containerRef.current || undefined}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableDropdwnVariants.tsx b/packages/react-core/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();
       }
     }
   };
@@ -228,9 +227,8 @@ export const ComposableDropdwnVariants: React.FunctionComponent = () => {
       </ToggleGroup>
       <br />
       <Popper
-        trigger={<div ref={containerRef}>{buildToggle()}</div>}
+        trigger={buildToggle()}
         popper={menu}
-        appendTo={containerRef.current}
         isVisible={isOpen}
         popperMatchesTriggerWidth={['image', 'checkbox'].includes(toggleSelected)}
       />

diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableFlyout.tsx b/packages/react-core/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) {
@@ -80,11 +79,9 @@ export const ComposableFlyout: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>
-        {isOpen ? 'Expanded' : 'Collapsed'}
-      </MenuToggle>
-    </div>
+    <MenuToggle onClick={onToggleClick} isExpanded={isOpen}>
+      {isOpen ? 'Expanded' : 'Collapsed'}
+    </MenuToggle>
   );
 
   const menu = (
@@ -103,13 +100,5 @@ export const ComposableFlyout: React.FunctionComponent = () => {
     </Menu>
   );
 
-  return (
-    <Popper
-      trigger={toggle}
-      popper={menu}
-      appendTo={containerRef.current || undefined}
-      isVisible={isOpen}
-      popperMatchesTriggerWidth={false}
-    />
-  );
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} popperMatchesTriggerWidth={false} />;
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableMultipleTypeaheadSelect.tsx b/packages/react-core/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}
+    />
   );
 };
diff --git a/packages/react-core/src/demos/ComposableMenu/examples/ComposableOptionsMenuVariants.tsx b/packages/react-core/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);
     }
   };
@@ -47,11 +46,9 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
   };
 
   const toggle = (
-    <div ref={containerRef}>
-      <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-        Options menu
-      </MenuToggle>
-    </div>
+    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+      Options menu
+    </MenuToggle>
   );
 
   const menu = (
@@ -95,5 +92,5 @@ export const ComposableOptionsMenuVariants: React.FunctionComponent = () => {
       </MenuContent>
     </Menu>
   );
-  return <Popper trigger={toggle} popper={menu} appendTo={containerRef.current} isVisible={isOpen} />;
+  return <Popper trigger={toggle} popper={menu} isVisible={isOpen} />;
 };