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

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

@@ -1,88 +1,56 @@
 import React from 'react';
 import {
+  MenuToggle,
+  MenuToggleElement,
   Toolbar,
   ToolbarItem,
   ToolbarContent,
   ToolbarToggleGroup,
   ToolbarGroup,
-  SelectOptionObject
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
-import { Select, SelectOption, SelectVariant, SearchInput } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [inputValue, setInputValue] = React.useState('');
   const [statusIsExpanded, setStatusIsExpanded] = React.useState(false);
-  const [statusSelected, setStatusSelected] = React.useState<string | SelectOptionObject>();
+  const [statusSelected, setStatusSelected] = React.useState('');
   const [riskIsExpanded, setRiskIsExpanded] = React.useState(false);
-  const [riskSelected, setRiskSelected] = React.useState<string | SelectOptionObject>();
+  const [riskSelected, setRiskSelected] = React.useState('');
 
   const toggleIsExpanded = () => {
     setIsExpanded(!isExpanded);
   };
 
-  const statusOptions = [
-    { value: 'Status', disabled: false, isPlaceholder: true },
-    { value: 'New', disabled: false },
-    { value: 'Pending', disabled: false },
-    { value: 'Running', disabled: false },
-    { value: 'Cancelled', disabled: false }
-  ];
-
-  const riskOptions = [
-    { value: 'Risk', disabled: false, isPlaceholder: true },
-    { value: 'Low', disabled: false },
-    { value: 'Medium', disabled: false },
-    { value: 'High', disabled: false }
-  ];
+  const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];
+  const riskOptions = ['Risk', 'Low', 'Medium', 'High'];
 
   const onInputChange = (newValue: string) => {
     setInputValue(newValue);
   };
 
-  const onStatusToggle = (_event: any, isExpanded: boolean) => {
-    setStatusIsExpanded(isExpanded);
+  const onStatusToggle = () => {
+    setStatusIsExpanded(!statusIsExpanded);
   };
 
-  const onStatusSelect = (
-    _event: React.MouseEvent | React.ChangeEvent,
-    selection: string | SelectOptionObject,
-    isPlaceholder: boolean | undefined
-  ) => {
-    if (isPlaceholder) {
-      clearStatusSelection();
-    }
+  const onStatusSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {
     setStatusSelected(selection);
     setStatusIsExpanded(false);
   };
 
-  const clearStatusSelection = () => {
-    setStatusSelected(undefined);
-    setStatusIsExpanded(false);
-  };
-
-  const onRiskToggle = (_event: any, isExpanded: boolean) => {
-    setRiskIsExpanded(isExpanded);
+  const onRiskToggle = () => {
+    setRiskIsExpanded(!riskIsExpanded);
   };
 
-  const onRiskSelect = (
-    _event: React.MouseEvent | React.ChangeEvent,
-    selection: string | SelectOptionObject,
-    isPlaceholder: boolean | undefined
-  ) => {
-    if (isPlaceholder) {
-      clearRiskSelection();
-    }
+  const onRiskSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {
     setRiskSelected(selection);
     setRiskIsExpanded(false);
   };
 
-  const clearRiskSelection = () => {
-    setRiskSelected(undefined);
-    setRiskIsExpanded(false);
-  };
-
   const toggleGroupItems = (
     <React.Fragment>
       <ToolbarItem variant="search-filter">
@@ -98,30 +66,58 @@ export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =>
       <ToolbarGroup variant="filter-group">
         <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}
           >
-            {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>
         <ToolbarItem>
           <Select
-            variant={SelectVariant.single}
-            aria-label="Select Input"
-            onToggle={onRiskToggle}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => onRiskToggle()}
+                isExpanded={riskIsExpanded}
+                style={
+                  {
+                    width: '120px'
+                  } as React.CSSProperties
+                }
+              >
+                {riskSelected || 'Risk'}
+              </MenuToggle>
+            )}
             onSelect={onRiskSelect}
-            selections={riskSelected}
+            selected={riskSelected}
             isOpen={riskIsExpanded}
+            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
           >
-            {riskOptions.map((option, index) => (
-              <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-            ))}
+            <SelectList>
+              {riskOptions.map((option, index) => (
+                <SelectOption key={index} itemId={option}>{option}</SelectOption>
+              ))}
+            </SelectList>
           </Select>
         </ToolbarItem>
       </ToolbarGroup>

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

@@ -6,10 +6,13 @@ import {
   ToolbarFilter,
   ToolbarToggleGroup,
   ToolbarGroup,
+  Badge,
   Button,
+  MenuToggle,
+  MenuToggleElement,
   Select,
-  SelectOption,
-  SelectVariant
+  SelectList,
+  SelectOption
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
@@ -57,18 +60,71 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
     }
   };
 
-  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>
@@ -80,13 +136,27 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           categoryName="Status"
         >
           <Select
-            variant={SelectVariant.checkbox}
             aria-label="Status"
-            onToggle={(_event: any, isExpanded: boolean) => setStatusIsExpanded(isExpanded)}
-            onSelect={(event, selection) => onSelect('Status', event, selection as string)}
-            selections={filters.status}
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setStatusIsExpanded(!statusIsExpanded)}
+                isExpanded={statusIsExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Status
+                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}
+              </MenuToggle>
+            )}
+            onSelect={(event, selection) => onSelect("Status", event, selection as string)}
+            selected={filters.status}
             isOpen={statusIsExpanded}
