@simplybusiness/mobius 5.24.0 → 5.24.2

package/src/components/Combobox/Listbox.tsx

@@ -9,7 +9,8 @@ import { isOptionGroup } from "./utils";
 
 export type ListboxProps<T extends ComboboxOption> = {
   id: string;
-  options: ComboboxOptions<T>;
+  isLoading?: boolean;
+  options: ComboboxOptions<T> | undefined;
   highlightedIndex: number;
   highlightedGroupIndex: number;
   onOptionSelect: (option: T) => void;
@@ -43,6 +44,14 @@ export const Listbox = <T extends ComboboxOption>({
       : `${id}-option-${index}`;
   }
 
+  if (options && options.length === 0) {
+    return (
+      <div role="listbox" id={id} className={classes}>
+        <div className="mobius-combobox__no-options">No options</div>
+      </div>
+    );
+  }
+
   return (
     <div role="listbox" id={id} className={classes}>
       {isOptionGroup(options)
@@ -75,16 +84,18 @@ export const Listbox = <T extends ComboboxOption>({
               ))}
             </ul>
           ))
-        : options.map((option, index) => (
-            <Option
-              key={index}
-              option={option}
-              isHighlighted={highlightedIndex === index}
-              onOptionSelect={onOptionSelect}
-              optionComponent={optionComponent}
-              id={getOptionId(option, 0, index)}
-            />
-          ))}
+        : typeof options !== "undefined"
+          ? options.map((option, index) => (
+              <Option
+                key={index}
+                option={option}
+                isHighlighted={highlightedIndex === index}
+                onOptionSelect={onOptionSelect}
+                optionComponent={optionComponent}
+                id={getOptionId(option, 0, index)}
+              />
+            ))
+          : null}
     </div>
   );
 };

package/src/components/Combobox/types.tsx

@@ -25,6 +25,7 @@ export type ComboboxSyncProps<T extends ComboboxOption = ComboboxOption> =
     asyncOptions?: never;
     delay?: never;
     minSearchLength?: never;
+    onSearched?: never;
   };
 
 export type ComboboxAsyncProps<T extends ComboboxOption = ComboboxOption> =
@@ -39,6 +40,7 @@ export type ComboboxAsyncProps<T extends ComboboxOption = ComboboxOption> =
           inputValue: string,
           options?: { signal?: AbortSignal },
         ) => Promise<ComboboxOptions<T>>);
+    onSearched?: (searchTerm: string) => void;
   };
 
 export type ComboboxProps<T extends ComboboxOption = ComboboxOption> =

package/src/components/Combobox/useComboboxHighlight.tsx

@@ -2,15 +2,19 @@ import { useState } from "react";
 import type { ComboboxOptions } from "./types";
 import { isOptionGroup } from "./utils";
 
