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

package/src/{next/components → components}/Select/examples/SelectBasic.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Select, SelectOption, SelectList } from '@patternfly/react-core/next';
-import { MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/{next/components → components}/Select/examples/SelectCheckbox.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Select, SelectOption, SelectList } from '@patternfly/react-core/next';
-import { MenuToggle, MenuToggleElement, Badge } from '@patternfly/react-core';
+import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from '@patternfly/react-core';
 
 export const SelectCheckbox: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/{next/components → components}/Select/examples/SelectGrouped.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, SelectGroup } from '@patternfly/react-core/next';
-import { MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { Select, SelectOption, SelectList, SelectGroup, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
 export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);

package/src/{next/components → components}/Select/examples/SelectMultiTypeahead.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, SelectOptionProps } from '@patternfly/react-core/next';
 import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
   MenuToggle,
   MenuToggleElement,
   TextInputGroup,

package/src/{next/components → components}/Select/examples/SelectTypeahead.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, SelectOptionProps } from '@patternfly/react-core/next';
 import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
   MenuToggle,
   MenuToggleElement,
   TextInputGroup,

package/src/components/Select/index.ts

@@ -1,4 +1,4 @@
 export * from './Select';
 export * from './SelectGroup';
+export * from './SelectList';
 export * from './SelectOption';
-export * from './selectConstants';

package/src/components/Toolbar/__tests__/Toolbar.test.tsx

@@ -8,8 +8,7 @@ import { ToolbarItem } from '../ToolbarItem';
 import { ToolbarContent } from '../ToolbarContent';
 import { ToolbarFilter } from '../ToolbarFilter';
 import { ToolbarGroup } from '../ToolbarGroup';
