From d57e8a6a542ebcaeb033c01ffc4274c6c8194c5e Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 24 May 2023 08:37:33 -0400
Subject: [PATCH 1/2] feat(Select,Dropdown): renamed itemId prop to value

---
 .../CalendarMonth/CalendarMonth.tsx           | 28 ++++----
 .../components/Form/examples/FormState.tsx    | 10 +--
 .../examples/LoginPageLanguageSelect.tsx      | 14 ++--
 .../src/components/Select/Select.tsx          |  8 +--
 .../src/components/Select/SelectOption.tsx    |  5 +-
 .../Select/examples/SelectBasic.tsx           | 12 ++--
 .../Select/examples/SelectCheckbox.tsx        | 18 ++---
 .../Select/examples/SelectFooter.tsx          | 12 ++--
 .../Select/examples/SelectGrouped.tsx         | 18 ++---
 .../Select/examples/SelectMultiTypeahead.tsx  | 32 ++++-----
 .../examples/SelectMultiTypeaheadCheckbox.tsx | 34 +++++-----
 .../SelectMultiTypeaheadCreatable.tsx         | 38 +++++------
 .../examples/SelectOptionVariations.tsx       | 18 ++---
 .../Select/examples/SelectTypeahead.tsx       | 34 +++++-----
 .../examples/SelectTypeaheadCreatable.tsx     | 40 +++++------
 .../Select/examples/SelectViewMore.tsx        | 34 +++++-----
 .../ToolbarComponentManagedToggleGroups.tsx   | 12 ++--
 .../ToolbarConsumerManagedToggleGroups.tsx    | 12 ++--
 .../ToolbarCustomChipGroupContent.tsx         | 58 ++++------------
 .../Toolbar/examples/ToolbarGroups.tsx        | 30 ++++----
 .../Toolbar/examples/ToolbarStacked.tsx       |  4 +-
 .../Toolbar/examples/ToolbarWithFilters.tsx   | 14 ++--
 .../Tooltip/examples/TooltipOptions.tsx       | 57 ++++++++++------
 packages/react-core/src/demos/Card/Card.md    | 68 ++++++++++++++-----
 packages/react-core/src/demos/CardDemos.md    | 30 ++++----
 .../CustomMenus/examples/ActionsMenuDemo.tsx  | 20 +++---
 .../CustomMenus/examples/DateSelectDemo.tsx   | 12 ++--
 .../CustomMenus/examples/OptionsMenuDemo.tsx  | 14 ++--
 packages/react-core/src/demos/Toolbar.md      |  2 +-
 .../Table/examples/TableSortableCustom.tsx    | 31 +++------
 .../examples/LegacyTableSortableCustom.tsx    | 41 ++++-------
 packages/react-table/src/docs/demos/Table.md  | 56 +++++++--------
 .../src/docs/demos/table-demos/Compact.jsx    | 28 ++++----
 .../demos/table-demos/CompoundExpansion.jsx   |  8 +--
 .../demos/table-demos/SortableResponsive.jsx  | 28 +++-----
 .../table-demos/StaticBottomPagination.jsx    | 26 ++++---
 36 files changed, 454 insertions(+), 452 deletions(-)

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index e312b83bca4..4678274d6a6 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -106,7 +106,7 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
       const date = new Date(firstDayOfWeek);
       week.push({
         date,
-        isValid: validators.every(validator => validator(date))
+        isValid: validators.every((validator) => validator(date))
       });
       firstDayOfWeek.setDate(firstDayOfWeek.getDate() + 1);
     }
@@ -129,10 +129,10 @@ const today = new Date();
 export const CalendarMonth = ({
   date: dateProp,
   locale = undefined,
-  monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }),
-  weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }),
-  longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }),
-  dayFormat = date => date.getDate(),
+  monthFormat = (date) => date.toLocaleDateString(locale, { month: 'long' }),
+  weekdayFormat = (date) => date.toLocaleDateString(locale, { weekday: 'narrow' }),
+  longWeekdayFormat = (date) => date.toLocaleDateString(locale, { weekday: 'long' }),
+  dayFormat = (date) => date.getDate(),
   weekStart = 0, // Use the American Sunday as a default
   onChange = () => {},
   validators = [() => true],