-export function useComboboxHighlight(options: ComboboxOptions) {
+export function useComboboxHighlight(options: ComboboxOptions | undefined) {
   const [highlightedIndex, setHighlightedIndex] = useState(
-    options.length ? 0 : -1,
+    options && options.length ? 0 : -1,
   );
   const [highlightedGroupIndex, setHighlightedGroupIndex] = useState(0);
 
   function highlightNextOption() {
     const isGroup = isOptionGroup(options);
 
+    if (!options) {
+      return;
+    }
+
     if (isGroup) {
       const group = options[highlightedGroupIndex];
       if (highlightedIndex === group.options.length - 1) {
@@ -61,6 +65,10 @@ export function useComboboxHighlight(options: ComboboxOptions) {
   function highlightLastOption() {
     const isGroup = isOptionGroup(options);
 
+    if (!options) {
+      return;
+    }
+
     if (isGroup) {
       const lastGroupIndex = options.length - 1;
       const lastGroup = options[lastGroupIndex];
@@ -72,7 +80,9 @@ export function useComboboxHighlight(options: ComboboxOptions) {
   }
 
   const clearHighlight = () => {
-    setHighlightedIndex(options.length ? 0 : -1);
+    setHighlightedIndex(
+      typeof options === "undefined" || options.length ? 0 : -1,
+    );
     setHighlightedGroupIndex(0);
   };
 

package/src/components/Combobox/useComboboxOptions.test.ts

@@ -143,7 +143,7 @@ describe("useComboboxOptions", () => {
       expect(result.current).toStrictEqual({
         updateFilteredOptions: expect.any(Function),
         error: null,
-        filteredOptions: [],
+        filteredOptions: undefined,
         isLoading: false,
         isError: false,
       });
@@ -227,11 +227,75 @@ describe("useComboboxOptions", () => {
       expect(result.current).toStrictEqual({
         updateFilteredOptions: expect.any(Function),
         error: null,
-        filteredOptions: [],
+        filteredOptions: undefined,
         isLoading: false,
         isError: false,
       });
     });
+
+    it("should call onSearched when async options have been fetched", async () => {
+      const onSearched = jest.fn();
+      const asyncOptions = jest.fn().mockResolvedValue([
+        { label: "Async Option 1", value: "1" },
+        { label: "Async Option 2", value: "2" },
+      ]);
+
+      renderHook(() =>
+        useComboboxOptions({
+          asyncOptions,
+          inputValue: "Async",
+          onSearched,
+        }),
+      );
+
+      // Wait for the async function to resolve
+      await act(() => Promise.resolve());
+
+      expect(onSearched).toHaveBeenCalledWith("Async");
+    });
+
+    it("should not call onSearched when input length is less than minSearchLength", async () => {
+      const onSearched = jest.fn();
+      const asyncOptions = jest.fn().mockResolvedValue([
+        { label: "Async Option 1", value: "1" },
+        { label: "Async Option 2", value: "2" },
+      ]);
+
+      renderHook(() =>
+        useComboboxOptions({
+          asyncOptions,
+          inputValue: "As",
+          minSearchLength: 3,
+          onSearched,
+        }),
+      );
+
+      // Wait for the async function to resolve
+      await act(() => Promise.resolve());
+
+      expect(onSearched).not.toHaveBeenCalled();
+    });
+
+    it("should not call onSearched for synchronous options", async () => {
+      const onSearched = jest.fn();
+      const options = [
+        { label: "Option 1", value: "1" },
+        { label: "Option 2", value: "2" },
+      ];
+
+      renderHook(() =>
+        useComboboxOptions({
+          options,
+          inputValue: "Option",
+          onSearched,
+        }),
+      );
+
+      // Wait for any potential async operations
+      await act(() => Promise.resolve());
+
+      expect(onSearched).not.toHaveBeenCalled();
+    });
   });
 
   describe("loading states", () => {
@@ -331,7 +395,7 @@ describe("useComboboxOptions", () => {
       expect(result.current).toStrictEqual({
         updateFilteredOptions: expect.any(Function),
         error: new Error("Fetch error"),
-        filteredOptions: [],
+        filteredOptions: undefined,
         isLoading: false,
         isError: true,
       });
@@ -391,7 +455,7 @@ describe("useComboboxOptions", () => {
     expect(result.current).toStrictEqual({
       updateFilteredOptions: expect.any(Function),
       error: new Error("Fetch error"),
-      filteredOptions: [],
+      filteredOptions: undefined,
       isLoading: false,
       isError: true,
     });

package/src/components/Combobox/useComboboxOptions.ts

@@ -9,6 +9,7 @@ export type UseComboboxOptionsProps<T extends ComboboxOption> = Pick<
 > & {
   skipNextDebounceRef?: React.MutableRefObject<boolean>;
   inputValue?: string;
+  onSearched?: (searchTerm: string) => void;
 };
 
 export function useComboboxOptions<T extends ComboboxOption>({
@@ -18,10 +19,11 @@ export function useComboboxOptions<T extends ComboboxOption>({
   minSearchLength = 3,
   inputValue = "",
   skipNextDebounceRef,
+  onSearched,
 }: UseComboboxOptionsProps<T>) {
-  const [filteredOptions, setFilteredOptions] = useState<ComboboxOptions<T>>(
-    [],
-  );
+  const [filteredOptions, setFilteredOptions] = useState<
+    ComboboxOptions<T> | undefined
+  >(undefined);
   const debouncedInputValue = useDebouncedValue(
     inputValue,
     // Don't debounce synchronous options
@@ -40,11 +42,12 @@ export function useComboboxOptions<T extends ComboboxOption>({
       try {
         if (asyncOptions) {
           if (debouncedInputValue.length < minSearchLength) {
-            setFilteredOptions([]);
+            setFilteredOptions(undefined);
             return;
           }
           const result = await asyncOptions(debouncedInputValue, { signal });
           setFilteredOptions(result);
+          onSearched?.(debouncedInputValue);
         } else {
           // @ts-expect-error options is erroneously typed as possibly undefined
           setFilteredOptions(filterOptions(options, debouncedInputValue));
@@ -76,6 +79,7 @@ export function useComboboxOptions<T extends ComboboxOption>({
     delay,
     minSearchLength,
     skipNextDebounceRef,
+    onSearched,
   ]);
 
   function updateFilteredOptions(newOptions: Promise<ComboboxOptions<T>>) {

package/src/components/Combobox/utils.tsx

@@ -6,8 +6,9 @@ import type {
 
 // FIXME: This might be better handled with Zod
 export function isOptionGroup<T extends ComboboxOption>(
-  options: ComboboxOptions<T>,
+  options: ComboboxOptions<T> | undefined,
 ): options is ComboboxOptionGroup<T>[] {
+  if (!options) return false;
   return (
     typeof options[0] === "object" &&
     "options" in options[0] &&

package/dist/types/turbowatch.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("turbowatch/dist/types").TurbowatchConfigurationInput;
-export default _default;