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

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

@@ -26,28 +26,25 @@ 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>();
 
   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())
+    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: false, children: `No results found for "${inputValue}"`, itemId: 'no results' }
+          { isDisabled: false, children: `No results found for "${filterValue}"`, itemId: 'no results' }
         ];
       }
 
@@ -60,7 +57,7 @@ export const SelectBasic: React.FunctionComponent = () => {
     setSelectOptions(newSelectOptions);
     setActiveItem(null);
     setFocusedItemIndex(null);
-  }, [inputValue]);
+  }, [filterValue]);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -72,6 +69,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
     if (itemId && itemId !== 'no results') {
       setInputValue(itemId as string);
+      setFilterValue('');
       setSelected(itemId as string);
     }
     setIsOpen(false);
@@ -81,6 +79,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
   const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
+    setFilterValue(value);
   };
 
   const handleMenuArrowKeys = (key: string) => {
@@ -106,13 +105,13 @@ export const SelectBasic: React.FunctionComponent = () => {
       }
 
       setFocusedItemIndex(indexToFocus);
-      const focusedItem = selectOptions.filter(option => !option.isDisabled)[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(option => !option.isDisabled);
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
     const [firstMenuItem] = enabledMenuItems;
     const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
 
@@ -121,10 +120,11 @@ export const SelectBasic: React.FunctionComponent = () => {
       case 'Enter':
         if (isOpen && focusedItem.itemId !== 'no results') {
           setInputValue(String(focusedItem.children));
+          setFilterValue('');
           setSelected(String(focusedItem.children));
         }
 
-        setIsOpen(prevIsOpen => !prevIsOpen);
+        setIsOpen((prevIsOpen) => !prevIsOpen);
         setFocusedItemIndex(null);
         setActiveItem(null);
 
@@ -167,6 +167,7 @@ export const SelectBasic: React.FunctionComponent = () => {
               onClick={() => {
                 setSelected('');
                 setInputValue('');
+                setFilterValue('');
                 textInputRef?.current?.focus();
               }}
               aria-label="Clear input value"
@@ -182,7 +183,6 @@ export const SelectBasic: React.FunctionComponent = () => {
   return (
     <Select
       id="typeahead-select"
-      ref={menuRef}
       isOpen={isOpen}
       selected={selected}
       onSelect={onSelect}

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

@@ -0,0 +1,220 @@
+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';
+
+let 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 SelectTypeaheadCreatable: 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 [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  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 creation option
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, itemId: 'create' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, onCreation]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+
+    if (itemId) {
+      if (itemId === 'create') {
+        if (!initialSelectOptions.some((item) => item.itemId === filterValue)) {
+          initialSelectOptions = [...initialSelectOptions, { itemId: filterValue, children: filterValue }];
+        }
+        setSelected(filterValue);
+        setOnCreation(!onCreation);
+        setFilterValue('');
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('selected', itemId);
+        setInputValue(itemId as string);
+        setFilterValue('');
+        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) => {
+    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-create-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    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) {
+          onSelect(undefined, focusedItem.itemId as string);
+          setIsOpen((prevIsOpen) => !prevIsOpen);
+          setFocusedItemIndex(null);
+          setActiveItem(null);
+        }
+
+        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;
+    }
+  };
+
+  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="create-typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-create-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="create-typeahead-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={() => {
+        setIsOpen(false);
+      }}
+      toggle={toggle}
+    >
+      <SelectList id="select-create-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}
+          />
+        ))}
+      </SelectList>
+    </Select>
+  );
+};

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

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
+
+export const SelectViewMore: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectOptions, setSelectOptions] = React.useState([
+    <SelectOption key={0} itemId="Option 1">
+      Option 1
+    </SelectOption>,
+    <SelectOption key={1} itemId="Option 2">
+      Option 2
+    </SelectOption>,
+    <SelectOption key={2} itemId="Option 3">
+      Option 3
+    </SelectOption>,
+    <SelectOption key={3} itemId="Option 4">
+      Option 4
+    </SelectOption>,
+    <SelectOption key={4} itemId="Option 5">
+      Option 5
+    </SelectOption>,
+    <SelectOption key={5} itemId="Option 6">
+      Option 6
+    </SelectOption>,
+    <SelectOption key={6} itemId="Option 7">
+      Option 7
+    </SelectOption>,
+    <SelectOption key={7} itemId="Option 8">
+      Option 8
+    </SelectOption>,
+    <SelectOption key={8} itemId="Option 9">
+      Option 9
+    </SelectOption>,
+    <SelectOption key={9} itemId="Final Option 10">
+      Final Option 10
+    </SelectOption>
+  ]);
+  const [numOptions, setNumOptions] = React.useState(3);
+  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLLIElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (selectOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = selectOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= selectOptions.length ? numOptions + 3 : selectOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.itemId);
+    setVisibleOptions(selectOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  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 !== 'loader') {
+      setSelected(itemId as string);
+      setIsOpen(false);
+      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="single-view-more-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={{ toggleNode: toggle, toggleRef }}
+    >
+      <SelectList>
+        {visibleOptions.map((option) => {
+          const props = option.props;
+
+          return <SelectOption key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+        })}
+        {numOptions !== selectOptions.length && (
+          <SelectOption
+            {...(!isLoading && { isLoadButton: true })}
+            {...(isLoading && { isLoading: true })}
+            onClick={onViewMoreClick}
+            itemId="loader"
+            ref={viewMoreRef}
+          >
+            {isLoading ? <Spinner size="lg" /> : 'View more'}
+          </SelectOption>
+        )}
+      </SelectList>
+    </Select>
+  );
+};

