@patternfly/react-core 4.237.11 → 4.239.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.237.11",
+  "version": "4.239.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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.88.11",
-    "@patternfly/react-styles": "^4.87.11",
-    "@patternfly/react-tokens": "^4.89.11",
+    "@patternfly/react-icons": "^4.90.0",
+    "@patternfly/react-styles": "^4.89.0",
+    "@patternfly/react-tokens": "^4.91.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "d5c28cc90817bb41bf6062071daaa1e435f93b87"
+  "gitHead": "d5b77ee797de7d6babd7f2add1fb238812282d64"
 }

package/src/components/SearchInput/SearchInput.tsx

@@ -21,6 +21,15 @@ export interface SearchAttribute {
   display: React.ReactNode;
 }
 
+export interface ExpandableInput {
+  /** Flag to indicate if the search input is expanded */
+  isExpanded: boolean;
+  /** Callback function to toggle the expandable search input */
+  onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  /** An accessible label for the expandable search input toggle */
+  toggleAriaLabel: string;
+}
+
 export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange' | 'results' | 'ref'> {
   /** Additional classes added to the banner */
   className?: string;
@@ -38,7 +47,8 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
   /** A suggestion for autocompleting */
   hint?: string;
-
+  /** Object that makes the search input expandable/collapsible */
+  expandableInput?: ExpandableInput;
   /** A callback for when the search button clicked changes */
   onSearch?: (
     value: string,
@@ -72,7 +82,6 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** The number of search results returned. Either a total number of results,
    * or a string representing the current result over the total number of results. i.e. "1 / 5" */
   resultsCount?: number | string;
-
   /** Array of attribute values used for dynamically generated advanced search */
   attributes?: string[] | SearchAttribute[];
   /* Additional elements added after the attributes in the form.
@@ -112,6 +121,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   onNextClick,
   onPreviousClick,
   innerRef,
+  expandableInput,
   'aria-label': ariaLabel = 'Search input',
   resetButtonLabel = 'Reset',
   openMenuButtonAriaLabel = 'Open advanced search',
@@ -130,6 +140,23 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const searchInputRef = React.useRef(null);
   const ref = React.useRef(null);
   const searchInputInputRef = innerRef || ref;
+  const searchInputExpandableToggleRef = React.useRef(null);
+  const [focusAfterExpandChange, setFocusAfterExpandChange] = React.useState(false);
+
+  const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
+
+  React.useEffect(() => {
+    // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
+    // expansion toggle is fired without focusing on mount
+    if (!focusAfterExpandChange) {
+      return;
+    } else if (isExpanded) {
+      searchInputInputRef?.current?.focus();
+    } else {
+      searchInputExpandableToggleRef?.current?.focus();
+    }
+    setFocusAfterExpandChange(false);
+  }, [focusAfterExpandChange, isExpanded, searchInputInputRef, searchInputExpandableToggleRef]);
 
   React.useEffect(() => {
     setSearchValue(value);
@@ -202,7 +229,16 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     }
   };
 
-  const buildSearchTextInputGroup = ({ ...searchInputProps } = {}) => (
+  const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
+    setSearchValue('');
+    onToggleExpand(isExpanded, event);
+    setFocusAfterExpandChange(true);
+  };
+
+  const renderUtilities =
+    value && (resultsCount || (!!onNextClick && !!onPreviousClick) || (!!onClear && !expandableInput));
+
+  const buildTextInputGroup = ({ ...searchInputProps } = {}) => (
     <TextInputGroup isDisabled={isDisabled} {...searchInputProps}>
       <TextInputGroupMain
         hint={hint}
@@ -214,7 +250,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         onKeyDown={onEnter}
         onChange={onChangeHandler}
       />
-      {value && (
+      {renderUtilities && (
         <TextInputGroupUtilities>
           {resultsCount && <Badge isRead>{resultsCount}</Badge>}
           {!!onNextClick && !!onPreviousClick && (
@@ -237,7 +273,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
               </Button>
             </div>
           )}
-          {!!onClear && (
+          {!!onClear && !expandableInput && (
             <Button
               variant={ButtonVariant.plain}
               isDisabled={isDisabled}
@@ -252,9 +288,35 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     </TextInputGroup>
   );
 
+  const expandableToggle = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={isExpanded ? <TimesIcon /> : <SearchIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+    />
+  );
+
+  const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
+    <InputGroup {...searchInputProps}>
+      {buildTextInputGroup()}
+      {expandableToggle}
+    </InputGroup>
+  );
+
+  const buildSearchTextInputGroup = ({ ...searchInputProps } = {}) => {
+    if (expandableInput) {
+      return buildExpandableSearchInput({ ...searchInputProps });
+    }
+
+    return buildTextInputGroup({ ...searchInputProps });
+  };
+
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup {...searchInputProps}>
-      {buildSearchTextInputGroup()}
+      {buildTextInputGroup()}
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
         <Button
           className={isSearchMenuOpen && 'pf-m-expanded'}
@@ -278,6 +340,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
           <ArrowRightIcon />
         </Button>
       )}
+      {expandableInput && expandableToggle}
     </InputGroup>
   );
 
@@ -287,6 +350,10 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     innerRef: searchInputRef
   };
 
+  if (!!expandableInput && !isExpanded) {
+    return <InputGroup {...searchInputProps}>{expandableToggle}</InputGroup>;
+  }
+
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
       const AdvancedSearch = (
@@ -333,7 +400,6 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
       return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
     }
-
     return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });
   }
   return buildSearchTextInputGroup(searchInputProps);

package/src/components/SearchInput/__tests__/SearchInput.test.tsx

@@ -167,3 +167,85 @@ describe('SearchInput', () => {
     expect(document.body).toContainElement(screen.getByText('test'));
   });
 });
+
+test('expandable toggle does not render by default', () => {
+  render(<SearchInput />);
+
+  expect(screen.queryByRole('button')).not.toBeInTheDocument();
+});
+
+test('expandable toggle renders when a value is passed for expandableProps', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button')).toBeVisible();
+});
+
+test('expandable toggle is not aria-expanded when isExpanded is not true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button', { expanded: false })).toBeVisible();
+});
+
+test('expandable toggle is aria-expanded when isExpanded is true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button', { expanded: true })).toBeVisible();
+});
+
+test('text input is not rendered when isExpanded is not true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: false, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+});
+
+test('text input is rendered when isExpanded is true', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('textbox')).toBeVisible();
+});
+
+test('onToggleExpand is not called if the expandable toggle is not clicked', () => {
+  const mockOnToggleExpand = jest.fn();
+
+  render(
+    <SearchInput
+      expandableInput={{ isExpanded: true, onToggleExpand: mockOnToggleExpand, toggleAriaLabel: 'Test label' }}
+    />
+  );
+
+  expect(mockOnToggleExpand).not.toHaveBeenCalled();
+});
+
+test('onToggleExpand is called if the expandable toggle is clicked', async () => {
+  const mockOnToggleExpand = jest.fn();
+  const user = userEvent.setup();
+
+  render(
+    <SearchInput
+      expandableInput={{ isExpanded: true, onToggleExpand: mockOnToggleExpand, toggleAriaLabel: 'Test label' }}
+    />
+  );
+
+  await user.click(screen.getByRole('button'));
+
+  expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+});
+
+test('toggleAriaLabel is applied to the expandable toggle', () => {
+  render(
+    <SearchInput expandableInput={{ isExpanded: true, onToggleExpand: () => {}, toggleAriaLabel: 'Test label' }} />
+  );
+
+  expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
+});

package/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute']
+propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
 beta: true
 ---
 
@@ -35,6 +35,11 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 ```ts file='./SearchInputFocusSearch.tsx'
 ```
 
+### With expandable button
+
+```ts file='./SearchInputWithExpandable.tsx'
+```
+
 ### Advanced
 
 The search input component can be used to dynamically build a one to one attribute-value advanced search.

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithExpandable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onChange = (value: string) => {
+    setValue(value);
+  };
+
+  const onToggleExpand = (isExpanded: boolean) => {
+    setIsExpanded(!isExpanded);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={() => onChange('')}
+      expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+    />
+  );
+};

package/src/next/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
+import { Popper } from '../../../helpers/Popper/Popper';
+
+export interface DropdownProps extends MenuProps {
+  /** Anything which can be rendered in a dropdown. */
+  children?: React.ReactNode;
+  /** Classes applied to root element of dropdown. */
+  className?: string;
+  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
+  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Flag to indicate if menu is opened.*/
+  isOpen?: boolean;
+  /** Function callback called when user selects item. */
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  /** Callback to allow the dropdown component to change the open state of the menu.
+   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+  onOpenChange?: (isOpen: boolean) => void;
+  /** Indicates if the menu should be without the outer box-shadow. */
+  isPlain?: boolean;
+  /** Indicates if the menu should be scrollable. */
+  isScrollable?: boolean;
+  /** Min width of the menu. */
+  minWidth?: string;
+}
+
+export const Dropdown: React.FunctionComponent<DropdownProps> = ({
+  children,
+  className,
+  onSelect,
+  isOpen,
+  toggle,
+  onOpenChange,
+  isPlain,
+  isScrollable,
+  minWidth,
+  ...props
+}: DropdownProps) => {
+  const localMenuRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLButtonElement>();
+  const containerRef = React.useRef<HTMLDivElement>();
+
+  const menuRef = (props.innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  React.useEffect(() => {
+    const handleMenuKeys = (event: KeyboardEvent) => {
+      if (!isOpen && toggleRef.current?.contains(event.target as Node)) {
+        // toggle was clicked open, focus on first menu item
+        if (event.key === 'Enter') {
+          setTimeout(() => {
+            const firstElement = menuRef.current.querySelector('li > button:not(:disabled)');
+            firstElement && (firstElement as HTMLElement).focus();
+          }, 0);
+        }
+      }
+      // Close the menu on tab or escape if onOpenChange is provided
+      if (
+        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
+        toggleRef.current?.contains(event.target as Node)
+      ) {
+        if (event.key === 'Escape' || event.key === 'Tab') {
+          onOpenChange(!isOpen);
+          toggleRef.current?.focus();
+        }
+      }
+    };
+
+    const handleClickOutside = (event: MouseEvent) => {
+      // If the event is not on the toggle and onOpenChange callback is provided, close the menu
+      if (isOpen && onOpenChange && !toggleRef?.current?.contains(event.target as Node)) {
+        if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+          onOpenChange(false);
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef, onOpenChange]);
+
+  const menu = (
+    <Menu
+      className={css(className)}
+      ref={menuRef}
+      onSelect={(event, itemId) => onSelect(event, itemId)}
+      isPlain={isPlain}
+      isScrollable={isScrollable}
+      {...(minWidth && {
+        style: {
+          '--pf-c-menu--MinWidth': minWidth
+        } as React.CSSProperties
+      })}
+      {...props}
+    >
+      <MenuContent>{children}</MenuContent>
+    </Menu>
+  );
+  return (
+    <div ref={containerRef}>
+      <Popper
+        trigger={toggle(toggleRef)}
+        removeFindDomNode
+        popper={menu}
+        appendTo={containerRef.current || undefined}
+        isVisible={isOpen}
+      />
+    </div>
+  );
+};
+Dropdown.displayName = 'Dropdown';

package/src/next/components/Dropdown/DropdownGroup.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { MenuGroupProps, MenuGroup } from '../../../components/Menu';
+
+export interface DropdownGroupProps extends Omit<MenuGroupProps, 'ref'> {
+  /** Anything which can be rendered in a dropdown group. */
+  children: React.ReactNode;
+  /** Classes applied to root element of dropdown group */
+  className?: string;
+  /** Label of the dropdown group */
+  label?: string;
+}
+
+export const DropdownGroup: React.FunctionComponent<DropdownGroupProps> = ({
+  children,
+  className,
+  label,
+  labelHeadingLevel = 'h1',
+  ...props
+}: DropdownGroupProps) => (
+  <MenuGroup className={css(className)} label={label} labelHeadingLevel={labelHeadingLevel} {...props}>
+    {children}
+  </MenuGroup>
+);
+DropdownGroup.displayName = 'DropdownGroup';

package/src/next/components/Dropdown/DropdownItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { MenuItemProps, MenuItem } from '../../../components/Menu';
+
+export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'> {
+  /** Anything which can be rendered in a dropdown item */
+  children?: React.ReactNode;
+  /** Classes applied to root element of dropdown item */
+  className?: string;
+  /** Description of the dropdown item */
+  description?: React.ReactNode;
+}
+
+export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
+  children,
+  className,
+  description,
+  ...props
+}: DropdownItemProps) => (
+  <MenuItem className={css(className)} description={description} {...props}>
+    {children}
+  </MenuItem>
+);
+DropdownItem.displayName = 'DropdownItem';