-            placeholderText="Status"
+            onOpenChange={isOpen => setStatusIsExpanded(isOpen)}
           >
             {statusMenuItems}
           </Select>
@@ -98,13 +168,27 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
           categoryName="Risk"
         >
           <Select
-            variant={SelectVariant.checkbox}
             aria-label="Risk"
-            onToggle={(_event: any, isExpanded: boolean) => setRiskIsExpanded(isExpanded)}
-            onSelect={(event, selection) => onSelect('Risk', event, selection as string)}
-            selections={filters.risk}
+            role="menu"
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={() => setRiskIsExpanded(!riskIsExpanded)}
+                isExpanded={riskIsExpanded}
+                style={
+                  {
+                    width: '140px'
+                  } as React.CSSProperties
+                }
+              >
+                Risk
+                {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
+              </MenuToggle>
+            )}
+            onSelect={(event, selection) => onSelect("Risk", event, selection as string)}
+            selected={filters.risk}
             isOpen={riskIsExpanded}
-            placeholderText="Risk"
+            onOpenChange={isOpen => setRiskIsExpanded(isOpen)}
           >
             {riskMenuItems}
           </Select>

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

@@ -1,62 +1,57 @@
 import React from 'react';
-import { SelectOptionObject, Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
-import { Button, Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import {
+  Button,
+  MenuToggle,
+  MenuToggleElement,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Select,
+  SelectList,
+  SelectOption
+} from '@patternfly/react-core';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 
 export const ToolbarGroups: React.FunctionComponent = () => {
-  const firstOptions = [
-    { value: 'Filter 1', disabled: false, isPlaceholder: true },
-    { value: 'A', disabled: false },
-    { value: 'B', disabled: false },
-    { value: 'C', disabled: false }
-  ];
-
-  const secondOptions = [
-    { value: 'Filter 2', disabled: false, isPlaceholder: true },
-    { value: '1', disabled: false },
-    { value: '2', disabled: false },
-    { value: '3', disabled: false }
-  ];
-
-  const thirdOptions = [
-    { value: 'Filter 3', disabled: false, isPlaceholder: true },
-    { value: 'I', disabled: false },
-    { value: 'II', disabled: false },
-    { value: 'III', disabled: false }
-  ];
+  const firstOptions = ['A', 'B', 'C'];
+  const secondOptions = ['1', '2', '3'];
+  const thirdOptions = ['I', 'II', 'III'];
 
   const [firstIsExpanded, setFirstIsExpanded] = React.useState(false);
-  const [firstSelected, setFirstSelected] = React.useState<string | SelectOptionObject>();
+  const [firstSelected, setFirstSelected] = React.useState('');
   const [secondIsExpanded, setSecondIsExpanded] = React.useState(false);
-  const [secondSelected, setSecondSelected] = React.useState<string | SelectOptionObject>();
+  const [secondSelected, setSecondSelected] = React.useState('');
   const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false);
-  const [thirdSelected, setThirdSelected] = React.useState<string | SelectOptionObject>();
+  const [thirdSelected, setThirdSelected] = React.useState('');
 
-  const onFirstToggle = (_event: any, isExpanded: boolean) => {
-    setFirstIsExpanded(isExpanded);
+  const onToggle = (filterName: string) => {
+    switch (filterName) {
+      case "first":
+        setFirstIsExpanded(!firstIsExpanded);
+        break;
+      case "second":
+        setSecondIsExpanded(!secondIsExpanded);
+        break;
+      case "third":
+        setThirdIsExpanded(!thirdIsExpanded);
+        break;
+    }
   };
 
-  const onFirstSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+  const onFirstSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {
     setFirstSelected(selection);
     setFirstIsExpanded(false);
   };
 
-  const onSecondToggle = (_event: any, isExpanded: boolean) => {
-    setSecondIsExpanded(isExpanded);
-  };
-
-  const onSecondSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+  const onSecondSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {
     setSecondSelected(selection);
     setSecondIsExpanded(false);
   };
 
-  const onThirdToggle = (_event: any, isExpanded: boolean) => {
-    setThirdIsExpanded(isExpanded);
-  };
-
-  const onThirdSelect = (_event: React.MouseEvent | React.ChangeEvent, selection: string | SelectOptionObject) => {
+  const onThirdSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {
     setThirdSelected(selection);
     setThirdIsExpanded(false);
   };
@@ -65,44 +60,86 @@ export const ToolbarGroups: React.FunctionComponent = () => {
     <React.Fragment>
       <ToolbarItem>
         <Select
-          variant={SelectVariant.single}
-          aria-label="Select Input"
-          onToggle={onFirstToggle}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onToggle("first")}
+              isExpanded={firstIsExpanded}
+              style={
+                {
+                  width: '88px'
+                } as React.CSSProperties
+              }
+            >
+              {firstSelected || 'First'}
+            </MenuToggle>
+          )}
           onSelect={onFirstSelect}
-          selections={firstSelected}
+          onOpenChange={isOpen => setFirstIsExpanded(isOpen)}
+          selected={firstSelected}
           isOpen={firstIsExpanded}
         >
-          {firstOptions.map((option, index) => (
-            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-          ))}
+          <SelectList>
+            {firstOptions.map((option, index) => (
+              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+            ))}
+          </SelectList>
         </Select>
       </ToolbarItem>
       <ToolbarItem>
         <Select
-          variant={SelectVariant.single}
-          aria-label="Select Input"
-          onToggle={onSecondToggle}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onToggle("second")}
+              isExpanded={secondIsExpanded}
+              style={
+                {
+                  width: '120px'
+                } as React.CSSProperties
+              }
+            >
+              {secondSelected || 'Second'}
+            </MenuToggle>
+          )}
           onSelect={onSecondSelect}