package/src/demos/ComposableMenu/ComposableMenu.md

@@ -32,36 +32,43 @@ Custom menus can be constructed using a composable approach by combining the [Me
 ### Composable simple dropdown
 
 ```ts file="./examples/ComposableSimpleDropdown.tsx"
+
 ```
 
 ### Composable actions menu
 
 ```ts file="./examples/ComposableActionsMenu.tsx"
+
 ```
 
 ### Composable simple select
 
 ```ts file="./examples/ComposableSimpleSelect.tsx"
+
 ```
 
 ### Composable simple checkbox select
 
 ```ts file="./examples/ComposableSimpleCheckboxSelect.tsx"
+
 ```
 
 ### Composable typeahead select
 
 ```ts file="./examples/ComposableTypeaheadSelect.tsx"
+
 ```
 
 ### Composable multiple typeahead select
 
 ```ts file="./examples/ComposableMultipleTypeaheadSelect.tsx"
+
 ```
 
 ### Composable drilldown menu
 
 ```ts isBeta file="./examples/ComposableDrilldownMenu.tsx"
+
 ```
 
 ### Composable tree view menu
@@ -69,6 +76,7 @@ Custom menus can be constructed using a composable approach by combining the [Me
 When rendering a menu-like element that does not contain MenuItem components, [Panel](/components/panel) allows more flexible control and customization.
 
 ```ts file="./examples/ComposableTreeViewMenu.tsx"
+
 ```
 
 ### Composable flyout
@@ -76,29 +84,35 @@ When rendering a menu-like element that does not contain MenuItem components, [P
 The flyout will automatically position to the left or top if it would otherwise go outside the window. The menu must be placed in a container outside the main content like Popper, [Popover](/components/popover) or [Tooltip](/components/tooltip) since it may go over the side nav.
 
 ```ts isBeta file="./examples/ComposableFlyout.tsx"
+
 ```
 
 ### Composable application launcher
 
 ```ts file="./examples/ComposableApplicationLauncher.tsx"
+
 ```
 
 ### Composable context selector
 
 ```ts file="./examples/ComposableContextSelector.tsx"
+
 ```
 
 ### Composable options menu variants
 
 ```ts file="./examples/ComposableOptionsMenuVariants.tsx"
+
 ```
 
 ### Composable dropdown variants
 
 ```ts file="./examples/ComposableDropdwnVariants.tsx"
+
 ```
 
 ### Composable date select
 
 ```ts file="./examples/ComposableDateSelect.tsx"
+
 ```

package/src/helpers/Popper/Popper.tsx

@@ -68,7 +68,7 @@ export interface PopperProps {
   position?: 'right' | 'left' | 'center';
   /** Instead of direction and position can set the placement of the popper */
   placement?: Placement;
-  /** Custsom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the trigger element's width */
   width?: string | 'trigger';
   /** Minimum width of the popper. If the value is "trigger", it will set the min width to the trigger element's width */
   minWidth?: string | 'trigger';