package/src/next/components/Dropdown/DropdownList.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { css } from '@patternfly/react-styles';
+import { MenuListProps, MenuList } from '../../../components/Menu';
+
+export interface DropdownListProps extends MenuListProps {
+  /** Anything which can be rendered in a dropdown list */
+  children: React.ReactNode;
+  /** Classes applied to root element of dropdown list */
+  className?: string;
+}
+
+export const DropdownList: React.FunctionComponent<MenuListProps> = ({
+  children,
+  className,
+  ...props
+}: DropdownListProps) => (
+  <MenuList className={css(className)} {...props}>
+    {children}
+  </MenuList>
+);
+DropdownList.displayName = 'DropdownList';

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

@@ -0,0 +1,31 @@
+---
+id: Dropdown
+section: components
+cssPrefix: pf-c-dropdown
+propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList']
+beta: true
+---
+
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+## Examples
+
+### Basic
+
+```ts file="./DropdownBasic.tsx"
+```
+
+### With kebab toggle
+
+```ts file="./DropdownWithKebabToggle.tsx"
+```
+
+### With groups
+
+```ts file="./DropdownWithGroups.tsx"
+```
+
+### With descriptions
+
+```ts file="./DropdownWithDescriptions.tsx"
+```

package/src/next/components/Dropdown/examples/DropdownBasic.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
+import { Divider, MenuToggle } from '@patternfly/react-core';
+
+export const DropdownBasic: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      innerRef={menuRef}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      onOpenChange={isOpen => setIsOpen(isOpen)}
+      toggle={toggleRef => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
+          Dropdown
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="link">
+          Link
+        </DropdownItem>
+        <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+          Action
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled key="disabled link">
+          Disabled link
+        </DropdownItem>
+        <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
+          Disabled action
+        </DropdownItem>
+        <Divider key="separator" />
+        <DropdownItem itemId={4} key="separated link">
+          Separated link
+        </DropdownItem>
+        <DropdownItem itemId={5} key="separated action">
+          Separated action
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};

package/src/next/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const DropdownWithDescriptions: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+    setIsOpen(false);
+  };
+
+  return (
+    <Dropdown
+      innerRef={menuRef}
+      isOpen={isOpen}
+      onSelect={onSelect}
+      minWidth="150px"
+      onOpenChange={isOpen => setIsOpen(isOpen)}
+      toggle={toggleRef => (
+        <MenuToggle ref={toggleRef} isFullWidth onClick={onToggleClick} isExpanded={isOpen}>
+          Dropdown
+        </MenuToggle>
+      )}
+    >
+      <DropdownList>
+        <DropdownItem itemId={0} key="link" description="This is a description">
+          Link
+        </DropdownItem>
+        <DropdownItem
+          itemId={1}
+          key="action"
+          description="This is a very long description that describes the menu item"
+          to="#default-link2"
+          onClick={ev => ev.preventDefault()}
+        >
+          Action
+        </DropdownItem>
+        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled link">
+          Disabled link
+        </DropdownItem>
+        <DropdownItem
+          itemId={3}
+          isDisabled
+          description="This is a description"
+          key="disabled action"
+          to="#default-link4"
+        >
+          Disabled action
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};