@patternfly/react-core 5.0.0-alpha.106 → 5.0.0-alpha.108

package/src/components/Select/examples/Select.md

@@ -3,35 +3,82 @@ id: Select
 section: components
 subsection: menus
 cssPrefix: pf-c-select
-propComponents: ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle']
+propComponents:
+  ['Select', 'SelectOption', 'SelectGroup', 'SelectList', 'MenuToggle', 'SelectToggleProps', 'SelectPopperProps']
 ouia: true
 ---
 
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
+`Select` builds off of the Menu component suite to wrap commonly used properties and functions for a select menu. See the [Menu documentation](/components/menus/menu) for a full list of properties that may be passed through `Select` to further customize the select menu, or the [custom menu examples](/components/menus/custom-menus) for additional examples of fully functional menus.
+
 ### Single
 
 ```ts file="./SelectBasic.tsx"
+
+```
+
+### Option variations
+
+Showcases different option variants and customizations that are commonly used in a select menu. For a more complete list, see the [Menu documentation](/components/menus/menu).
+
+```ts file="./SelectOptionVariations.tsx"
+
 ```
 
 ### Grouped single
 
 ```ts file="./SelectGrouped.tsx"
+
 ```
 
 ### Checkbox
 
 ```ts file="./SelectCheckbox.tsx"
+
 ```
 
 ### Typeahead
 
 ```ts file="./SelectTypeahead.tsx"
+
+```
+
+### Typeahead with create option
+
+```ts file="./SelectTypeaheadCreatable.tsx"
+
 ```
 
-### Multiple Typeahead
+### Multiple typeahead with chips
 
 ```ts file="./SelectMultiTypeahead.tsx"
+
+```
+
+### Multiple typeahead with create option
+
+```ts file="./SelectMultiTypeaheadCreatable.tsx"
+
+```
+
+### Multiple typeahead with checkboxes
+
+```ts file="./SelectMultiTypeaheadCheckbox.tsx"
+
+```
+
+### View more
+
+```ts file="./SelectViewMore.tsx"
+
+```
+
+### Footer
+
+```ts file="./SelectFooter.tsx"
+
 ```

package/src/components/Select/examples/SelectBasic.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from '@patternfly/react-core';
 
 export const SelectBasic: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
-  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -23,6 +23,7 @@ export const SelectBasic: React.FunctionComponent = () => {
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}
+      isDisabled={isDisabled}
       style={
         {
           width: '200px'
@@ -34,20 +35,29 @@ export const SelectBasic: React.FunctionComponent = () => {
   );
 
   return (
-    <Select
-      id="single-select"
-      ref={menuRef}
-      isOpen={isOpen}
-      selected={selected}
-      onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
-      toggle={toggle}
-    >
-      <SelectList>
-        <SelectOption itemId="Option 1">Option 1</SelectOption>
-        <SelectOption itemId="Option 2">Option 2</SelectOption>
-        <SelectOption itemId="Option 3">Option 3</SelectOption>
-      </SelectList>
-    </Select>
+    <React.Fragment>
+      <Checkbox
+        id="toggle-disabled"
+        label="isDisabled"
+        isChecked={isDisabled}
+        onChange={(_event, checked) => setIsDisabled(checked)}
+        style={{ marginBottom: 20 }}
+      />
+      <Select
+        id="single-select"
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={onSelect}
+        onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        toggle={toggle}
+        shouldFocusToggleOnSelect
+      >
+        <SelectList>
+          <SelectOption itemId="Option 1">Option 1</SelectOption>
+          <SelectOption itemId="Option 2">Option 2</SelectOption>
+          <SelectOption itemId="Option 3">Option 3</SelectOption>
+        </SelectList>
+      </Select>
+    </React.Fragment>
   );
 };

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

@@ -4,7 +4,6 @@ import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge
 export const SelectCheckbox: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selectedItems, setSelectedItems] = React.useState<number[]>([]);
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -15,7 +14,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
     console.log('selected', itemId);
 
     if (selectedItems.includes(itemId as number)) {
-      setSelectedItems(selectedItems.filter(id => id !== itemId));
+      setSelectedItems(selectedItems.filter((id) => id !== itemId));
     } else {
       setSelectedItems([...selectedItems, itemId as number]);
     }
