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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.118",
+  "version": "5.0.0-alpha.119",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5d4371389868c3a6d5c895bda9a56ae2299c74ea"
+  "gitHead": "3d9d04381ec62d8aa02b8eb1e3977f951fbfdeb3"
 }

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

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

package/src/components/Dropdown/DropdownItem.tsx

@@ -18,7 +18,7 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   /** Render item as disabled option */
   isDisabled?: boolean;
   /** Identifies the component in the dropdown onSelect callback */
-  itemId?: any;
+  value?: any;
   /** Callback for item click */
   onClick?: (event?: any) => void;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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