@patternfly/react-core 5.0.0-alpha.62 → 5.0.0-alpha.63

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -3,15 +3,15 @@ import {
   Button,
   ButtonVariant,
   Select,
+  SelectList,
   SelectOption,
-  SelectOptionObject,
-  SelectVariant,
   Pagination,
   Dropdown,
   DropdownItem,
   DropdownList,
   Divider,
   MenuToggle,
+  MenuToggleElement,
   OverflowMenu,
   OverflowMenuContent,
   OverflowMenuControl,
@@ -34,24 +34,14 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
   // pagination - right aligned
-  const resourceOptions = [
-    { value: 'All resources', disabled: false },
-    { value: 'Deployment', disabled: false },
-    { value: 'Pod', disabled: false }
-  ];
-
-  const statusOptions = [
-    { value: 'Running', disabled: false },
-    { value: 'New', disabled: false },
-    { value: 'Pending', disabled: false },
-    { value: 'Cancelled', disabled: false }
-  ];
+  const resourceOptions = ['All resources', 'Deployment', 'Pod'];
+  const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
 
   const [kebabIsOpen, setKebabIsOpen] = React.useState(false);
   const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false);
-  const [resourceSelected, setResourceSelected] = React.useState<string | SelectOptionObject>();
+  const [resourceSelected, setResourceSelected] = React.useState('');
   const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [statusSelected, setStatusSelected] = React.useState('');
   const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false);
   const [page, setPage] = React.useState(1);
   const [perPage, setPerPage] = React.useState(20);
@@ -60,25 +50,24 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     setKebabIsOpen(!kebabIsOpen);
   };
 
-  const onResourceToggle = (_event: any, isExpanded: boolean) => {
-    setResourceIsExpanded(isExpanded);
+  const onResourceToggle = () => {
+    setResourceIsExpanded(!resourceIsExpanded);
   };
 
-  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) => {
     setResourceSelected(selection);
     setResourceIsExpanded(false);
   };
 
-  const onResourceSelectDropdown = (event: React.MouseEvent<Element, MouseEvent> | undefined) => {
-    setResourceSelected(event?.target);
+  const onResourceSelectDropdown = () => {
     setResourceIsExpanded(false);
   };
 
-  const onStatusToggle = (_event: any, isExpanded: boolean) => {
-    setStatusIsExpanded(isExpanded);
+  const onStatusToggle = () => {
+    setStatusIsExpanded(!statusIsExpanded);
   };
 
-  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string | SelectOptionObject) => {
+  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) => {
     setStatusSelected(selection);
     setStatusIsExpanded(false);
   };
@@ -142,17 +131,31 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       </ToolbarItem>
       <ToolbarItem>
         <Select
-          variant={SelectVariant.single}
-          aria-label="Select Input"
-          onToggle={onResourceToggle}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onResourceToggle()}
+              isExpanded={resourceIsExpanded}
+              style={
+                {
+                  width: '150px'
+                } as React.CSSProperties
+              }
+            >
+              {resourceSelected || 'Resource'}
+            </MenuToggle>
+          )}
           onSelect={onResourceSelect}
-          selections={resourceSelected}
+          selected={resourceSelected}
+          onOpenChange={isOpen => setResourceIsExpanded(isOpen)}
           isOpen={resourceIsExpanded}
           aria-labelledby="stacked-example-resource-select"
         >
-          {resourceOptions.map((option, index) => (
-            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-          ))}
+          <SelectList>
+            {resourceOptions.map((option, index) => (
+              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+            ))}
+          </SelectList>
         </Select>
       </ToolbarItem>
       <ToolbarItem variant="label" id="stacked-example-status-select">
@@ -160,17 +163,30 @@ export const ToolbarStacked: React.FunctionComponent = () => {
       </ToolbarItem>
       <ToolbarItem>
         <Select
-          variant={SelectVariant.single}
-          aria-label="Select Input"
-          onToggle={onStatusToggle}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onStatusToggle()}
+              isExpanded={statusIsExpanded}
+              style={
+                {
+                  width: '150px'
+                } as React.CSSProperties
+              }
+            >
+              {statusSelected || 'Status'}
+            </MenuToggle>
+          )}
           onSelect={onStatusSelect}
