@patternfly/react-core 4.248.0 → 4.250.0

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

@@ -0,0 +1,191 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, SelectOptionProps } from '@patternfly/react-core/next';
+import {
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+const initialSelectOptions: SelectOptionProps[] = [
+  { itemId: 'Alabama', children: 'Alabama' },
+  { itemId: 'Florida', children: 'Florida' },
+  { itemId: 'New Jersey', children: 'New Jersey' },
+  { itemId: 'New Mexico', children: 'New Mexico' },
+  { itemId: 'New York', children: 'New York' },
+  { itemId: 'North Carolina', children: 'North Carolina' }
+];
+
+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 menuRef = React.useRef<HTMLDivElement>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      newSelectOptions = initialSelectOptions.filter(menuItem =>
+        String(menuItem.children)
+          .toLowerCase()
+          .includes(filterValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{ isDisabled: true, children: 'No results found' }];
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+  }, [filterValue]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+
+    if (itemId) {
+      setInputValue(itemId as string);
+      setFilterValue(itemId as string);
+      setSelected(itemId as string);
+    }
+    setIsOpen(false);
+    setFocusedItemIndex(null);
+  };
+
+  const onTextInputChange = (value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = selectOptions.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isOpen) {
+          setInputValue(String(focusedItem.children));
+          setSelected(String(focusedItem.children));
+        }
+
+        setIsOpen(prevIsOpen => !prevIsOpen);
+        setFocusedItemIndex(null);
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        handleMenuArrowKeys(event.key);
+        break;
+      default:
+        !isOpen && setIsOpen(true);
+    }
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder="Select a state"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="typeahead-select"
+      ref={menuRef}
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={() => {
+        setIsOpen(false);
+        setFilterValue('');
+      }}
+      toggle={toggle}
+    >
+      <SelectList>
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            key={option.itemId || option.children}
+            isFocused={focusedItemIndex === index}
+            className={option.className}
+            onClick={() => setSelected(option.itemId)}
+            {...option}
+            ref={null}
+          />
+        ))}
+      </SelectList>
+    </Select>
+  );
+};

package/src/next/components/Select/index.ts

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

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

@@ -1,19 +1,22 @@
 import React from 'react';
+import findLastIndex from 'lodash/findLastIndex';
 
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 
 import {
-  DefaultWizardFooterProps,
-  DefaultWizardNavProps,
   isWizardParentStep,
   WizardNavStepFunction,
-  CustomWizardNavFunction
+  WizardControlStep,
+  isCustomWizardNav,
+  WizardFooterType,
+  WizardNavType
 } from './types';
 import { buildSteps, normalizeNavStep } from './utils';
-import { WizardContextProvider } from './WizardContext';
+import { useWizardContext, WizardContextProvider } from './WizardContext';
 import { WizardStepProps } from './WizardStep';
-import { WizardToggleInternal } from './WizardToggle';
+import { WizardToggle } from './WizardToggle';
+import { WizardNavInternal } from './WizardNavInternal';
 
 /**
  * Wrapper for all steps and hosts state, including navigation helpers, within context.
@@ -26,9 +29,9 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   /** Wizard header */
   header?: React.ReactNode;
   /** Wizard footer */
-  footer?: DefaultWizardFooterProps | React.ReactElement;
-  /** Wizard nav */
-  nav?: DefaultWizardNavProps | CustomWizardNavFunction;
+  footer?: WizardFooterType;
+  /** Wizard navigation */
+  nav?: WizardNavType;
   /** The initial index the wizard is to start on (1 or higher). Defaults to 1. */
   startIndex?: number;
   /** Additional classes spread to the wizard */
@@ -37,9 +40,11 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
   width?: number | string;
   /** Custom height of the wizard */
   height?: number | string;
+  /** Disables navigation items that haven't been visited. Defaults to false */
+  isStepVisitRequired?: boolean;
   /** Flag to unmount inactive steps instead of hiding. Defaults to true */
-  unmountInactiveSteps?: boolean;
-  /** Callback function when a step in the nav is clicked */
+  hasUnmountedSteps?: boolean;
+  /** Callback function when a step in the navigation is clicked */
   onNavByIndex?: WizardNavStepFunction;
   /** Callback function after next button is clicked */
   onNext?: WizardNavStepFunction;
