@patternfly/react-templates 1.1.0-prerelease.39 → 1.1.0-prerelease.40

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

@@ -30,6 +30,9 @@ import { SimpleSelect, CheckboxSelect, TypeaheadSelect, MultiTypeaheadSelect } f
 
 ### Typeahead
 
+Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.
+
+Selection can be given by either the `selected` property or by setting `isSelected` on the option that is currently selected.
 ```ts file="TypeaheadSelectDemo.tsx"
 
 ```

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

@@ -18,9 +18,9 @@ export const SelectTypeaheadDemo: React.FunctionComponent = () => {
   const [isCreatable, setIsCreatable] = React.useState<boolean>(false);
   const [isCreateOptionOnTop, setIsCreateOptionOnTop] = React.useState<boolean>(false);
 
-  const initialOptions = React.useMemo<TypeaheadSelectOption[]>(
-    () => options.map((o) => ({ ...o, selected: o.value === selected })),
-    [options, selected]
+  const selectOptions = React.useMemo<TypeaheadSelectOption[]>(
+    () => options.map((o) => ({ ...o })).sort((a, b) => a.content.localeCompare(b.content)),
+    [options]
   );
 
   React.useEffect(() => {
@@ -30,16 +30,18 @@ export const SelectTypeaheadDemo: React.FunctionComponent = () => {
   return (
     <>
       <TypeaheadSelect
-        initialOptions={initialOptions}
+        selectOptions={selectOptions}
         placeholder="Select a state"
         noOptionsFoundMessage={(filter) => `No state was found for "${filter}"`}
         onClearSelection={() => setSelected(undefined)}
-        onSelect={(_ev, selection) => {
+        onSelect={(_ev, selectedValue) => {
+          const selection = String(selectedValue);
           if (!options.find((o) => o.value === selection)) {
-            setOptions([...options, { content: String(selection), value: String(selection) }]);
+            setOptions([...options, { content: selection, value: selection }]);
           }
-          setSelected(String(selection));
+          setSelected((prev) => (prev !== selection ? selection : undefined));
         }}
+        selected={selected}
         isCreatable={isCreatable}
         isCreateOptionOnTop={isCreateOptionOnTop}
       />