-          selections={statusSelected}
+          onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
+          selected={statusSelected}
           isOpen={statusIsExpanded}
-          aria-labelledby="stacked-example-status-select"
         >
-          {statusOptions.map((option, index) => (
-            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-          ))}
+          <SelectList>
+            {statusOptions.map((option, index) => (
+              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+            ))}
+          </SelectList>
         </Select>
       </ToolbarItem>
     </React.Fragment>
@@ -198,6 +214,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               <OverflowMenuControl hasAdditionalOptions>
                 <Dropdown
                   onSelect={onResourceSelectDropdown}
+                  onOpenChange={(isOpen) => setKebabIsOpen(isOpen)}
                   toggle={(toggleRef) => (
                     <MenuToggle
                       ref={toggleRef}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -6,9 +6,15 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   ToolbarGroup,
-  SelectOptionObject
+  Badge,
+  Button,
+  MenuToggle,
+  MenuToggleElement,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
-import { Button, Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
   DropdownItem as DropdownItemDeprecated,
@@ -38,7 +44,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
   const onSelect = (
     type: string,
     event: React.MouseEvent | React.ChangeEvent,
-    selection: string | SelectOptionObject
+    selection: string
   ) => {
     const checked = (event.target as HTMLInputElement).checked;
     setFilters((prev) => {
@@ -50,11 +56,11 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     });
   };
 
-  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) => {
     onSelect('status', event, selection);
   };
 
-  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) => {
     onSelect('risk', event, selection);
   };
 
@@ -76,30 +82,83 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
     }
   };
 
-  const onStatusToggle = (_event: any, isExpanded: boolean) => {
-    setStatusIsExpanded(isExpanded);
+  const onStatusToggle = () => {
+    setStatusIsExpanded(!statusIsExpanded);
   };
 
-  const onRiskToggle = (_event: any, isExpanded: boolean) => {
-    setRiskIsExpanded(isExpanded);
+  const onRiskToggle = () => {
+    setRiskIsExpanded(!statusIsExpanded);
   };
 
   const onKebabToggle = (_event: any, isOpen: boolean) => {
     setKebabIsOpen(isOpen);
   };
 
-  const statusMenuItems = [
-    <SelectOption key="statusNew" value="New" />,
-    <SelectOption key="statusPending" value="Pending" />,
-    <SelectOption key="statusRunning" value="Running" />,
-    <SelectOption key="statusCancelled" value="Cancelled" />
-  ];
+  const statusMenuItems = (
+    <SelectList>
+      <SelectOption
+        hasCheckbox
+        key="statusNew"
+        itemId="New"
+        isSelected={filters.status.includes("New")}
+      >
+        New
+      </SelectOption>
+      <SelectOption
+        hasCheckbox
+        key="statusPending"
+        itemId="Pending"
+        isSelected={filters.status.includes("Pending")}
+      >
+        Pending
+      </SelectOption>
+      <SelectOption
+        hasCheckbox
+        key="statusRunning"
+        itemId="Running"
+        isSelected={filters.status.includes("Running")}
+      >
+        Running
+      </SelectOption>
+      <SelectOption
+        hasCheckbox
+        key="statusCancelled"
+        itemId="Cancelled"
+        isSelected={filters.status.includes("Cancelled")}
+      >
+        Cancelled
+      </SelectOption>
+    </SelectList>
+  );
 
-  const riskMenuItems = [
-    <SelectOption key="riskLow" value="Low" />,
-    <SelectOption key="riskMedium" value="Medium" />,
-    <SelectOption key="riskHigh" value="High" />
-  ];
+  const riskMenuItems = (
+    <SelectList>
+      <SelectOption
+        hasCheckbox
+        key="riskLow"
+        itemId="Low"
+        isSelected={filters.risk.includes("Low")}
+      >
+        Low
+      </SelectOption>
+      <SelectOption
+        hasCheckbox
+        key="riskMedium"
+        itemId="Medium"
+        isSelected={filters.risk.includes("Medium")}
+      >
+        Medium
+      </SelectOption>
+      <SelectOption
+        hasCheckbox
+        key="riskHigh"
+        itemId="High"
+        isSelected={filters.risk.includes("High")}
+      >
+        High
+      </SelectOption>
+    </SelectList>
+  );
 
   const toggleGroupItems = (
     <React.Fragment>
@@ -121,13 +180,27 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           categoryName="Status"
         >
           <Select
-            variant={SelectVariant.checkbox}
             aria-label="Status"
-            onToggle={onStatusToggle}
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onStatusToggle}
+                isExpanded={statusIsExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Status
+                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
+              </MenuToggle>
+            )}
             onSelect={onStatusSelect}
-            selections={filters.status}
+            selected={filters.status}
             isOpen={statusIsExpanded}
-            placeholderText="Status"
+            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
           >
             {statusMenuItems}
           </Select>
@@ -138,13 +211,27 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           categoryName="Risk"
         >
           <Select
-            variant={SelectVariant.checkbox}
             aria-label="Risk"
-            onToggle={onRiskToggle}
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onRiskToggle}
+                isExpanded={riskIsExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Risk
+                {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
+              </MenuToggle>
+            )}
             onSelect={onRiskSelect}