-import { Select, SelectVariant, SelectOption } from '../../Select';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 
 describe('Toolbar', () => {
   it('should render inset', () => {
@@ -59,13 +58,6 @@ describe('Toolbar', () => {
   });
 
   it('should render with custom chip content', () => {
-    const statusMenuItems = [
-      <SelectOption key="statusNew" value="New" />,
-      <SelectOption key="statusPending" value="Pending" />,
-      <SelectOption key="statusRunning" value="Running" />,
-      <SelectOption key="statusCancelled" value="Cancelled" />
-    ];
-
     const items = (
       <React.Fragment>
         <ToolbarToggleGroup toggleIcon={<React.Fragment />} breakpoint="xl">
@@ -76,17 +68,7 @@ describe('Toolbar', () => {
               deleteChipGroup={category => {}}
               categoryName="Status"
             >
-              <Select
-                variant={SelectVariant.checkbox}
-                aria-label="Status"
-                onToggle={(isExpanded: boolean) => {}}
-                onSelect={(event, selection) => {}}
-                selections={['New', 'Pending']}
-                isOpen={true}
-                placeholderText="Status"
-              >
-                {statusMenuItems}
-              </Select>
+              test content
             </ToolbarFilter>
           </ToolbarGroup>
         </ToolbarToggleGroup>
@@ -119,9 +101,9 @@ describe('Toolbar', () => {
       </Toolbar>
     );
 
+    expect(asFragment()).toMatchSnapshot();
     // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
     expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
     expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
-    expect(asFragment()).toMatchSnapshot();
   });
 });

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -94,119 +94,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
             <div
               class="pf-c-toolbar__item"
             >
-              <div
-                class="pf-c-select pf-m-expanded"
-                data-ouia-component-id="OUIA-Generated-Select-checkbox-2"
-                data-ouia-component-type="PF4/Select"
-                data-ouia-safe="true"
-              >
-                <button
-                  aria-expanded="true"
-                  aria-label="Options menu"
-                  aria-labelledby=" pf-select-toggle-id-1"
-                  class="pf-c-select__toggle"
-                  id="pf-select-toggle-id-1"
-                  type="button"
-                >
-                  <div
-                    class="pf-c-select__toggle-wrapper"
-                  >
-                    <span
-                      class="pf-c-select__toggle-text"
-                    >
-                      Status
-                    </span>
-                    <div
-                      class="pf-c-select__toggle-badge"
-                    >
-                      <span
-                        class="pf-c-badge pf-m-read"
-                      >
-                        2
-                      </span>
-                    </div>
-                  </div>
-                  <span
-                    class="pf-c-select__toggle-arrow"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 320 512"
-                    >
-                      <path
-                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                      />
-                    </svg>
-                  </span>
-                </button>
-                <ul
-                  aria-label="Status"
-                  class="pf-c-select__menu"
-                  role="listbox"
-                >
-                  <label
-                    class="pf-c-check pf-c-select__menu-item"
-                  >
-                    <input
-                      checked=""
-                      class="pf-c-check__input"
-                      id="pf-random-id-1-New"
-                      type="checkbox"
-                    />
-                    <span
-                      class="pf-c-check__label"
-                    >
-                      New
-                    </span>
-                  </label>
-                  <label
-                    class="pf-c-check pf-c-select__menu-item"
-                  >
-                    <input
-                      checked=""
-                      class="pf-c-check__input"
-                      id="pf-random-id-1-Pending"
-                      type="checkbox"
-                    />
-                    <span
-                      class="pf-c-check__label"
-                    >
-                      Pending
-                    </span>
-                  </label>
-                  <label
-                    class="pf-c-check pf-c-select__menu-item"
-                  >
-                    <input
-                      class="pf-c-check__input"
-                      id="pf-random-id-1-Running"
-                      type="checkbox"
-                    />
-                    <span
-                      class="pf-c-check__label"
-                    >
-                      Running
-                    </span>
-                  </label>
-                  <label
-                    class="pf-c-check pf-c-select__menu-item"
-                  >
-                    <input
-                      class="pf-c-check__input"
-                      id="pf-random-id-1-Cancelled"
-                      type="checkbox"
-                    />
-                    <span
-                      class="pf-c-check__label"
-                    >
-                      Cancelled
-                    </span>
-                  </label>
-                </ul>
-              </div>
+              test content
             </div>
           </div>
         </div>
@@ -267,7 +155,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
           class="pf-c-toolbar__item pf-m-chip-group"
         >
           <div
-            aria-labelledby="pf-random-id-2"
+            aria-labelledby="pf-random-id-0"
             class="pf-c-chip-group pf-m-category"
             data-ouia-component-type="PF4/ChipGroup"
             data-ouia-safe="true"
@@ -278,12 +166,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
             >
               <span
                 class="pf-c-chip-group__label"
-                id="pf-random-id-2"
+                id="pf-random-id-0"
               >
                 Status
               </span>
               <ul
-                aria-labelledby="pf-random-id-2"
+                aria-labelledby="pf-random-id-0"
                 class="pf-c-chip-group__list"
                 role="list"
               >
@@ -301,7 +189,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <span
                         class="pf-c-chip__text"
-                        id="pf-random-id-3"
+                        id="pf-random-id-1"
                       >
                         New
                       </span>
@@ -312,12 +200,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       <button
                         aria-disabled="false"
                         aria-label="close"
-                        aria-labelledby="remove_pf-random-id-3 pf-random-id-3"
+                        aria-labelledby="remove_pf-random-id-1 pf-random-id-1"
                         class="pf-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF4/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-3"
+                        id="remove_pf-random-id-1"
                         type="button"
                       >
                         <svg
@@ -349,7 +237,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                     >
                       <span
                         class="pf-c-chip__text"
-                        id="pf-random-id-4"
+                        id="pf-random-id-2"
                       >
                         Pending
                       </span>
@@ -360,12 +248,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
                       <button
                         aria-disabled="false"
                         aria-label="close"
-                        aria-labelledby="remove_pf-random-id-4 pf-random-id-4"
+                        aria-labelledby="remove_pf-random-id-2 pf-random-id-2"
                         class="pf-c-button pf-m-plain"
                         data-ouia-component-id="close"
                         data-ouia-component-type="PF4/Button"
                         data-ouia-safe="true"
-                        id="remove_pf-random-id-4"
+                        id="remove_pf-random-id-2"
                         type="button"
                       >
                         <svg
@@ -391,12 +279,12 @@ exports[`Toolbar should render with custom chip content 1`] = `
               <button
                 aria-disabled="false"
                 aria-label="Close chip group"
-                aria-labelledby="remove_group_pf-random-id-2 pf-random-id-2"
+                aria-labelledby="remove_group_pf-random-id-0 pf-random-id-0"
                 class="pf-c-button pf-m-plain"
                 data-ouia-component-id="Close chip group"
                 data-ouia-component-type="PF4/Button"
                 data-ouia-safe="true"
-                id="remove_group_pf-random-id-2"
+                id="remove_group_pf-random-id-0"
                 type="button"
               >
                 <svg

package/src/components/Toolbar/examples/Toolbar.md

@@ -62,7 +62,6 @@ Often, it makes sense to group sets of like items to create desired associations
 ```ts file="./ToolbarGroups.tsx"
 
 ```
-
 ## Examples with toggle groups and filters
 
 A toggle group can be used when you want to collapse a set of items into an overlay panel at a certain breakpoint. This allows complex toolbars with multiple items and groups of items to be responsive. A toggle group is useful for containing filter controls, for example. When the toolbar responds to adapt to a mobile viewport, the contents contained in a toggle group will collapse into an overlay panel that can be toggled by clicking the Filter icon.

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

@@ -1,83 +1,51 @@
 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 ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {
-  const [inputValue, setInputValue] = React.useState<string>('');
+  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 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">
@@ -93,30 +61,58 @@ export const ToolbarComponentManagedToggleGroup: 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>