@@ -52,7 +57,6 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const Wizard = ({
-  startIndex = 1,
   children,
   footer,
   height,
@@ -60,7 +64,9 @@ export const Wizard = ({
   className,
   header,
   nav,
-  unmountInactiveSteps,
+  startIndex = 1,
+  isStepVisitRequired = false,
+  hasUnmountedSteps = true,
   onNavByIndex,
   onNext,
   onBack,
@@ -69,83 +75,91 @@ export const Wizard = ({
   ...wrapperProps
 }: WizardProps) => {
   const [currentStepIndex, setCurrentStepIndex] = React.useState(startIndex);
-  const steps = buildSteps(children);
+  const initialSteps = buildSteps(children);
 
-  const goToStepByIndex = (index: number) => {
-    const lastStepIndex = steps.length;
+  const goToNextStep = (steps: WizardControlStep[] = initialSteps) => {
+    const newStepIndex =
+      steps.findIndex((step, index) => index + 1 > currentStepIndex && !step.isHidden && !isWizardParentStep(step)) + 1;
 
-    if (index < 1) {
-      index = 1;
-    } else if (index > lastStepIndex) {
-      index = lastStepIndex;
+    if (currentStepIndex >= steps.length || !newStepIndex) {
+      return onSave ? onSave() : onClose?.();
     }
 
-    const currStep = steps[index - 1];
+    const currStep = isWizardParentStep(steps[currentStepIndex])
+      ? steps[currentStepIndex + 1]
+      : steps[currentStepIndex];
     const prevStep = steps[currentStepIndex - 1];
-    setCurrentStepIndex(index);
 
-    return onNavByIndex?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    setCurrentStepIndex(newStepIndex);
+
+    return onNext?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
   };
 
-  const goToNextStep = () => {
-    // Save when on the last step, otherwise close
-    if (currentStepIndex >= steps.length) {
-      if (onSave) {
-        return onSave();
-      }
+  const goToPrevStep = (steps: WizardControlStep[] = initialSteps) => {
+    const newStepIndex =
+      findLastIndex(
+        steps,
+        (step: WizardControlStep, index: number) =>
+          index + 1 < currentStepIndex && !step.isHidden && !isWizardParentStep(step)
+      ) + 1;
+    const currStep = isWizardParentStep(steps[currentStepIndex - 2])
+      ? steps[currentStepIndex - 3]
+      : steps[currentStepIndex - 2];
+    const prevStep = steps[currentStepIndex - 1];
 
-      return onClose?.();
-    }
+    setCurrentStepIndex(newStepIndex);
 
-    let currStep = steps[currentStepIndex];
-    let newStepIndex = currentStepIndex + 1;
-    const prevStep = steps[currentStepIndex - 1];
+    return onBack?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
+  };
+
+  const goToStepByIndex = (steps: WizardControlStep[] = initialSteps, index: number) => {
+    const lastStepIndex = steps.length + 1;
 
-    // Skip parent step and focus on the first sub-step if they exist
-    if (isWizardParentStep(currStep)) {
-      newStepIndex += 1;
-      currStep = steps[currentStepIndex + 1];
+    // Handle index when out of bounds or hidden
+    if (index < 1) {
+      index = 1;
+    } else if (index > lastStepIndex) {
+      index = lastStepIndex;
+    } else if (steps[index - 1].isHidden) {
+      // eslint-disable-next-line no-console
+      console.error('Wizard: Unable to navigate to hidden step.');
     }
 
-    setCurrentStepIndex(newStepIndex);
-    return onNext?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+    const currStep = steps[index - 1];
+    const prevStep = steps[currentStepIndex - 1];
+    setCurrentStepIndex(index);
+
+    return onNavByIndex?.(normalizeNavStep(currStep, steps), normalizeNavStep(prevStep, steps));
   };
 
-  const goToPrevStep = () => {
-    if (steps.length < currentStepIndex) {
-      // Previous step was removed, just update the currentStep state
-      setCurrentStepIndex(steps.length);
+  const goToStepById = (steps: WizardControlStep[] = initialSteps, id: number | string) => {
+    const stepIndex = steps.findIndex(step => step.id === id) + 1;
+
+    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
+      setCurrentStepIndex(stepIndex);
     } else {
-      let currStep = steps[currentStepIndex - 2];
-      let newStepIndex = currentStepIndex - 1;
-      const prevStep = steps[currentStepIndex - 1];
-
-      // // Skip parent step and focus on the step prior
-      if (isWizardParentStep(currStep)) {
-        newStepIndex -= 1;
-        currStep = steps[currentStepIndex - 3];
-      }
-
-      setCurrentStepIndex(newStepIndex);
-      return onBack?.(normalizeNavStep(currStep), normalizeNavStep(prevStep));
+      // eslint-disable-next-line no-console
+      console.error(`Wizard: Unable to navigate to step with id: ${id}.`);
     }
   };
 
-  const goToStepById = (id: number | string) => {
-    const stepIndex = steps.findIndex(step => step.id === id) + 1;
-    stepIndex > 0 && setCurrentStepIndex(stepIndex);
-  };
+  const goToStepByName = (steps: WizardControlStep[] = initialSteps, name: string) => {
+    const stepIndex = initialSteps.findIndex(step => step.name === name) + 1;
 
-  const goToStepByName = (name: string) => {
-    const stepIndex = steps.findIndex(step => step.name === name) + 1;
-    stepIndex > 0 && setCurrentStepIndex(stepIndex);
+    if (stepIndex > 0 && stepIndex < steps.length + 1 && !steps[stepIndex].isHidden) {
+      setCurrentStepIndex(stepIndex);
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(`Wizard: Unable to navigate to step with name: ${name}.`);
+    }
   };
 
   return (
     <WizardContextProvider
-      steps={steps}
+      steps={initialSteps}
       currentStepIndex={currentStepIndex}
       footer={footer}
+      isStepVisitRequired={isStepVisitRequired}
       onNext={goToNextStep}
       onBack={goToPrevStep}
       onClose={onClose}
@@ -162,10 +176,39 @@ export const Wizard = ({
         {...wrapperProps}
       >
         {header}
-        <WizardToggleInternal nav={nav} unmountInactiveSteps={unmountInactiveSteps} />
+        <WizardInternal nav={nav} hasUnmountedSteps={hasUnmountedSteps} isStepVisitRequired={isStepVisitRequired} />
       </div>
     </WizardContextProvider>
   );
 };
 
+const WizardInternal = ({
+  nav,
+  hasUnmountedSteps,
+  isStepVisitRequired
+}: Pick<WizardProps, 'nav' | 'hasUnmountedSteps' | 'isStepVisitRequired'>) => {
+  const { currentStep, steps, footer, goToStepByIndex } = useWizardContext();
+  const [isNavExpanded, setIsNavExpanded] = React.useState(false);
+
+  const wizardNav = React.useMemo(() => {
+    if (isCustomWizardNav(nav)) {
+      return typeof nav === 'function' ? nav(isNavExpanded, steps, currentStep, goToStepByIndex) : nav;
+    }
+
+    return <WizardNavInternal nav={nav} isNavExpanded={isNavExpanded} isStepVisitRequired={isStepVisitRequired} />;
+  }, [currentStep, isStepVisitRequired, goToStepByIndex, isNavExpanded, nav, steps]);
+
+  return (
+    <WizardToggle
+      nav={wizardNav}
+      footer={footer}
+      steps={steps}
+      currentStep={currentStep}
+      isNavExpanded={isNavExpanded}
+      toggleNavExpanded={() => setIsNavExpanded(prevIsExpanded => !prevIsExpanded)}
+      hasUnmountedSteps={hasUnmountedSteps}
+    />
+  );
+};
+
 Wizard.displayName = 'Wizard';

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

@@ -16,7 +16,7 @@ export interface WizardBodyProps {
   /** Sets the aria-labelledby attribute for the wrapper element */
   'aria-labelledby'?: string;
   /** Component used as the wrapping content container */
-  wrapperElement?: React.ElementType;
+  component?: React.ElementType;
 }
 
 export const WizardBody = ({
@@ -24,11 +24,11 @@ export const WizardBody = ({
   hasNoBodyPadding = false,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy,
-  wrapperElement: Wrapper = 'div'
+  component: WrapperComponent = 'div'
 }: WizardBodyProps) => (
-  <Wrapper aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
+  <WrapperComponent aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} className={css(styles.wizardMain)}>
     <div className={css(styles.wizardMainBody, hasNoBodyPadding && styles.modifiers.noPadding)}>{children}</div>
-  </Wrapper>
+  </WrapperComponent>
 );
 
 WizardBody.displayName = 'WizardBody';