@patternfly/react-templates 6.0.0-alpha.45 → 6.0.0-alpha.46

package/src/components/Select/MultiTypeaheadSelect.tsx

@@ -0,0 +1,348 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  MenuToggleProps,
+  SelectProps,
+  Label,
+  LabelGroup
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export interface MultiTypeaheadSelectOption extends Omit<SelectOptionProps, 'content'> {
+  /** Content of the select option. */
+  content: string | number;
+  /** Value of the select option. */
+  value: string | number;
+}
+
+export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+  /** Initial options of the select. */
+  initialOptions: MultiTypeaheadSelectOption[];
+  /** Callback triggered on selection. */
+  onSelectionChange?: (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
+    selections: (string | number)[]
+  ) => void;
+  /** Callback triggered when the select opens or closes. */
+  onToggle?: (nextIsOpen: boolean) => void;
+  /** Callback triggered when the text in the input field changes. */
+  onInputChange?: (newValue: string) => void;
+  /** Placeholder text for the select input. */
+  placeholder?: string;
+  /** Message to display when no options match the filter. */
+  noOptionsFoundMessage?: string | ((filter: string) => string);
+  /** Flag indicating the select should be disabled. */
+  isDisabled?: boolean;
+  /** Width of the toggle. */
+  toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
+}
+
+export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
+  innerRef,
+  initialOptions,
+  onSelectionChange,
+  onToggle,
+  onInputChange,
+  placeholder = 'Select an option',
+  noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
+  isDisabled,
+  toggleWidth,
+  toggleProps,
+  ...props
+}: MultiTypeaheadSelectProps) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<(string | number)[]>(
+    (initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)
+  );
+  const [inputValue, setInputValue] = React.useState<string>();
+  const [selectOptions, setSelectOptions] = React.useState<MultiTypeaheadSelectOption[]>(initialOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  const NO_RESULTS = 'no results';
+
+  const openMenu = () => {
+    onToggle && onToggle(true);
+    setIsOpen(true);
+  };
+
+  React.useEffect(() => {
+    let newSelectOptions: MultiTypeaheadSelectOption[] = initialOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (inputValue) {
+      newSelectOptions = initialOptions.filter((option) =>
+        String(option.content).toLowerCase().includes(inputValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        newSelectOptions = [
+          {
+            isAriaDisabled: true,
+            content:
+              typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(inputValue),
+            value: NO_RESULTS
+          }
+        ];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      openMenu();
+    }
+
+    setSelectOptions(newSelectOptions);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue, initialOptions]);
+
+  React.useEffect(
+    () => setSelected((initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)),
+    [initialOptions]
+  );
+
+  const setActiveAndFocusedItem = (itemIndex: number) => {
+    setFocusedItemIndex(itemIndex);
+    const focusedItem = selectOptions[itemIndex];
+    setActiveItemId(focusedItem.value as string);
+  };
+
+  const resetActiveAndFocusedItem = () => {
+    setFocusedItemIndex(null);
+    setActiveItemId(null);
+  };
+
+  const closeMenu = () => {
+    onToggle && onToggle(false);
+    setIsOpen(false);
+    resetActiveAndFocusedItem();
+    setInputValue('');
+  };
+
+  const onInputClick = () => {
+    if (!isOpen) {
+      openMenu();
+    } else if (!inputValue) {
+      closeMenu();
+    }
+  };
+
+  const selectOption = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
+    option: string | number
+  ) => {
+    const selections = selected.includes(option) ? selected.filter((o) => option !== o) : [...selected, option];
+
+    onSelectionChange && onSelectionChange(_event, selections);
+    setSelected(selections);
+  };
+
+  const clearOption = (
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
+    option: string | number
+  ) => {
+    const selections = selected.filter((o) => option !== o);
+    onSelectionChange && onSelectionChange(_event, selections);
+    setSelected(selections);
+  };
+
+  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+    if (value && value !== NO_RESULTS) {
+      selectOption(_event, value);
+    }
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    onInputChange && onInputChange(value);
+
+    resetActiveAndFocusedItem();
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus = 0;
+
+    if (!isOpen) {
+      openMenu();
+    }
+
+    if (selectOptions.every((option) => option.isDisabled)) {
+      return;
+    }
+
+    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;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus--;
+        if (indexToFocus === -1) {
+          indexToFocus = selectOptions.length - 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;
+      }
+
+      // Skip disabled options
+      while (selectOptions[indexToFocus].isDisabled) {
+        indexToFocus++;
+        if (indexToFocus === selectOptions.length) {
+          indexToFocus = 0;
+        }
+      }
+    }
+
+    setActiveAndFocusedItem(indexToFocus);
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
+
+    switch (event.key) {
+      case 'Enter':
+        if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
+          selectOption(event, focusedItem?.value);
+        }
+
+        if (!isOpen) {
+          onToggle && onToggle(true);
+          setIsOpen(true);
+        }
+
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const onToggleClick = () => {
+    onToggle && onToggle(!isOpen);
+    setIsOpen(!isOpen);
+    textInputRef?.current?.focus();
+  };
+
+  const onClearButtonClick = (ev: React.MouseEvent) => {
+    setSelected([]);
+    onInputChange && onInputChange('');
+    resetActiveAndFocusedItem();
+    textInputRef?.current?.focus();
+    onSelectionChange && onSelectionChange(ev, []);
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle
+      ref={toggleRef}
+      variant="typeahead"
+      aria-label="Multi select Typeahead menu toggle"
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      isDisabled={isDisabled}
+      isFullWidth
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+      {...toggleProps}
+    >
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onInputClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={placeholder}
+          {...(activeItemId && { 'aria-activedescendant': activeItemId })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-typeahead-listbox"
+        >
+          <LabelGroup aria-label="Current selections">
+            {selected.map((selection, index) => (
+              <Label
+                key={index}
+                datatest-id={`${selection}-chip`}
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  clearOption(ev, selection);
+                }}
+              >
+                {initialOptions.find((o) => o.value === selection)?.content}
+              </Label>
+            ))}
+          </LabelGroup>
+        </TextInputGroupMain>
+        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
+            <TimesIcon aria-hidden />
+          </Button>
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={_onSelect}
+      onOpenChange={(isOpen) => {
+        !isOpen && closeMenu();
+      }}
+      toggle={toggle}
+      shouldFocusFirstItemOnOpen={false}
+      ref={innerRef}
+      {...props}
+    >
+      <SelectList>
+        {selectOptions.map((option, index) => {
+          const { content, value, ...props } = option;
+
+          return (
+            <SelectOption key={value} value={value} isFocused={focusedItemIndex === index} {...props}>
+              {content}
+            </SelectOption>
+          );
+        })}
+      </SelectList>
+    </Select>
+  );
+};
+
+MultiTypeaheadSelectBase.displayName = 'MultiTypeaheadSelectBase';
+
+export const MultiTypeaheadSelect = React.forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
+  <MultiTypeaheadSelectBase {...props} innerRef={ref} />
+));
+
+MultiTypeaheadSelect.displayName = 'MultiTypeaheadSelect';

