@patternfly/react-core 4.246.0 → 4.247.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.246.0",
+  "version": "4.247.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "3ae4fb2182c899e44a032ed468cb067ef496ad66"
+  "gitHead": "064d341a881a7ab291add565ed1929cf915ab049"
 }

package/src/components/Dropdown/examples/Dropdown.md

@@ -18,133 +18,157 @@ import avatarImg from '../../Avatar/examples/avatarImg.svg';
 
 ## Examples
 
-### Basic
+### Basic dropdowns
+
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. The `isOpen` property is used to determine whether the menu is opened or not.
+
+All of the items in a dropdown list are created as `<DropdownItem>` components. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: 
+- Use the `tooltip` property to enable tooltip support. 
+- Use the `isDisabled` property to disable an item.
+- Use the `isAriaDisabled` property to style an item as disabled, while still allowing the item to receive keyboard focus and display a tooltip.
+
+This example also uses a `<DropdownSeparator>`, which adds a horizontal line that splits the menu into 2 sections.
 
 ```ts file='./DropdownBasic.tsx'
 ```
 
-### With initial selection
+### Autofocus on dropdown expansion
+
+A `<DropdownItem>` may use the  `autoFocus` property so that it automatically receives focus when the menu is expanded. `autoFocus` cannot be applied to disabled dropdown items.
 
 ```ts file="./DropdownInitialSelection.tsx"
 ```
 
-### With groups
+### With groups of items
+
+Use the `<DropdownGroup>` component to group sets of related dropdown items together. Use the `isGrouped` property on the `Dropdown` component to indicate that a dropdown contains grouped items.
 
 ```ts file="./DropdownGroups.tsx"
 ```
 
-### Disabled
+### With item descriptions
 
-```ts file="./DropdownDisabled.tsx"
+A `<DropdownItem>` may use the `description` property to provide users with more context. This description will appear in the menu below the dropdown item it corresponds to.
+
+```ts file="./DropdownDescriptions.tsx"
 ```
 
-### Primary toggle
+### With custom content
 
-```ts file="./DropdownPrimaryToggle.tsx"
+You may replace standard dropdown items with custom content. If so, you must style the menu contents and manage focus within your custom implementation.
+
+```ts file="./DropdownBasicPanel.tsx"
 ```
 
-### Secondary toggle
+### With router link items
 
-```ts file="./DropdownSecondaryToggle.tsx"
+`<DropdownItem>` may use the `component` property to include router links.
+
+```ts file="./DropdownRouterLink.tsx"
 ```
 
-### Plain with text toggle
+### Toggle styling
 
-```ts file="./DropdownPlainTextToggle.tsx"
+You can adjust the styling of a `<DropdownToggle>` using the `toggleVariant` property. `toggleVariant` may be set to 'primary', 'secondary', or 'default'.
+
+```ts file="./DropdownPrimaryToggle.tsx"
 ```
 
-### Position right
+### Plain text toggle
 
-```ts file="./DropdownPositionRight.tsx"
+A toggle may be styled as plain text using the `isText` and `isPlain`properties. The following example applies these properties to a `<Dropdown>` component.
+
+```ts file="./DropdownPlainTextToggle.tsx"
 ```
 
-### Alignments on different breakpoints
+### Disabled toggles
 
-```ts file="./DropdownAlignmentOnBreakpoints.tsx"
+A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
+
+```ts file="./DropdownDisabled.tsx"
 ```
 
-### Direction up
+### Icon toggle
 
-```ts file="./DropdownDirectionUp.tsx"
+`<DropdownToggle>` may use a recognizable icon instead of a text label if text would take up too much room. Set the `toggleIndicator` property to `{null}` to remove the default dropdown toggle caret.
+
+```ts file="./DropdownIconOnly.tsx"
 ```
 
-### With kebab
+### Kebab toggle
+
+Use `<KebabToggle>` to replace the default text label and caret with a kebab icon. A kebab toggle can be used to indicate that a dropdown connects to a menu.
 
 ```ts file="./DropdownKebab.tsx"
 ```
 
-### With badge
+### Toggle with image
 
-```ts file="./DropdownBadge.tsx"
+The `icon` property can be used to display an image in the `DropdownToggle` and can be used alongside a text label.
+
+```ts file="./DropdownImageAndText.tsx"
 ```
 
-### Icon only
+### Toggle with badge
 
