fix: remove isTypeahead prop in favor of variant

patternfly · Nov 20, 2024 · eb5f5a6 · eb5f5a6
1 parent f2ab64a
commit eb5f5a6
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 11 deletions.
diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -64,8 +64,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   onOpenChangeKeys?: string[];
   /** Callback to override the toggle keydown behavior. By default, when the toggle has focus and the menu is open, pressing the up/down arrow keys will focus a valid non-disabled menu item - the first item for the down arrow key and last item for the up arrow key. */
   onToggleKeydown?: (event: KeyboardEvent) => void;
-  /** Indicates that the Select is used as a typeahead (combobox). Focus won't shift to menu items when pressing up/down arrows. */
-  isTypeahead?: boolean;
+  /** Select variant. For typeahead variant focus won't shift to menu items when pressing up/down arrows. */
+  variant?: 'default' | 'typeahead';
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
@@ -100,7 +100,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
   onToggleKeydown,
-  isTypeahead,
+  variant,
   isPlain,
   innerRef,
   zIndex = 9999,
@@ -140,7 +140,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       if (toggleRef.current?.contains(event.target as Node)) {
         if (onToggleKeydown) {
           onToggleKeydown(event);
-        } else if (isOpen && !isTypeahead) {
+        } else if (isOpen && variant !== 'typeahead') {
           onToggleArrowKeydownDefault(event, menuRef);
         }
       }

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
@@ -245,7 +245,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
@@ -238,7 +238,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-typeahead-checkbox-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
@@ -256,7 +256,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
     >
       <SelectList isAriaMultiselectable id="select-multi-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
@@ -241,7 +241,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
     >
       <SelectList id="select-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
@@ -248,7 +248,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
     >
       <SelectList id="select-create-typeahead-listbox">
         {selectOptions.map((option, index) => (

diff --git a/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx b/packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx
@@ -320,7 +320,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
         !isOpen && closeMenu();
       }}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
       ref={innerRef}
       {...props}
     >

diff --git a/packages/react-templates/src/components/Select/TypeaheadSelect.tsx b/packages/react-templates/src/components/Select/TypeaheadSelect.tsx
@@ -366,7 +366,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       onSelect={_onSelect}
       onOpenChange={(isOpen) => !isOpen && closeMenu()}
       toggle={toggle}
-      isTypeahead
+      variant="typeahead"
       ref={innerRef}
       {...props}
     >