Resolve conflicts

Author: mocca102

src/hooks/useCioAutocomplete.ts

@@ -50,7 +50,7 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     autocompleteClassName = 'cio-autocomplete',
     defaultInput,
     getSearchResultsUrl,
-    onIsOpenChange,
+    ...rest
   } = options;
 
   const [query, setQuery] = useState(defaultInput || '');
@@ -83,7 +83,14 @@ const useCioAutocomplete = (options: UseCioAutocompleteOptions) => {
     highlightedIndex,
     getInputProps,
     getItemProps: getItemPropsDownShift,
-  } = useDownShift({ setQuery, items, onSubmit, cioClient, previousQuery, onIsOpenChange });
+  } = useDownShift({
+    setQuery,
+    items,
+    onSubmit,
+    cioClient,
+    previousQuery,
+    ...rest,
+  });
 
   // Log console errors
   useConsoleErrors(sections, activeSections);

src/hooks/useDownShift.ts

@@ -1,19 +1,17 @@
-import { useCombobox, UseComboboxReturnValue, UseComboboxStateChange } from 'downshift';
+import { useCombobox, UseComboboxProps, UseComboboxReturnValue } from 'downshift';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
 import { Item, OnSubmit } from '../types';
 import { trackSearchSubmit } from '../utils';
 
 let idCounter = 0;
 
-type UseDownShiftOptions = {
+interface UseDownShiftOptions extends UseComboboxProps<Item> {
   setQuery: React.Dispatch<React.SetStateAction<string>>;
-  items: Item[];
   onSubmit: OnSubmit;
   previousQuery?: string;
   cioClient: Nullable<ConstructorIOClient>;
-  onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
-};
+}
 
 export type DownShift = UseComboboxReturnValue<Item>;
 
@@ -25,7 +23,7 @@ const useDownShift: UseDownShift = ({
   onSubmit,
   cioClient,
   previousQuery = '',
-  onIsOpenChange,
+  ...rest
 }) =>
   useCombobox({
     id: `cio-autocomplete-${idCounter++}`, // eslint-disable-line
@@ -71,7 +69,7 @@ const useDownShift: UseDownShift = ({
         }
       }
     },
-    onIsOpenChange,
+    ...rest,
   });
 
 export default useDownShift;

src/types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { GetItemPropsOptions, UseComboboxStateChange } from 'downshift';
+import { GetItemPropsOptions, UseComboboxProps } from 'downshift';
 import { ReactNode } from 'react';
 import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';
 import {
@@ -34,24 +34,29 @@ export interface AdvancedParametersBase {
 export type AdvancedParameters = AdvancedParametersBase &
   Omit<IAutocompleteParameters, 'resultsPerSection'>;
 
-export type CioAutocompleteProps = CioClientConfig & {
-  openOnFocus?: boolean;
-  getSearchResultsUrl?: (item: SearchSuggestion) => string;
-  onSubmit: OnSubmit;
-  onFocus?: () => void;
-  onChange?: (input: string) => void;
-  onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void;
-  placeholder?: string;
-  children?: ReactNode;
-  sections?: UserDefinedSection[];
-  zeroStateSections?: UserDefinedSection[];
-  autocompleteClassName?: string;
-  advancedParameters?: AdvancedParameters;
-  defaultInput?: string;
+// Type UseComboboxProps with items as optional
+type OptionalItemsComboboxProps<Item> = Partial<UseComboboxProps<Item>> & {
+  items?: Item[];
 };
 
 export type UseCioAutocompleteOptions = Omit<CioAutocompleteProps, 'children'>;
 
+export type CioAutocompleteProps = CioClientConfig &
+  OptionalItemsComboboxProps<Item> & {
+    openOnFocus?: boolean;
+    getSearchResultsUrl?: (item: SearchSuggestion) => string;
+    onSubmit: OnSubmit;
+    onFocus?: () => void;
+    onChange?: (input: string) => void;
+    placeholder?: string;
+    children?: ReactNode;
+    sections?: UserDefinedSection[];
+    zeroStateSections?: UserDefinedSection[];
+    autocompleteClassName?: string;
+    advancedParameters?: AdvancedParameters;
+    defaultInput?: string;
+  };
+
 /**
  * AutocompleteSubmitEvent type is AutocompleteSelectSubmit or AutocompleteSearchSubmit.
  * Use isAutocompleteSearchSubmit or isAutocompleteSelectSubmit type predicates to safely access event properties.