@patternfly/react-core 4.227.2 → 4.227.5

package/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsx

@@ -0,0 +1,331 @@
+import React from 'react';
+import {
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  Divider,
+  DrilldownMenu,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbHeading,
+  MenuBreadcrumb,
+  Dropdown,
+  DropdownItem,
+  BadgeToggle,
+  Checkbox
+} from '@patternfly/react-core';
+import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+
+export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
+  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
+  const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
+  const [menuHeights, setMenuHeights] = React.useState<any>({});
+  const [activeMenu, setActiveMenu] = React.useState<string>('breadcrumbs-rootMenu');
+  const [breadcrumb, setBreadcrumb] = React.useState<JSX.Element>();
+  const [withMaxMenuHeight, setWithMaxMenuHeight] = React.useState(false);
+
+  const onToggle = (isOpen: boolean, key: string) => {
+    switch (key) {
+      case 'app':
+        setBreadcrumb(appGroupingBreadcrumb(isOpen));
+        break;
+      case 'label':
+        setBreadcrumb(labelsBreadcrumb(isOpen));
+        break;
+      default:
+        break;
+    }
+  };
+
+  const onToggleMaxMenuHeight = (checked: boolean) => {
+    setWithMaxMenuHeight(checked);
+  };
+
+  const drillOut = (toMenuId: string, fromPathId: string, _breadcrumb: JSX.Element | null) => {
+    const indexOfMenuId = menuDrilledIn.indexOf(toMenuId);
+    const menuDrilledInSansLast = menuDrilledIn.slice(0, indexOfMenuId);
+    const indexOfMenuIdPath = drilldownPath.indexOf(fromPathId);
+    const pathSansLast = drilldownPath.slice(0, indexOfMenuIdPath);
+    setMenuDrilledIn(menuDrilledInSansLast);
+    setDrilldownPath(pathSansLast);
+    setActiveMenu(toMenuId);
+  };
+  const setHeight = (menuId: string, height: number) => {
+    if (!menuHeights[menuId]) {
+      setMenuHeights({ ...menuHeights, [menuId]: height });
+    }
+  };
+  const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
+    setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
+    setDrilldownPath([...drilldownPath, pathId]);
+    setActiveMenu(toMenuId);
+  };
+
+  const startRolloutBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const appGroupingBreadcrumb = (isOpen: boolean) => (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'app')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-start"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() =>
+                drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', startRolloutBreadcrumb)
+              }
+            >
+              Start rollout
+            </DropdownItem>
+          ]}
+        />
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const labelsBreadcrumb = (isOpen: boolean) => (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbItem isDropdown>
+        <Dropdown
+          toggle={
+            <BadgeToggle id="toggle-id" onToggle={open => onToggle(open, 'label')}>
+              1
+            </BadgeToggle>
+          }
+          isOpen={isOpen}
+          dropdownItems={[
+            <DropdownItem
+              key="dropdown-start"
+              component="button"
+              icon={<AngleLeftIcon />}
+              onClick={() => drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', startRolloutBreadcrumb)}
+            >
+              Start rollout
+            </DropdownItem>
+          ]}
+        />
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const pauseRolloutsBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const pauseRolloutsAppGrpBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbItem
+        component="button"
+        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', pauseRolloutsBreadcrumb)}
+      >
+        Pause rollouts
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Application Grouping</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const pauseRolloutsLabelsBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbItem
+        component="button"
+        onClick={() => drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', pauseRolloutsBreadcrumb)}
+      >
+        Pause rollouts
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Labels</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  const addStorageBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem component="button" onClick={() => drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
+        Root
+      </BreadcrumbItem>
+      <BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>
+    </Breadcrumb>
+  );
+
+  return (
+    <>
+      <Checkbox
+        label="Set max menu height"
+        isChecked={withMaxMenuHeight}
+        onChange={onToggleMaxMenuHeight}
+        aria-label="Set max menu height checkbox"
+        id="toggle-max-menu-height"
+        name="toggle-max-menu-height"
+      />
+      <br />
+      <Menu
+        id="breadcrumbs-rootMenu"
+        containsDrilldown
+        drilldownItemPath={drilldownPath}
+        drilledInMenus={menuDrilledIn}
+        activeMenu={activeMenu}
+        onDrillIn={drillIn}
+        onDrillOut={() => drillOut}
+        onGetMenuHeight={setHeight}
+      >
+        {breadcrumb && (
+          <>
+            <MenuBreadcrumb>{breadcrumb}</MenuBreadcrumb>
+            <Divider component="li" />
+          </>
+        )}
+        <MenuContent menuHeight={`${menuHeights[activeMenu]}px`} maxMenuHeight={withMaxMenuHeight ? '100px' : 'auto'}>
+          <MenuList>
+            <MenuItem
+              itemId="group:start_rollout"
+              direction="down"
+              onClick={() => setBreadcrumb(startRolloutBreadcrumb)}
+              drilldownMenu={
+                <DrilldownMenu id="breadcrumbs-drilldownMenuStart">
+                  <MenuItem
+                    itemId="group:app_grouping_start"
+                    description="Groups A-G"
+                    direction="down"
+                    onClick={() => setBreadcrumb(appGroupingBreadcrumb(false))}
+                    drilldownMenu={
+                      <DrilldownMenu id="breadcrumbs-drilldownMenuStartGrouping">
+                        <MenuItem itemId="group_a">Group A</MenuItem>
+                        <MenuItem itemId="group_b">Group B</MenuItem>
+                        <MenuItem itemId="group_c">Group C</MenuItem>
+                        <MenuItem itemId="group_d">Group D</MenuItem>
+                        <MenuItem itemId="group_e">Group E</MenuItem>
+                        <MenuItem itemId="group_f">Group F</MenuItem>
+                        <MenuItem itemId="group_g">Group G</MenuItem>
+                      </DrilldownMenu>
+                    }
+                  >
+                    Application grouping
+                  </MenuItem>
+                  <MenuItem itemId="count">Count</MenuItem>
+                  <MenuItem
+                    itemId="group:labels_start"
+                    direction="down"
+                    onClick={() => setBreadcrumb(labelsBreadcrumb(false))}
+                    drilldownMenu={
+                      <DrilldownMenu id="breadcrumbs-drilldownMenuStartLabels">
+                        <MenuItem itemId="label_1">Label 1</MenuItem>
+                        <MenuItem itemId="label_2">Label 2</MenuItem>
+                        <MenuItem itemId="label_3">Label 3</MenuItem>
+                      </DrilldownMenu>
+                    }
+                  >
+                    Labels
+                  </MenuItem>
+                  <MenuItem itemId="annotations">Annotations</MenuItem>
+                </DrilldownMenu>
+              }
+            >
+              Start rollout
+            </MenuItem>
+            <MenuItem
+              itemId="group:pause_rollout"
+              direction="down"
+              onClick={() => setBreadcrumb(pauseRolloutsBreadcrumb)}
+              drilldownMenu={
+                <DrilldownMenu id="breadcrumbs-drilldownMenuPause">
+                  <MenuItem
+                    itemId="group:app_grouping"
+                    description="Groups A-C"
+                    direction="down"
+                    onClick={() => setBreadcrumb(pauseRolloutsAppGrpBreadcrumb)}
+                    drilldownMenu={
+                      <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
+                        <MenuItem itemId="group_a">Group A</MenuItem>
+                        <MenuItem itemId="group_b">Group B</MenuItem>
+                        <MenuItem itemId="group_c">Group C</MenuItem>
+                      </DrilldownMenu>
+                    }
+                  >
+                    Application grouping
+                  </MenuItem>
+                  <MenuItem itemId="count">Count</MenuItem>
+                  <MenuItem
+                    itemId="group:labels"
+                    direction="down"
+                    onClick={() => setBreadcrumb(pauseRolloutsLabelsBreadcrumb)}
+                    drilldownMenu={
+                      <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
+                        <MenuItem itemId="label_1">Label 1</MenuItem>
+                        <MenuItem itemId="label_2">Label 2</MenuItem>
+                        <MenuItem itemId="label_3">Label 3</MenuItem>
+                      </DrilldownMenu>
+                    }
+                  >
+                    Labels
+                  </MenuItem>
+                  <MenuItem itemId="annotations">Annotations</MenuItem>
+                </DrilldownMenu>
+              }
+            >
+              Pause rollouts
+            </MenuItem>
+            <MenuItem
+              itemId="group:storage"
+              icon={<StorageDomainIcon aria-hidden />}
+              direction="down"
+              onClick={() => setBreadcrumb(addStorageBreadcrumb)}
+              drilldownMenu={
+                <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
+                  <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                    From git
+                  </MenuItem>
+                  <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                    Container image
+                  </MenuItem>
+                  <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                    Docker file
+                  </MenuItem>
+                </DrilldownMenu>
+              }
+            >
+              Add storage
+            </MenuItem>
+            <MenuItem itemId="edit">Edit</MenuItem>
+            <MenuItem itemId="delete_deployment">Delete deployment config</MenuItem>
+          </MenuList>
+        </MenuContent>
+      </Menu>
+    </>
+  );
+};

package/src/components/Menu/examples/{MenuDrilldownSubmenuFunctions.tsx → MenuWithDrilldownSubmenuFunctions.tsx}

@@ -5,7 +5,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i
 import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
-export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
+export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});