@@ -41,7 +40,6 @@ export const SelectCheckbox: React.FunctionComponent = () => {
     <Select
       role="menu"
       id="checkbox-select"
-      ref={menuRef}
       isOpen={isOpen}
       selected={selectedItems}
       onSelect={onSelect}

package/src/components/Select/examples/SelectFooter.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from '@patternfly/react-core';
+
+export const SelectFooter: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const toggle = (toggleRef) => (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  function onSelect(event: React.MouseEvent | undefined, itemId: string | number | undefined) {
+    if (typeof itemId === 'undefined') {
+      return;
+    }
+
+    setSelected(itemId.toString());
+  }
+
+  return (
+    <Select
+      isOpen={isOpen}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      onOpenChangeKeys={['Escape']}
+      toggle={toggle}
+      id="menu-with-footer"
+      onSelect={onSelect}
+      selected={selected}
+    >
+      <SelectList>
+        <SelectOption itemId="Option 1">Option 1</SelectOption>
+        <SelectOption itemId="Option 2">Option 2</SelectOption>
+        <SelectOption itemId="Option 3">Option 3</SelectOption>
+      </SelectList>
+      <MenuFooter>
+        <Button variant="link" isInline>
+          Footer action
+        </Button>
+      </MenuFooter>
+    </Select>
+  );
+};

package/src/components/Select/examples/SelectGrouped.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import { Select, SelectOption, SelectList, SelectGroup, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectGroup,
+  MenuToggle,
+  MenuToggleElement,
+  Divider
+} from '@patternfly/react-core';
 
-export const SelectBasic: React.FunctionComponent = () => {
+export const SelectGrouped: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string>('Select a value');
-  const menuRef = React.useRef<HTMLDivElement>(null);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -35,13 +42,13 @@ export const SelectBasic: React.FunctionComponent = () => {
 
   return (
     <Select
-      id="single-select"
-      ref={menuRef}
+      id="single-grouped-select"
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}
-      onOpenChange={isOpen => setIsOpen(isOpen)}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
       toggle={toggle}
+      shouldFocusToggleOnSelect
     >
       <SelectGroup label="Group 1">
         <SelectList>
@@ -50,6 +57,7 @@ export const SelectBasic: React.FunctionComponent = () => {
           <SelectOption itemId="Option 3">Option 3</SelectOption>
         </SelectList>
       </SelectGroup>
+      <Divider />
       <SelectGroup label="Group 2">
         <SelectList>
           <SelectOption itemId="Option 4">Option 4</SelectOption>

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

@@ -31,8 +31,6 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   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>();
 
   React.useEffect(() => {
@@ -40,10 +38,8 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
     // Filter menu items based on the text input value when one exists
     if (inputValue) {
-      newSelectOptions = initialSelectOptions.filter(menuItem =>
-        String(menuItem.children)
-          .toLowerCase()
-          .includes(inputValue.toLowerCase())
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())
       );
 
       // When no options are found after filtering, display 'No results found'
@@ -87,13 +83,13 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter(option => !option.isDisabled)[indexToFocus];
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
       setActiveItem(`select-multi-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
     }
   };
 
   const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    const enabledMenuItems = selectOptions.filter(menuItem => !menuItem.isDisabled);
+    const enabledMenuItems = selectOptions.filter((menuItem) => !menuItem.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
@@ -101,7 +97,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       // Select the first available option
       case 'Enter':
         if (!isOpen) {
-          setIsOpen(prevIsOpen => !prevIsOpen);
+          setIsOpen((prevIsOpen) => !prevIsOpen);
         } else if (isOpen && focusedItem.itemId !== 'no results') {
           onSelect(focusedItem.itemId as string);
         }
@@ -133,7 +129,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
     if (itemId && itemId !== 'no results') {
       setSelected(
-        selected.includes(itemId) ? selected.filter(selection => selection !== itemId) : [...selected, itemId]
+        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
       );
     }
 
@@ -161,7 +157,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
             {selected.map((selection, index) => (
               <Chip
                 key={index}
-                onClick={ev => {
+                onClick={(ev) => {
                   ev.stopPropagation();
                   onSelect(selection);
                 }}
@@ -193,7 +189,6 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
   return (
     <Select
       id="multi-typeahead-select"
-      ref={menuRef}
       isOpen={isOpen}
       selected={selected}
       onSelect={(ev, selection) => onSelect(selection as string)}

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -0,0 +1,204 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  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 SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState<string>('');
+  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 [placeholder, setPlaceholder] = React.useState('0 items selected');
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (inputValue) {
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(inputValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display 'No results found'
+      if (!newSelectOptions.length) {
+        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(null);
+    setActiveItem(null);
+  }, [inputValue]);
+
+  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 focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-multi-typeahead-checkbox-${focusedItem.itemId.replace(' ', '-')}`);
+    }
+  };
+
+  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) {
+          setIsOpen((prevIsOpen) => !prevIsOpen);
+        } 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;
+    }
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+  };
+
+  const onSelect = (itemId: string) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+
+    if (itemId && itemId !== 'no results') {
+      setSelected(
+        selected.includes(itemId) ? selected.filter((selection) => selection !== itemId) : [...selected, itemId]
+      );
+    }
+
+    textInputRef.current?.focus();
+  };
+
+  React.useEffect(() => {
+    setPlaceholder(`${selected.length} items selected`);
+  }, [selected]);
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle variant="typeahead" onClick={onToggleClick} innerRef={toggleRef} isExpanded={isOpen} isFullWidth>
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="multi-typeahead-select-checkbox-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder={placeholder}
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-multi-typeahead-checkbox-listbox"
+        />
+        <TextInputGroupUtilities>
+          {selected.length > 0 && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setInputValue('');
+                setSelected([]);
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      role="menu"
+      id="multi-typeahead-checkbox-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={(ev, selection) => onSelect(selection as string)}
+      onOpenChange={() => setIsOpen(false)}
+      toggle={toggle}
+    >
+      <SelectList id="select-multi-typeahead-checkbox-listbox">
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            {...(!option.isDisabled && { hasCheckbox: true })}
+            isSelected={selected.includes(option.itemId)}
+            key={option.itemId || option.children}
+            isFocused={focusedItemIndex === index}
+            className={option.className}
+            id={`select-multi-typeahead-${option.itemId.replace(' ', '-')}`}
+            {...option}
+            ref={null}
+          />
+        ))}
+      </SelectList>
+    </Select>
+  );
+};