@patternfly/react-core 5.0.0-alpha.47 → 5.0.0-alpha.49

package/src/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap

@@ -1,21 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`dropdown groups basic render 1`] = `
+exports[`matches snapshot 1`] = `
 <DocumentFragment>
-  <section
-    class=""
+  <div
+    class="custom-class"
+    data-testid="menu-group-mock"
   >
-    <h1
-      aria-hidden="true"
-      class=""
-    >
-      Group 1
-    </h1>
-    <ul
-      role="none"
-    >
-      Something
-    </ul>
-  </section>
+    <div>
+      Dropdown Group children
+    </div>
+  </div>
+  <p>
+    label: Test label
+  </p>
+  <p>
+    labelHeadingLevel: h2
+  </p>
 </DocumentFragment>
 `;

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

@@ -1,181 +1,53 @@
 ---
 id: Dropdown
 section: components
-cssPrefix: pf-c-dropdown
-propComponents:
-  ['Dropdown', 'DropdownGroup', 'DropdownItem', 'DropdownToggle', 'DropdownToggleCheckbox', 'DropdownToggleAction', DropdownSeparator]
-ouia: true
+subsection: menus
+cssPrefix: pf-c-menu
+propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle']
+beta: true
 ---
 
-import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import { Link } from '@reach/router';
-import avatarImg from '../../Avatar/examples/avatarImg.svg';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 ## Examples
 
 ### 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.
+Basic dropdowns present users with a menu of items upon clicking a dropdown toggle.
 
-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'
-```
-
-### 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 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"
-```
-
-### With item descriptions
-
-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"
-```
-
-### With custom content
-
-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"
-```
-
-### With router link items
-
-`<DropdownItem>` may use the `component` property to include router links.
-
-```ts file="./DropdownRouterLink.tsx"
-```
-
-### Toggle styling
-
-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"
-```
-
-### Plain text toggle
-
-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"
-```
-
-### Disabled toggles
-
-A `<DropdownToggle>` may use the `isDisabled` property to disable the expansion of the dropdown menu.
+A `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
 
-```ts file="./DropdownDisabled.tsx"
-```
-
-### Icon toggle
-
-`<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"
-```
-
-### 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"
-```
-
-### Toggle with image
-
-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"
-```
-
-### Toggle with badge
-
-You may use a `<BadgeToggle>` to display the number of dropdown menu items.
-
-```ts file="./DropdownBadge.tsx"
-```
-
-### Split button (checkbox)
+The following example shows a few different states of dropdown items. As shown in this example, dropdown items may:
 
-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`.
-
-The following example shows a split button with a `<DropdownToggleCheckbox>`, which is primarily used for bulk select operations on large data sets. 
-
-```ts file="./DropdownSplitButton.tsx"
-```
-
-### Split button (checkbox with toggle text)
-
-Text labels may optionally be used alongside actions within split buttons.
-
-```ts file="./DropdownSplitButtonText.tsx"
-```
+- Use the `isDisabled` property to disable an item.
+- Use the `onClick` property to trigger a callback for an action.
 
-### Split button (progress checkbox)
+This example also uses a `<Divider>` which passes in `key=”separator”` to split the menu into 2 sections with a horizontal line.
 
-The `isInProgress` property can be used to indicate a progress state by rendering a spinner in place of a checkbox.
+```ts file="./DropdownBasic.tsx"
 
-```ts isBeta file="./DropdownSplitButtonProgressCheckbox.tsx"
 ```
 
-### Split button toggle variants
-
-Use the `toggleVariant` and `splitButtonVariant` properties to adjust the styling of split button toggles. 
+### With kebab toggle
 
-The following example uses `toggleVariant="primary"` to apply primary visual styling and `splitButtonVariant="action"` to include an action.
+To style a dropdown menu's toggle with a kebab icon, pass a "plain" `<MenuToggle>` to the `toggle` property. When there isn't enough space for a labeled button, a kebab icon can be used to toggle the dropdown menu open or closed.
 
-```ts file="./DropdownSplitButtonActionPrimary.tsx"
-```
-
-### Dropdown alignment
-
-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.
+```ts file="./DropdownWithKebabToggle.tsx"
 
-```ts file="./DropdownAlignmentOnBreakpoints.tsx"
 ```
 
-### Right-positioned menu
-
-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"
-```
+### With groups of items
 
-### Upwards directional menu
+To group sets of related dropdown items together, use a `<DropdownGroup>`. When more than 1 `<DropdownGroup>` is created in a menu, use the `label` and `labelHeadingLevel` properties to assign a name and heading level to each group.
 
-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="./DropdownWithGroups.tsx"
 
-```ts file="./DropdownDirectionUp.tsx"
 ```
 
-### Using document parent element
-
-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. 
+### With item descriptions
 
-Instead, append to ‘parent’ to avoid sacrificing accessibility.
+To provide users with more context about a `<DropdownItem>`, pass a short message to `description` property. As shown in the example below, an item's description will appear below its label.
 
-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="./DropdownWithDescriptions.tsx"
 