-            selections={filters.risk}
+            selected={filters.risk}
             isOpen={riskIsExpanded}
-            placeholderText="Risk"
+            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
           >
             {riskMenuItems}
           </Select>

package/src/components/Tooltip/examples/TooltipOptions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Tooltip, Checkbox, Select, SelectOption, 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']);
@@ -96,28 +96,43 @@ export const TooltipOptions: React.FunctionComponent = () => {
         <div style={{ border: '1px solid' }}>
           position (will flip if enableFlip is true). The 'auto' position requires enableFlip to be set to true.
           <Select
-            onToggle={() => setPositionSelectOpen(!positionSelectOpen)}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={()=>setPositionSelectOpen(!positionSelectOpen)}
+                isExpanded={positionSelectOpen}
+                style={
+                  {
+                    width: '200px'
+                  } as React.CSSProperties
+                }
+              >
+                {position}
+              </MenuToggle>
+            )}
+            onOpenChange={setPositionSelectOpen}
             onSelect={(_event, selection) => {
               setPosition(selection.toString() as TooltipPosition);
               setPositionSelectOpen(false);
             }}
             isOpen={positionSelectOpen}
-            selections={position}
-            menuAppendTo={() => document.body}
+            selected={position}
           >
-            <SelectOption value={TooltipPosition.auto} />
-            <SelectOption value={TooltipPosition.top} />
-            <SelectOption value={TooltipPosition.bottom} />
-            <SelectOption value={TooltipPosition.left} />
-            <SelectOption value={TooltipPosition.right} />
-            <SelectOption value={TooltipPosition.topStart} />
-            <SelectOption value={TooltipPosition.topEnd} />
-            <SelectOption value={TooltipPosition.bottomStart} />
-            <SelectOption value={TooltipPosition.bottomEnd} />
-            <SelectOption value={TooltipPosition.leftStart} />
-            <SelectOption value={TooltipPosition.leftEnd} />
-            <SelectOption value={TooltipPosition.rightStart} />
-            <SelectOption value={TooltipPosition.rightEnd} />
+            <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>
+            </SelectList>
           </Select>
         </div>
         <div style={{ border: '1px solid' }}>