-```ts file="./DropdownIconOnly.tsx"
+You may use a `<BadgeToggle>` to display the number of dropdown menu items.
+
+```ts file="./DropdownBadge.tsx"
 ```
 
 ### Split button
 
-```ts file="./DropdownSplitButton.tsx"
-```
+To combine an action button or other control with a dropdown menu, use a split button. A `<DropdownToggle>` can be rendered as a split button by using the `splitButtonItems` property. Elements to be displayed before the toggle button must be included in `splitButtonItems`.
 
-### Split button (with text)
+The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets. 
 
-```ts file="./DropdownSplitButtonText.tsx"
+```ts file="./DropdownSplitButton.tsx"
 ```
 
-### Split button (indeterminate state)
-
-```ts file="./DropdownSplitButtonIndeterminate.tsx"
-```
+### Split button text label
 
-### Split button (disabled)
+Text labels may optionally be used alongside actions within split buttons.
 
-```ts file="./DropdownSplitButtonDisabled.tsx"
+```ts file="./DropdownSplitButtonText.tsx"
 ```
 
-### Split button action
+### Split button toggle variants
 
-```ts file="./DropdownSplitButtonAction.tsx"
-```
+Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 
 
-### Split button primary action
+The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
 
 ```ts file="./DropdownSplitButtonActionPrimary.tsx"
 ```
 
-### Split button secondary action
+### Dropdown alignment
 
-```ts file="./DropdownSplitButtonActionSecondary.tsx"
-```
+The alignment of a dropdown menu may be changed to better fit the size of a user's browser window. A `<Dropdown>` may use the `alignments` property to indicate how the menu will align at different screen sizes.
 
-### Basic panel
-
-```ts file="./DropdownBasicPanel.tsx"
+```ts file="./DropdownAlignmentOnBreakpoints.tsx"
 ```
 
-### Router link
+### Right-positioned menu
 
-```ts file="./DropdownRouterLink.tsx"
+The following example demonstrates a `<Dropdown>` with a `position` equal to 'right'. By default, a dropdown menu is left-positioned, but a right-positioned menu may work better depending on where your dropdown is placed on a page.
+
+```ts file="./DropdownPositionRight.tsx"
 ```
 
-### Dropdown with image and text
+### Upwards directional menu
 
-```ts file="./DropdownImageAndText.tsx"
+The following example demonstrates a `<Dropdown>` with a  `direction` equal to 'up'. This will alter the default menu behavior so that the dropdown menu is displayed above the dropdown toggle.
+
+```ts file="./DropdownDirectionUp.tsx"
 ```
 
-### Appending document body vs parent
+### Using document parent element
 
-Avoid passing in `document.body` when passing a value to the `menuAppendTo` prop on the Dropdown component, as it can cause accessibility issues. These issues can include, but are not limited to, being unable to enter the contents of the Dropdown options via assistive technologies (like keyboards or screen readers).
+Avoid passing in `document.body` to a `<Dropdown>` `menuAppendTo` property. Doing so can cause accessibility issues, such as being unable to navigate `<Dropdown>` options using keyboards or screen readers. 
 
-Instead append to `"parent"` to achieve the same result without sacrificing accessibility.
+Instead, append to ‘parent’ to avoid sacrificing accessibility.
 
-In this example, while, after making a selection, both variants retain focus on their respective Dropdown component, the options for the `document.body` variant cannot be navigated to via Voice Over.
+The following example demonstrates both methods of appending. After making a selection, both dropdowns retain focus on their respective `<Dropdown>`, but the options for the `document.body` variant cannot be navigated via Voice Over.
 
 ```ts file="./DropdownAppendBodyVsParent.tsx"
 ```
-
-### Dropdown with descriptions
-
-```ts file="./DropdownDescriptions.tsx"
-```

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import { DualListSelectorTree, DualListSelectorTreeItemData } from './DualListSelectorTree';
 import { getUniqueId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorContext, DualListSelectorPaneContext } from './DualListSelectorContext';
 import { DualListSelectorList } from './DualListSelectorList';
+import { SearchInput } from '../SearchInput';
 
 /** Acts as the container for a list of options that are either available or chosen,
  * depending on the pane type (available or chosen). A search input and other actions,
@@ -57,6 +57,8 @@ export interface DualListSelectorPaneProps {
   onSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   /** @hide A callback for when the search input value for changes.  To be used when isSearchable is true. */
   onSearchInputChanged?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
