@patternfly/react-core 5.0.0-alpha.118 → 5.0.0-alpha.119

package/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>

package/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>

package/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}
           />

package/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}
           />

package/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}
           />

package/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>
   );

package/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}
           />

package/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}
           />

package/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'}