package/src/components/Menu/examples/MenuWithFavorites.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const MenuWithFavorites: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+  const [favorites, setFavorites] = React.useState<string[]>([]);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  const onFavorite = (event, itemId: string, actionId: string) => {
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${itemId} - ${actionId}`);
+    if (actionId === 'fav') {
+      const isFavorite = favorites.includes(itemId);
+      if (isFavorite) {
+        setFavorites(favorites.filter(fav => fav !== itemId));
+      } else {
+        setFavorites([...favorites, itemId]);
+      }
+    }
+  };
+
+  const items = [
+    {
+      text: 'Item 1',
+      description: 'Description 1',
+      itemId: 'item-1',
+      action: <BarsIcon aria-hidden />,
+      actionId: 'bars'
+    },
+    {
+      text: 'Item 2',
+      description: 'Description 2',
+      itemId: 'item-2',
+      action: <ClipboardIcon aria-hidden />,
+      actionId: 'clipboard'
+    },
+    {
+      text: 'Item 3',
+      description: 'Description 3',
+      itemId: 'item-3',
+      action: <BellIcon aria-hidden />,
+      actionId: 'bell'
+    }
+  ];
+
+  return (
+    <Menu onSelect={onSelect} onActionClick={onFavorite} activeItemId={activeItem}>
+      <MenuContent>
+        {favorites.length > 0 && (
+          <React.Fragment>
+            <MenuGroup label="Favorites" labelHeadingLevel="h3">
+              <MenuList>
+                {items
+                  .filter(item => favorites.includes(item.itemId))
+                  .map(item => {
+                    const { text, description, itemId, action, actionId } = item;
+                    return (
+                      <MenuItem
+                        key={`fav-${itemId}`}
+                        isFavorited
+                        description={description}
+                        itemId={itemId}
+                        actions={<MenuItemAction actionId={actionId} icon={action} aria-label={actionId} />}
+                      >
+                        {text}
+                      </MenuItem>
+                    );
+                  })}
+              </MenuList>
+            </MenuGroup>
+            <Divider />
+          </React.Fragment>
+        )}
+        <MenuGroup label="All actions" labelHeadingLevel="h3">
+          <MenuList>
+            {items.map(item => {
+              const { text, description, itemId, action, actionId } = item;
+              const isFavorited = favorites.includes(item.itemId);
+              return (
+                <MenuItem
+                  key={itemId}
+                  isFavorited={isFavorited}
+                  description={description}
+                  itemId={itemId}
+                  actions={<MenuItemAction actionId={actionId} icon={action} aria-label={actionId} />}
+                >
+                  {text}
+                </MenuItem>
+              );
+            })}
+          </MenuList>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithFooter.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core';
+
+export const MenuWithFooter: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu activeItemId={activeItem} onSelect={onSelect}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Action</MenuItem>
+          <MenuItem
+            itemId={1}
+            to="#default-link2"
+            // just for demo so that navigation is not triggered
+            onClick={event => event.preventDefault()}
+          >
+            Link
+          </MenuItem>
+          <MenuItem isDisabled>Disabled action</MenuItem>
+          <MenuItem isDisabled to="#default-link4">
+            Disabled link
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+      <MenuFooter>
+        <Button variant="link" isInline>
+          Action
+        </Button>
+      </MenuFooter>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithIcons.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
+import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+
+export const MenuWithIcons: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId={0}>
+            From git
+          </MenuItem>
+          <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId={1}>
+            Container image
+          </MenuItem>
+          <MenuItem icon={<CubeIcon aria-hidden />} itemId={2}>
+            Docker file
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithLinks.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MenuWithLinks: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem isExternalLink to="#default-link1" itemId={0}>
+            Link 1
+          </MenuItem>
+          <MenuItem isExternalLink to="#default-link2" itemId={1}>
+            Link 2
+          </MenuItem>
+          <MenuItem to="#default-link3" itemId={2}>
+            Link 3
+          </MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithSeparators.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core';
+
+export const MenuWithSeparators: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number;
+    // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuContent>
+        <MenuList>
+          <MenuItem itemId={0}>Action 1</MenuItem>
+          <MenuItem itemId={1}>Action 2</MenuItem>
+          <Divider component="li" />
+          <MenuItem itemId={2}>Action 3</MenuItem>
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+};

package/src/components/Menu/examples/MenuWithTitledGroups.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core';
+
+export const MenuWithTitledGroups: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
+    const item = itemId as number; // eslint-disable-next-line no-console
+    console.log(`clicked ${item}`);
+    setActiveItem(item);
+  };
+
+  return (
+    <Menu onSelect={onSelect} activeItemId={activeItem}>
+      <MenuContent>
+        <MenuGroup>
+          <MenuList>
+            <MenuItem to="#" itemId={0}>
+              Link not in group
+            </MenuItem>
+          </MenuList>
+        </MenuGroup>
+        <Divider />
+        <MenuGroup label="Group 1" labelHeadingLevel="h3">
+          <MenuList>
+            <MenuItem to="#" itemId={1}>
+              Link 1
+            </MenuItem>
+            <MenuItem itemId={2}>Link 2</MenuItem>
+          </MenuList>
+        </MenuGroup>
+        <Divider />
+        <MenuGroup label="Group 2" labelHeadingLevel="h3">
+          <MenuList>
+            <MenuItem to="#" itemId={3}>
+              Link 1
+            </MenuItem>
+            <MenuItem to="#" itemId={4}>
+              Link 2
+            </MenuItem>
+          </MenuList>
+        </MenuGroup>
+      </MenuContent>
+    </Menu>
+  );
+};