[portal][misc] refactor typeahead props

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

@@ -1,28 +1,32 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
+type BaseProps = Pick<
-  disabled?: boolean;
+  ComponentProps<typeof Typeahead>,
-  errorMessage?: string;
+  | 'disabled'
-  isLabelHidden?: boolean;
+  | 'errorMessage'
-  label?: string;
+  | 'isLabelHidden'
-  onSelect: (option: TypeaheadOption | null) => void;
+  | 'placeholder'
-  placeholder?: string;
+  | 'required'
-  required?: boolean;
+  | 'textSize'
-  value?: TypeaheadOption | null;
+>;
-}>;
+
+type Props = BaseProps &
+  Readonly<{
+    label?: string;
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CitiesTypeahead({
-  disabled,
   label = 'City',
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const cities = trpc.useQuery([
@@ -36,8 +40,6 @@ export default function CitiesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label={label}
       noResultsMessage="No cities found"
       nullable={true}
@@ -48,12 +50,10 @@ export default function CitiesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }

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

@@ -1,26 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
+type BaseProps = Pick<
-  disabled?: boolean;
+  ComponentProps<typeof Typeahead>,
-  errorMessage?: string;
+  | 'disabled'
-  isLabelHidden?: boolean;
+  | 'errorMessage'
-  onSelect: (option: TypeaheadOption | null) => void;
+  | 'isLabelHidden'
-  placeholder?: string;
+  | 'placeholder'
-  required?: boolean;
+  | 'required'
-  value?: TypeaheadOption | null;
+  | 'textSize'
-}>;
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CompaniesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const companies = trpc.useQuery([
@@ -34,8 +38,6 @@ export default function CompaniesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Company"
       noResultsMessage="No companies found"
       nullable={true}
@@ -46,12 +48,10 @@ export default function CompaniesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }

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

@@ -1,26 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { trpc } from '~/utils/trpc';
 
-type Props = Readonly<{
+type BaseProps = Pick<
-  disabled?: boolean;
+  ComponentProps<typeof Typeahead>,
-  errorMessage?: string;
+  | 'disabled'
-  isLabelHidden?: boolean;
+  | 'errorMessage'
-  onSelect: (option: TypeaheadOption | null) => void;
+  | 'isLabelHidden'
-  placeholder?: string;
+  | 'placeholder'
-  required?: boolean;
+  | 'required'
-  value?: TypeaheadOption | null;
+  | 'textSize'
-}>;
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function CountriesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const countries = trpc.useQuery([
@@ -34,8 +38,6 @@ export default function CountriesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Country"
       noResultsMessage="No countries found"
       nullable={true}
@@ -46,12 +48,10 @@ export default function CountriesTypeahead({
           value: id,
         })) ?? []
       }
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }

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

@@ -1,25 +1,30 @@
+import type { ComponentProps } from 'react';
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
 import { Typeahead } from '@tih/ui';
 
 import { JobTitleLabels } from './JobTitles';
 
-type Props = Readonly<{
+type BaseProps = Pick<
-  disabled?: boolean;
+  ComponentProps<typeof Typeahead>,
-  isLabelHidden?: boolean;
+  | 'disabled'
-  onSelect: (option: TypeaheadOption | null) => void;
+  | 'errorMessage'
-  placeholder?: string;
+  | 'isLabelHidden'
-  required?: boolean;
+  | 'placeholder'
-  value?: TypeaheadOption | null;
+  | 'required'
-}>;
+  | 'textSize'
+>;
+
+type Props = BaseProps &
+  Readonly<{
+    onSelect: (option: TypeaheadOption | null) => void;
+    value?: TypeaheadOption | null;
+  }>;
 
 export default function JobTitlesTypeahead({
-  disabled,
   onSelect,
-  isLabelHidden,
-  placeholder,
-  required,
   value,
+  ...props
 }: Props) {
   const [query, setQuery] = useState('');
   const options = Object.entries(JobTitleLabels)
@@ -35,18 +40,14 @@ export default function JobTitlesTypeahead({
 
   return (
     <Typeahead
-      disabled={disabled}
-      isLabelHidden={isLabelHidden}
       label="Job Title"
       noResultsMessage="No available job titles."
       nullable={true}
       options={options}
-      placeholder={placeholder}
-      required={required}
-      textSize="inherit"
       value={value}
       onQueryChange={setQuery}
       onSelect={onSelect}
+      {...props}
     />
   );
 }