@patternfly/react-templates 1.1.0-prerelease.9 → 1.1.0

package/src/components/Select/{SelectTypeahead.tsx → MultiTypeaheadSelect.tsx}

@@ -9,26 +9,30 @@ import {
   TextInputGroup,
   TextInputGroupMain,
   TextInputGroupUtilities,
-  Button
+  Button,
+  MenuToggleProps,
+  SelectProps,
+  ChipGroup,
+  Chip
 } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export interface SelectTypeaheadOption extends Omit<SelectOptionProps, 'content'> {
+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 SelectTypeaheadProps {
+export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions: SelectTypeaheadOption[];
+  initialOptions: MultiTypeaheadSelectOption[];
   /** Callback triggered on selection. */
-  onSelect?: (
+  onSelectionChange?: (
     _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>,
-    selection: string | number
+    selections: (string | number)[]
   ) => void;
   /** Callback triggered when the select opens or closes. */
   onToggle?: (nextIsOpen: boolean) => void;
@@ -40,37 +44,49 @@ export interface SelectTypeaheadProps {
   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 SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps> = ({
+export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
   innerRef,
   initialOptions,
-  onSelect,
+  onSelectionChange,
   onToggle,
   onInputChange,
   placeholder = 'Select an option',
   noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
   isDisabled,
+  toggleWidth,
+  toggleProps,
   ...props
-}: SelectTypeaheadProps) => {
+}: MultiTypeaheadSelectProps) => {
   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<SelectTypeaheadOption[]>(initialOptions);
+  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: SelectTypeaheadOption[] = initialOptions;
+    let newSelectOptions: MultiTypeaheadSelectOption[] = initialOptions;
 
     // Filter menu items based on the text input value when one exists
-    if (filterValue) {
+    if (inputValue) {
       newSelectOptions = initialOptions.filter((option) =>
-        String(option.content).toLowerCase().includes(filterValue.toLowerCase())
+        String(option.content).toLowerCase().includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
@@ -79,27 +95,29 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
           {
             isAriaDisabled: true,
             content:
-              typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(filterValue),
+              typeof noOptionsFoundMessage === 'string' ? noOptionsFoundMessage : noOptionsFoundMessage(inputValue),
             value: NO_RESULTS
           }
         ];
       }
 
       // Open the menu when the input value changes and the new value is not empty
-      if (!isOpen) {
-        openMenu();
-      }
+      openMenu();
     }
 
     setSelectOptions(newSelectOptions);
-  }, [filterValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue, initialOptions]);
 
-  const createItemId = (value: string | number) => `select-typeahead-${String(value).replace(' ', '-')}`;
+  React.useEffect(
+    () => setSelected((initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)),
+    [initialOptions]
+  );
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
     const focusedItem = selectOptions[itemIndex];
-    setActiveItemId(createItemId(focusedItem.value));
+    setActiveItemId(focusedItem.value as string);
   };
 
   const resetActiveAndFocusedItem = () => {
@@ -107,15 +125,11 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     setActiveItemId(null);
   };
 
-  const openMenu = () => {
-    onToggle && onToggle(true);
-    setIsOpen(true);
-  };
-
   const closeMenu = () => {
     onToggle && onToggle(false);
     setIsOpen(false);
     resetActiveAndFocusedItem();
+    setInputValue('');
   };
 
   const onInputClick = () => {
@@ -128,34 +142,34 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
 
   const selectOption = (
     _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
-    option: SelectTypeaheadOption
+    option: string | number
   ) => {
-    onSelect && onSelect(_event, option.value);
+    const selections = selected.includes(option) ? selected.filter((o) => option !== o) : [...selected, option];
 
-    setInputValue(String(option.content));
-    setFilterValue('');
-    setSelected(String(option.value));
+    onSelectionChange && onSelectionChange(_event, selections);
+    setSelected(selections);
+  };
 
-    closeMenu();
+  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) {
-      const optionToSelect = selectOptions.find((option) => option.value === value);
-      selectOption(_event, optionToSelect);
+      selectOption(_event, value);
     }
   };
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     onInputChange && onInputChange(value);
-    setFilterValue(value);
 
     resetActiveAndFocusedItem();
-
-    if (value !== selected) {
-      setSelected('');
-    }
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -212,10 +226,11 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     switch (event.key) {
       case 'Enter':
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
-          selectOption(event, focusedItem);
+          selectOption(event, focusedItem?.value);
         }
 
         if (!isOpen) {
+          onToggle && onToggle(true);
           setIsOpen(true);
         }
 
@@ -234,24 +249,29 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     textInputRef?.current?.focus();
   };
 