+  /** @hide Callback for search input clear button */
+  onSearchInputClear?: (event: React.SyntheticEvent<HTMLButtonElement>) => void;
   /** @hide Filter function for custom filtering based on search string. To be used when isSearchable is true. */
   filterOption?: (option: React.ReactNode, input: string) => boolean;
   /** @hide Accessible label for the search input. To be used when isSearchable is true. */
@@ -81,6 +83,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   searchInputAriaLabel = '',
   onFilterUpdate,
   onSearchInputChanged,
+  onSearchInputClear,
   filterOption,
   id = getUniqueId('dual-list-selector-pane'),
   isDisabled = false,
@@ -90,8 +93,7 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   const { isTree } = React.useContext(DualListSelectorContext);
 
   // only called when search input is dynamically built
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
+  const onChange = (newValue: string, e: React.FormEvent<HTMLInputElement>) => {
     let filtered: React.ReactNode[];
     if (isTree) {
       filtered = options
@@ -160,12 +162,14 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
               {searchInput ? (
                 searchInput
               ) : (
-                <input
-                  className={css(formStyles.formControl, formStyles.modifiers.search)}
-                  type="search"
+                <SearchInput
                   onChange={isDisabled ? undefined : onChange}
+                  onClear={
+                    onSearchInputClear ? onSearchInputClear : e => onChange('', e as React.FormEvent<HTMLInputElement>)
+                  }
+                  isDisabled={isDisabled}
                   aria-label={searchInputAriaLabel}
-                  disabled={isDisabled}
+                  type="search"
                 />
               )}
             </div>

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

@@ -1135,11 +1135,41 @@ exports[`DualListSelector with search inputs 1`] = `
         <div
           class="pf-c-dual-list-selector__tools-filter"
         >
-          <input
-            aria-label="Available search input"
-            class="pf-c-form-control pf-m-search"
-            type="search"
-          />
+          <div
+            class="pf-c-text-input-group"
+          >
+            <div
+              class="pf-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-c-text-input-group__text"
+              >
+                <span
+                  class="pf-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Available search input"
+                  class="pf-c-text-input-group__text-input"
+                  type="search"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -1360,11 +1390,41 @@ exports[`DualListSelector with search inputs 1`] = `
         <div
           class="pf-c-dual-list-selector__tools-filter"
         >
-          <input
-            aria-label="Chosen search input"
-            class="pf-c-form-control pf-m-search"
-            type="search"
-          />
+          <div
+            class="pf-c-text-input-group"
+          >
+            <div
+              class="pf-c-text-input-group__main pf-m-icon"
+            >
+              <span
+                class="pf-c-text-input-group__text"
+              >
+                <span
+                  class="pf-c-text-input-group__icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                </span>
+                <input
+                  aria-label="Chosen search input"
+                  class="pf-c-text-input-group__text-input"
+                  type="search"
+                  value=""
+                />
+              </span>
+            </div>
+          </div>
         </div>
       </div>
       <div

package/src/components/SearchInput/SearchInput.tsx

@@ -70,6 +70,19 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   hasWordsAttrLabel?: React.ReactNode;
   /** A suggestion for autocompleting. */
   hint?: string;
+  /** Type of the input */
+  type?:
+    | 'text'
+    | 'date'
+    | 'datetime-local'
+    | 'email'
+    | 'month'
+    | 'number'
+    | 'password'
+    | 'search'
+    | 'tel'
+    | 'time'
+    | 'url';
   /** @hide A reference object to attach to the input box. */
   innerRef?: React.RefObject<any>;
   /** A flag for controlling the open state of a custom advanced search implementation. */
@@ -147,6 +160,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   isDisabled = false,
   appendTo,
   removeFindDomNode = false,
+  type = 'text',
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -263,6 +277,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         aria-label={ariaLabel}
         onKeyDown={onEnter}
         onChange={onChangeHandler}
+        type={type}
       />
       {renderUtilities && (
         <TextInputGroupUtilities>

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -19,8 +19,8 @@ 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 avatarImg from './examples/avatarImg.svg';
 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';
 
@@ -50,7 +50,12 @@ Composable menus currently require consumer keyboard handling and use of our und
 
 ### Composable typeahead select
 
-```ts file="./examples/ComposableTypeaheadSelect.tsx"
+```ts isBeta file="./examples/ComposableTypeaheadSelect.tsx"
+```
+
+### Composable multiple typeahead select
+
+```ts isBeta file="./examples/ComposableMultipleTypeaheadSelect.tsx"
 ```
 
 ### Composable drilldown menu

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

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+  Menu,
+  MenuContent,
+  MenuList,
+  MenuItem,
+  MenuItemProps,
+  MenuToggle,
+  MenuToggleElement,
+  Popper,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  ChipGroup,
+  Chip,
+  Button
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+const intitalMenuItems = [
+  { itemId: 'Option 1', children: 'Option 1' },
+  { itemId: 'Option 2', children: 'Option 2' },
+  { itemId: 'Option 3', children: 'Option 3' }
+];
+
+export const ComposableMultipleTypeaheadSelect: React.FunctionComponent = () => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [menuItems, setMenuItems] = React.useState<MenuItemProps[]>(intitalMenuItems);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | 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>();
+
+  React.useEffect(() => {
+    let newMenuItems: MenuItemProps[] = intitalMenuItems;
+
+    // Filter menu items based on the text input value when one exists
+    if (inputValue) {
+      newMenuItems = intitalMenuItems.filter(menuItem =>
+        String(menuItem.children)
+          .toLowerCase()
+          .includes(inputValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newMenuItems.length) {
+        newMenuItems = [{ isDisabled: true, children: 'No results found' }];
+      }
+    }
+
+    setMenuItems(newMenuItems);
+  }, [inputValue]);
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isMenuOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = menuItems.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === menuItems.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = menuItems.filter(menuItem => !menuItem.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (!isMenuOpen) {
+          setIsMenuOpen(prevIsOpen => !prevIsOpen);
+        } else {
+          onMenuSelect(focusedItem.itemId as string);
+        }
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsMenuOpen(false);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        handleMenuArrowKeys(event.key);
+        break;
+      default:
+        !isMenuOpen && setIsMenuOpen(true);
+    }
+  };
+
+  // Close the menu when a click occurs outside of the menu toggle content
+  const onDocumentClick = (event: MouseEvent) => {
+    if (
+      isMenuOpen &&
+      !menuToggleRef.current?.contains(event?.target as HTMLElement) &&
+      !menuRef?.current?.contains(event.target as Node)
+    ) {
+      setIsMenuOpen(false);
+    }
+  };
+
+  const toggleMenuOpen = () => {
+    setIsMenuOpen(!isMenuOpen);
+    textInputRef.current?.focus();
+  };
+
+  const onTextInputChange = (value: string) => {
+    setInputValue(value);
+  };
+
+  const onMenuSelect = (itemId: string) => {
+    if (itemId) {
+      setSelected(
+        selected.includes(itemId) ? selected.filter(selection => selection !== itemId) : [...selected, itemId]
+      );
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      variant="typeahead"
+      onClick={toggleMenuOpen}
+      innerRef={menuToggleRef}
+      isExpanded={isMenuOpen}
+      isFullWidth
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={toggleMenuOpen}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+        >
+          <ChipGroup>
+            {selected.map((selection, index) => (
+              <Chip
+                key={index}
+                onClick={ev => {
+                  ev.stopPropagation();
+                  onMenuSelect(selection);
+                }}
+              >
+                {selection}
+              </Chip>
+            ))}
+          </ChipGroup>
+        </TextInputGroupMain>
+        <TextInputGroupUtilities>
+          {selected.length > 0 && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setInputValue('');
+                setSelected([]);
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+  const menu = (
+    <Menu
+      ref={menuRef as React.Ref<HTMLDivElement>}
+      id="multiple-typeahead-select-menu"
+      onSelect={(_ev, itemId) => onMenuSelect(itemId?.toString() as string)}
+      selected={selected}
+    >
+      <MenuContent>
+        <MenuList>
+          {menuItems.map((itemProps, index) => (
+            <MenuItem
+              key={itemProps.itemId || itemProps.children}
+              isFocused={focusedItemIndex === index}
+              className={itemProps.className}
+              {...itemProps}
+              ref={null}
+            />
+          ))}
+        </MenuList>
+      </MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef as React.Ref<HTMLDivElement>}>
+      <Popper
+        trigger={toggle}
+        popper={menu}
+        appendTo={containerRef.current}
+        isVisible={isMenuOpen}
+        onDocumentClick={onDocumentClick}
+      />
+    </div>
+  );
+};