@@ -148,7 +148,9 @@ export const CalendarMonth = ({
   inlineProps,
   ...props
 }: CalendarProps) => {
-  const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
+  const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
+    .map((monthNum) => new Date(1990, monthNum))
+    .map(monthFormat);
   const [isSelectOpen, setIsSelectOpen] = React.useState(false);
   // eslint-disable-next-line prefer-const
   const [focusedDate, setFocusedDate] = React.useState(() => {
@@ -168,7 +170,7 @@ export const CalendarMonth = ({
   const [hiddenMonthId] = React.useState(getUniqueId('hidden-month-span'));
   const [shouldFocus, setShouldFocus] = React.useState(false);
 
-  const isValidated = (date: Date) => validators.every(validator => validator(date));
+  const isValidated = (date: Date) => validators.every((validator) => validator(date));
   const focusedDateValidated = isValidated(focusedDate);
   useEffect(() => {
     if (isValidDate(dateProp) && !isSameDate(focusedDate, dateProp)) {
@@ -224,12 +226,10 @@ export const CalendarMonth = ({
   const nextMonth = addMonth(1);
   const focusedYear = focusedDate.getFullYear();
   const focusedMonth = focusedDate.getMonth();
-  const calendar = React.useMemo(() => buildCalendar(focusedYear, focusedMonth, weekStart, validators), [
-    focusedYear,
-    focusedMonth,
-    weekStart,
-    validators
-  ]);
+  const calendar = React.useMemo(
+    () => buildCalendar(focusedYear, focusedMonth, weekStart, validators),
+    [focusedYear, focusedMonth, weekStart, validators]
+  );
   if (!focusedDateValidated) {
     const toFocus = calendar
       .reduce((acc, cur) => [...acc, ...cur], [])
@@ -299,7 +299,7 @@ export const CalendarMonth = ({
               >
                 <SelectList>
                   {longMonths.map((longMonth, index) => (
-                    <SelectOption key={index} itemId={index} isSelected={longMonth === monthFormatted}>
+                    <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
                       {longMonth}
                     </SelectOption>
                   ))}
diff --git a/packages/react-core/src/components/Form/examples/FormState.tsx b/packages/react-core/src/components/Form/examples/FormState.tsx
index e51d701127f..b3cbd9f53e5 100644
--- a/packages/react-core/src/components/Form/examples/FormState.tsx
+++ b/packages/react-core/src/components/Form/examples/FormState.tsx
@@ -76,15 +76,15 @@ export const FormState = () => {
               </MenuToggle>
             )}
             onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
-            onSelect={(_, itemId) => {
-              setValue('select-id', itemId as string);
+            onSelect={(_, value) => {
+              setValue('select-id', value as string);
               setIsSelectOpen(false);
             }}
           >
             <SelectList>
-              <SelectOption itemId="Option 1">Option 1</SelectOption>
-              <SelectOption itemId="Option 2">Option 2</SelectOption>
-              <SelectOption itemId="Option 3">Option 3</SelectOption>
+              <SelectOption value="Option 1">Option 1</SelectOption>
+              <SelectOption value="Option 2">Option 2</SelectOption>
+              <SelectOption value="Option 3">Option 3</SelectOption>
             </SelectList>
           </Select>
 
diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
index fa82ac9e63f..9606508b16b 100644
--- a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
+++ b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx
@@ -39,25 +39,25 @@ export const LoginPageLanguageSelect: React.FunctionComponent = () => {
 
   const headerUtilsOptions = (
     <SelectList>
-      <SelectOption key={0} itemId={i18n.English}>
+      <SelectOption key={0} value={i18n.English}>
         {i18n.English}
       </SelectOption>
-      <SelectOption key={1} itemId={i18n.Mandarin}>
+      <SelectOption key={1} value={i18n.Mandarin}>
         {i18n.Mandarin}
       </SelectOption>
-      <SelectOption key={2} itemId={i18n.Hindi}>
+      <SelectOption key={2} value={i18n.Hindi}>
         {i18n.Hindi}
       </SelectOption>
-      <SelectOption key={3} itemId={i18n.Spanish}>
+      <SelectOption key={3} value={i18n.Spanish}>
         {i18n.Spanish}
       </SelectOption>
-      <SelectOption key={4} itemId={i18n.Portuguese}>
+      <SelectOption key={4} value={i18n.Portuguese}>
         {i18n.Portuguese}
       </SelectOption>
-      <SelectOption key={5} itemId={i18n.Arabic}>
+      <SelectOption key={5} value={i18n.Arabic}>
         {i18n.Arabic}
       </SelectOption>
-      <SelectOption key={6} itemId={i18n.Bengali}>
+      <SelectOption key={6} value={i18n.Bengali}>
         {i18n.Bengali}
       </SelectOption>
     </SelectList>
diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
index 4a492d812d5..d3f71d5862f 100644
--- a/packages/react-core/src/components/Select/Select.tsx
+++ b/packages/react-core/src/components/Select/Select.tsx
@@ -37,14 +37,14 @@ export interface SelectProps extends MenuProps, OUIAProps {
   className?: string;
   /** Flag to indicate if select is open */
   isOpen?: boolean;
-  /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption. */
+  /** Single select option value for single select menus, or array of select option values for multi select. You can also specify isSelected on the SelectOption. */
   selected?: any | any[];
   /** Select 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: SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
   /** 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 when user selects an option. */
-  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, value?: string | number) => void;
   /** Callback to allow the select component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -135,8 +135,8 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       role={role}
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => {
-        onSelect && onSelect(event, itemId);
+      onSelect={(event, value) => {
+        onSelect && onSelect(event, value);
         shouldFocusToggleOnSelect && toggleRef.current.focus();
       }}
       isPlain={isPlain}
diff --git a/packages/react-core/src/components/Select/SelectOption.tsx b/packages/react-core/src/components/Select/SelectOption.tsx
index 5c941f39e7e..ba050908dd2 100644
--- a/packages/react-core/src/components/Select/SelectOption.tsx
+++ b/packages/react-core/src/components/Select/SelectOption.tsx
@@ -14,7 +14,7 @@ export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
   /** Identifies the component in the Select onSelect callback */
-  itemId?: any;
+  value?: any;
   /** Indicates the option has a checkbox */
   hasCheckbox?: boolean;
   /** Indicates the option is disabled */
@@ -37,9 +37,10 @@ const SelectOptionBase: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
   innerRef,
+  value,
   ...props
 }: SelectOptionProps) => (
-  <MenuItem ref={innerRef} className={css(className)} {...props}>
+  <MenuItem itemId={value} ref={innerRef} className={css(className)} {...props}>
     {children}
   </MenuItem>
 );
diff --git a/packages/react-core/src/components/Select/examples/SelectBasic.tsx b/packages/react-core/src/components/Select/examples/SelectBasic.tsx
index 9a7f56af78c..a149e5d3994 100644
--- a/packages/react-core/src/components/Select/examples/SelectBasic.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectBasic.tsx
@@ -10,11 +10,11 @@ export const SelectBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    setSelected(itemId as string);
+    setSelected(value as string);
     setIsOpen(false);
   };
 
@@ -53,9 +53,9 @@ export const SelectBasic: React.FunctionComponent = () => {
         shouldFocusToggleOnSelect
       >
         <SelectList>
-          <SelectOption itemId="Option 1">Option 1</SelectOption>
-          <SelectOption itemId="Option 2">Option 2</SelectOption>
-          <SelectOption itemId="Option 3">Option 3</SelectOption>
+          <SelectOption value="Option 1">Option 1</SelectOption>
+          <SelectOption value="Option 2">Option 2</SelectOption>
+          <SelectOption value="Option 3">Option 3</SelectOption>
         </SelectList>
       </Select>
     </React.Fragment>
diff --git a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
index c6c2fbe0e85..41525ea1803 100644
--- a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx
@@ -9,14 +9,14 @@ export const SelectCheckbox: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    if (selectedItems.includes(itemId as number)) {
-      setSelectedItems(selectedItems.filter((id) => id !== itemId));
+    if (selectedItems.includes(value as number)) {
+      setSelectedItems(selectedItems.filter((id) => id !== value));
     } else {
-      setSelectedItems([...selectedItems, itemId as number]);
+      setSelectedItems([...selectedItems, value as number]);
     }
   };
 
@@ -47,16 +47,16 @@ export const SelectCheckbox: React.FunctionComponent = () => {
       toggle={toggle}
     >
       <SelectList>
-        <SelectOption hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
+        <SelectOption hasCheckbox value={0} isSelected={selectedItems.includes(0)}>
           Debug
         </SelectOption>
-        <SelectOption hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
+        <SelectOption hasCheckbox value={1} isSelected={selectedItems.includes(1)}>
           Info
         </SelectOption>
-        <SelectOption hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
+        <SelectOption hasCheckbox value={2} isSelected={selectedItems.includes(2)}>
           Warn
         </SelectOption>
-        <SelectOption hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+        <SelectOption hasCheckbox isDisabled value={4} isSelected={selectedItems.includes(4)}>
           Error
         </SelectOption>
       </SelectList>
diff --git a/packages/react-core/src/components/Select/examples/SelectFooter.tsx b/packages/react-core/src/components/Select/examples/SelectFooter.tsx
index 19f14cc8dc6..5172816e5af 100644
--- a/packages/react-core/src/components/Select/examples/SelectFooter.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectFooter.tsx
@@ -24,12 +24,12 @@ export const SelectFooter: React.FunctionComponent = () => {
     </MenuToggle>
   );
 
-  function onSelect(event: React.MouseEvent | undefined, itemId: string | number | undefined) {
-    if (typeof itemId === 'undefined') {
+  function onSelect(event: React.MouseEvent | undefined, value: string | number | undefined) {
+    if (typeof value === 'undefined') {
       return;
     }
 
-    setSelected(itemId.toString());
+    setSelected(value.toString());
   }
 
   return (
@@ -43,9 +43,9 @@ export const SelectFooter: React.FunctionComponent = () => {
       selected={selected}
     >
       <SelectList>
-        <SelectOption itemId="Option 1">Option 1</SelectOption>
-        <SelectOption itemId="Option 2">Option 2</SelectOption>
-        <SelectOption itemId="Option 3">Option 3</SelectOption>
+        <SelectOption value="Option 1">Option 1</SelectOption>
+        <SelectOption value="Option 2">Option 2</SelectOption>
+        <SelectOption value="Option 3">Option 3</SelectOption>
       </SelectList>
       <MenuFooter>
         <Button variant="link" isInline>
diff --git a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
index 03621ee9ffb..81a47422024 100644
--- a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx
@@ -17,11 +17,11 @@ export const SelectGrouped: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    setSelected(itemId as string);
+    setSelected(value as string);
     setIsOpen(false);
   };
 
@@ -52,17 +52,17 @@ export const SelectGrouped: React.FunctionComponent = () => {
     >
       <SelectGroup label="Group 1">
         <SelectList>
-          <SelectOption itemId="Option 1">Option 1</SelectOption>
-          <SelectOption itemId="Option 2">Option 2</SelectOption>
-          <SelectOption itemId="Option 3">Option 3</SelectOption>
+          <SelectOption value="Option 1">Option 1</SelectOption>
+          <SelectOption value="Option 2">Option 2</SelectOption>
+          <SelectOption value="Option 3">Option 3</SelectOption>
         </SelectList>
       </SelectGroup>
       <Divider />
       <SelectGroup label="Group 2">
         <SelectList>
-          <SelectOption itemId="Option 4">Option 4</SelectOption>
-          <SelectOption itemId="Option 5">Option 5</SelectOption>
-          <SelectOption itemId="Option 6">Option 6</SelectOption>
+          <SelectOption value="Option 4">Option 4</SelectOption>
+          <SelectOption value="Option 5">Option 5</SelectOption>
+          <SelectOption value="Option 6">Option 6</SelectOption>
         </SelectList>
       </SelectGroup>
     </Select>
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
index 73f23291e29..c9d92bbc5e0 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -16,12 +16,12 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectMultiTypeahead: React.FunctionComponent = () => {
@@ -45,7 +45,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+          { isDisabled: false, children: `No results found for "${inputValue}"`, value: 'no results' }
         ];
       }
 
@@ -84,7 +84,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+      setActiveItem(`select-multi-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
@@ -98,8 +98,8 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       case 'Enter':
         if (!isOpen) {
           setIsOpen((prevIsOpen) => !prevIsOpen);
-        } else if (isOpen && focusedItem.itemId !== 'no results') {
-          onSelect(focusedItem.itemId as string);
+        } else if (isOpen && focusedItem.value !== 'no results') {
+          onSelect(focusedItem.value as string);
         }
         break;
       case 'Tab':
@@ -123,13 +123,13 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
     setInputValue(value);
   };
 
-  const onSelect = (itemId: string) => {
+  const onSelect = (value: string) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
 
-    if (itemId && itemId !== 'no results') {
+    if (value && value !== 'no results') {
       setSelected(
-        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
+        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
       );
     }
 
@@ -198,10 +198,10 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            key={option.itemId || option.children}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            id={`select-multi-typeahead-${option.itemId.replace(' ', '-')}`}
+            id={`select-multi-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
index b57aa0e8193..045c916511e 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
@@ -14,12 +14,12 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
@@ -44,7 +44,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+          { isDisabled: false, children: `No results found for "${inputValue}"`, value: 'no results' }
         ];
       }
 
@@ -83,7 +83,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-typeahead-checkbox-${focusedItem.itemId.replace(' ', '-')}`);
+      setActiveItem(`select-multi-typeahead-checkbox-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
@@ -97,8 +97,8 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
       case 'Enter':
         if (!isOpen) {
           setIsOpen((prevIsOpen) => !prevIsOpen);
-        } else if (isOpen && focusedItem.itemId !== 'no results') {
-          onSelect(focusedItem.itemId as string);
+        } else if (isOpen && focusedItem.value !== 'no results') {
+          onSelect(focusedItem.value as string);
         }
         break;
       case 'Tab':
@@ -122,13 +122,13 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
     setInputValue(value);
   };
 
-  const onSelect = (itemId: string) => {
+  const onSelect = (value: string) => {
     // eslint-disable-next-line no-console
-    console.log('selected', itemId);
+    console.log('selected', value);
 
-    if (itemId && itemId !== 'no results') {
+    if (value && value !== 'no results') {
       setSelected(
-        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
+        selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
       );
     }
 
@@ -189,11 +189,11 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
         {selectOptions.map((option, index) => (
           <SelectOption
             {...(!option.isDisabled && { hasCheckbox: true })}
-            isSelected={selected.includes(option.itemId)}
-            key={option.itemId || option.children}
+            isSelected={selected.includes(option.value)}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            id={`select-multi-typeahead-${option.itemId.replace(' ', '-')}`}
+            id={`select-multi-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />
diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
index 089e456ac31..a63ac365145 100644
--- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -16,12 +16,12 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
@@ -45,7 +45,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
 
       // When no options are found after filtering, display creation option
       if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: false, children: `Create new option "${inputValue}"`, itemId: 'create' }];
+        newSelectOptions = [{ isDisabled: false, children: `Create new option "${inputValue}"`, value: 'create' }];
       }
 
       // Open the menu when the input value changes and the new value is not empty
@@ -83,7 +83,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-multi-create-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+      setActiveItem(`select-multi-create-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
@@ -97,8 +97,8 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
       case 'Enter':
         if (!isOpen) {
           setIsOpen((prevIsOpen) => !prevIsOpen);
-        } else if (isOpen && focusedItem.itemId !== 'no results') {
-          onSelect(focusedItem.itemId as string);
+        } else if (isOpen && focusedItem.value !== 'no results') {
+          onSelect(focusedItem.value as string);
         }
         break;
       case 'Tab':
@@ -122,11 +122,11 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
     setInputValue(value);
   };
 
-  const onSelect = (itemId: string) => {
-    if (itemId) {
-      if (itemId === 'create') {
-        if (!initialSelectOptions.some((item) => item.itemId === inputValue)) {
-          initialSelectOptions = [...initialSelectOptions, { itemId: inputValue, children: inputValue }];
+  const onSelect = (value: string) => {
+    if (value) {
+      if (value === 'create') {
+        if (!initialSelectOptions.some((item) => item.value === inputValue)) {
+          initialSelectOptions = [...initialSelectOptions, { value: inputValue, children: inputValue }];
         }
         setSelected(
           selected.includes(inputValue)
@@ -136,9 +136,9 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
         setOnCreation(!onCreation);
       } else {
         // eslint-disable-next-line no-console
-        console.log('selected', itemId);
+        console.log('selected', value);
         setSelected(
-          selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
+          selected.includes(value) ? selected.filter((selection) => selection !== value) : [...selected, value]
         );
       }
     }
@@ -208,10 +208,10 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            key={option.itemId || option.children}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            id={`select-multi-create-typeahead-${option.itemId.replace(' ', '-')}`}
+            id={`select-multi-create-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />
diff --git a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
index 8bc3d1d35de..6a1effbe171 100644
--- a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx
@@ -10,11 +10,11 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    setSelected(itemId as string);
+    setSelected(value as string);
     setIsOpen(false);
   };
 
@@ -44,26 +44,26 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
       shouldFocusToggleOnSelect
     >
       <SelectList>
-        <SelectOption itemId="Basic option">Basic option</SelectOption>
-        <SelectOption itemId="Option with description" description="This is a description">
+        <SelectOption value="Basic option">Basic option</SelectOption>
+        <SelectOption value="Option with description" description="This is a description">
           Option with description
         </SelectOption>
         <SelectOption
           to="#"
           // Prevent default clicking functionality for example purposes only
           onClick={(event) => event.preventDefault()}
-          itemId="Option with link"
+          value="Option with link"
           isExternalLink
         >
           Option with link
         </SelectOption>
-        <SelectOption itemId="Option with icon" icon={<BellIcon />}>
+        <SelectOption value="Option with icon" icon={<BellIcon />}>
           Option with icon
         </SelectOption>
-        <SelectOption itemId="Disabled option" isDisabled>
+        <SelectOption value="Disabled option" isDisabled>
           Disabled option
         </SelectOption>
-        <SelectOption itemId="See Menu for additional variations!">See Menu for additional variations!</SelectOption>
+        <SelectOption value="See Menu for additional variations!">See Menu for additional variations!</SelectOption>
       </SelectList>
     </Select>
   );
diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
index 71446f45ddc..8a7ffb04571 100644
--- a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
@@ -14,12 +14,12 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 const initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectBasic: React.FunctionComponent = () => {
@@ -44,7 +44,7 @@ export const SelectBasic: React.FunctionComponent = () => {
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
-          { isDisabled: false, children: `No results found for "${filterValue}"`, itemId: 'no results' }
+          { isDisabled: false, children: `No results found for "${filterValue}"`, value: 'no results' }
         ];
       }
 
@@ -63,14 +63,14 @@ export const SelectBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    if (itemId && itemId !== 'no results') {
-      setInputValue(itemId as string);
+    if (value && value !== 'no results') {
+      setInputValue(value as string);
       setFilterValue('');
-      setSelected(itemId as string);
+      setSelected(value as string);
     }
     setIsOpen(false);
     setFocusedItemIndex(null);
@@ -106,7 +106,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+      setActiveItem(`select-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
@@ -118,7 +118,7 @@ export const SelectBasic: React.FunctionComponent = () => {
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isOpen && focusedItem.itemId !== 'no results') {
+        if (isOpen && focusedItem.value !== 'no results') {
           setInputValue(String(focusedItem.children));
           setFilterValue('');
           setSelected(String(focusedItem.children));
@@ -194,11 +194,11 @@ export const SelectBasic: React.FunctionComponent = () => {
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            key={option.itemId || option.children}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            onClick={() => setSelected(option.itemId)}
-            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
+            onClick={() => setSelected(option.value)}
+            id={`select-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />
diff --git a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
index 4ece55c279d..4eba527f65b 100644
--- a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
@@ -14,12 +14,12 @@ import {
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 let initialSelectOptions: SelectOptionProps[] = [
-  { itemId: 'Alabama', children: 'Alabama' },
-  { itemId: 'Florida', children: 'Florida' },
-  { itemId: 'New Jersey', children: 'New Jersey' },
-  { itemId: 'New Mexico', children: 'New Mexico' },
-  { itemId: 'New York', children: 'New York' },
-  { itemId: 'North Carolina', children: 'North Carolina' }
+  { value: 'Alabama', children: 'Alabama' },
+  { value: 'Florida', children: 'Florida' },
+  { value: 'New Jersey', children: 'New Jersey' },
+  { value: 'New Mexico', children: 'New Mexico' },
+  { value: 'New York', children: 'New York' },
+  { value: 'North Carolina', children: 'North Carolina' }
 ];
 
 export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
@@ -44,7 +44,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
 
       // When no options are found after filtering, display creation option
       if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, itemId: 'create' }];
+        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, value: 'create' }];
       }
 
       // Open the menu when the input value changes and the new value is not empty
@@ -62,23 +62,23 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     // eslint-disable-next-line no-console
 
-    if (itemId) {
-      if (itemId === 'create') {
-        if (!initialSelectOptions.some((item) => item.itemId === filterValue)) {
-          initialSelectOptions = [...initialSelectOptions, { itemId: filterValue, children: filterValue }];
+    if (value) {
+      if (value === 'create') {
+        if (!initialSelectOptions.some((item) => item.value === filterValue)) {
+          initialSelectOptions = [...initialSelectOptions, { value: filterValue, children: filterValue }];
         }
         setSelected(filterValue);
         setOnCreation(!onCreation);
         setFilterValue('');
       } else {
         // eslint-disable-next-line no-console
-        console.log('selected', itemId);
-        setInputValue(itemId as string);
+        console.log('selected', value);
+        setInputValue(value as string);
         setFilterValue('');
-        setSelected(itemId as string);
+        setSelected(value as string);
       }
     }
 
@@ -116,7 +116,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
 
       setFocusedItemIndex(indexToFocus);
       const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
-      setActiveItem(`select-create-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+      setActiveItem(`select-create-typeahead-${focusedItem.value.replace(' ', '-')}`);
     }
   };
 
@@ -129,7 +129,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
       // Select the first available option
       case 'Enter':
         if (isOpen) {
-          onSelect(undefined, focusedItem.itemId as string);
+          onSelect(undefined, focusedItem.value as string);
           setIsOpen((prevIsOpen) => !prevIsOpen);
           setFocusedItemIndex(null);
           setActiveItem(null);
@@ -205,11 +205,11 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
-            key={option.itemId || option.children}
+            key={option.value || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
-            onClick={() => setSelected(option.itemId)}
-            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
+            onClick={() => setSelected(option.value)}
+            id={`select-typeahead-${option.value.replace(' ', '-')}`}
             {...option}
             ref={null}
           />
diff --git a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
index 740a64b1c45..8d10d070f1a 100644
--- a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
+++ b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx
@@ -8,34 +8,34 @@ export const SelectViewMore: React.FunctionComponent = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [selectOptions, setSelectOptions] = React.useState([
-    <SelectOption key={0} itemId="Option 1">
+    <SelectOption key={0} value="Option 1">
       Option 1
     </SelectOption>,
-    <SelectOption key={1} itemId="Option 2">
+    <SelectOption key={1} value="Option 2">
       Option 2
     </SelectOption>,
-    <SelectOption key={2} itemId="Option 3">
+    <SelectOption key={2} value="Option 3">
       Option 3
     </SelectOption>,
-    <SelectOption key={3} itemId="Option 4">
+    <SelectOption key={3} value="Option 4">
       Option 4
     </SelectOption>,
-    <SelectOption key={4} itemId="Option 5">
+    <SelectOption key={4} value="Option 5">
       Option 5
     </SelectOption>,
-    <SelectOption key={5} itemId="Option 6">
+    <SelectOption key={5} value="Option 6">
       Option 6
     </SelectOption>,
-    <SelectOption key={6} itemId="Option 7">
+    <SelectOption key={6} value="Option 7">
       Option 7
     </SelectOption>,
-    <SelectOption key={7} itemId="Option 8">
+    <SelectOption key={7} value="Option 8">
       Option 8
     </SelectOption>,
-    <SelectOption key={8} itemId="Option 9">
+    <SelectOption key={8} value="Option 9">
       Option 9
     </SelectOption>,
-    <SelectOption key={9} itemId="Final Option 10">
+    <SelectOption key={9} value="Final Option 10">
       Final Option 10
     </SelectOption>
   ]);
@@ -73,7 +73,7 @@ export const SelectViewMore: React.FunctionComponent = () => {
 
     setNumOptions(newLength);
     setIsLoading(false);
-    setActiveItem(nextValidItem.props.itemId);
+    setActiveItem(nextValidItem.props.value);
     setVisibleOptions(selectOptions.slice(0, newLength));
   };
 
@@ -88,12 +88,12 @@ export const SelectViewMore: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
 
-    if (itemId !== 'loader') {
-      setSelected(itemId as string);
+    if (value !== 'loader') {
+      setSelected(value as string);
       setIsOpen(false);
       toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected
     }
@@ -127,14 +127,14 @@ export const SelectViewMore: React.FunctionComponent = () => {
         {visibleOptions.map((option) => {
           const props = option.props;
 
-          return <SelectOption key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+          return <SelectOption key={option.key} ref={props.value === activeItem ? activeItemRef : null} {...props} />;
         })}
         {numOptions !== selectOptions.length && (
           <SelectOption
             {...(!isLoading && { isLoadButton: true })}
             {...(isLoading && { isLoading: true })}
             onClick={onViewMoreClick}
-            itemId="loader"
+            value="loader"
             ref={viewMoreRef}
           >
             {isLoading ? <Spinner size="lg" /> : 'View more'}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
index 643ad9b1a79..c69f607ade4 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx
@@ -76,13 +76,15 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
               </MenuToggle>
             )}
             onSelect={onStatusSelect}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
             selected={statusSelected}
             isOpen={statusIsExpanded}
           >
             <SelectList>
               {statusOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
@@ -106,11 +108,13 @@ export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =>
             onSelect={onRiskSelect}
             selected={riskSelected}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             <SelectList>
               {riskOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
index 9c713848e50..7131cc08897 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx
@@ -81,13 +81,15 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
               </MenuToggle>
             )}
             onSelect={onStatusSelect}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
             selected={statusSelected}
             isOpen={statusIsExpanded}
           >
             <SelectList>
               {statusOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
@@ -111,11 +113,13 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
             onSelect={onRiskSelect}
             selected={riskSelected}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             <SelectList>
               {riskOptions.map((option, index) => (
-                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+                <SelectOption key={index} value={option}>
+                  {option}
+                </SelectOption>
               ))}
             </SelectList>
           </Select>
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx
index 66000e42d55..6333cca3f20 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx
@@ -62,35 +62,20 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   const statusMenuItems = (
     <SelectList>
-      <SelectOption
-        hasCheckbox
-        key="statusNew"
-        itemId="New"
-        isSelected={filters.status.includes("New")}
-      >
+      <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
         New
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusPending"
-        itemId="Pending"
-        isSelected={filters.status.includes("Pending")}
-      >
+      <SelectOption hasCheckbox key="statusPending" value="Pending" isSelected={filters.status.includes('Pending')}>
         Pending
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="statusRunning"
-        itemId="Running"
-        isSelected={filters.status.includes("Running")}
-      >
+      <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={filters.status.includes('Running')}>
         Running
       </SelectOption>
       <SelectOption
         hasCheckbox
         key="statusCancelled"
-        itemId="Cancelled"
-        isSelected={filters.status.includes("Cancelled")}
+        value="Cancelled"
+        isSelected={filters.status.includes('Cancelled')}
       >
         Cancelled
       </SelectOption>
@@ -99,28 +84,13 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
 
   const riskMenuItems = (
     <SelectList>
-      <SelectOption
-        hasCheckbox
-        key="riskLow"
-        itemId="Low"
-        isSelected={filters.risk.includes("Low")}
-      >
+      <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
         Low
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskMedium"
-        itemId="Medium"
-        isSelected={filters.risk.includes("Medium")}
-      >
+      <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
         Medium
       </SelectOption>
-      <SelectOption
-        hasCheckbox
-        key="riskHigh"
-        itemId="High"
-        isSelected={filters.risk.includes("High")}
-      >
+      <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
         High
       </SelectOption>
     </SelectList>
@@ -132,7 +102,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.status}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Status"
         >
           <Select
@@ -153,10 +123,10 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
                 {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
               </MenuToggle>
             )}
-            onSelect={(event, selection) => onSelect("Status", event, selection as string)}
+            onSelect={(event, selection) => onSelect('Status', event, selection as string)}
             selected={filters.status}
             isOpen={statusIsExpanded}
-            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}
           >
             {statusMenuItems}
           </Select>
@@ -164,7 +134,7 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
         <ToolbarFilter
           chips={filters.risk}
           deleteChip={(category, chip) => onDelete(category as string, chip as string)}
-          deleteChipGroup={category => onDeleteGroup(category as string)}
+          deleteChipGroup={(category) => onDeleteGroup(category as string)}
           categoryName="Risk"
         >
           <Select
@@ -185,10 +155,10 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
                 {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
               </MenuToggle>
             )}
-            onSelect={(event, selection) => onSelect("Risk", event, selection as string)}
+            onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
             selected={filters.risk}
             isOpen={riskIsExpanded}
-            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
+            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}
           >
             {riskMenuItems}
           </Select>
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
index db0772235d9..728b4cb0810 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx
@@ -29,13 +29,13 @@ export const ToolbarGroups: React.FunctionComponent = () => {
 
   const onToggle = (filterName: string) => {
     switch (filterName) {
-      case "first":
+      case 'first':
         setFirstIsExpanded(!firstIsExpanded);
         break;
-      case "second":
+      case 'second':
         setSecondIsExpanded(!secondIsExpanded);
         break;
-      case "third":
+      case 'third':
         setThirdIsExpanded(!thirdIsExpanded);
         break;
     }
@@ -63,7 +63,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("first")}
+              onClick={() => onToggle('first')}
               isExpanded={firstIsExpanded}
               style={
                 {
@@ -75,13 +75,15 @@ export const ToolbarGroups: React.FunctionComponent = () => {
             </MenuToggle>
           )}
           onSelect={onFirstSelect}
-          onOpenChange={isOpen => setFirstIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setFirstIsExpanded(isOpen)}
           selected={firstSelected}
           isOpen={firstIsExpanded}
         >
           <SelectList>
             {firstOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -91,7 +93,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("second")}
+              onClick={() => onToggle('second')}
               isExpanded={secondIsExpanded}
               style={
                 {
@@ -104,12 +106,14 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           )}
           onSelect={onSecondSelect}
           selected={secondSelected}
-          onOpenChange={isOpen => setSecondIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setSecondIsExpanded(isOpen)}
           isOpen={secondIsExpanded}
         >
           <SelectList>
             {secondOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
@@ -119,7 +123,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
               ref={toggleRef}
-              onClick={() => onToggle("third")}
+              onClick={() => onToggle('third')}
               isExpanded={thirdIsExpanded}
               style={
                 {
@@ -132,12 +136,14 @@ export const ToolbarGroups: React.FunctionComponent = () => {
           )}
           onSelect={onThirdSelect}
           selected={thirdSelected}
-          onOpenChange={isOpen => setThirdIsExpanded(isOpen)}
+          onOpenChange={(isOpen) => setThirdIsExpanded(isOpen)}
           isOpen={thirdIsExpanded}
         >
           <SelectList>
             {thirdOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              <SelectOption key={index} value={option}>
+                {option}
+              </SelectOption>
             ))}
           </SelectList>
         </Select>
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 7329c43489b..754baf73835 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -156,7 +156,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         >
           <SelectList>
             {resourceOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>
+              <SelectOption key={index} value={option}>
                 {option}
               </SelectOption>
             ))}
@@ -189,7 +189,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         >
           <SelectList>
             {statusOptions.map((option, index) => (
-              <SelectOption key={index} itemId={option}>
+              <SelectOption key={index} value={option}>
                 {option}
               </SelectOption>
             ))}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
index ff0e6c2f4d9..0053cbfecdc 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
@@ -89,19 +89,19 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const statusMenuItems = (
     <SelectList>
-      <SelectOption hasCheckbox key="statusNew" itemId="New" isSelected={filters.status.includes('New')}>
+      <SelectOption hasCheckbox key="statusNew" value="New" isSelected={filters.status.includes('New')}>
         New
       </SelectOption>
-      <SelectOption hasCheckbox key="statusPending" itemId="Pending" isSelected={filters.status.includes('Pending')}>
+      <SelectOption hasCheckbox key="statusPending" value="Pending" isSelected={filters.status.includes('Pending')}>
         Pending
       </SelectOption>
-      <SelectOption hasCheckbox key="statusRunning" itemId="Running" isSelected={filters.status.includes('Running')}>
+      <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={filters.status.includes('Running')}>
         Running
       </SelectOption>
       <SelectOption
         hasCheckbox
         key="statusCancelled"
-        itemId="Cancelled"
+        value="Cancelled"
         isSelected={filters.status.includes('Cancelled')}
       >
         Cancelled
@@ -111,13 +111,13 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const riskMenuItems = (
     <SelectList>
-      <SelectOption hasCheckbox key="riskLow" itemId="Low" isSelected={filters.risk.includes('Low')}>
+      <SelectOption hasCheckbox key="riskLow" value="Low" isSelected={filters.risk.includes('Low')}>
         Low
       </SelectOption>
-      <SelectOption hasCheckbox key="riskMedium" itemId="Medium" isSelected={filters.risk.includes('Medium')}>
+      <SelectOption hasCheckbox key="riskMedium" value="Medium" isSelected={filters.risk.includes('Medium')}>
         Medium
       </SelectOption>
-      <SelectOption hasCheckbox key="riskHigh" itemId="High" isSelected={filters.risk.includes('High')}>
+      <SelectOption hasCheckbox key="riskHigh" value="High" isSelected={filters.risk.includes('High')}>
         High
       </SelectOption>
     </SelectList>
diff --git a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
index ea010b2e216..38a6804dbf4 100644
--- a/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
+++ b/packages/react-core/src/components/Tooltip/examples/TooltipOptions.tsx
@@ -1,5 +1,16 @@
 import React from 'react';
-import { Button, Tooltip, Checkbox, Select, SelectList, SelectOption, MenuToggle, MenuToggleElement, TextInput, TooltipPosition } from '@patternfly/react-core';
+import {
+  Button,
+  Tooltip,
+  Checkbox,
+  Select,
+  SelectList,
+  SelectOption,
+  MenuToggle,
+  MenuToggleElement,
+  TextInput,
+  TooltipPosition
+} from '@patternfly/react-core';
 
 export const TooltipOptions: React.FunctionComponent = () => {
   const [trigger, setTrigger] = React.useState(['mouseenter', 'focus']);
@@ -34,7 +45,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: mouseenter"
             isChecked={trigger.includes('mouseenter')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter(t => t !== 'mouseenter');
+              const updatedTrigger = checked ? trigger.concat('mouseenter') : trigger.filter((t) => t !== 'mouseenter');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -45,7 +56,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: focus"
             isChecked={trigger.includes('focus')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter(t => t !== 'focus');
+              const updatedTrigger = checked ? trigger.concat('focus') : trigger.filter((t) => t !== 'focus');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -56,7 +67,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: click"
             isChecked={trigger.includes('click')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('click') : trigger.filter(t => t !== 'click');
+              const updatedTrigger = checked ? trigger.concat('click') : trigger.filter((t) => t !== 'click');
               setIsVisible(false);
               setTimeout(() => setTrigger(updatedTrigger));
             }}
@@ -67,7 +78,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             label="trigger: manual"
             isChecked={trigger.includes('manual')}
             onChange={(_event, checked) => {
-              const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter(t => t !== 'manual');
+              const updatedTrigger = checked ? trigger.concat('manual') : trigger.filter((t) => t !== 'manual');
               setIsVisible(false);
               setTrigger(updatedTrigger);
             }}
@@ -99,7 +110,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
-                onClick={()=>setPositionSelectOpen(!positionSelectOpen)}
+                onClick={() => setPositionSelectOpen(!positionSelectOpen)}
                 isExpanded={positionSelectOpen}
                 style={
                   {
@@ -119,19 +130,19 @@ export const TooltipOptions: React.FunctionComponent = () => {
             selected={position}
           >
             <SelectList>
-              <SelectOption itemId={TooltipPosition.auto}>{TooltipPosition.auto}</SelectOption>
-              <SelectOption itemId={TooltipPosition.top}>{TooltipPosition.top}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottom}>{TooltipPosition.bottom}</SelectOption>
-              <SelectOption itemId={TooltipPosition.left}>{TooltipPosition.left}</SelectOption>
-              <SelectOption itemId={TooltipPosition.right}>{TooltipPosition.right}</SelectOption>
-              <SelectOption itemId={TooltipPosition.topStart}>{TooltipPosition.topStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.topEnd}>{TooltipPosition.topEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottomStart}>{TooltipPosition.bottomStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.bottomEnd}>{TooltipPosition.bottomEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.leftStart}>{TooltipPosition.leftStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.leftEnd}>{TooltipPosition.leftEnd}</SelectOption>
-              <SelectOption itemId={TooltipPosition.rightStart}>{TooltipPosition.rightStart}</SelectOption>
-              <SelectOption itemId={TooltipPosition.rightEnd}>{TooltipPosition.rightEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.auto}>{TooltipPosition.auto}</SelectOption>
+              <SelectOption value={TooltipPosition.top}>{TooltipPosition.top}</SelectOption>
+              <SelectOption value={TooltipPosition.bottom}>{TooltipPosition.bottom}</SelectOption>
+              <SelectOption value={TooltipPosition.left}>{TooltipPosition.left}</SelectOption>
+              <SelectOption value={TooltipPosition.right}>{TooltipPosition.right}</SelectOption>
+              <SelectOption value={TooltipPosition.topStart}>{TooltipPosition.topStart}</SelectOption>
+              <SelectOption value={TooltipPosition.topEnd}>{TooltipPosition.topEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.bottomStart}>{TooltipPosition.bottomStart}</SelectOption>
+              <SelectOption value={TooltipPosition.bottomEnd}>{TooltipPosition.bottomEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.leftStart}>{TooltipPosition.leftStart}</SelectOption>
+              <SelectOption value={TooltipPosition.leftEnd}>{TooltipPosition.leftEnd}</SelectOption>
+              <SelectOption value={TooltipPosition.rightStart}>{TooltipPosition.rightStart}</SelectOption>
+              <SelectOption value={TooltipPosition.rightEnd}>{TooltipPosition.rightEnd}</SelectOption>
             </SelectList>
           </Select>
         </div>
@@ -182,7 +193,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
                 ref={toggleRef}
-                onClick={()=>setFlipSelectOpen(!flipSelectOpen)}
+                onClick={() => setFlipSelectOpen(!flipSelectOpen)}
                 isExpanded={flipSelectOpen}
                 style={
                   {
@@ -195,8 +206,10 @@ export const TooltipOptions: React.FunctionComponent = () => {
             )}
           >
             <SelectList>
-              <SelectOption itemId="flip">flip</SelectOption>
-              <SelectOption itemId="clockwise">['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']</SelectOption>
+              <SelectOption value="flip">flip</SelectOption>
+              <SelectOption value="clockwise">
+                ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']
+              </SelectOption>
             </SelectList>
           </Select>
         </div>
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 0e707461a25..c5669cfbd54 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -443,16 +443,56 @@ class CardViewBasic extends React.Component {
 
     const filterDropdownItems = (
       <SelectList>
-        <SelectOption hasCheckbox key="patternfly" itemId="PatternFly" isSelected={filters.products.includes("PatternFly")}>PatternFly</SelectOption>
-        <SelectOption hasCheckbox key="activemq" itemId="ActiveMQ" isSelected={filters.products.includes("ActiveMQ")}>ActiveMQ</SelectOption>
-        <SelectOption hasCheckbox key="apachespark" itemId="Apache Spark" isSelected={filters.products.includes("Apache Spark")}>Apache Spark</SelectOption>
-        <SelectOption hasCheckbox key="avro" itemId="Avro" isSelected={filters.products.includes("Avro")}>Avro</SelectOption>
-        <SelectOption hasCheckbox key="azureservices" itemId="Azure Services" isSelected={filters.products.includes("Azure Services")}>Azure Services</SelectOption>
-        <SelectOption hasCheckbox key="crypto" itemId="Crypto" isSelected={filters.products.includes("Crypto")}>Crypto</SelectOption>
-        <SelectOption hasCheckbox key="dropbox" itemId="DropBox" isSelected={filters.products.includes("DropBox")}>DropBox</SelectOption>
-        <SelectOption hasCheckbox key="jbossdatagrid" itemId="JBoss Data Grid" isSelected={filters.products.includes("JBoss Data Grid")}>JBoss Data Grid</SelectOption>
-        <SelectOption hasCheckbox key="rest" itemId="REST" isSelected={filters.products.includes("REST")}>REST</SelectOption>
-        <SelectOption hasCheckbox key="swagger" itemId="SWAGGER" isSelected={filters.products.includes("SWAGGER")}>SWAGGER</SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="patternfly"
+          value="PatternFly"
+          isSelected={filters.products.includes('PatternFly')}
+        >
+          PatternFly
+        </SelectOption>
+        <SelectOption hasCheckbox key="activemq" value="ActiveMQ" isSelected={filters.products.includes('ActiveMQ')}>
+          ActiveMQ
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="apachespark"
+          value="Apache Spark"
+          isSelected={filters.products.includes('Apache Spark')}
+        >
+          Apache Spark
+        </SelectOption>
+        <SelectOption hasCheckbox key="avro" value="Avro" isSelected={filters.products.includes('Avro')}>
+          Avro
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="azureservices"
+          value="Azure Services"
+          isSelected={filters.products.includes('Azure Services')}
+        >
+          Azure Services
+        </SelectOption>
+        <SelectOption hasCheckbox key="crypto" value="Crypto" isSelected={filters.products.includes('Crypto')}>
+          Crypto
+        </SelectOption>
+        <SelectOption hasCheckbox key="dropbox" value="DropBox" isSelected={filters.products.includes('DropBox')}>
+          DropBox
+        </SelectOption>
+        <SelectOption
+          hasCheckbox
+          key="jbossdatagrid"
+          value="JBoss Data Grid"
+          isSelected={filters.products.includes('JBoss Data Grid')}
+        >
+          JBoss Data Grid
+        </SelectOption>
+        <SelectOption hasCheckbox key="rest" value="REST" isSelected={filters.products.includes('REST')}>
+          REST
+        </SelectOption>
+        <SelectOption hasCheckbox key="swagger" value="SWAGGER" isSelected={filters.products.includes('SWAGGER')}>
+          SWAGGER
+        </SelectOption>
       </SelectList>
     );
 
@@ -462,11 +502,7 @@ class CardViewBasic extends React.Component {
           aria-label="Products"
           role="menu"
           toggle={(toggleRef) => (
-            <MenuToggle
-              ref={toggleRef}
-              onClick={this.onToolbarDropdownToggle}
-              isExpanded={isLowerToolbarDropdownOpen}
-            >
+            <MenuToggle ref={toggleRef} onClick={this.onToolbarDropdownToggle} isExpanded={isLowerToolbarDropdownOpen}>
               Filter by creator name
               {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
             </MenuToggle>
@@ -576,7 +612,7 @@ class CardViewBasic extends React.Component {
       restIcon,
       swaggerIcon
     };
-    
+
     const filtered =
       filters.products.length > 0
         ? data.filter((card) => {
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index ecdae7ebd28..79a035b8359 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -1277,16 +1277,16 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2556,16 +2556,16 @@ const TrendCard1: React.FunctionComponent = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2753,16 +2753,16 @@ CardLogViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption key="option1" itemId="Last hour">
+      <SelectOption key="option1" value="Last hour">
         Last hour
       </SelectOption>
-      <SelectOption key="option2" itemId="Last 6 hours">
+      <SelectOption key="option2" value="Last 6 hours">
         Last 6 hours
       </SelectOption>
-      <SelectOption key="option3" itemId="Last 24 hours">
+      <SelectOption key="option3" value="Last 24 hours">
         Last 24 hours
       </SelectOption>
-      <SelectOption key="option4" itemId="Last 7 days">
+      <SelectOption key="option4" value="Last 7 days">
         Last 7 days
       </SelectOption>
     </SelectList>
@@ -2887,13 +2887,13 @@ CardEventViewDemo = () => {
 
   const selectItems = (
     <SelectList>
-      <SelectOption itemId="Success" key="option1">
+      <SelectOption value="Success" key="option1">
         Success
       </SelectOption>
-      <SelectOption itemId="Error" key="option2">
+      <SelectOption value="Error" key="option2">
         Error
       </SelectOption>
-      <SelectOption itemId="Warning" key="option3">
+      <SelectOption value="Warning" key="option3">
         Error
       </SelectOption>
     </SelectList>
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
index 92f36364537..7c90fd39cb0 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
@@ -10,15 +10,15 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
   const menuRef = React.useRef<HTMLDivElement>(null);
 
-  const onSelect = (event: React.MouseEvent | undefined, itemId: string | number | undefined) => {
-    if (typeof itemId === 'string' || typeof itemId === 'undefined') {
+  const onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => {
+    if (typeof value === 'string' || typeof value === 'undefined') {
       return;
     }
 
-    if (selectedItems.includes(itemId)) {
-      setSelectedItems(selectedItems.filter((id) => id !== itemId));
+    if (selectedItems.includes(value)) {
+      setSelectedItems(selectedItems.filter((id) => id !== value));
     } else {
-      setSelectedItems([...selectedItems, itemId]);
+      setSelectedItems([...selectedItems, value]);
     }
   };
 
@@ -36,7 +36,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       // eslint-disable-next-line no-console
-      onActionClick={(event, itemId, actionId) => console.log(`clicked on ${itemId} - ${actionId}`)}
+      onActionClick={(event, value, actionId) => console.log(`clicked on ${value} - ${actionId}`)}
       onSelect={onSelect}
       onOpenChange={(isOpen) => setIsOpen(isOpen)}
     >
@@ -54,7 +54,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
               />
             }
             description="This is a description"
-            itemId={0}
+            value={0}
           >
             Item 1
           </SelectOption>
@@ -63,14 +63,14 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
             isSelected={selectedItems.includes(1)}
             actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
             description="This is a description"
-            itemId={1}
+            value={1}
           >
             Item 2
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(2)}
             actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
-            itemId={2}
+            value={2}
           >
             Item 3
           </SelectOption>
@@ -78,7 +78,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
             isSelected={selectedItems.includes(3)}
             actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
             description="This is a description"
-            itemId={3}
+            value={3}
           >
             Item 4
           </SelectOption>
diff --git a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
index 63cb9077eee..2a5bd4625fd 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx
@@ -67,17 +67,17 @@ export const DateSelectDemo: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       ref={menuRef}
-      onSelect={(_ev, itemId) => {
-        setSelected(itemId as number);
+      onSelect={(_ev, value) => {
+        setSelected(value as number);
         setIsOpen(false);
       }}
       selected={selected}
     >
       <SelectList>
-        <SelectOption itemId={0}>Today</SelectOption>
-        <SelectOption itemId={1}>Yesterday</SelectOption>
-        <SelectOption itemId={2}>Last 7 days</SelectOption>
-        <SelectOption itemId={3}>Last 14 days</SelectOption>
+        <SelectOption value={0}>Today</SelectOption>
+        <SelectOption value={1}>Yesterday</SelectOption>
+        <SelectOption value={2}>Last 7 days</SelectOption>
+        <SelectOption value={3}>Last 14 days</SelectOption>
       </SelectList>
     </Select>
   );
diff --git a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
index a0cc9fa4372..9174e8163e4 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx
@@ -22,22 +22,22 @@ export const OptionsMenuDemo: React.FunctionComponent = () => {
       ref={menuRef}
       id="options-menu"
       selected={selected}
-      onSelect={(_ev, itemId) => itemId && setSelected(itemId.toString())}
+      onSelect={(_ev, value) => value && setSelected(value.toString())}
     >
       <SelectList>
-        <SelectOption itemId="0" isSelected={selected === '0'}>
+        <SelectOption value="0" isSelected={selected === '0'}>
           Option 1
         </SelectOption>
-        <SelectOption itemId="1" isSelected={selected === '1'} isDisabled>
+        <SelectOption value="1" isSelected={selected === '1'} isDisabled>
           Disabled Option
         </SelectOption>
         <Divider key="group1-divider" />
         <SelectGroup label="Group 1">
           <SelectList>
-            <SelectOption itemId="2" isSelected={selected === '2'}>
+            <SelectOption value="2" isSelected={selected === '2'}>
               Option 1
             </SelectOption>
-            <SelectOption itemId="3" isSelected={selected === '3'}>
+            <SelectOption value="3" isSelected={selected === '3'}>
               Option 2
             </SelectOption>
           </SelectList>
@@ -45,10 +45,10 @@ export const OptionsMenuDemo: React.FunctionComponent = () => {
         <Divider key="group2-divider" />
         <SelectGroup label="Group 2">
           <SelectList>
-            <SelectOption itemId="4" isSelected={selected === '4'}>
+            <SelectOption value="4" isSelected={selected === '4'}>
               Option 1
             </SelectOption>
-            <SelectOption itemId="5" isSelected={selected === '5'}>
+            <SelectOption value="5" isSelected={selected === '5'}>
               Option 2
             </SelectOption>
           </SelectList>
diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
index 6d93be33e0b..9ad7feeaf9f 100644
--- a/packages/react-core/src/demos/Toolbar.md
+++ b/packages/react-core/src/demos/Toolbar.md
@@ -315,7 +315,7 @@ class ConsoleLogViewerToolbar extends React.Component {
     const selectDropdownContent = (
       <SelectList>
         {Object.entries(this.firstOptions).map(([value, { type }]) => (
-          <SelectOption key={value} hasCheckbox itemId={value} isSelected={containerSelected === value}>
+          <SelectOption key={value} hasCheckbox value={value} isSelected={containerSelected === value}>
             <Badge key={value}>{type}</Badge>
             {` ${value}`}
           </SelectOption>
diff --git a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
index b2429484928..ba56bc0a260 100644
--- a/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
@@ -101,13 +101,14 @@ export const TableSortableCustom: React.FunctionComponent = () => {
             <Select
               isOpen={isSortDropdownOpen}
               selected={[activeSortDirection, activeSortIndex]}
-              onOpenChange={isOpen => setIsSortDropdownOpen(isOpen)}
-              onSelect={(event, itemId) => {
-                if (itemId === 'asc' || itemId === 'desc') {
-                  setActiveSortDirection(itemId as 'desc' | 'asc');
+              onOpenChange={(isOpen) => setIsSortDropdownOpen(isOpen)}
+              onSelect={(event, value) => {
+                if (value === 'asc' || value === 'desc') {
+                  setActiveSortDirection(value as 'desc' | 'asc');
                 } else {
-                  setActiveSortIndex(itemId as number);
-                  setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');                }
+                  setActiveSortIndex(value as number);
+                  setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');
+                }
               }}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                 <MenuToggle
@@ -124,11 +125,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
               <SelectGroup label="Sort column">
                 <SelectList>
                   {Object.values(columnNames).map((column, columnIndex) => (
-                    <SelectOption
-                      key={column}
-                      itemId={columnIndex}
-                      isSelected={activeSortIndex === columnIndex}
-                    >
+                    <SelectOption key={column} value={columnIndex} isSelected={activeSortIndex === columnIndex}>
                       {column}
                     </SelectOption>
                   ))}
@@ -136,18 +133,10 @@ export const TableSortableCustom: React.FunctionComponent = () => {
               </SelectGroup>
               <SelectGroup label="Sort direction">
                 <SelectList>
-                  <SelectOption
-                    isSelected={activeSortDirection === 'asc'}
-                    itemId="asc"
-                    key="ascending"
-                  >
+                  <SelectOption isSelected={activeSortDirection === 'asc'} value="asc" key="ascending">
                     Ascending
                   </SelectOption>
-                  <SelectOption
-                    isSelected={activeSortDirection === 'desc'}
-                    itemId="desc"
-                    key="descending"
-                  >
+                  <SelectOption isSelected={activeSortDirection === 'desc'} value="desc" key="descending">
                     Descending
                   </SelectOption>
                 </SelectList>
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
index dcfe444f450..61657e23541 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
@@ -1,13 +1,7 @@
 import React from 'react';
 import { sortable, info } from '@patternfly/react-table';
 import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
-import {
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  MenuToggle,
-  MenuToggleElement
-} from '@patternfly/react-core';
+import { Toolbar, ToolbarContent, ToolbarItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import {
   Select as NewSelect,
   SelectGroup as NewSelectGroup,
@@ -111,7 +105,7 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
       ]
     }
   ];
-  const rows: TableProps['rows'] = sortedRepositories.map(repo => [
+  const rows: TableProps['rows'] = sortedRepositories.map((repo) => [
     repo.name,
     repo.branches,
     repo.prs,
@@ -127,13 +121,14 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
             <NewSelect
               isOpen={isSortDropdownOpen}
               selected={[activeSortDirection, activeSortIndex]}
-              onOpenChange={isOpen => setIsSortDropdownOpen(isOpen)}
-              onSelect={(event, itemId) => {
-                if (itemId === 'asc' || itemId === 'desc') {
-                  setActiveSortDirection(itemId as 'desc' | 'asc');
+              onOpenChange={(isOpen) => setIsSortDropdownOpen(isOpen)}
+              onSelect={(event, value) => {
+                if (value === 'asc' || value === 'desc') {
+                  setActiveSortDirection(value as 'desc' | 'asc');
                 } else {
-                  setActiveSortIndex(itemId as number);
-                  setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');                }
+                  setActiveSortIndex(value as number);
+                  setActiveSortDirection(activeSortDirection !== null ? activeSortDirection : 'asc');
+                }
               }}
               toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
                 <MenuToggle
@@ -150,11 +145,7 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
               <NewSelectGroup label="Sort column">
                 <NewSelectList>
                   {Object.values(columnNames).map((column, columnIndex) => (
-                    <NewSelectOption
-                      key={column}
-                      itemId={columnIndex}
-                      isSelected={activeSortIndex === columnIndex}
-                    >
+                    <NewSelectOption key={column} value={columnIndex} isSelected={activeSortIndex === columnIndex}>
                       {column}
                     </NewSelectOption>
                   ))}
@@ -162,18 +153,10 @@ export const LegacyTableSortableCustom: React.FunctionComponent = () => {
               </NewSelectGroup>
               <NewSelectGroup label="Sort direction">
                 <NewSelectList>
-                  <NewSelectOption
-                    isSelected={activeSortDirection === 'asc'}
-                    itemId="asc"
-                    key="ascending"
-                  >
+                  <NewSelectOption isSelected={activeSortDirection === 'asc'} value="asc" key="ascending">
                     Ascending
                   </NewSelectOption>
-                  <NewSelectOption
-                    isSelected={activeSortDirection === 'desc'}
-                    itemId="desc"
-                    key="descending"
-                  >
+                  <NewSelectOption isSelected={activeSortDirection === 'desc'} value="desc" key="descending">
                     Descending
                   </NewSelectOption>
                 </NewSelectList>
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 1539ef97034..f9395f4bce2 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -972,9 +972,9 @@ class FilterTableDemo extends React.Component {
     const { isCategoryDropdownOpen, currentCategory } = this.state;
 
     const categoryMenuItems = [
-      <SelectOption key="cat1" itemId="Location">Location</SelectOption>,
-      <SelectOption key="cat2" itemId="Name">Name</SelectOption>,
-      <SelectOption key="cat3" itemId="Status">Status</SelectOption>
+      <SelectOption key="cat1" value="Location">Location</SelectOption>,
+      <SelectOption key="cat2" value="Name">Name</SelectOption>,
+      <SelectOption key="cat3" value="Status">Status</SelectOption>
     ];
 
     return (
@@ -1010,17 +1010,17 @@ class FilterTableDemo extends React.Component {
     const { currentCategory, isFilterDropdownOpen, inputValue, filters } = this.state;
 
     const locationMenuItems = [
-      <SelectOption key="raleigh" itemId="Raleigh">Raleigh</SelectOption>,
-      <SelectOption key="san francisco" itemId="San Francisco">San Francisco</SelectOption>,
-      <SelectOption key="boston" itemId="Boston">Boston</SelectOption>,
-      <SelectOption key="atlanta" itemId="Atlanta">Atlanta</SelectOption>,
+      <SelectOption key="raleigh" value="Raleigh">Raleigh</SelectOption>,
+      <SelectOption key="san francisco" value="San Francisco">San Francisco</SelectOption>,
+      <SelectOption key="boston" value="Boston">Boston</SelectOption>,
+      <SelectOption key="atlanta" value="Atlanta">Atlanta</SelectOption>,
     ];
 
     const statusMenuItems = [
       <SelectOption
         hasCheckbox
         key="statusRunning"
-        itemId="Running"
+        value="Running"
         isSelected={filters.status.includes("Running")}
       >
         Running
@@ -1028,7 +1028,7 @@ class FilterTableDemo extends React.Component {
       <SelectOption
         hasCheckbox
         key="statusStopped"
-        itemId="Stopped"
+        value="Stopped"
         isSelected={filters.status.includes("Stopped")}
       >
         Stopped
@@ -1036,7 +1036,7 @@ class FilterTableDemo extends React.Component {
       <SelectOption
         hasCheckbox
         key="statusDown"
-        itemId="Down"
+        value="Down"
         isSelected={filters.status.includes("Down")}
       >
         Down
@@ -1044,7 +1044,7 @@ class FilterTableDemo extends React.Component {
       <SelectOption
         hasCheckbox
         key="statusDegraded"
-        itemId="Degraded"
+        value="Degraded"
         isSelected={filters.status.includes("Degraded")}
       >
         Degraded
@@ -1052,7 +1052,7 @@ class FilterTableDemo extends React.Component {
       <SelectOption
         hasCheckbox
         key="statusMaint"
-        itemId="Needs maintenance"
+        value="Needs maintenance"
         isSelected={filters.status.includes("Needs maintenance")}
       >
         Needs maintenance
@@ -1320,25 +1320,25 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 class ComplexPaginationTableDemo extends React.Component {
   constructor(props) {
     super(props);
-    this.columns = { 
+    (this.columns = {
       firstColumn: 'First column',
       secondColumn: 'Second column',
       thirdColumn: 'Third column'
-    },
-    this.defaultRows = [
-       { firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' },
-       { firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' },
-       { firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' },
-       { firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' },
-       { firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' },
-       { firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' },
-       { firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' },
-       { firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' },
-       { firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' },
-       { firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' },
-       { firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' },
-       { firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' }
-    ];
+    }),
+      (this.defaultRows = [
+        { firstColumn: 'Row 1 column 1', secondColumn: 'Row 1 column 2', thirdColumn: 'Row 1 column 3' },
+        { firstColumn: 'Row 2 column 1', secondColumn: 'Row 2 column 2', thirdColumn: 'Row 2 column 3' },
+        { firstColumn: 'Row 3 column 1', secondColumn: 'Row 3 column 2', thirdColumn: 'Row 3 column 3' },
+        { firstColumn: 'Row 4 column 1', secondColumn: 'Row 4 column 2', thirdColumn: 'Row 4 column 3' },
+        { firstColumn: 'Row 5 column 1', secondColumn: 'Row 5 column 2', thirdColumn: 'Row 5 column 3' },
+        { firstColumn: 'Row 6 column 1', secondColumn: 'Row 6 column 2', thirdColumn: 'Row 6 column 3' },
+        { firstColumn: 'Row 7 column 1', secondColumn: 'Row 7 column 2', thirdColumn: 'Row 7 column 3' },
+        { firstColumn: 'Row 8 column 1', secondColumn: 'Row 8 column 2', thirdColumn: 'Row 8 column 3' },
+        { firstColumn: 'Row 9 column 1', secondColumn: 'Row 9 column 2', thirdColumn: 'Row 9 column 3' },
+        { firstColumn: 'Row 10 column 1', secondColumn: 'Row 10 column 2', thirdColumn: 'Row 10 column 3' },
+        { firstColumn: 'Row 11 column 1', secondColumn: 'Row 11 column 2', thirdColumn: 'Row 11 column 3' },
+        { firstColumn: 'Row 12 column 1', secondColumn: 'Row 12 column 2', thirdColumn: 'Row 12 column 3' }
+      ]);
     this.defaultPerPage = 10;
     this.state = {
       perPage: this.defaultPerPage,
diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.jsx b/packages/react-table/src/docs/demos/table-demos/Compact.jsx
index f86f97ef685..7cfab0a4116 100644
--- a/packages/react-table/src/docs/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/Compact.jsx
@@ -7,7 +7,7 @@ import {
   Pagination,
   PageSection,
   Select,
-  SelectOptionm,
+  SelectOption,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -57,23 +57,27 @@ export const CompactTable = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={() => setIsSelectOpen(!isSelectOpen)}
-                isExpanded={isSelectOpen}
-              >
+              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
                 <FilterIcon /> Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={isOpen => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
-              <SelectOption key={0} itemId="Debug">Debug</SelectOption>,
-              <SelectOption key={1} itemId="Info">Info</SelectOption>,
-              <SelectOption key={2} itemId="Warn">Warn</SelectOption>,
-              <SelectOption key={3} itemId="Error">Error</SelectOption>
+              <SelectOption key={0} value="Debug">
+                Debug
+              </SelectOption>,
+              <SelectOption key={1} value="Info">
+                Info
+              </SelectOption>,
+              <SelectOption key={2} value="Warn">
+                Warn
+              </SelectOption>,
+              <SelectOption key={3} value="Error">
+                Error
+              </SelectOption>
             ]}
           </Select>
         </ToolbarItem>
@@ -87,7 +91,7 @@ export const CompactTable = () => {
     </Toolbar>
   );
 
-  const renderLabel = labelText => {
+  const renderLabel = (labelText) => {
     switch (labelText) {
       case 'Running':
         return <Label color="green">{labelText}</Label>;
diff --git a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
index 1c9794a7167..8032a33c911 100644
--- a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
@@ -98,16 +98,16 @@ export const CompoundExpandable = () => {
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
-              <SelectOption key={0} itemId="Debug">
+              <SelectOption key={0} value="Debug">
                 Debug
               </SelectOption>,
-              <SelectOption key={1} itemId="Info">
+              <SelectOption key={1} value="Info">
                 Info
               </SelectOption>,
-              <SelectOption key={2} itemId="Warn">
+              <SelectOption key={2} value="Warn">
                 Warn
               </SelectOption>,
-              <SelectOption key={3} itemId="Error">
+              <SelectOption key={3} value="Error">
                 Error
               </SelectOption>
             ]}
diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
index 463b577ec45..ac361664cfd 100644
--- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -128,12 +128,12 @@ export const ComposableTableSortable = () => {
           <Select
             isOpen={isSortDropdownOpen}
             selected={[activeSortDirection, activeSortIndex]}
-            onOpenChange={isOpen => setIsSortDropdownOpen(isOpen)}
-            onSelect={(event, itemId) => {
-              if (itemId === 'asc' || itemId === 'desc') {
-                onSort(event, activeSortIndex, itemId);
+            onOpenChange={(isOpen) => setIsSortDropdownOpen(isOpen)}
+            onSelect={(event, value) => {
+              if (value === 'asc' || value === 'desc') {
+                onSort(event, activeSortIndex, value);
               } else {
-                onSort(event, itemId, activeSortDirection !== 'none' ? activeSortDirection : 'asc');
+                onSort(event, value, activeSortDirection !== 'none' ? activeSortDirection : 'asc');
               }
             }}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
@@ -150,11 +150,7 @@ export const ComposableTableSortable = () => {
             <SelectGroup label="Sort column">
               <SelectList>
                 {columns.map((column, columnIndex) => (
-                  <SelectOption
-                    key={column}
-                    itemId={columnIndex}
-                    isSelected={activeSortIndex === columnIndex}
-                  >
+                  <SelectOption key={column} value={columnIndex} isSelected={activeSortIndex === columnIndex}>
                     {column}
                   </SelectOption>
                 ))}
@@ -162,18 +158,10 @@ export const ComposableTableSortable = () => {
             </SelectGroup>
             <SelectGroup label="Sort direction">
               <SelectList>
-                <SelectOption
-                  isSelected={activeSortDirection === 'asc'}
-                  itemId="asc"
-                  key="ascending"
-                >
+                <SelectOption isSelected={activeSortDirection === 'asc'} value="asc" key="ascending">
                   Ascending
                 </SelectOption>
-                <SelectOption
-                  isSelected={activeSortDirection === 'desc'}
-                  itemId="desc"
-                  key="descending"
-                >
+                <SelectOption isSelected={activeSortDirection === 'desc'} value="desc" key="descending">
                   Descending
                 </SelectOption>
               </SelectList>
diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
index c6233429b9c..801861cb72d 100644
--- a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
@@ -51,7 +51,7 @@ export const StaticBottomPagination = () => {
     />
   );
 
-  const renderLabel = labelText => {
+  const renderLabel = (labelText) => {
     switch (labelText) {
       case 'Running':
         return (
@@ -88,23 +88,27 @@ export const StaticBottomPagination = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle
-                ref={toggleRef}
-                onClick={() => setIsSelectOpen(!isSelectOpen)}
-                isExpanded={isSelectOpen}
-              >
+              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
                 <FilterIcon /> Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}
-            onOpenChange={isOpen => setIsSelectOpen(isOpen)}
+            onOpenChange={(isOpen) => setIsSelectOpen(isOpen)}
             onSelect={() => setIsSelectOpen(!isSelectOpen)}
           >
             {[
-              <SelectOption key={0} itemId="Debug">Debug</SelectOption>,
-              <SelectOption key={1} itemId="Info">Info</SelectOption>,
-              <SelectOption key={2} itemId="Warn">Warn</SelectOption>,
-              <SelectOption key={3} itemId="Error">Error</SelectOption>
+              <SelectOption key={0} value="Debug">
+                Debug
+              </SelectOption>,
+              <SelectOption key={1} value="Info">
+                Info
+              </SelectOption>,
+              <SelectOption key={2} value="Warn">
+                Warn
+              </SelectOption>,
+              <SelectOption key={3} value="Error">
+                Error
+              </SelectOption>
             ]}
           </Select>
         </ToolbarItem>

From 23be5a98303c62420c427f8c0344f0dbaf3efcf2 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Wed, 24 May 2023 08:55:08 -0400
Subject: [PATCH 2/2] Renamed prop on Dropdown components

---
 .../src/components/Dropdown/Dropdown.tsx      |  6 +--
 .../src/components/Dropdown/DropdownItem.tsx  | 14 ++++---
 .../Dropdown/examples/DropdownBasic.tsx       | 16 ++++----
 .../examples/DropdownWithDescriptions.tsx     | 12 +++---
 .../Dropdown/examples/DropdownWithGroups.tsx  | 16 ++++----
 .../examples/DropdownWithKebabToggle.tsx      | 16 ++++----
 .../Hint/examples/HintBasicWithTitle.tsx      | 12 +++---
 .../Hint/examples/HintBasicWithoutTitle.tsx   | 12 +++---
 .../examples/InputGroupWithDropdown.tsx       |  6 +--
 .../Modal/examples/ModalWithDropdown.tsx      |  8 ++--
 .../OverflowMenu/OverflowMenuDropdownItem.tsx |  2 +-
 .../Toolbar/examples/ToolbarStacked.tsx       |  8 ++--
 .../examples/ApplicationLauncherDemo.tsx      | 34 ++++++++---------
 .../CustomMenus/examples/FavoritesDemo.tsx    | 32 ++++++++--------
 packages/react-core/src/demos/DataListDemo.md | 24 ++++++------
 .../react-core/src/demos/PrimaryDetail.md     | 23 ++++++++----
 .../demos/DropdownDemo/DropdownDemo.tsx       | 12 +++---
 .../src/docs/demos/table-demos/BulkSelect.jsx | 37 ++++++++-----------
 18 files changed, 146 insertions(+), 144 deletions(-)

diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
index 74f139b8d01..b94c301f017 100644
--- a/packages/react-core/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -41,7 +41,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   /** 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) => 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 any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -138,8 +138,8 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => {
-        onSelect && onSelect(event, itemId);
+      onSelect={(event, value) => {
+        onSelect && onSelect(event, value);
         shouldFocusToggleOnSelect && toggleRef.current.focus();
       }}
       isPlain={isPlain}
diff --git a/packages/react-core/src/components/Dropdown/DropdownItem.tsx b/packages/react-core/src/components/Dropdown/DropdownItem.tsx
index c0bffe924d9..f33ca517012 100644
--- a/packages/react-core/src/components/Dropdown/DropdownItem.tsx
+++ b/packages/react-core/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.*/
@@ -32,7 +32,7 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   className,
   description,
   isDisabled,
-  itemId,
+  value,
   onClick,
   ouiaId,
   ouiaSafe,
@@ -45,7 +45,7 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
-      itemId={itemId}
+      itemId={value}
       onClick={onClick}
       ref={innerRef}
       {...ouiaProps}
@@ -56,8 +56,10 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   );
 };
 
-export const DropdownItem = React.forwardRef((props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
-  <DropdownItemBase {...props} innerRef={ref} />
-));
+export const DropdownItem = React.forwardRef(
+  (props: DropdownItemProps, ref: React.Ref<HTMLAnchorElement | HTMLButtonElement>) => (
+    <DropdownItemBase {...props} innerRef={ref} />
+  )
+);
 
 DropdownItem.displayName = 'DropdownItem';
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
index 3b3562b9f9a..7b9b6b4f1b0 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx
@@ -8,9 +8,9 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
   };
 
@@ -28,11 +28,11 @@ export const DropdownBasic: React.FunctionComponent = () => {
       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
@@ -40,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>
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
index 2b7b4d7d6a6..751dccbf546 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx
@@ -8,9 +8,9 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
   };
 
@@ -27,11 +27,11 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
       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"
@@ -40,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>
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
index 619528ed40f..5664eb5a8f3 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx
@@ -16,9 +16,9 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
   };
 
@@ -36,11 +36,11 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     >
       <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
@@ -53,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>
@@ -64,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>
diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
index 0b41bc43b10..759a4b8c8a6 100644
--- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
+++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
@@ -9,9 +9,9 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+  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);
   };
 
@@ -34,11 +34,11 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
       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
@@ -46,17 +46,17 @@ export const DropdownWithKebab: 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>
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
index e24b6d089f4..c7b79f22040 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
@@ -43,11 +43,11 @@ export const HintBasicWithTitle: React.FunctionComponent = () => {
       )}
     >
       <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
@@ -55,17 +55,17 @@ export const HintBasicWithTitle: 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>
diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
index 2b4432a7a2a..6274169020b 100644
--- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
+++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
@@ -42,11 +42,11 @@ export const HintBasicWithoutTitle: React.FunctionComponent = () => {
       )}
     >
       <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
@@ -54,17 +54,17 @@ export const HintBasicWithoutTitle: 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>
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
index 87acc8e9168..c71847a6803 100644
--- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
+++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx
@@ -37,13 +37,13 @@ export const InputGroupWithDropdown: React.FunctionComponent = () => {
             )}
           >
             <DropdownList>
-              <DropdownItem itemId={0} key="option1">
+              <DropdownItem value={0} key="option1">
                 Option 1
               </DropdownItem>
-              <DropdownItem itemId={1} key="option2">
+              <DropdownItem value={1} key="option2">
                 Option 2
               </DropdownItem>
-              <DropdownItem itemId={2} key="option3">
+              <DropdownItem value={2} key="option3">
                 Option 3
               </DropdownItem>
             </DropdownList>
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
index 75e9eec07c0..12051fef113 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -81,11 +81,11 @@ export const ModalWithDropdown: React.FunctionComponent = () => {
             )}
           >
             <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
@@ -93,10 +93,10 @@ export const ModalWithDropdown: 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>
             </DropdownList>
diff --git a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
index d87f6f319d9..b7e0d79ca13 100644
--- a/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
+++ b/packages/react-core/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx
@@ -18,7 +18,7 @@ export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropd
   <OverflowMenuContext.Consumer>
     {(value) =>
       (!isShared || value.isBelowBreakpoint) && (
-        <DropdownItem component="button" itemId={itemId} {...additionalProps}>
+        <DropdownItem component="button" value={itemId} {...additionalProps}>
           {children}
         </DropdownItem>
       )
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 754baf73835..22a5c40533d 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -106,11 +106,11 @@ export const ToolbarStacked: React.FunctionComponent = () => {
   );
   const splitButtonDropdownItems = (
     <>
-      <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
@@ -118,10 +118,10 @@ export const ToolbarStacked: 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>
     </>
diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
index 35603c3ca1f..2c14ae05576 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx
@@ -39,11 +39,11 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
   const menuItems = [
     <DropdownGroup key="group1" label="Group 1">
       <DropdownList>
-        <DropdownItem itemId="0" id="0" isFavorited={favorites.includes('0')}>
+        <DropdownItem value="0" id="0" isFavorited={favorites.includes('0')}>
           Application 1
         </DropdownItem>
         <DropdownItem
-          itemId="1"
+          value="1"
           id="1"
           isFavorited={favorites.includes('1')}
           to="#default-link2"
@@ -57,7 +57,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     <DropdownGroup key="group2" label="Group 2">
       <DropdownList>
         <DropdownItem
-          itemId="2"
+          value="2"
           id="2"
           isFavorited={favorites.includes('2')}
           component={(props) => <MockLink {...props} to="#router-link" />}
@@ -65,7 +65,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           Custom component (such as @reach/router Link)
         </DropdownItem>
         <DropdownItem
-          itemId="3"
+          value="3"
           id="3"
           isFavorited={favorites.includes('3')}
           isExternalLink
@@ -78,12 +78,12 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     </DropdownGroup>,
     <Divider key="group2-divider" />,
     <DropdownList key="other-items">
-      <DropdownItem key="tooltip-app" isFavorited={favorites.includes('4')} itemId="4" id="4">
+      <DropdownItem key="tooltip-app" isFavorited={favorites.includes('4')} value="4" id="4">
         <Tooltip content={<div>Launch Application 3</div>} position="right">
           <span>Application 3 with tooltip</span>
         </Tooltip>
       </DropdownItem>
-      <DropdownItem key="disabled-app" itemId="5" id="5" isDisabled>
+      <DropdownItem key="disabled-app" value="5" id="5" isDisabled>
         Unavailable Application
       </DropdownItem>
     </DropdownList>
@@ -95,18 +95,18 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     menuItems.forEach((item) => {
       if (item.type === DropdownList) {
         item.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
       } else if (item.type === DropdownGroup) {
         item.props.children.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
       } else {
-        if (favIds.includes(item.props.itemId)) {
+        if (favIds.includes(item.props.value)) {
           favorites.push(item);
         }
       }
@@ -126,7 +126,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
           const filteredGroup = React.cloneElement(group, {
             children: React.cloneElement(group.props.children, {
               children: group.props.children.props.children.filter((child) => {
-                if (filteredIds.includes(child.props.itemId)) {
+                if (filteredIds.includes(child.props.value)) {
                   return child;
                 }
               })
@@ -142,7 +142,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
         } else if (group.type === DropdownList) {
           const filteredGroup = React.cloneElement(group, {
             children: group.props.children.filter((child) => {
-              if (filteredIds.includes(child.props.itemId)) {
+              if (filteredIds.includes(child.props.value)) {
                 return child;
               }
             })
@@ -154,7 +154,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
             keepDivider = false;
           }
         } else {
-          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.itemId)) {
+          if ((keepDivider && group.type === Divider) || filteredIds.includes(group.props.value)) {
             return group;
           }
         }
@@ -184,14 +184,14 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
     setFilteredIds(filteredIds);
   };
 
-  const onFavorite = (event: any, itemId: string, actionId: string) => {
+  const onFavorite = (event: any, value: string, actionId: string) => {
     event.stopPropagation();
     if (actionId === 'fav') {
-      const isFavorite = favorites.includes(itemId);
+      const isFavorite = favorites.includes(value);
       if (isFavorite) {
-        setFavorites(favorites.filter((fav) => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== value));
       } else {
-        setFavorites([...favorites, itemId]);
+        setFavorites([...favorites, value]);
       }
     }
   };
@@ -223,7 +223,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => {
       ref={menuRef}
       onActionClick={onFavorite}
       // eslint-disable-next-line no-console
-      onSelect={(_ev, itemId) => console.log('selected', itemId)}
+      onSelect={(_ev, value) => console.log('selected', value)}
     >
       <MenuSearch>
         <MenuSearchInput>
diff --git a/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
index 1604a1f8e49..3cf5e086ea1 100644
--- a/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
+++ b/packages/react-core/src/demos/CustomMenus/examples/FavoritesDemo.tsx
@@ -13,16 +13,16 @@ export const FavoritesDemo: React.FunctionComponent = () => {
   const menuItems = [
     <DropdownGroup key="group1" label="Group 1">
       <DropdownList>
-        <DropdownItem itemId="0" id="0" isFavorited={favorites.includes('0')}>
+        <DropdownItem value="0" id="0" isFavorited={favorites.includes('0')}>
           Item 1
         </DropdownItem>
-        <DropdownItem itemId="1" id="1" isFavorited={favorites.includes('1')}>
+        <DropdownItem value="1" id="1" isFavorited={favorites.includes('1')}>
           Item 2
         </DropdownItem>
-        <DropdownItem itemId="2" id="2" isFavorited={favorites.includes('2')}>
+        <DropdownItem value="2" id="2" isFavorited={favorites.includes('2')}>
           Item 3
         </DropdownItem>
-        <DropdownItem itemId="3" id="3" isFavorited={favorites.includes('3')}>
+        <DropdownItem value="3" id="3" isFavorited={favorites.includes('3')}>
           Item 4
         </DropdownItem>
       </DropdownList>
@@ -30,16 +30,16 @@ export const FavoritesDemo: React.FunctionComponent = () => {
     <Divider key="group1-divider" />,
     <DropdownGroup key="group2" label="Group 2">
       <DropdownList>
-        <DropdownItem itemId="4" id="4" isFavorited={favorites.includes('4')}>
+        <DropdownItem value="4" id="4" isFavorited={favorites.includes('4')}>
           Item 5
         </DropdownItem>
-        <DropdownItem itemId="5" id="5" isFavorited={favorites.includes('5')}>
+        <DropdownItem value="5" id="5" isFavorited={favorites.includes('5')}>
           Item 6
         </DropdownItem>
-        <DropdownItem itemId="6" id="6" isFavorited={favorites.includes('6')}>
+        <DropdownItem value="6" id="6" isFavorited={favorites.includes('6')}>
           Item 7
         </DropdownItem>
-        <DropdownItem itemId="7" id="7" isFavorited={favorites.includes('7')}>
+        <DropdownItem value="7" id="7" isFavorited={favorites.includes('7')}>
           Item 8
         </DropdownItem>
       </DropdownList>
@@ -52,18 +52,18 @@ export const FavoritesDemo: React.FunctionComponent = () => {
     menuItems.forEach((item) => {
       if (item.type === DropdownList) {
         item.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
       } else if (item.type === DropdownGroup) {
         item.props.children.props.children.filter((child) => {
-          if (favIds.includes(child.props.itemId)) {
+          if (favIds.includes(child.props.value)) {
             favorites.push(child);
           }
         });
       } else {
-        if (favIds.includes(item.props.itemId)) {
+        if (favIds.includes(item.props.value)) {
           favorites.push(item);
         }
       }
@@ -79,14 +79,14 @@ export const FavoritesDemo: React.FunctionComponent = () => {
     }
   }, [favorites]);
 
-  const onFavorite = (event: any, itemId: string, actionId: string) => {
+  const onFavorite = (event: any, value: string, actionId: string) => {
     event.stopPropagation();
     if (actionId === 'fav') {
-      const isFavorite = favorites.includes(itemId);
+      const isFavorite = favorites.includes(value);
       if (isFavorite) {
-        setFavorites(favorites.filter((fav) => fav !== itemId));
+        setFavorites(favorites.filter((fav) => fav !== value));
       } else {
-        setFavorites([...favorites, itemId]);
+        setFavorites([...favorites, value]);
       }
     }
   };
@@ -104,7 +104,7 @@ export const FavoritesDemo: React.FunctionComponent = () => {
       ref={menuRef}
       onActionClick={onFavorite}
       // eslint-disable-next-line no-console
-      onSelect={(_ev, itemId) => console.log('selected', itemId)}
+      onSelect={(_ev, value) => console.log('selected', value)}
     >
       {favorites.length > 0 && (
         <React.Fragment>
diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md
index 14327166b14..1ea2844f6c8 100644
--- a/packages/react-core/src/demos/DataListDemo.md
+++ b/packages/react-core/src/demos/DataListDemo.md
@@ -217,11 +217,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action1">
+                    <DropdownItem value={0} key="action1">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link1"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -229,10 +229,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action1">
+                    <DropdownItem value={2} isDisabled key="disabled action1">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link1" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link1" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>
@@ -299,11 +299,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action2">
+                    <DropdownItem value={0} key="action2">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link2"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -311,10 +311,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action2">
+                    <DropdownItem value={2} isDisabled key="disabled action2">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link2" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link2" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>
@@ -381,11 +381,11 @@ class ExpandableDataList extends React.Component {
                   )}
                 >
                   <DropdownList>
-                    <DropdownItem itemId={0} key="action3">
+                    <DropdownItem value={0} key="action3">
                       Action
                     </DropdownItem>
                     <DropdownItem
-                      itemId={1}
+                      value={1}
                       key="link3"
                       to="#default-link2"
                       // Prevent the default onClick functionality for example purposes
@@ -393,10 +393,10 @@ class ExpandableDataList extends React.Component {
                     >
                       Link
                     </DropdownItem>
-                    <DropdownItem itemId={2} isDisabled key="disabled action3">
+                    <DropdownItem value={2} isDisabled key="disabled action3">
                       Disabled Action
                     </DropdownItem>
-                    <DropdownItem itemId={3} isDisabled key="disabled link3" to="#default-link4">
+                    <DropdownItem value={3} isDisabled key="disabled link3" to="#default-link4">
                       Disabled Link
                     </DropdownItem>
                   </DropdownList>
diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md
index 57c9b07f315..05655ff489a 100644
--- a/packages/react-core/src/demos/PrimaryDetail.md
+++ b/packages/react-core/src/demos/PrimaryDetail.md
@@ -1362,16 +1362,23 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, cardData } =
-      this.state;
+    const {
+      isDrawerExpanded,
+      isChecked,
+      selectedItems,
+      activeCard,
+      isLowerToolbarKebabDropdownOpen,
+      filters,
+      cardData
+    } = this.state;
 
     const toolbarKebabDropdownItems = (
       <>
-        <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
@@ -1379,17 +1386,17 @@ class PrimaryDetailCardView extends React.Component {
         >
           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>
       </>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
index 16ed1d9f258..e90080ea3c8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
@@ -3,29 +3,29 @@ import { Dropdown, DropdownList, DropdownItem, Divider, MenuToggle } from '@patt
 
 const dropDownItems = (
   <DropdownList>
-    <DropdownItem itemId={0} key="link">
+    <DropdownItem value={0} key="link">
       Link
     </DropdownItem>
     <DropdownItem
       data-cy="dropdown-item"
-      itemId={1}
+      value={1}
       key="action"
       to="#default-link2"
       onClick={(ev) => ev.preventDefault()}
     >
       Action
     </DropdownItem>
-    <DropdownItem itemId={2} isDisabled key="disabled link">
+    <DropdownItem value={2} isDisabled key="disabled link">
       Disabled link
     </DropdownItem>
-    <DropdownItem itemId={3} isDisabled key="disabled action" to="#default-link4">
+    <DropdownItem value={3} isDisabled key="disabled action" to="#default-link4">
       Disabled action
     </DropdownItem>
     <Divider key="separator" />
-    <DropdownItem itemId={4} key="separated link">
+    <DropdownItem value={4} key="separated link">
       Separated link
     </DropdownItem>
-    <DropdownItem itemId={5} key="separated action">
+    <DropdownItem value={5} key="separated action">
       Separated action
     </DropdownItem>
   </DropdownList>
diff --git a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
index 378dc4cc405..45ac1609762 100644
--- a/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/BulkSelect.jsx
@@ -34,13 +34,12 @@ export const BulkSelectTableDemo = () => {
   };
 
   const setRowSelected = (row, isSelecting = true) =>
-    setSelectedRows(prevSelected => {
-      const otherSelectedRows = prevSelected.filter(r => r !== row.name);
+    setSelectedRows((prevSelected) => {
+      const otherSelectedRows = prevSelected.filter((r) => r !== row.name);
       return isSelecting ? [...otherSelectedRows, row.name] : otherSelectedRows;
     });
-  const selectAllRows = (isSelecting = true) =>
-    setSelectedRows(isSelecting ? rows.map(r => r.name) : []);
-  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map(r => r.name) : []);
+  const selectAllRows = (isSelecting = true) => setSelectedRows(isSelecting ? rows.map((r) => r.name) : []);
+  const selectPageRows = (isSelecting = true) => setSelectedRows(isSelecting ? paginatedRows.map((r) => r.name) : []);
   const isRowSelected = (row) => selectedRows.includes(row.name);
 
   const buildPagination = (variant, isCompact) => (
@@ -67,29 +66,23 @@ export const BulkSelectTableDemo = () => {
 
     const items = (
       <>
-        <DropdownItem itemId="none">
-          Select none (0 items)
-        </DropdownItem>
-        <DropdownItem itemId="page">
-          Select page ({perPage} items)
-        </DropdownItem>
-        <DropdownItem itemId="all">
-          Select all ({rows.length} items)
-        </DropdownItem>
+        <DropdownItem value="none">Select none (0 items)</DropdownItem>
+        <DropdownItem value="page">Select page ({perPage} items)</DropdownItem>
+        <DropdownItem value="all">Select all ({rows.length} items)</DropdownItem>
       </>
     );
     return (
       <Dropdown
         role="menu"
-        onSelect={(_ev, itemId) => {
-          if (itemId === "all") {
+        onSelect={(_ev, value) => {
+          if (value === 'all') {
             selectAllRows(bulkSelection !== 'all');
-          } else if (itemId === "page") {
+          } else if (value === 'page') {
             selectPageRows(bulkSelection !== 'page');
           } else {
             setSelectedRows([]);
           }
-          setBulkSelection(itemId);
+          setBulkSelection(value);
         }}
         isOpen={isBulkSelectDropdownOpen}
         onOpenChange={(isOpen) => setIsBulkSelectDropdownOpen(isOpen)}
@@ -120,9 +113,9 @@ export const BulkSelectTableDemo = () => {
         <DropdownList>{items}</DropdownList>
       </Dropdown>
     );
-  }
+  };
 
-  const toolbar=(
+  const toolbar = (
     <Toolbar>
       <ToolbarContent>
         <ToolbarGroup>
@@ -140,7 +133,7 @@ export const BulkSelectTableDemo = () => {
         <Table aria-label="Selectable table">
           <Thead>
             <Tr>
-              <Th/>
+              <Th />
               <Th key={0}>{columns[0]}</Th>
               <Th key={1}>{columns[1]}</Th>
               <Th key={2}>{columns[2]}</Th>
@@ -169,4 +162,4 @@ export const BulkSelectTableDemo = () => {
       </PageSection>
     </DashboardWrapper>
   );
-}
+};