@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/next/components/Dropdown/__tests__/DropdownList.test.tsx

@@ -0,0 +1,41 @@
+import { DropdownList } from '../../Dropdown';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('../../../../components/Menu');
+
+const dropdownListChildren = <div>Dropdown List children</div>;
+
+test('renders dropdown list', () => {
+  render(
+    <div data-testid="dropdown-list">
+      <DropdownList>{dropdownListChildren}</DropdownList>
+    </div>
+  );
+
+  expect(screen.getByTestId('dropdown-list').children[0]).toBeVisible();
+});
+
+test('passes children', () => {
+  render(<DropdownList>{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByText('Dropdown List children')).toBeVisible();
+});
+
+test('passes no class name by default', () => {
+  render(<DropdownList>{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByTestId('menu-list-mock')).not.toHaveClass();
+});
+
+test('passes custom class name to MenuList', () => {
+  render(<DropdownList className="custom-class">{dropdownListChildren}</DropdownList>);
+
+  expect(screen.getByTestId('menu-list-mock')).toHaveClass('custom-class');
+});
+
+test('matches snapshot', () => {
+  const { asFragment } = render(<DropdownList className="custom-class">{dropdownListChildren}</DropdownList>);
+
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/next/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    data-ouia-component-id="dropdown"
+    data-ouia-component-type="PF4/Dropdown"
+    data-ouia-safe="true"
+  >
+    <div>
+      <div
+        class="customClass"
+        data-testid="menu-mock"
+      >
+        <div>
+          <div>
+            Dropdown children
+          </div>
+        </div>
+      </div>
+      <div>
+        Mock item
+      </div>
+      <p>
+        isPlain: true
+      </p>
+      <p>
+        isScrollable: true
+      </p>
+      <p>
+        minWidth: undefined
+      </p>
+    </div>
+    <p>
+      zIndex: 9999
+    </p>
+    <p>
+      isOpen: true
+    </p>
+    <div>
+      <button>
+        Dropdown
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownGroup.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-group-mock"
+  >
+    <div>
+      Dropdown Group children
+    </div>
+  </div>
+  <p>
+    label: Test label
+  </p>
+  <p>
+    labelHeadingLevel: h2
+  </p>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownItem.test.tsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-item-mock"
+  >
+    <div>
+      Dropdown Item children
+    </div>
+  </div>
+  <p>
+    description: Test description
+  </p>
+  <p>
+    itemId: undefined
+  </p>
+</DocumentFragment>
+`;

package/src/next/components/Dropdown/__tests__/__snapshots__/DropdownList.test.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="custom-class"
+    data-testid="menu-list-mock"
+  >
+    <div>
+      Dropdown List children
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Select/Select.tsx

@@ -97,7 +97,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       role={role}
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect(event, itemId)}
+      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
       isPlain={isPlain}
       selected={selected}
       {...(minWidth && {
@@ -119,7 +119,6 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     <div ref={containerRef}>
       <Popper
         trigger={toggle(toggleRef)}
-        removeFindDomNode
         popper={menu}
         appendTo={containerRef.current || undefined}
         isVisible={isOpen}

package/src/next/components/Select/SelectOption.tsx

@@ -10,7 +10,7 @@ export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
   /** Identifies the component in the Select onSelect callback */
   itemId?: any;
   /** Indicates the option has a checkbox */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Indicates the option is disabled */
   isDisabled?: boolean;
   /** Indicates the option is selected */

package/src/next/components/Select/examples/SelectCheckbox.tsx

@@ -50,16 +50,16 @@ export const SelectCheckbox: React.FunctionComponent = () => {
       toggle={toggle}
     >
       <SelectList>
-        <SelectOption hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+        <SelectOption hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
           Debug
         </SelectOption>
-        <SelectOption hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+        <SelectOption hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
           Info
         </SelectOption>
-        <SelectOption hasCheck itemId={2} isSelected={selectedItems.includes(2)}>
+        <SelectOption hasCheckbox itemId={2} isSelected={selectedItems.includes(2)}>
           Warn
         </SelectOption>
-        <SelectOption hasCheck isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
+        <SelectOption hasCheckbox isDisabled itemId={4} isSelected={selectedItems.includes(4)}>
           Error
         </SelectOption>
       </SelectList>

package/src/next/components/Select/examples/SelectMultiTypeahead.tsx

@@ -27,6 +27,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
 
   const menuRef = React.useRef<HTMLDivElement>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
@@ -44,12 +45,20 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: true, children: 'No results found' }];
+        newSelectOptions = [
+          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
       }
     }
 
     setSelectOptions(newSelectOptions);
-    setFocusedItemIndex(0);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
   }, [inputValue]);
 
   const handleMenuArrowKeys = (key: string) => {
@@ -75,6 +84,8 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
@@ -88,20 +99,20 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       case 'Enter':
         if (!isOpen) {
           setIsOpen(prevIsOpen => !prevIsOpen);
-        } else {
+        } else if (isOpen && focusedItem.itemId !== 'no results') {
           onSelect(focusedItem.itemId as string);
         }
         break;
       case 'Tab':
       case 'Escape':
         setIsOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isOpen && setIsOpen(true);
     }
   };
 
@@ -117,11 +128,13 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
 
-    if (itemId) {
+    if (itemId && itemId !== 'no results') {
       setSelected(
         selected.includes(itemId) ? selected.filter(selection => selection !== itemId) : [...selected, itemId]
       );
     }
+
+    textInputRef.current?.focus();
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
@@ -136,8 +149,12 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-multi-typeahead-listbox"
         >
-          <ChipGroup>
+          <ChipGroup aria-label="Current selections">
             {selected.map((selection, index) => (
               <Chip
                 key={index}
@@ -158,6 +175,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
               onClick={() => {
                 setInputValue('');
                 setSelected([]);
+                textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
             >
@@ -179,12 +197,13 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       onOpenChange={() => setIsOpen(false)}
       toggle={toggle}
     >
-      <SelectList isAriaMultiselectable>
+      <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
             key={option.itemId || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
+            id={`select-multi-typeahead-${option.itemId.replace(' ', '-')}`}
             {...option}
             ref={null}
           />

package/src/next/components/Select/examples/SelectTypeahead.tsx

@@ -23,9 +23,9 @@ export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('');
   const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
 
   const menuRef = React.useRef<HTMLDivElement>(null);
   const textInputRef = React.useRef<HTMLInputElement>();
@@ -34,21 +34,30 @@ export const SelectBasic: React.FunctionComponent = () => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
 
     // Filter menu items based on the text input value when one exists
-    if (filterValue) {
+    if (inputValue) {
       newSelectOptions = initialSelectOptions.filter(menuItem =>
         String(menuItem.children)
           .toLowerCase()
-          .includes(filterValue.toLowerCase())
+          .includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
-        newSelectOptions = [{ isDisabled: true, children: 'No results found' }];
+        newSelectOptions = [
+          { isDisabled: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
       }
     }
 
     setSelectOptions(newSelectOptions);
-  }, [filterValue]);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [inputValue]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -58,18 +67,17 @@ export const SelectBasic: React.FunctionComponent = () => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
 
-    if (itemId) {
+    if (itemId && itemId !== 'no results') {
       setInputValue(itemId as string);
-      setFilterValue(itemId as string);
       setSelected(itemId as string);
     }
     setIsOpen(false);
     setFocusedItemIndex(null);
+    setActiveItem(null);
   };
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
-    setFilterValue(value);
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -95,36 +103,39 @@ export const SelectBasic: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = selectOptions.filter(option => !option.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
     switch (event.key) {
       // Select the first available option
       case 'Enter':
-        if (isOpen) {
+        if (isOpen && focusedItem.itemId !== 'no results') {
           setInputValue(String(focusedItem.children));
           setSelected(String(focusedItem.children));
         }
 
         setIsOpen(prevIsOpen => !prevIsOpen);
         setFocusedItemIndex(null);
+        setActiveItem(null);
 
         break;
       case 'Tab':
       case 'Escape':
         setIsOpen(false);
+        setActiveItem(null);
         break;
       case 'ArrowUp':
       case 'ArrowDown':
+        event.preventDefault();
         handleMenuArrowKeys(event.key);
         break;
-      default:
-        !isOpen && setIsOpen(true);
     }
   };
 
@@ -140,6 +151,10 @@ export const SelectBasic: React.FunctionComponent = () => {
           autoComplete="off"
           innerRef={textInputRef}
           placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
         />
 
         <TextInputGroupUtilities>
@@ -149,7 +164,7 @@ export const SelectBasic: React.FunctionComponent = () => {
               onClick={() => {
                 setSelected('');
                 setInputValue('');
-                setFilterValue('');
+                textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
             >
@@ -170,17 +185,17 @@ export const SelectBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={() => {
         setIsOpen(false);
-        setFilterValue('');
       }}
       toggle={toggle}
     >
-      <SelectList>
+      <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (
           <SelectOption
             key={option.itemId || option.children}
             isFocused={focusedItemIndex === index}
             className={option.className}
             onClick={() => setSelected(option.itemId)}
+            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
             {...option}
             ref={null}
           />

package/src/next/components/Wizard/WizardContext.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { isCustomWizardFooter, isWizardSubStep, WizardStepType, WizardFooterType } from './types';
-import { getActiveStep } from './utils';
 import { WizardFooter, WizardFooterProps } from './WizardFooter';
 
 export interface WizardContextProps {
@@ -62,10 +61,8 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   goToStepByName,
   goToStepByIndex
 }) => {
-  const [currentSteps, setCurrentSteps] = React.useState(initialSteps);
-  const [currentFooter, setCurrentFooter] = React.useState(
-    typeof initialFooter !== 'function' ? initialFooter : undefined
-  );
+  const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
+  const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -76,7 +73,8 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
       })),
     [initialSteps, currentSteps]
   );
-  const activeStep = React.useMemo(() => getActiveStep(steps, activeStepIndex), [activeStepIndex, steps]);
+
+  const activeStep = React.useMemo(() => steps.find(step => step.index === activeStepIndex), [activeStepIndex, steps]);
 
   const close = React.useCallback(() => onClose?.(null), [onClose]);
   const goToNextStep = React.useCallback(() => onNext(null, steps), [onNext, steps]);

package/src/next/components/Wizard/WizardFooter.tsx

@@ -65,16 +65,16 @@ const InternalWizardFooter = ({
   cancelButtonText = 'Cancel'
 }: Omit<WizardFooterProps, 'activeStep'>) => (
   <WizardFooterWrapper>
-    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
-      {nextButtonText}
-    </Button>
-
     {!isBackHidden && (
       <Button variant={ButtonVariant.secondary} onClick={onBack} isDisabled={isBackDisabled}>
         {backButtonText}
       </Button>
     )}
 
+    <Button variant={ButtonVariant.primary} type="submit" onClick={onNext} isDisabled={isNextDisabled}>
+      {nextButtonText}
+    </Button>
+
     {!isCancelHidden && (
       <div className={styles.wizardFooterCancel}>
         <Button variant={ButtonVariant.link} onClick={onClose}>

package/src/next/components/Wizard/WizardToggle.tsx

@@ -6,8 +6,10 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 import { KeyTypes } from '../../../helpers/constants';
-import { WizardNavProps, WizardBody, WizardStep, WizardStepProps } from '../Wizard';
 import { WizardStepType, isWizardSubStep } from './types';
+import { WizardNavProps } from './WizardNav';
+import { WizardStep, WizardStepProps } from './WizardStep';
+import { WizardBody } from './WizardBody';
 
 /**
  * Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
@@ -40,11 +42,9 @@ export const WizardToggle = ({
   'aria-label': ariaLabel = 'Wizard toggle'
 }: WizardToggleProps) => {
   const isActiveSubStep = isWizardSubStep(activeStep);
+  const parentStep = isActiveSubStep && steps.find(step => step.id === activeStep.parentId);
   const nonSubSteps = steps.filter(step => !isWizardSubStep(step));
-  const wizardToggleIndex =
-    nonSubSteps.indexOf(
-      isWizardSubStep(activeStep) ? steps.find(step => step.id === activeStep.parentId) : activeStep
-    ) + 1;
+  const wizardToggleIndex = nonSubSteps.indexOf(parentStep || activeStep) + 1;
 
   const handleKeyClicks = React.useCallback(
     (event: KeyboardEvent): void => {
@@ -91,7 +91,8 @@ export const WizardToggle = ({
       >
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
-            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span> {activeStep?.name}
+            <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>{' '}
+            {parentStep?.name || activeStep?.name}
             {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}

package/src/next/components/Wizard/__tests__/Wizard.test.tsx

@@ -432,3 +432,18 @@ test('incrementally shows/hides steps based on the activeStep when isProgressive
     })
   ).toBeNull();
 });
+
+test('parent step can be non-collapsible by setting isCollapsible to false', () => {
+  render(
+    <Wizard>
+      <WizardStep
+        id="step-1"
+        name="Test step 1"
+        isCollapsible={false}
+        steps={[<WizardStep id="sub-step-1" name="Sub step 1" />]}
+      />
+    </Wizard>
+  );
+
+  expect(screen.queryByLabelText('step icon', { exact: false })).toBeNull();
+});

package/src/next/components/Wizard/examples/WizardCustomNav.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Wizard,
+  WizardStep,
+  WizardControlStep,
+  CustomWizardNavFunction,
+  WizardNav,
+  WizardNavItem
+} from '@patternfly/react-core/next';
+
+export const WizardCustomNav: React.FunctionComponent = () => {
+  const nav: CustomWizardNavFunction = (
+    isExpanded: boolean,
+    steps: WizardControlStep[],
+    activeStep: WizardControlStep,
+    goToStepByIndex: (index: number) => void
+  ) => (
+    <WizardNav isExpanded={isExpanded}>
+      {steps.map(step => (
+        <WizardNavItem
+          key={step.id}
+          id={step.id}
+          content={step.name}
+          isCurrent={activeStep.id === step.id}
+          isDisabled={step.isDisabled}
+          stepIndex={step.index}
+          onNavItemClick={goToStepByIndex}
+        />
+      ))}
+    </WizardNav>
+  );
+
+  return (
+    <Wizard height={400} nav={nav}>
+      <WizardStep name="First step" id="cnav-first-step">
+        <p>Did you say...custom nav?</p>
+      </WizardStep>
+      <WizardStep name="Second step" id="cnav-second-step">
+        <p>Step 2 content</p>
+      </WizardStep>
+      <WizardStep name="Review" id="cnav-review-step" footer={{ nextButtonText: 'Wrap it up' }}>
+        <p>Review step content</p>
+      </WizardStep>
+    </Wizard>
+  );
+};