[ui][typeahead] refactor props

apps/portal/src/components/questions/ContributeQuestionForm.tsx

@@ -84,6 +84,7 @@ export default function ContributeQuestionForm({
             name="company"
             render={({ field }) => (
               <CompaniesTypeahead
+                label="Company"
                 onSelect={({ id }) => {
                   field.onChange(id);
                 }}

apps/portal/src/components/shared/CompaniesTypeahead.tsx

@@ -1,23 +1,30 @@
 import { useState } from 'react';
-import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
+import type { Props as TypeaheadProps } from '@tih/ui/src/Typeahead/Typeahead';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
+type Props = Omit<
-  disabled?: boolean;
+  TypeaheadProps,
-  isLabelHidden?: boolean;
+  'noResultsMessage' | 'onQueryChange' | 'options' | 'query'
-  onSelect: (option: TypeaheadOption) => void;
+> &
-  placeHolder?: string;
+  Partial<Pick<TypeaheadProps, 'noResultsMessage'>> &
-}>;
+  (
+    | Required<Pick<TypeaheadProps, 'onQueryChange' | 'query'>>
+    | {
+        onQueryChange?: never;
+        query?: never;
+      }
+  );
 
 export default function CompaniesTypeahead({
-  disabled,
+  query: queryProp,
-  onSelect,
+  onQueryChange,
-  isLabelHidden,
+  nullable = true,
-  placeHolder,
+  ...typeaheadProps
 }: Props) {
-  const [query, setQuery] = useState('');
+  const [queryState, setQuery] = useState('');
+  const query = queryProp ?? queryState;
   const companies = trpc.useQuery([
     'companies.list',
     {
@@ -29,11 +36,9 @@ export default function CompaniesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
+      {...typeaheadProps}
-      isLabelHidden={isLabelHidden}
-      label="Company"
       noResultsMessage="No companies found"
-      nullable={true}
+      nullable={nullable}
       options={
         data?.map(({ id, name }) => ({
           id,
@@ -41,9 +46,8 @@ export default function CompaniesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeHolder}
+      query={query}
-      onQueryChange={setQuery}
+      onQueryChange={onQueryChange ?? setQuery}
-      onSelect={onSelect}
     />
   );
 }

apps/portal/src/pages/index.tsx

@@ -22,6 +22,7 @@ export default function HomePage() {
             Homepage
           </h1>
           <CompaniesTypeahead
+            label="Company"
             onSelect={(option) => setSelectedCompany(option)}
           />
           <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>

apps/portal/src/pages/offers/index.tsx

@@ -46,7 +46,8 @@ export default function OffersHomePage() {
             <div className="ml-4">
               <CompaniesTypeahead
                 isLabelHidden={true}
-                placeHolder="All companies"
+                label="Company"
+                placeholder="All companies"
                 onSelect={({ value }) => setCompanyFilter(value)}
               />
             </div>

packages/ui/src/Typeahead/Typeahead.tsx

@@ -22,20 +22,26 @@ type Attributes = Pick<
   | 'required'
 >;
 
-type Props = Readonly<{
+export type Props = Readonly<{
   isLabelHidden?: boolean;
   label: string;
   noResultsMessage?: string;
   nullable?: boolean;
-  onQueryChange: (
-    value: string,
-    event: React.ChangeEvent<HTMLInputElement>,
-  ) => void;
   onSelect: (option: TypeaheadOption) => void;
   options: ReadonlyArray<TypeaheadOption>;
   value?: TypeaheadOption;
 }> &
-  Readonly<Attributes>;
+  Readonly<Attributes> &
+  (
+    | Record<string, never>
+    | {
+        onQueryChange: (
+          value: string,
+          event: React.ChangeEvent<HTMLInputElement>,
+        ) => void;
+        query: string;
+      }
+  );
 
 export default function Typeahead({
   disabled = false,
@@ -44,13 +50,16 @@ export default function Typeahead({
   noResultsMessage = 'No results',
   nullable = false,
   options,
+  query: queryProp,
   onQueryChange,
   required,
   value,
   onSelect,
   ...props
 }: Props) {
-  const [query, setQuery] = useState('');
+  const [queryState, setQuery] = useState('');
+  const query = queryProp ?? queryState;
+
   return (
     <Combobox
       by="id"