@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.10

package/helpers/index.d.ts

@@ -1,14 +0,0 @@
-export * from '../dist/esm/helpers/constants';
-export * from '../dist/esm/helpers/FocusTrap/FocusTrap';
-export * from '../dist/esm/helpers/GenerateId/GenerateId';
-export * from '../dist/esm/helpers/htmlConstants';
-export * from '../dist/esm/helpers/typeUtils';
-export * from '../dist/esm/helpers/OUIA/ouia';
-export * from '../dist/esm/helpers/util';
-export * from '../dist/esm/helpers/Popper/Popper';
-export * from '../dist/esm/helpers/useIsomorphicLayout';
-export * from '../dist/esm/helpers/KeyboardHandler';
-export * from '../dist/esm/helpers/resizeObserver';
-export * from '../dist/esm/helpers/useInterval';
-export * from '../dist/esm/helpers/datetimeUtils';
-//# sourceMappingURL=index.d.ts.map

package/helpers/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/helpers/index.js

@@ -1,14 +0,0 @@
-export * from '../dist/esm/helpers/constants';
-export * from '../dist/esm/helpers/FocusTrap/FocusTrap';
-export * from '../dist/esm/helpers/GenerateId/GenerateId';
-export * from '../dist/esm/helpers/htmlConstants';
-export * from '../dist/esm/helpers/typeUtils';
-export * from '../dist/esm/helpers/OUIA/ouia';
-export * from '../dist/esm/helpers/util';
-export * from '../dist/esm/helpers/Popper/Popper';
-export * from '../dist/esm/helpers/useIsomorphicLayout';
-export * from '../dist/esm/helpers/KeyboardHandler';
-export * from '../dist/esm/helpers/resizeObserver';
-export * from '../dist/esm/helpers/useInterval';
-export * from '../dist/esm/helpers/datetimeUtils';
-//# sourceMappingURL=index.js.map

package/helpers/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/helpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}

package/layouts/index.d.ts

@@ -1,8 +0,0 @@
-export * from '../dist/esm/layouts/Bullseye';
-export * from '../dist/esm/layouts/Flex';
-export * from '../dist/esm/layouts/Gallery';
-export * from '../dist/esm/layouts/Grid';
-export * from '../dist/esm/layouts/Level';
-export * from '../dist/esm/layouts/Split';
-export * from '../dist/esm/layouts/Stack';
-//# sourceMappingURL=index.d.ts.map

package/layouts/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/layouts/index.js

@@ -1,8 +0,0 @@
-export * from '../dist/esm/layouts/Bullseye';
-export * from '../dist/esm/layouts/Flex';
-export * from '../dist/esm/layouts/Gallery';
-export * from '../dist/esm/layouts/Grid';
-export * from '../dist/esm/layouts/Level';
-export * from '../dist/esm/layouts/Split';
-export * from '../dist/esm/layouts/Stack';
-//# sourceMappingURL=index.js.map

package/layouts/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/next/index.d.ts

@@ -1,2 +0,0 @@
-export * from '../dist/esm/next/components';
-//# sourceMappingURL=index.d.ts.map

package/next/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/next/index.js

@@ -1,2 +0,0 @@
-export * from '../dist/esm/next/components';
-//# sourceMappingURL=index.js.map

package/next/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/next/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/scripts/createSubpaths.js

@@ -1,32 +0,0 @@
-/**
- * Re-export subpath modules into the package root directory for ease of access.
- */
-const { readdirSync, readFileSync, writeFileSync, mkdirSync } = require('fs');
-const { resolve, join } = require('path');
-
-const isIndex = (fileName) => fileName.match(/^index\./);
-
-const updatePaths = (filePath, subPathName) => {
-  const contents = readFileSync(filePath, { encoding: 'utf8' });
-  if (filePath.includes('.map')) {
-    return contents.replaceAll('../../../', `../`);
-  } else {
-    return contents.replaceAll('./', `../dist/esm/${subPathName}/`);
-  }
-};
-
-['next', 'deprecated', 'components', 'layouts', 'helpers'].forEach((subPathName) => {
-  const distPath = resolve(__dirname, `../dist/esm/${subPathName}`);
-  const distFileNames = readdirSync(distPath);
-  const distIndexFileNames = distFileNames.filter((fileName) => isIndex(fileName));
-
-  const destinationDir = resolve(__dirname, `../${subPathName}`);
-  mkdirSync(destinationDir, { recursive: true });
-
-  distIndexFileNames.forEach((fileName) => {
-    const filePath = join(__dirname, '../dist/esm', subPathName, fileName);
-    const newFileContent = updatePaths(filePath, subPathName);
-    const fileDestination = join(destinationDir, fileName);
-    writeFileSync(fileDestination, newFileContent);
-  });
-});

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
-import bgImg from './patternfly-orb.svg';
-
-export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-
-  const toggleModal = (_event: React.MouseEvent) => {
-    setIsModalOpen(!isModalOpen);
-  };
-
-  return (
-    <React.Fragment>
-      <Button variant="primary" onClick={toggleModal}>
-        Show about modal
-      </Button>
-      <AboutModal
-        isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
-        trademark="Trademark and copyright information here"
-        brandImageSrc={brandImg}
-        brandImageAlt="Patternfly Logo"
-        backgroundImageSrc={bgImg}
-        aria-label="Background image about modal"
-      >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-          </TextList>
-        </TextContent>
-      </AboutModal>
-    </React.Fragment>
-  );
-};

