Improvements to the TypeaheadSelect template (#11153)

* Avoid "any" type in TypeaheadSelect template

* Don't show "Clear" button without onClearSelection function

If there is no such function, nothing will change when clicking that
button, and it is less confusing to not show it in that case.

* Fix TypeScript error in TypeaheadSelect

This one:

# pkg/lib/cockpit-components-typeahead-select.tsx:406:6 - error TS2375: Type '{ children: Element; className?: string; isExpanded: boolean; isDisabled: boolean | undefined; isFullHeight?: boolean; isFullWidth: boolean; splitButtonOptions?: SplitButtonOptions; ... 281 more ...; ref: Ref<...>; }' is not assignable to type 'MenuToggleProps' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
#   Types of property 'isDisabled' are incompatible.
#     Type 'boolean | undefined' is not assignable to type 'boolean'.
#       Type 'undefined' is not assignable to type 'boolean'.

packages/react-templates/src/components/Select/TypeaheadSelect.tsx

@@ -26,7 +26,7 @@ export interface TypeaheadSelectOption extends Omit<SelectOptionProps, 'content'
 
 export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSelect'> {
   /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
+  innerRef?: React.Ref<HTMLDivElement>;
   /** Options of the select */
   selectOptions: TypeaheadSelectOption[];
   /** Callback triggered on selection. */
@@ -325,7 +325,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       aria-label="Typeahead menu toggle"
       onClick={onToggleClick}
       isExpanded={isOpen}
-      isDisabled={isDisabled}
+      isDisabled={isDisabled || false}
       isFullWidth
       style={
         {
@@ -349,7 +349,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
           aria-controls="select-typeahead-listbox"
         />
         <TextInputGroupUtilities
-          {...(!(isFiltering && filterValue) && !selected ? { style: { display: 'none' } } : {})}
+          {...(!(isFiltering && filterValue) && !(selected && onClearSelection) ? { style: { display: 'none' } } : {})}
         >
           <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
             <TimesIcon aria-hidden />
@@ -386,7 +386,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 };
 TypeaheadSelectBase.displayName = 'TypeaheadSelectBase';
 
-export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
+export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<HTMLDivElement>) => (
   <TypeaheadSelectBase {...props} innerRef={ref} />
 ));