package/src/components/Select/SimpleSelect.tsx

@@ -28,6 +28,8 @@ export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
   isDisabled?: boolean;
   /** Content of the toggle. Defaults to the selected option. */
   toggleContent?: React.ReactNode;
+  /** Placeholder text for the select input. */
+  placeholder?: string;
   /** Width of the toggle. */
   toggleWidth?: string;
   /** Additional props passed to the toggle. */
@@ -43,14 +45,20 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   toggleContent,
   toggleWidth = '200px',
   toggleProps,
+  placeholder = 'Select a value',
   ...props
 }: SimpleSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [selected, setSelected] = React.useState<SimpleSelectOption | undefined>();
+
+  React.useEffect(() => {
+    const selectedOption = initialOptions?.find((option) => option.selected);
+    setSelected(selectedOption);
+  }, [initialOptions]);
 
   const simpleSelectOptions = initialOptions?.map((option) => {
     const { content, value, ...props } = option;
-    const isSelected = selected.includes(`${value}`);
+    const isSelected = selected?.value === value;
     return (
       <SelectOption value={value} key={value} isSelected={isSelected} {...props}>
         {content}
@@ -65,8 +73,8 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
 
   const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     onSelect && onSelect(_event, value);
-    setSelected(value as string);
-    onToggle && onToggle(!false);
+    setSelected(initialOptions.find((o) => o.value === value));
+    onToggle && onToggle(true);
     setIsOpen(false);
   };
 
@@ -83,7 +91,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
       }
       {...toggleProps}
     >
-      {toggleContent ? toggleContent : selected}
+      {toggleContent ? toggleContent : selected?.content || placeholder}
     </MenuToggle>
   );
 

package/src/components/Select/TypeaheadSelect.tsx

@@ -22,22 +22,32 @@ export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'
   value: string | number;
 }
 
-export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle'> {
+export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
   initialOptions: TypeaheadSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
+    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
     selection: string | number
   ) => void;
   /** Callback triggered when the select opens or closes. */
   onToggle?: (nextIsOpen: boolean) => void;
   /** Callback triggered when the text in the input field changes. */
   onInputChange?: (newValue: string) => void;
+  /** Callback triggered when the clear button is selected */
+  onClearSelection?: () => void;
   /** Placeholder text for the select input. */
   placeholder?: string;
+  /** Flag to indicate if the typeahead select allows new items */
+  isCreatable?: boolean;
+  /** Flag to indicate if create option should be at top of typeahead */
+  isCreateOptionOnTop?: boolean;
+  /** Message to display to create a new option */
+  createOptionMessage?: string | ((newValue: string) => string);
+  /** Message to display when no options are available. */
+  noOptionsAvailableMessage?: string;
   /** Message to display when no options match the filter. */
   noOptionsFoundMessage?: string | ((filter: string) => string);
   /** Flag indicating the select should be disabled. */