-```ts file="./DropdownAppendBodyVsParent.tsx"
 ```

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

@@ -1,59 +1,51 @@
 import React from 'react';
-import { Dropdown, DropdownToggle, DropdownItem, DropdownSeparator } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
 
 export const DropdownBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
 
-  const onToggle = (_event: any, isOpen: boolean) => {
-    setIsOpen(isOpen);
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
   };
 
-  const onFocus = () => {
-    const element = document.getElementById('toggle-basic');
-    element?.focus();
-  };
-
-  const onSelect = () => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
     setIsOpen(false);
-    onFocus();
   };
 
-  const dropdownItems = [
-    <DropdownItem key="link" tooltip="Tooltip for enabled link">
-      Link
-    </DropdownItem>,
-    <DropdownItem key="action" component="button" tooltip="Tooltip for enabled button">
-      Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled href="www.google.com">
-      Disabled link
-    </DropdownItem>,
-    <DropdownItem
-      key="disabled action"
-      isAriaDisabled
-      component="button"
-      tooltip="Tooltip for disabled item"
-      tooltipProps={{ position: 'top' }}
-    >
-      Disabled action
-    </DropdownItem>,
-    <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
-      Separated action
-    </DropdownItem>
-  ];
-
   return (
     <Dropdown
+      isOpen={isOpen}
       onSelect={onSelect}
-      toggle={
-        <DropdownToggle id="toggle-basic" onToggle={onToggle}>
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
+        <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
-        </DropdownToggle>
-      }
-      isOpen={isOpen}
-      dropdownItems={dropdownItems}
-    />
+        </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 → components}/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, MenuToggle } from '@patternfly/react-core';
 
 export const DropdownWithDescriptions: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/{next/components → components}/Dropdown/examples/DropdownWithGroups.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { MenuToggle, Divider } from '@patternfly/react-core';