package/src/components/BackgroundImage/__tests__/__snapshots__/BackgroundImage.test.tsx.snap

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BackgroundImage 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-background-image"
-    style="--pf-v5-c-background-image--BackgroundImage: url([object Object]);"
-  />
-</DocumentFragment>
-`;
-
-exports[`allows passing in a single string as the image src 1`] = `
-<DocumentFragment>
-  <div
-    class="pf-v5-c-background-image"
-    style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pfbg_1200.jpg);"
-  />
-</DocumentFragment>
-`;

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  FormSelect,
-  FormSelectOption,
-  HelperText,
-  HelperTextItem,
-  ValidatedOptions
-} from '@patternfly/react-core';
-
-export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
-  const [formSelectValue, setFormSelectValue] = React.useState('');
-  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
-  const [helperText, setHelperText] = React.useState('');
-
-  const onChange = (_event: React.FormEvent<HTMLSelectElement>, value: string) => {
-    if (value === '3') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.success);
-      setHelperText('You chose wisely');
-    } else if (value === '') {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.warning);
-      setHelperText('You must select a value');
-    } else {
-      setFormSelectValue(value);
-      setValidated(ValidatedOptions.error);
-      setHelperText('You must chose Three (thought that was obvious)');
-    }
-  };
-
-  const options = [
-    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-  ];
-
-  return (
-    <Form>
-      <FormGroup label="Selection:" type="string" fieldId="selection">
-        <FormSelect
-          validated={validated}
-          isIconSprite
-          value={formSelectValue}
-          onChange={onChange}
-          aria-label="FormSelect Input"
-        >
-          {options.map((option, index) => (
-            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-          ))}
-        </FormSelect>
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem variant={validated}>{helperText}</HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      </FormGroup>
-    </Form>
-  );
-};

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-export const TextAreaIconSprite: React.FunctionComponent = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        value={success}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        value={warning}
-        aria-label="warning icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        value={error}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};

package/src/components/TextInput/examples/TextInputIcon.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIcon: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [custom, setCustom] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={calendar}
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={custom}
-        type="text"
-        customIconDimensions="24px 24px"
-        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
-        onChange={(_event, value) => setCustom(value)}
-        aria-label="text input example"
-      />
-    </>
-  );
-};

package/src/components/TextInput/examples/TextInputIconSprite.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { TextInput } from '@patternfly/react-core';
-
-export const TextInputIconSprite: React.FunctionComponent = () => {
-  const [calendar, setCalendar] = React.useState('');
-  const [clock, setClock] = React.useState('');
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextInput
-        value={success}
-        validated={'success'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setSuccess(value)}
-        aria-label="success icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={warning}
-        validated={'warning'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={error}
-        validated={'error'}
-        isIconSprite
-        type="text"
-        onChange={(_event, value) => setError(value)}
-        aria-label="error icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={calendar}
-        isIconSprite
-        type="text"
-        iconVariant="calendar"
-        onChange={(_event, value) => setCalendar(value)}
-        aria-label="calendar icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextInput
-        value={clock}
-        isIconSprite
-        type="text"
-        iconVariant="clock"
-        onChange={(_event, value) => setClock(value)}
-        aria-label="clock icon sprite text input example"
-      />
-    </>
-  );
-};

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -1,104 +0,0 @@
----
-id: Custom menus
-section: components
-subsection: menus
----
-
-import { Link } from '@reach/router';
-
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
-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 CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-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';
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import pfIcon from './examples/pf-logo-small.svg';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import avatarImg from './examples/avatarImg.svg';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Menu/menu';
-
-## Demos
-
-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
-
-```ts file="./examples/ComposableSimpleDropdown.tsx"
-```
-
-### Composable actions menu
-
-```ts file="./examples/ComposableActionsMenu.tsx"
-```
-
-### Composable simple select
-
-```ts file="./examples/ComposableSimpleSelect.tsx"
-```
-
-### Composable simple checkbox select
-
-```ts isBeta file="./examples/ComposableSimpleCheckboxSelect.tsx"
-```
-
-### Composable typeahead select
-
-```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
-```
-
-### Composable multiple typeahead select
-
-```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
-```
-
-### Composable drilldown menu
-
-```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
-```
-
-### Composable tree view menu
-
-When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
-
-```ts file="./examples/ComposableTreeViewMenu.tsx"
-```
-
-### Composable flyout
-
-The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
-
-```ts isBeta file="./examples/ComposableFlyout.tsx"
-```
-
-### Composable application launcher
-
-```ts file="./examples/ComposableApplicationLauncher.tsx"
-```
-
-### Composable context selector
-
-```ts file="./examples/ComposableContextSelector.tsx"
-```
-
-### Composable options menu variants
-
-```ts file="./examples/ComposableOptionsMenuVariants.tsx"
-```
-
-### Composable dropdown variants
-
-```ts file="./examples/ComposableDropdwnVariants.tsx"
-```
-
-### Composable date select
-
-```ts file="./examples/ComposableDateSelect.tsx"
-```

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

@@ -1,121 +0,0 @@
-import React from 'react';
-import { MenuToggle, Menu, MenuList, MenuItem, MenuGroup, MenuItemAction, Popper } 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 CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-export const ComposableActionsMenu: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-
-  const handleMenuKeys = (event: KeyboardEvent) => {
-    if (isOpen && menuRef.current?.contains(event.target as Node)) {
-      if (event.key === 'Escape' || event.key === 'Tab') {
-        setIsOpen(!isOpen);
-        toggleRef.current?.focus();
-      }
-    }
-  };
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
-      setIsOpen(false);
-    }
-  };
-
-  React.useEffect(() => {
-    window.addEventListener('keydown', handleMenuKeys);
-    window.addEventListener('click', handleClickOutside);
-    return () => {
-      window.removeEventListener('keydown', handleMenuKeys);
-      window.removeEventListener('click', handleClickOutside);
-    };
-  }, [isOpen, menuRef]);
-
-  const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
-    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
-      return;
-    }
-
-    if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter((id) => id !== itemId));
-    } else {
-      setSelectedItems([...selectedItems, itemId]);
-    }
-  };
-
-  const onToggleClick = (ev: React.MouseEvent) => {
-    ev.stopPropagation(); // Stop handleClickOutside from handling
-    setTimeout(() => {
-      if (menuRef.current) {
-        const firstElement = menuRef.current.querySelector('li > button:not(:disabled), li > a:not(:disabled)');
-        firstElement && (firstElement as HTMLElement).focus();
-      }
-    }, 0);
-    setIsOpen(!isOpen);
-  };
-
-  const toggle = (
-    <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
-      {isOpen ? 'Expanded' : 'Collapsed'}
-    </MenuToggle>
-  );
-  const menu = (
-    <Menu
-      ref={menuRef}
-      // eslint-disable-next-line no-console
-      onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
-      onSelect={onSelect}
-    >
-      <MenuGroup label="Actions">
-        <MenuList>
-          <MenuItem
-            isSelected={selectedItems.includes(0)}
-            actions={
-              <MenuItemAction
-                icon={<CodeBranchIcon aria-hidden />}
-                actionId="code"
-                // eslint-disable-next-line no-console
-                onClick={() => console.log('clicked on code icon')}
-                aria-label="Code"
-              />
-            }
-            description="This is a description"
-            itemId={0}
-          >
-            Item 1
-          </MenuItem>
-          <MenuItem
-            isDisabled
-            isSelected={selectedItems.includes(1)}
-            actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
-            description="This is a description"
-            itemId={1}
-          >
-            Item 2
-          </MenuItem>
-          <MenuItem
-            isSelected={selectedItems.includes(2)}
-            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
-            itemId={2}
-          >
-            Item 3
-          </MenuItem>
-          <MenuItem
-            isSelected={selectedItems.includes(3)}
-            actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
-            description="This is a description"
-            itemId={3}
-          >
-            Item 4
-          </MenuItem>
-        </MenuList>
-      </MenuGroup>
-    </Menu>
-  );
-
-  return <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />;
-};