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

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

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

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

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

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

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

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

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