+import { Dropdown, DropdownGroup, DropdownItem, DropdownList, MenuToggle, Divider } from '@patternfly/react-core';
 
 export const DropdownWithGroups: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -19,8 +18,8 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     <Dropdown
       isOpen={isOpen}
       onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggleRef => (
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={(toggleRef) => (
         <MenuToggle ref={toggleRef} onClick={onToggleClick} isExpanded={isOpen}>
           Dropdown
         </MenuToggle>
@@ -31,7 +30,7 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
           <DropdownItem itemId={0} key="link">
             Link
           </DropdownItem>
-          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={ev => ev.preventDefault()}>
+          <DropdownItem itemId={1} key="action" to="#default-link2" onClick={(ev) => ev.preventDefault()}>
             Action
           </DropdownItem>
         </DropdownList>

package/src/{next/components → components}/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Dropdown, DropdownItem, DropdownList } from '@patternfly/react-core/next';
-import { Divider, MenuToggle } from '@patternfly/react-core';
+import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DropdownWithKebab: React.FunctionComponent = () => {
@@ -46,7 +45,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
         <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
           Disabled action
         </DropdownItem>
-        <Divider key="separator" />,
+        <Divider key="separator" />
         <DropdownItem itemId={4} key="separated link">
           Separated link
         </DropdownItem>

package/src/components/Dropdown/index.ts

@@ -1,12 +1,4 @@
 export * from './Dropdown';
-export * from './DropdownMenu';
-export * from './DropdownWithContext';
-export * from './dropdownConstants';
 export * from './DropdownGroup';
 export * from './DropdownItem';
-export * from './DropdownSeparator';
-export * from './BadgeToggle';
-export * from './KebabToggle';
-export * from './DropdownToggle';
-export * from './DropdownToggleCheckbox';
-export * from './DropdownToggleAction';
+export * from './DropdownList';

package/src/components/DualListSelector/examples/DualListSelector.md

@@ -11,10 +11,15 @@ propComponents:
     'DualListSelectorControlsWrapper',
     'DualListSelectorControl',
     'DualListSelectorTree',
-    'DualListSelectorTreeItemData',
+    'DualListSelectorTreeItemData'
   ]
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
 import AngleDoubleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-left-icon';
 import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
 import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon';
@@ -27,26 +32,31 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 ### Basic
 
 ```ts file="./DualListSelectorBasic.tsx"
+
 ```
 
 ### Basic with tooltips
 
 ```ts file="./DualListSelectorBasicTooltips.tsx"
+
 ```
 
 ### Basic with search
 
 ```ts file="./DualListSelectorBasicSearch.tsx"
+
 ```
 
 ### Using more complex options with actions
 
 ```ts file="./DualListSelectorComplexOptionsActions.tsx"
+
 ```
 
 ### With tree
 
 ```ts file="./DualListSelectorTreeExample.tsx"
+
 ```
 
 ## Composable structure
@@ -76,6 +86,7 @@ The dual list selector can also be built in a composable manner to make customiz
 ### Composable dual list selector
 
 ```ts file="./DualListSelectorComposable.tsx"
+
 ```
 
 ### Composable with drag and drop
@@ -95,9 +106,11 @@ This example only allows reordering the contents of the "chosen" pane with drag
 Note: Keyboard accessibility and screen reader accessibility for the `DragDrop` component are still in development.
 
 ```ts file="DualListSelectorComposableDragDrop.tsx"
+
 ```
 
 ### Composable with tree
 
 ```ts file="DualListSelectorComposableTree.tsx"
+
 ```

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
+import { Button, ButtonVariant, Checkbox, DualListSelector } from '@patternfly/react-core';
 import {
-  Button,
-  ButtonVariant,
-  Checkbox,
-  Dropdown,
-  DropdownItem,
-  DualListSelector,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 import PficonSortCommonAscIcon from '@patternfly/react-icons/dist/esm/icons/pficon-sort-common-asc-icon';
 
 export const DualListSelectorComplexOptionsActions: React.FunctionComponent = () => {
@@ -58,13 +55,13 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     (option as React.ReactElement).props.children.includes(input);
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="secondAction" component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="secondAction" component="button">
       Second Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
 
   const availableOptionsActions = [
@@ -77,7 +74,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <Dropdown
+    <DropdownDeprecated
       toggle={
         <KebabToggle
           isDisabled={isDisabled}
@@ -102,7 +99,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
     >
       <PficonSortCommonAscIcon />
     </Button>,
-    <Dropdown
+    <DropdownDeprecated
       toggle={
         <KebabToggle
           isDisabled={isDisabled}

package/src/components/FileUpload/examples/FileUpload.md

@@ -1,15 +1,16 @@
 ---
-id: File upload
+id: Simple file upload
 cssPrefix: pf-c-file-upload
 propComponents: ['FileUpload', 'FileUploadField']
 section: components
+subsection: file-upload
 ---
 
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 ## Examples
 
-The basic `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
+The `FileUpload` component can accept a file via browse or drag-and-drop, and behaves like a standard form field with its `value` and `onFileInputChange` event that is similar to `<input onChange="...">` prop. The `type` prop determines how the `FileUpload` component behaves upon accepting a file, what type of value it passes to its `onDataChange` event.
 
 ### Text files
 

package/src/components/Form/examples/Form.md

@@ -1,6 +1,7 @@
 ---
 id: Form
 section: components
+subsection: forms
 cssPrefix: pf-c-form
 propComponents:
   [

package/src/components/FormSelect/examples/FormSelect.md

@@ -1,6 +1,7 @@
 ---
 id: Form select
 section: components
+subsection: forms
 cssPrefix: pf-c-form-control
 propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup']
 ouia: true

package/src/components/Hint/examples/Hint.md

@@ -5,14 +5,23 @@ cssPrefix: null
 propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter']
 ---
 
+import {
+Dropdown as DropdownDeprecated,
+DropdownItem as DropdownItemDeprecated,
+DropdownSeparator,
+KebabToggle
+} from '@patternfly/react-core/deprecated';
+
 ## Examples
 
 ### Basic with title
 
 ```ts file="HintBasicWithTitle.tsx"
+
 ```
 
 ### Basic without title
 
 ```ts file="HintBasicWithoutTitle.tsx"
+
 ```

package/src/components/Hint/examples/HintBasicWithTitle.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
+import { Hint, HintTitle, HintBody, HintFooter, Button } from '@patternfly/react-core';
 import {
-  Hint,
-  HintTitle,
-  HintBody,
-  HintFooter,
-  Button,
-  Dropdown,
-  DropdownItem,
+  Dropdown as DropdownDeprecated,
+  DropdownItem as DropdownItemDeprecated,
   DropdownSeparator,
   KebabToggle
-} from '@patternfly/react-core';
+} from '@patternfly/react-core/deprecated';
 
 export const HintBasicWithTitle: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
@@ -23,24 +19,24 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
   };
 
   const dropdownItems = [
-    <DropdownItem key="link">Link</DropdownItem>,
-    <DropdownItem key="action" component="button">
+    <DropdownItemDeprecated key="link">Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="action" component="button">
       Action
-    </DropdownItem>,
-    <DropdownItem key="disabled link" isDisabled>
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled link" isDisabled>
       Disabled Link
-    </DropdownItem>,
-    <DropdownItem key="disabled action" isDisabled component="button">
+    </DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="disabled action" isDisabled component="button">
       Disabled Action
-    </DropdownItem>,
+    </DropdownItemDeprecated>,
     <DropdownSeparator key="separator" />,
-    <DropdownItem key="separated link">Separated Link</DropdownItem>,
-    <DropdownItem key="separated action" component="button">
+    <DropdownItemDeprecated key="separated link">Separated Link</DropdownItemDeprecated>,
+    <DropdownItemDeprecated key="separated action" component="button">
       Separated Action
-    </DropdownItem>
+    </DropdownItemDeprecated>
   ];
   const actions = (
-    <Dropdown
+    <DropdownDeprecated
       onSelect={onSelect}
       toggle={<KebabToggle onToggle={onToggle} id="hint-kebab-toggle" />}
       isOpen={isOpen}