-          selections={secondSelected}
+          selected={secondSelected}
+          onOpenChange={isOpen => setSecondIsExpanded(isOpen)}
           isOpen={secondIsExpanded}
         >
-          {secondOptions.map((option, index) => (
-            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-          ))}
+          <SelectList>
+            {secondOptions.map((option, index) => (
+              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+            ))}
+          </SelectList>
         </Select>
       </ToolbarItem>
       <ToolbarItem>
         <Select
-          variant={SelectVariant.single}
-          aria-label="Select Input"
-          onToggle={onThirdToggle}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              onClick={() => onToggle("third")}
+              isExpanded={thirdIsExpanded}
+              style={
+                {
+                  width: '96px'
+                } as React.CSSProperties
+              }
+            >
+              {thirdSelected || 'Third'}
+            </MenuToggle>
+          )}
           onSelect={onThirdSelect}
-          selections={thirdSelected}
+          selected={thirdSelected}
+          onOpenChange={isOpen => setThirdIsExpanded(isOpen)}
           isOpen={thirdIsExpanded}
         >
-          {thirdOptions.map((option, index) => (
-            <SelectOption isDisabled={option.disabled} key={index} value={option.value} />
-          ))}
+          <SelectList>
+            {thirdOptions.map((option, index) => (
+              <SelectOption key={index} itemId={option}>{option}</SelectOption>
+            ))}
+          </SelectList>
         </Select>
       </ToolbarItem>
     </React.Fragment>