@@ -48,22 +58,32 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle'> {
   toggleProps?: MenuToggleProps;
 }
 
+const defaultNoOptionsFoundMessage = (filter: string) => `No results found for "${filter}"`;
+const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`;
+
 export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps> = ({
   innerRef,
   initialOptions,
   onSelect,
   onToggle,
   onInputChange,
+  onClearSelection,
   placeholder = 'Select an option',
-  noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
+  noOptionsAvailableMessage = 'No options are available',
+  noOptionsFoundMessage = defaultNoOptionsFoundMessage,
+  isCreatable = false,
+  isCreateOptionOnTop = false,
+  createOptionMessage = defaultCreateOptionMessage,
   isDisabled,
   toggleWidth,
   toggleProps,
   ...props
 }: TypeaheadSelectProps) => {
   const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
+  const [selected, setSelected] = React.useState<string>(String(initialOptions.find((o) => o.selected)?.content ?? ''));
+  const [inputValue, setInputValue] = React.useState<string>(
+    String(initialOptions.find((o) => o.selected)?.content ?? '')
+  );
   const [filterValue, setFilterValue] = React.useState<string>('');
   const [selectOptions, setSelectOptions] = React.useState<TypeaheadSelectOption[]>(initialOptions);
   const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
@@ -81,6 +101,20 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
         String(option.content).toLowerCase().includes(filterValue.toLowerCase())
       );
 
+      if (
+        isCreatable &&
+        filterValue &&
+        !initialOptions.find((o) => String(o.content).toLowerCase() === filterValue.toLowerCase())
+      ) {
+        const createOption = {
+          content: typeof createOptionMessage === 'string' ? createOptionMessage : createOptionMessage(filterValue),
+          value: filterValue
+        };
+        newSelectOptions = isCreateOptionOnTop
+          ? [createOption, ...newSelectOptions]
+          : [...newSelectOptions, createOption];
+      }
+
       // When no options are found after filtering, display 'No results found'
       if (!newSelectOptions.length) {
         newSelectOptions = [
@@ -94,18 +128,45 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       }
 
       // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        openMenu();
-      }
+      openMenu();
+    }
+
+    // When no options are  available,  display 'No options available'
+    if (!newSelectOptions.length) {
+      newSelectOptions = [
+        {
+          isAriaDisabled: true,
+          content: noOptionsAvailableMessage,
+          value: NO_RESULTS
+        }
+      ];
     }
 
     setSelectOptions(newSelectOptions);
-  }, [filterValue, initialOptions]);
+  }, [
+    filterValue,
+    initialOptions,
+    noOptionsFoundMessage,
+    isCreatable,
+    isCreateOptionOnTop,
+    createOptionMessage,
+    noOptionsAvailableMessage
+  ]);
+
+  React.useEffect(() => {
+    // If the selected option changed and the current input value is the previously selected item, update the displayed value.
+    const selectedOption = initialOptions.find((o) => o.selected);
+    if (inputValue === selected && selectedOption?.value !== selected) {
+      setInputValue(String(selectedOption?.content ?? ''));
+    }
+    // Only update when options change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialOptions]);
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
     const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(focusedItem.value as string);
+    setActiveItemId(String(focusedItem.value));
   };
 
   const resetActiveAndFocusedItem = () => {
@@ -114,14 +175,20 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   };
 
   const openMenu = () => {
-    onToggle && onToggle(true);
-    setIsOpen(true);
+    if (!isOpen) {
+      onToggle && onToggle(true);
+      setIsOpen(true);
+    }
   };
 
   const closeMenu = () => {
     onToggle && onToggle(false);
     setIsOpen(false);
     resetActiveAndFocusedItem();
+    const option = initialOptions.find((o) => o.value === selected);
+    if (option) {
+      setInputValue(String(option.content));
+    }
   };
 
   const onInputClick = () => {
@@ -158,18 +225,12 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     setFilterValue(value);
 
     resetActiveAndFocusedItem();
-
-    if (value !== selected) {
-      setSelected('');
-    }
   };
 
   const handleMenuArrowKeys = (key: string) => {
     let indexToFocus = 0;
 
-    if (!isOpen) {
-      openMenu();
-    }
+    openMenu();
 
     if (selectOptions.every((option) => option.isDisabled)) {
       return;
@@ -221,10 +282,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
           selectOption(event, focusedItem);
         }
 
-        if (!isOpen) {
-          onToggle && onToggle(true);
-          setIsOpen(true);
-        }
+        openMenu();
 
         break;
       case 'ArrowUp':
@@ -238,7 +296,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   const onToggleClick = () => {
     onToggle && onToggle(!isOpen);
     setIsOpen(!isOpen);
-    textInputRef?.current?.focus();
+    textInputRef.current?.focus();
   };
 
   const onClearButtonClick = () => {
@@ -247,7 +305,8 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     onInputChange && onInputChange('');
     setFilterValue('');
     resetActiveAndFocusedItem();
-    textInputRef?.current?.focus();
+    textInputRef.current?.focus();
+    onClearSelection && onClearSelection();
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (