@patternfly/react-core 5.0.0-alpha.98 → 5.0.0-prerelease.1

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

@@ -12,34 +12,45 @@ exports[`With popover opened 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value=""
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <div
+            class="pf-v5-c-form-control"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+            <input
+              aria-invalid="false"
+              aria-label="Date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value=""
             />
-          </svg>
-        </button>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
     <div
@@ -95,15 +106,17 @@ exports[`With popover opened 1`] = `
                 class="pf-v5-c-input-group"
               >
                 <div
-                  class="pf-v5-c-calendar-month__header-month"
+                  class="pf-v5-c-input-group__item pf-m-fill"
                 >
-                  <span
-                    hidden=""
-                    id="unique_id_mock"
+                  <div
+                    class="pf-v5-c-calendar-month__header-month"
                   >
-                    Month
-                  </span>
-                  <div>
+                    <span
+                      hidden=""
+                      id="unique_id_mock"
+                    >
+                      Month
+                    </span>
                     <button
                       aria-expanded="false"
                       class="pf-v5-c-menu-toggle"
@@ -138,18 +151,25 @@ exports[`With popover opened 1`] = `
                   </div>
                 </div>
                 <div
-                  class="pf-v5-c-calendar-month__header-year"
+                  class="pf-v5-c-input-group__item"
                 >
-                  <input
-                    aria-invalid="false"
-                    aria-label="Select year"
-                    class="pf-v5-c-form-control"
-                    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
-                    data-ouia-component-type="PF4/TextInput"
-                    data-ouia-safe="true"
-                    type="number"
-                    value="1969"
-                  />
+                  <div
+                    class="pf-v5-c-calendar-month__header-year"
+                  >
+                    <div
+                      class="pf-v5-c-form-control"
+                    >
+                      <input
+                        aria-invalid="false"
+                        aria-label="Select year"
+                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                        data-ouia-component-type="PF4/TextInput"
+                        data-ouia-safe="true"
+                        type="number"
+                        value="1969"
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
               <div
@@ -755,38 +775,49 @@ exports[`disabled date picker 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="disabled date picker"
-          class="pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          disabled=""
-          placeholder="YYYY-MM-DD"
-          type="text"
-          value="2020-11-20"
-        />
-        <button
-          aria-label="Toggle date picker"
-          class="pf-v5-c-button pf-m-control"
-          disabled=""
-          type="button"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <svg
-            aria-hidden="true"
-            class="pf-v5-svg"
-            fill="currentColor"
-            role="img"
-            viewBox="0 0 448 512"
+          <div
+            class="pf-v5-c-form-control pf-m-disabled"
           >
-            <path
-              d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+            <input
+              aria-invalid="false"
+              aria-label="disabled date picker"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              disabled=""
+              placeholder="YYYY-MM-DD"
+              type="text"
+              value="2020-11-20"
             />
-          </svg>
-        </button>
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item"
+        >
+          <button
+            aria-label="Toggle date picker"
+            class="pf-v5-c-button pf-m-control"
+            disabled=""
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              role="img"
+              viewBox="0 0 448 512"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </DocumentFragment>
-`;
+`;

package/src/components/DatePicker/examples/DatePicker.md

@@ -2,9 +2,8 @@
 id: Date picker
 section: components
 subsection: date-and-time
-cssPrefix: pf-c-date-picker
+cssPrefix: pf-v5-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
-beta: true
 ---
 
 ## Examples

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -6,8 +6,10 @@ export const DatePickerControlled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(initialValue);
   return (
     <React.Fragment>
-      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
       <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
+      <br />
+      <br />
+      <Button onClick={() => setValue(initialValue)}>Reset date</Button>
     </React.Fragment>
   );
 };

package/src/components/DatePicker/examples/DatePickerControlledCalendar.tsx

@@ -10,8 +10,10 @@ export const DatePickerControlledCalendar: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Button onClick={onClick}>Toggle calendar</Button>
       <DatePicker ref={dateRef} />
+      <br />
+      <br />
+      <Button onClick={onClick}>Toggle calendar</Button>
     </React.Fragment>
   );
 };

package/src/components/DescriptionList/DescriptionListDescription.tsx

@@ -15,7 +15,7 @@ export const DescriptionListDescription: React.FunctionComponent<DescriptionList
   ...props
 }: DescriptionListDescriptionProps) => (
   <dd className={css(styles.descriptionListDescription, className)} {...props}>
-    <div className={'pf-c-description-list__text'}>{children}</div>
+    <div className={css(styles.descriptionListText)}>{children}</div>
   </dd>
 );
 DescriptionListDescription.displayName = 'DescriptionListDescription';

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

@@ -72,7 +72,7 @@ exports[`Description List Description 1`] = `
     class="pf-v5-c-description-list__description custom-description-list-description"
   >
     <div
-      class="pf-c-description-list__text"
+      class="pf-v5-c-description-list__text"
     >
       test
     </div>

package/src/components/DescriptionList/examples/DescriptionList.md

@@ -1,7 +1,7 @@
 ---
 id: 'Description list'
 section: components
-cssPrefix: 'pf-c-description-list'
+cssPrefix: 'pf-v5-c-description-list'
 propComponents:
   [
     'DescriptionList',

package/src/components/Divider/examples/Divider.md

@@ -1,7 +1,7 @@
 ---
 id: Divider
 section: components
-cssPrefix: pf-c-divider
+cssPrefix: pf-v5-c-divider
 propComponents: ['Divider']
 ---
 

package/src/components/Drawer/examples/Drawer.md

@@ -1,6 +1,6 @@
 ---
 id: Drawer
-cssPrefix: pf-c-drawer
+cssPrefix: pf-v5-c-drawer
 propComponents:
   [
     Drawer,

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,13 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
 }
 
+export interface DropdownToggleProps {
+  /**  Dropdown toggle node. */
+  toggleNode: React.ReactNode;
+  /** Reference to the toggle. */
+  toggleRef?: React.RefObject<HTMLButtonElement>;
+}
+
 /**
  * See the Menu documentation for additional props that may be passed.
  */
@@ -27,19 +34,19 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   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;
+  /** Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. */
+  toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
   /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
+  /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
+  shouldFocusToggleOnSelect?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (
-    event?: React.MouseEvent<Element, MouseEvent>,
-    itemId?: string | number,
-    toggleRef?: React.RefObject<any>
-  ) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: 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. */
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
+  /** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
   /** Indicates if the menu should be without the outer box-shadow. */
   isPlain?: boolean;
   /** Indicates if the menu should be scrollable. */
@@ -62,6 +69,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   isOpen,
   toggle,
+  shouldFocusToggleOnSelect = false,
   onOpenChange,
   isPlain,
   isScrollable,
@@ -70,13 +78,19 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   ouiaSafe = true,
   zIndex = 9999,
   popperProps,
+  onOpenChangeKeys = ['Escape', 'Tab'],
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
+  const localToggleRef = React.useRef<HTMLButtonElement>();
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const toggleRef =
+    typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
+      ? localToggleRef
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -85,8 +99,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
         onOpenChange &&
         (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node))
       ) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
-          event.preventDefault();
+        if (onOpenChangeKeys.includes(event.key)) {
           onOpenChange(false);
           toggleRef.current?.focus();
         }
@@ -119,13 +132,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, onOpenChange]);
+  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
 
   const menu = (
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId, toggleRef)}
+      onSelect={(event, value) => {
+        onSelect && onSelect(event, value);
+        shouldFocusToggleOnSelect && toggleRef.current.focus();
+      }}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}
@@ -136,7 +152,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   );
   return (
     <Popper
-      trigger={toggle(toggleRef)}
+      trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
       popper={menu}
       popperRef={menuRef}

package/src/components/Dropdown/DropdownItem.tsx

@@ -18,7 +18,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   /** Render item as disabled option */
   isDisabled?: boolean;
   /** Identifies the component in the dropdown onSelect callback */
-  itemId?: any;
+  value?: any;
   /** Callback for item click */
   onClick?: (event?: any) => void;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -27,12 +27,12 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaSafe?: boolean;
 }
 
-const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
+const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   children,
   className,
   description,
   isDisabled,
-  itemId,
+  value,
   onClick,
   ouiaId,
   ouiaSafe,
@@ -42,12 +42,12 @@ const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
   return (
     <MenuItem
-      ref={innerRef}
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
-      itemId={itemId}
+      itemId={value}
       onClick={onClick}
+      ref={innerRef}
       {...ouiaProps}
       {...props}
     >
@@ -55,8 +55,11 @@ const DropdownItemBase: React.FunctionComponent<MenuItemProps> = ({
     </MenuItem>
   );
 };
-export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<any>) => (
-  <DropdownItemBase {...props} innerRef={ref} />
-));
+
+export const DropdownItem = React.forwardRef(
+  (props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
+    <DropdownItemBase {...props} innerRef={ref} />
+  )
+);
 
 DropdownItem.displayName = 'DropdownItem';

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

@@ -2,8 +2,17 @@
 id: Dropdown
 section: components
 subsection: menus
-cssPrefix: pf-c-menu
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle', 'DropdownPopperProps']
+cssPrefix: pf-v5-c-menu
+propComponents:
+  [
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownItem',
+    'DropdownList',
+    'MenuToggle',
+    'DropdownToggleProps',
+    'DropdownPopperProps'
+  ]
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

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

@@ -8,15 +8,10 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -30,13 +25,14 @@ export const DropdownBasic: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       ouiaId="BasicDropdown"
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="action">
+        <DropdownItem value={0} key="action">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           to="#default-link2"
           // Prevent the default onClick functionality for example purposes
@@ -44,17 +40,17 @@ export const DropdownBasic: React.FunctionComponent = () => {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled key="disabled action">
+        <DropdownItem value={2} isDisabled key="disabled action">
           Disabled Action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem itemId={4} key="separated action">
+        <DropdownItem value={4} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem itemId={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

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

@@ -8,15 +8,10 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -29,13 +24,14 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
-        <DropdownItem itemId={0} key="action" description="This is a description">
+        <DropdownItem value={0} key="action" description="This is a description">
           Action
         </DropdownItem>
         <DropdownItem
-          itemId={1}
+          value={1}
           key="link"
           description="This is a very long description that describes the menu item"
           to="#default-link2"
@@ -44,10 +40,10 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
         >
           Link
         </DropdownItem>
-        <DropdownItem itemId={2} isDisabled description="Disabled link description" key="disabled action">
+        <DropdownItem value={2} isDisabled description="Disabled link description" key="disabled action">
           Disabled action
         </DropdownItem>
-        <DropdownItem itemId={3} isDisabled description="This is a description" key="disabled link" to="#default-link4">
+        <DropdownItem value={3} isDisabled description="This is a description" key="disabled link" to="#default-link4">
           Disabled link
         </DropdownItem>
       </DropdownList>

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

@@ -16,15 +16,10 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -37,14 +32,15 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownGroup>
         <DropdownList>
-          <DropdownItem itemId={0} key="action">
+          <DropdownItem value={0} key="action">
             Action
           </DropdownItem>
           <DropdownItem
-            itemId={1}
+            value={1}
             key="link"
             to="#default-link2"
             // Prevent the default onClick functionality for example purposes
@@ -57,10 +53,10 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
       <Divider component="li" />
       <DropdownGroup label="Group 2" labelHeadingLevel="h3">
         <DropdownList>
-          <DropdownItem itemId={2} key="group2 action">
+          <DropdownItem value={2} key="group2 action">
             Group 2 action
           </DropdownItem>
-          <DropdownItem itemId={3} key="group2 link" to="#default-link4" onClick={(ev: any) => ev.preventDefault()}>
+          <DropdownItem value={3} key="group2 link" to="#default-link4" onClick={(ev: any) => ev.preventDefault()}>
             Group 2 link
           </DropdownItem>
         </DropdownList>
@@ -68,10 +64,10 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
       <Divider />
       <DropdownGroup label="Group 3" labelHeadingLevel="h3">
         <DropdownList>
-          <DropdownItem itemId={4} key="group3 action">
+          <DropdownItem value={4} key="group3 action">
             Group 3 action
           </DropdownItem>
-          <DropdownItem itemId={5} key="group3 link" to="#default-link6" onClick={(ev: any) => ev.preventDefault()}>
+          <DropdownItem value={5} key="group3 link" to="#default-link6" onClick={(ev: any) => ev.preventDefault()}>
             Group 3 link
           </DropdownItem>
         </DropdownList>