-  const onClearButtonClick = () => {
-    setSelected('');
-    setInputValue('');
+  const onClearButtonClick = (ev: React.MouseEvent) => {
+    setSelected([]);
     onInputChange && onInputChange('');
-    setFilterValue('');
     resetActiveAndFocusedItem();
     textInputRef?.current?.focus();
+    onSelectionChange && onSelectionChange(ev, []);
   };
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       variant="typeahead"
-      aria-label="Typeahead menu toggle"
+      aria-label="Multi select Typeahead menu toggle"
       onClick={onToggleClick}
       isExpanded={isOpen}
       isDisabled={isDisabled}
       isFullWidth
+      style={
+        {
+          width: toggleWidth
+        } as React.CSSProperties
+      }
+      {...toggleProps}
     >
       <TextInputGroup isPlain>
         <TextInputGroupMain
@@ -259,7 +279,6 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
           onClick={onInputClick}
           onChange={onTextInputChange}
           onKeyDown={onInputKeyDown}
-          id="typeahead-select-input"
           autoComplete="off"
           innerRef={textInputRef}
           placeholder={placeholder}
@@ -267,9 +286,23 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
           role="combobox"
           isExpanded={isOpen}
           aria-controls="select-typeahead-listbox"
-        />
-
-        <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
+        >
+          <ChipGroup aria-label="Current selections">
+            {selected.map((selection, index) => (
+              <Chip
+                key={index}
+                datatest-id={`${selection}-chip`}
+                onClick={(ev) => {
+                  ev.stopPropagation();
+                  clearOption(ev, selection);
+                }}
+              >
+                {initialOptions.find((o) => o.value === selection)?.content}
+              </Chip>
+            ))}
+          </ChipGroup>
+        </TextInputGroupMain>
+        <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
           <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
             <TimesIcon aria-hidden />
           </Button>
@@ -280,7 +313,6 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
 
   return (
     <Select
-      id="typeahead-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={_onSelect}
@@ -292,18 +324,12 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
       ref={innerRef}
       {...props}
     >
-      <SelectList id="select-typeahead-listbox">
+      <SelectList>
         {selectOptions.map((option, index) => {
           const { content, value, ...props } = option;
 
           return (
-            <SelectOption
-              {...props}
-              key={value}
-              value={value}
-              isFocused={focusedItemIndex === index}
-              id={createItemId(value)}
-            >
+            <SelectOption key={value} value={value} isFocused={focusedItemIndex === index} {...props}>
               {content}
             </SelectOption>
           );
@@ -312,10 +338,11 @@ export const SelectTypeaheadBase: React.FunctionComponent<SelectTypeaheadProps>
     </Select>
   );
 };
-SelectTypeaheadBase.displayName = 'SelectTypeaheadBase';
 
-export const SelectTypeahead = React.forwardRef((props: SelectTypeaheadProps, ref: React.Ref<any>) => (
-  <SelectTypeaheadBase {...props} innerRef={ref} />
+MultiTypeaheadSelectBase.displayName = 'MultiTypeaheadSelectBase';
+
+export const MultiTypeaheadSelect = React.forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
+  <MultiTypeaheadSelectBase {...props} innerRef={ref} />
 ));
 
-SelectTypeahead.displayName = 'SelectTypeahead';
+MultiTypeaheadSelect.displayName = 'MultiTypeaheadSelect';

package/src/components/Select/{SelectSimple.tsx → SimpleSelect.tsx}

@@ -1,19 +1,25 @@
 import React from 'react';
-import { Select, SelectList, SelectOption, SelectOptionProps } from '@patternfly/react-core/dist/esm/components/Select';
-import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/esm/components/MenuToggle';
+import {
+  Select,
+  SelectList,
+  SelectOption,
+  SelectOptionProps,
+  SelectProps
+} from '@patternfly/react-core/dist/esm/components/Select';
+import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 
-export interface SelectSimpleOption extends Omit<SelectOptionProps, 'content'> {
+export interface SimpleSelectOption extends Omit<SelectOptionProps, 'content'> {
   /** Content of the select option. */
   content: React.ReactNode;
   /** Value of the select option. */
   value: string | number;
 }
 
-export interface SelectSimpleProps {
+export interface SimpleSelectProps extends Omit<SelectProps, 'toggle'> {
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Initial options of the select. */
-  initialOptions?: SelectSimpleOption[];
+  initialOptions?: SimpleSelectOption[];
   /** Callback triggered on selection. */
   onSelect?: (_event: React.MouseEvent<Element, MouseEvent>, selection: string | number) => void;
   /** Callback triggered when the select opens or closes. */
@@ -22,11 +28,15 @@ export interface SelectSimpleProps {
   isDisabled?: boolean;
   /** Content of the toggle. Defaults to the selected option. */
   toggleContent?: React.ReactNode;
-  /** Width of the toggle */
+  /** Placeholder text for the select input. */
+  placeholder?: string;
+  /** Width of the toggle. */
   toggleWidth?: string;
+  /** Additional props passed to the toggle. */
+  toggleProps?: MenuToggleProps;
 }
 
-const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
+const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -34,16 +44,23 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   onToggle,
   toggleContent,
   toggleWidth = '200px',
+  toggleProps,
+  placeholder = 'Select a value',
   ...props
-}: SelectSimpleProps) => {
+}: 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 {...props} value={value} key={value} isSelected={isSelected}>
+      <SelectOption value={value} key={value} isSelected={isSelected} {...props}>
         {content}
       </SelectOption>
     );
@@ -56,7 +73,8 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
 
   const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     onSelect && onSelect(_event, value);
-    setSelected(value as string);
+    setSelected(initialOptions.find((o) => o.value === value));
+    onToggle && onToggle(true);
     setIsOpen(false);
   };
 
@@ -71,18 +89,21 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
           width: toggleWidth
         } as React.CSSProperties
       }
+      {...toggleProps}
     >
-      {toggleContent ? toggleContent : selected}
+      {toggleContent ? toggleContent : selected?.content || placeholder}
     </MenuToggle>
   );
 
   return (
     <Select
-      id="single-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={_onSelect}
-      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => {
+        onToggle && onToggle(isOpen);
+        setIsOpen(isOpen);
+      }}
       toggle={toggle}
       shouldFocusToggleOnSelect
       ref={innerRef}
@@ -93,8 +114,8 @@ const SelectSimpleBase: React.FunctionComponent<SelectSimpleProps> = ({
   );
 };
 
-export const SelectSimple = React.forwardRef((props: SelectSimpleProps, ref: React.Ref<any>) => (
-  <SelectSimpleBase {...props} innerRef={ref} />
+export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
+  <SimpleSelectBase {...props} innerRef={ref} />
 ));
 
-SelectSimple.displayName = 'SelectSimple';
+SimpleSelect.displayName = 'SimpleSelect';