Best styling solution comobox

[maxtotheguenther]

hi,
I have a question regarding the styling of the combobox.
I would like to build a component (Automcomplete), which is already styled, but passes all parameters to the actual combobox. But unfortunately I get problems with Typescript when I try to create a hoc. Because the type of combobox.option is generic.

import { Combobox, Transition } from "@headlessui/react";
import {
  ChevronUpDownIcon,
  MagnifyingGlassIcon,
} from "@heroicons/react/20/solid";
import React, { forwardRef, Fragment, ReactNode } from "react";
import { RequireField } from "~/types/RequireField.type";
import { Spinner } from "../Spinner";
import { TextField, TextFieldProps } from "../TextField";

export const Autocomplete = Combobox;

export const AutocompleteInput = forwardRef<
  HTMLInputElement,
  RequireField<TextFieldProps, "onChange"> & { isLoading?: boolean }
>((props, forwardedRef) => {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const { ref, isLoading, ...inputProps } = props;
  return (
    <Combobox.Input
      as={TextField}
      {...inputProps}
      leadingIcon={MagnifyingGlassIcon}
      ref={forwardedRef}
      trailingButton={
        <Combobox.Button
          type="button"
          className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
        >
          <ChevronUpDownIcon
            className="h-5 w-5 text-gray-400"
            aria-hidden="true"
          />
        </Combobox.Button>
      }
      {...(isLoading && { trailingIcon: Spinner })}
    />
  );
});
AutocompleteInput.displayName = "AutocompleteInput";

export const AutocompleteOptions = (props: { children: ReactNode }) => {
  return (
    <Transition
      as={Fragment}
      leave="transition ease-in duration-100"
      leaveFrom="opacity-100"
      leaveTo="opacity-0"
      afterLeave={() => null}
    >
      <div className="relative">
        <Combobox.Options className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
          {props.children}
        </Combobox.Options>
      </div>
    </Transition>
  );
};
AutocompleteOptions.displayName = "AutocompleteOptions";

// how to create a hof which expects combobox.options props but is already styled.
export const AutocompleteOption = Combobox.Option;