@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.51

package/src/demos/CardDemos.md

@@ -3,6 +3,7 @@ id: Card
 section: components
 ---
 
+import { Dropdown as DropdownDeprecated, DropdownItem as DropdownItemDeprecated, KebabToggle } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
@@ -18,29 +19,30 @@ 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';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardExpandableContent,
   Level,
   LabelGroup,
   Label,
-  Dropdown,
-  DropdownItem,
-  KebabToggle,
   Grid,
   Flex,
   List,
   ListItem,
   Button
 } from '@patternfly/react-core';
+import {
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
+  KebabToggle
+} from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
@@ -56,13 +58,13 @@ class CardGridDemo extends React.Component {
       });
     };
 
-    this.onActionToggle = isDropdownOpen => {
+    this.onActionToggle = (_event, isDropdownOpen) => {
       this.setState({
         isDropdownOpen
       });
     };
 
-    this.onActionSelect = event => {
+    this.onActionSelect = (event) => {
       this.setState({
         isDropdownOpen: !this.state.isDropdownOpen
       });
@@ -72,22 +74,35 @@ class CardGridDemo extends React.Component {
   render() {
     const { isCardExpanded, isDropdownOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="action1" component="button">
+      <DropdownItemDeprecated key="action1" component="button">
         Action 1
-      </DropdownItem>,
-      <DropdownItem key="action2" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action2" component="button">
         Action 2
-      </DropdownItem>,
-      <DropdownItem key="disabled action3" isDisabled component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="disabled action3" isDisabled component="button">
         Disabled Action 3
-      </DropdownItem>,
-      <DropdownItem key="action4" component="button">
+      </DropdownItemDeprecated>,
+      <DropdownItemDeprecated key="action4" component="button">
         Action 4
-      </DropdownItem>
+      </DropdownItemDeprecated>
     ];
+
+    const headerActions = (
+      <DropdownDeprecated
+        onSelect={this.onActionSelect}
+        toggle={<KebabToggle onToggle={this.onActionToggle} />}
+        isOpen={isDropdownOpen}
+        isPlain
+        dropdownItems={dropdownItems}
+        position="right"
+      />
+    );
+
     return (
       <Card id="horizontal card" isExpanded={isCardExpanded}>
         <CardHeader
+          actions={{ actions: headerActions }}
           onExpand={this.onCardExpand}
           toggleButtonProps={{
             id: 'toggle-button',
@@ -96,16 +111,6 @@ class CardGridDemo extends React.Component {
             'aria-expanded': isCardExpanded
           }}
         >
-          <CardActions>
-            <Dropdown
-              onSelect={this.onActionSelect}
-              toggle={<KebabToggle onToggle={this.onActionToggle} />}
-              isOpen={isDropdownOpen}
-              isPlain
-              dropdownItems={dropdownItems}
-              position="right"
-            />
-          </CardActions>
           {isCardExpanded && <CardTitle id="titleId">Getting Started</CardTitle>}
           {!isCardExpanded && (
             <Level hasGutter>
@@ -781,7 +786,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </FlexItem>
             <FlexItem>
               <Popover headerContent="Control Panel Status" bodyContent={popoverBodyContent} minWidth="400px">
-                <a href="#" onClick={e => e.preventDefault()}>
+                <a href="#" onClick={(e) => e.preventDefault()}>
                   Control Panel
                 </a>
               </Popover>
@@ -857,7 +862,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>
@@ -1234,7 +1243,6 @@ import {
   Card,
   CardTitle,
   CardHeader,
-  CardActions,
   CardBody,
   CardFooter,
   Title,
@@ -1265,6 +1273,19 @@ const UtilizationCard3: React.FunctionComponent = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      isOpen={isOpen}
+      placeholderText="Filter"
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -1274,24 +1295,12 @@ const UtilizationCard3: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-3-card" component="div">
-            <CardHeader className="pf-u-align-items-flex-start">
+            <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
               <CardTitle>
                 <Title headingLevel="h4" size="lg" style={{ paddingTop: '3px' }}>
                   Recommendations
                 </Title>
               </CardTitle>
-              <CardActions hasNoOffset>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  isOpen={isOpen}
-                  placeholderText="Filter"
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <Flex direction={{ default: 'column' }}>
@@ -1480,7 +1489,7 @@ CardNestedDemo = () => {
           key="isToggleRightAligned"
           label="Align expand toggle on right"
           isChecked={isToggleOnRight}
-          onChange={checked => onCheckClick(!isToggleOnRight)}
+          onChange={(_event, checked) => onCheckClick(!isToggleOnRight)}
         />
       </div>
       <Card id="nested-cards-card">
@@ -2507,7 +2516,6 @@ import {
   CardTitle,
   CardBody,
   CardHeader,
-  CardActions,
   Title,
   Gallery,
   GalleryItem,
@@ -2528,6 +2536,20 @@ const TrendCard1: React.FunctionComponent = () => {
     <SelectOption value="Last 24 hours" key="option3" />,
     <SelectOption value="Last 7 days" key="option4" />
   ];
+
+  const headerActions = (
+    <Select
+      onSelect={() => setIsOpen(!isOpen)}
+      onToggle={() => setIsOpen(!isOpen)}
+      placeholderText="Filter"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2537,29 +2559,19 @@ const TrendCard1: React.FunctionComponent = () => {
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1-card" component="div">
-            <CardHeader>
+            <CardHeader actions={{ actions: headerActions, hasNoOffset: true }}>
               <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>
                   <span className="pf-u-color-200">Workload</span>
                 </FlexItem>
               </Flex>
-              <CardActions hasNoOffset style={{ paddingTop: '1px' }}>
-                <Select
-                  onSelect={() => setIsOpen(!isOpen)}
-                  onToggle={() => setIsOpen(!isOpen)}
-                  placeholderText="Filter"
-                  isOpen={isOpen}
-                  position="right"
-                  isPlain
-                >
-                  {selectItems}
-                </Select>
-              </CardActions>
             </CardHeader>
             <CardBody>
               <ChartGroup
@@ -2679,7 +2691,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2697,11 +2708,11 @@ import {
 CardLogViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
-  const onActionToggle = isOpen => {
+  const onActionToggle = (_event, isOpen) => {
     setIsOpen(isOpen);
   };
 
@@ -2712,6 +2723,19 @@ CardLogViewDemo = () => {
     <SelectOption value="Last 7 days" key="option4" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Most recent"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
+
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2720,19 +2744,7 @@ CardLogViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Most recent"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Activity
@@ -2794,7 +2806,6 @@ import React from 'react';
 import {
   Card,
   CardHeader,
-  CardActions,
   CardTitle,
   CardBody,
   CardFooter,
@@ -2817,11 +2828,11 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 CardEventViewDemo = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onActionSelect = event => {
+  const onActionSelect = (event) => {
     setIsOpen(!isOpen);
   };
 
-  const onActionToggle = isOpen => {
+  const onActionToggle = (_event, isOpen) => {
     setIsOpen(isOpen);
   };
 
@@ -2831,6 +2842,18 @@ CardEventViewDemo = () => {
     <SelectOption value="Warning" key="option3" />
   ];
 
+  const headerActions = (
+    <Select
+      onSelect={onActionSelect}
+      onToggle={onActionToggle}
+      placeholderText="Status"
+      isOpen={isOpen}
+      position="right"
+      isPlain
+    >
+      {selectItems}
+    </Select>
+  );
   return (
     <React.Fragment>
       <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
@@ -2839,19 +2862,7 @@ CardEventViewDemo = () => {
       <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
-          <CardHeader className="pf-u-align-items-flex-start">
-            <CardActions hasNoOffset>
-              <Select
-                onSelect={onActionSelect}
-                onToggle={onActionToggle}
-                placeholderText="Status"
-                isOpen={isOpen}
-                position="right"
-                isPlain
-              >
-                {selectItems}
-              </Select>
-            </CardActions>
+          <CardHeader className="pf-u-align-items-flex-start" actions={{ actions: headerActions, hasNoOffset: true }}>
             <CardTitle>
               <Title headingLevel="h4" size="xl" style={{ paddingTop: '3px' }}>
                 Events

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -1,6 +1,7 @@
 ---
-id: Composable menu
-section: demos
+id: Custom menus
+section: components
+subsection: menus
 ---
 
 import { Link } from '@reach/router';
@@ -26,7 +27,7 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu';
 
 ## Demos
 
-Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
+Custom menus can be constructed using a composable approach by combining the [Menu](/components/menus/menu) and [Menu toggle](/components/menus/menu-toggle) components in unique ways. Composable menus currently require consumer keyboard handling and use of our undocumented [popper.js](https://popper.js.org/) wrapper component called Popper. We understand this is inconvientent boilerplate and these examples will be updated to use [Dropdown](/components/dropdown) in a future release.
 
 ### Composable simple dropdown
 

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)) {
@@ -42,7 +41,7 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
     }
 
     if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter(id => id !== itemId));
+      setSelectedItems(selectedItems.filter((id) => id !== itemId));
     } else {
       setSelectedItems([...selectedItems, itemId]);
     }
@@ -70,11 +69,6 @@ export const ComposableActionsMenu: React.FunctionComponent = () => {
       // eslint-disable-next-line no-console
       onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
       onSelect={onSelect}
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
     >
       <MenuGroup label="Actions">
         <MenuList>
@@ -123,15 +117,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} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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) {
@@ -51,7 +50,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           'li > button:not(:disabled), li > a:not(:disabled), input:not(:disabled)'
         );
         firstElement && (firstElement as HTMLElement).focus();
-        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])')));
+        setRefFullOptions(Array.from(menuRef.current.querySelectorAll('li:not(li[role=separator])>*:first-child')));
       }
     }, 0);
     setIsOpen(!isOpen);
@@ -91,7 +90,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           id="1"
           isFavorited={favorites.includes('1')}
           to="#default-link2"
-          onClick={ev => ev.preventDefault()}
+          onClick={(ev) => ev.preventDefault()}
         >
           Application 2
         </MenuItem>
@@ -104,7 +103,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           itemId="2"
           id="2"
           isFavorited={favorites.includes('2')}
-          component={props => <Link {...props} to="#router-link" />}
+          component={(props) => <Link {...props} to="#router-link" />}
         >
           @reach/router Link
         </MenuItem>
@@ -114,7 +113,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           isFavorited={favorites.includes('3')}
           isExternalLink
           icon={<img src={pfIcon} />}
-          component={props => <Link {...props} to="#router-link2" />}
+          component={(props) => <Link {...props} to="#router-link2" />}
         >
           @reach/router Link with icon
         </MenuItem>
@@ -136,15 +135,15 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
   const createFavorites = (favIds: string[]) => {
     const favorites: unknown[] = [];
 
-    menuItems.forEach(item => {
+    menuItems.forEach((item) => {
       if (item.type === MenuList) {
-        item.props.children.filter(child => {
+        item.props.children.filter((child) => {
           if (favIds.includes(child.props.itemId)) {
             favorites.push(child);
           }
         });
       } else if (item.type === MenuGroup) {
-        item.props.children.props.children.filter(child => {
+        item.props.children.props.children.filter((child) => {
           if (favIds.includes(child.props.itemId)) {
             favorites.push(child);
           }
@@ -165,11 +164,11 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     }
     let keepDivider = false;
     const filteredCopy = items
-      .map(group => {
+      .map((group) => {
         if (group.type === MenuGroup) {
           const filteredGroup = React.cloneElement(group, {
             children: React.cloneElement(group.props.children, {
-              children: group.props.children.props.children.filter(child => {
+              children: group.props.children.props.children.filter((child) => {
                 if (filteredIds.includes(child.props.itemId)) {
                   return child;
                 }
@@ -185,7 +184,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           }
         } else if (group.type === MenuList) {
           const filteredGroup = React.cloneElement(group, {
-            children: group.props.children.filter(child => {
+            children: group.props.children.filter((child) => {
               if (filteredIds.includes(child.props.itemId)) {
                 return child;
               }
@@ -203,7 +202,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
           }
         }
       })
-      .filter(newGroup => newGroup);
+      .filter((newGroup) => newGroup);
 
     if (filteredCopy.length > 0) {
       const lastGroup = filteredCopy.pop();
@@ -223,8 +222,8 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
 
     const filteredIds =
       refFullOptions
-        ?.filter(item => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
-        .map(item => item.id) || [];
+        ?.filter((item) => (item as HTMLElement).innerText.toLowerCase().includes(textValue.toString().toLowerCase()))
+        .map((item) => item.id) || [];
     setFilteredIds(filteredIds);
   };
 
@@ -233,7 +232,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     if (actionId === 'fav') {
       const isFavorite = favorites.includes(itemId);
       if (isFavorite) {
-        setFavorites(favorites.filter(fav => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== itemId));
       } else {
         setFavorites([...favorites, itemId]);
       }
@@ -250,7 +249,7 @@ export const ComposableApplicationLauncher: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     <Menu ref={menuRef} onActionClick={onFavorite} onSelect={(_ev, itemId) => console.log('selected', itemId)}>
       <MenuInput>
-        <SearchInput aria-label="Filter menu items" type="search" onChange={value => onTextChange(value)} />
+        <SearchInput aria-label="Filter menu items" type="search" onChange={(_event, value) => onTextChange(value)} />
       </MenuInput>
       <Divider />
       <MenuContent>
@@ -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} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };

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) {
@@ -131,7 +130,7 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
     const filtered =
       searchInputValue === ''
         ? items
-        : items.filter(item => {
+        : items.filter((item) => {
             const str = typeof item === 'string' ? item : item.text;
             return str.toLowerCase().indexOf(searchInputValue.toLowerCase()) !== -1;
           });
@@ -147,24 +146,14 @@ export const ComposableContextSelector: React.FunctionComponent = () => {
   };
 
   const menu = (
-    <Menu
-      ref={menuRef}
-      id="context-selector"
-      onSelect={onSelect}
-      isScrollable
-      style={
-        {
-          '--pf-c-menu--Width': '300px'
-        } as React.CSSProperties
-      }
-    >
+    <Menu ref={menuRef} id="context-selector" onSelect={onSelect} isScrollable>
       <MenuInput>
         <InputGroup>
           <SearchInput
             value={searchInputValue}
             type="search"
             placeholder="Search"
-            onChange={onSearchInputChange}
+            onChange={(_event, value) => onSearchInputChange(value)}
             onKeyPress={onEnterPressed}
             aria-labelledby="pf-context-selector-search-button-id-1"
           />
@@ -199,15 +188,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} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
 };