@@ -157,17 +172,32 @@ export const TooltipOptions: React.FunctionComponent = () => {
           starting position. The second option ensures that there are 3 escape positions for every possible starting
           position (default). This setting is ignored if position prop is set to 'auto'.
           <Select
-            onToggle={() => setFlipSelectOpen(!flipSelectOpen)}
+            onOpenChange={setFlipSelectOpen}
             onSelect={(_event, selection) => {
-              setFlipBehavior(selection.toString());
+              setFlipBehavior(selection as string);
               setFlipSelectOpen(false);
             }}
             isOpen={flipSelectOpen}
-            selections={flipBehavior}
-            menuAppendTo={() => document.body}
+            selected={flipBehavior}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={()=>setFlipSelectOpen(!flipSelectOpen)}
+                isExpanded={flipSelectOpen}
+                style={
+                  {
+                    width: '450px'
+                  } as React.CSSProperties
+                }
+              >
+                {flipBehavior}
+              </MenuToggle>
+            )}
           >
-            <SelectOption value="flip" />
-            <SelectOption value="clockwise">['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']</SelectOption>
+            <SelectList>
+              <SelectOption itemId="flip">flip</SelectOption>
+              <SelectOption itemId="clockwise">['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom']</SelectOption>
+            </SelectList>
           </Select>
         </div>
       </div>

package/src/demos/Card/Card.md

@@ -39,6 +39,7 @@ This demonstrates how you can assemble a full page view that contains a grid of
 ```js isFullscreen
 import React from 'react';
 import {
+  Badge,
   Bullseye,
   Button,
   Card,
@@ -63,16 +64,16 @@ import {
   PageSection,
   PageSectionVariants,
   Pagination,
-  Select,
-  SelectOption,
-  SelectVariant,
   TextContent,
   Text,
   Title,
   Toolbar,
   ToolbarItem,
   ToolbarFilter,
-  ToolbarContent
+  ToolbarContent,
+  Select,
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
 import {
   Dropdown as DropdownDeprecated,
@@ -131,9 +132,9 @@ class CardViewBasic extends React.Component {
       return selected === total;
     };
 
-    this.onToolbarDropdownToggle = (_event, isLowerToolbarDropdownOpen) => {
+    this.onToolbarDropdownToggle = () => {
       this.setState((prevState) => ({
-        isLowerToolbarDropdownOpen
+        isLowerToolbarDropdownOpen: !prevState.isLowerToolbarDropdownOpen
       }));
     };
 
@@ -462,29 +463,44 @@ class CardViewBasic extends React.Component {
   buildFilterDropdown() {
     const { isLowerToolbarDropdownOpen, filters } = this.state;
 
-    const filterDropdownItems = [
-      <SelectOption key="patternfly" value="PatternFly" />,
-      <SelectOption key="activemq" value="ActiveMQ" />,
-      <SelectOption key="apachespark" value="Apache Spark" />,
-      <SelectOption key="avro" value="Avro" />,
-      <SelectOption key="azureservices" value="Azure Services" />,
-      <SelectOption key="crypto" value="Crypto" />,
-      <SelectOption key="dropbox" value="DropBox" />,
-      <SelectOption key="jbossdatagrid" value="JBoss Data Grid" />,
-      <SelectOption key="rest" value="REST" />,
-      <SelectOption key="swagger" value="SWAGGER" />
-    ];
+    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>
+      </SelectList>
+    );
 
     return (
       <ToolbarFilter categoryName="Products" chips={filters.products} deleteChip={this.onDelete}>
         <Select
-          variant={SelectVariant.checkbox}
           aria-label="Products"
-          onToggle={this.onToolbarDropdownToggle}
+          role="menu"
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={this.onToolbarDropdownToggle}
+              isExpanded={isLowerToolbarDropdownOpen}
+            >
+              Filter by creator name
+              {filters.products.length > 0 && <Badge isRead>{filters.products.length}</Badge>}
+            </MenuToggle>
+          )}
           onSelect={this.onNameSelect}
-          selections={filters.products}
-          isExpanded={isLowerToolbarDropdownOpen}
-          placeholderText="Creator"
+          onOpenChange={(isOpen) => {
+            this.setState(() => ({
+              isLowerToolbarDropdownOpen: isOpen
+            }));
+          }}
+          selected={filters.products}
+          isOpen={isLowerToolbarDropdownOpen}
         >
           {filterDropdownItems}
         </Select>