@simplybusiness/mobius 8.0.1 → 9.0.0

package/src/components/Combobox/Combobox.test.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck The types for this file don't work at all because of the
 // test groupings.
-import { act, render, screen, within } from "@testing-library/react";
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
 import { userEvent } from "@testing-library/user-event";
 import { Combobox } from "./Combobox";
 import {
@@ -40,18 +40,15 @@ function getFlatOptions(options: ComboboxOptions) {
 let user;
 
 describe("Combobox", () => {
-  beforeAll(() => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
     user = userEvent.setup({
-      advanceTimers: jest.advanceTimersByTime,
+      advanceTimers: vi.advanceTimersByTime.bind(vi),
     });
   });
 
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   describe("common functionality", () => {
@@ -117,10 +114,11 @@ describe("Combobox", () => {
         expect(input).toHaveAttribute("placeholder", "Please pick a fruit");
       });
 
-      it("should give each option a unique id", async () => {
+      it("should give each option a unique id", () => {
         render(<Combobox label="Fruit" options={options} />);
         const input = screen.getByRole("combobox");
-        await user.click(input);
+        fireEvent.mouseDown(input);
+        fireEvent.focus(input);
         const visibleOptions = screen.getAllByRole("option");
         const ids = new Set(
           visibleOptions.map(option => option.getAttribute("id")),
@@ -163,25 +161,27 @@ describe("Combobox", () => {
       });
 
       describe("mouse interactions", () => {
-        it("should render a listbox when the input is focused", async () => {
+        it("should render a listbox when the input is focused", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const listbox = screen.getByRole("listbox");
           expect(listbox).toBeInTheDocument();
         });
 
-        it("should not render a listbox if there are no options", async () => {
+        it("should not render a listbox if there are no options", () => {
           render(<Combobox label="Fruit" options={[]} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const listbox = screen.queryByRole("listbox");
           expect(listbox).toBeInTheDocument();
           expect(listbox).toHaveClass("mobius-combobox__list--hidden");
         });
 
         it("should call the onSelected callback when an option is selected", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -197,7 +197,7 @@ describe("Combobox", () => {
         });
 
         it("should call the onSelected callback when a user blurs and the typed text matches an option label", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -213,7 +213,7 @@ describe("Combobox", () => {
         });
 
         it("should NOT call the onSelected callback when a user blurs and the typed text does not match an option label", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -244,7 +244,7 @@ describe("Combobox", () => {
           await user.click(input);
           await act(async () => {
             await user.tab();
-            jest.advanceTimersByTime(200);
+            vi.advanceTimersByTime(200);
           });
           const listbox = screen.queryByRole("listbox");
           expect(listbox).toBeInTheDocument();
@@ -275,7 +275,7 @@ describe("Combobox", () => {
           await user.click(outside);
           await act(async () => {
             await user.tab();
-            jest.advanceTimersByTime(200);
+            vi.advanceTimersByTime(200);
           });
           const listbox = screen.queryByRole("listbox");
           expect(listbox).toBeInTheDocument();
@@ -293,7 +293,7 @@ describe("Combobox", () => {
 
         describe("custom events", () => {
           it("should call an onBlur event if passed", async () => {
-            const onBlur = jest.fn();
+            const onBlur = vi.fn();
             render(
               <Combobox label="Fruit" options={options} onBlur={onBlur} />,
             );
@@ -303,14 +303,14 @@ describe("Combobox", () => {
 
             await act(async () => {
               await user.tab();
-              jest.advanceTimersByTime(200);
+              vi.advanceTimersByTime(200);
             });
             await Promise.resolve();
             expect(onBlur).toHaveBeenCalled();
           });
 
           it("should call an onFocus event if passed", async () => {
-            const onFocus = jest.fn();
+            const onFocus = vi.fn();
             render(
               <Combobox label="Fruit" options={options} onFocus={onFocus} />,
             );
@@ -320,7 +320,7 @@ describe("Combobox", () => {
           });
 
           it("should call an onChange event if passed", async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             render(
               <Combobox label="Fruit" options={options} onChange={onChange} />,
             );
@@ -350,7 +350,7 @@ describe("Combobox", () => {
         });
 
         it("should select the top option when pressing Enter", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -365,7 +365,7 @@ describe("Combobox", () => {
         });
 
         it("should not select an option when pressing Enter with no options", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -380,7 +380,7 @@ describe("Combobox", () => {
         });
 
         it("should select the highlighted option when pressing Enter", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -443,7 +443,7 @@ describe("Combobox", () => {
         });
 
         it("should not call onSelected when pressing Escape", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -468,7 +468,7 @@ describe("Combobox", () => {
         });
 
         it("should select the first option when pressing Home", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -485,7 +485,7 @@ describe("Combobox", () => {
         });
 
         it("should select the last option when pressing End", async () => {
-          const onSelected = jest.fn();
+          const onSelected = vi.fn();
           render(
             <Combobox
               label="Fruit"
@@ -502,35 +502,14 @@ describe("Combobox", () => {
             "true",
           );
         });
-
-        it("should select the first option when pressing Home", async () => {
-          render(<Combobox label="Fruit" options={options} />);
-          const input = screen.getByRole("combobox");
-          await user.click(input);
-          await user.keyboard("{arrowdown}{arrowdown}");
-          await user.keyboard("{home}");
-          const visibleOptions = screen.getAllByRole("option");
-          expect(visibleOptions[0]).toHaveAttribute("aria-selected", "true");
-        });
-
-        it("should select the last option when pressing End", async () => {
-          render(<Combobox label="Fruit" options={options} />);
-          const input = screen.getByRole("combobox");
-          await user.click(input);
-          await user.keyboard("{end}");
-          const visibleOptions = screen.getAllByRole("option");
-          expect(visibleOptions[visibleOptions.length - 1]).toHaveAttribute(
-            "aria-selected",
-            "true",
-          );
-        });
       });
 
       describe("filtering", () => {
-        it("should render all of the options in the listbox", async () => {
+        it("should render all of the options in the listbox", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const visibleOptions = screen.getAllByRole("option");
 
           expect(visibleOptions).toHaveLength(getFlatOptions(options).length);
@@ -567,18 +546,20 @@ describe("Combobox", () => {
           expect(input).toHaveClass("mobius-combobox__input");
         });
 
-        it("should have the correct classnames for the listbox", async () => {
+        it("should have the correct classnames for the listbox", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const listbox = screen.getByRole("listbox");
           expect(listbox).toHaveClass("mobius-combobox__list");
         });
 
-        it("should have the correct classnames for the options including personal data identifier classname (has-pii)", async () => {
+        it("should have the correct classnames for the options including personal data identifier classname (has-pii)", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const visibleOptions = screen.getAllByRole("option");
           visibleOptions.forEach(option => {
             expect(option).toHaveClass("mobius-combobox__option has-pii");
@@ -596,12 +577,13 @@ describe("Combobox", () => {
           );
         });
 
-        it("should add the mobius-combobox--is-expanded class when the listbox is open", async () => {
+        it("should add the mobius-combobox--is-expanded class when the listbox is open", () => {
           render(<Combobox label="Fruit" options={options} />);
           const wrapper = screen.getByTestId("mobius-combobox__wrapper");
           const input = screen.getByRole("combobox");
           expect(wrapper).not.toHaveClass("mobius-combobox--is-expanded");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           expect(wrapper).toHaveClass("mobius-combobox--is-expanded");
         });
 
@@ -632,10 +614,11 @@ describe("Combobox", () => {
           expect(input).toHaveAttribute("aria-haspopup", "listbox");
         });
 
-        it("should set aria-controls to the listbox id", async () => {
+        it("should set aria-controls to the listbox id", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const listbox = screen.getByRole("listbox");
           expect(input).toHaveAttribute("aria-controls", listbox.id);
         });
@@ -646,17 +629,19 @@ describe("Combobox", () => {
           expect(input).toHaveAttribute("aria-expanded", "false");
         });
 
-        it("should set aria-expanded to true when the listbox is open", async () => {
+        it("should set aria-expanded to true when the listbox is open", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           expect(input).toHaveAttribute("aria-expanded", "true");
         });
 
-        it("should set aria-selected to false for all options except first option", async () => {
+        it("should set aria-selected to false for all options except first option", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const visibleOptions = screen.getAllByRole("option");
           visibleOptions.forEach(option => {
             expect(option).toHaveAttribute("aria-selected", "false");
@@ -692,18 +677,20 @@ describe("Combobox", () => {
       ["string groups", FRUITS_STRING_GROUPS],
       ["object groups", FRUITS_OBJECT_GROUPS],
     ])("Combobox with %s options", (_, options) => {
-      it("should render all of the groups in the listbox", async () => {
+      it("should render all of the groups in the listbox", () => {
         render(<Combobox label="Fruit" options={options} />);
         const input = screen.getByRole("combobox");
-        await user.click(input);
+        fireEvent.mouseDown(input);
+        fireEvent.focus(input);
         const groups = screen.getAllByRole("group");
         expect(groups).toHaveLength(options.length);
       });
 
-      it("should render all of the options in each group", async () => {
+      it("should render all of the options in each group", () => {
         render(<Combobox label="Fruit" options={options} />);
         const input = screen.getByRole("combobox");
-        await user.click(input);
+        fireEvent.mouseDown(input);
+        fireEvent.focus(input);
         options.forEach(group => {
           const groupElement = screen.getByRole("group", {
             name: group.heading,
@@ -714,20 +701,22 @@ describe("Combobox", () => {
       });
 
       describe("classnames", () => {
-        it("should have the correct classnames for the groups", async () => {
+        it("should have the correct classnames for the groups", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const groups = screen.getAllByRole("group");
           groups.forEach(group => {
             expect(group).toHaveClass("mobius-combobox__group");
           });
         });
 
-        it("should have the correct classnames for the group labels", async () => {
+        it("should have the correct classnames for the group labels", () => {
           render(<Combobox label="Fruit" options={options} />);
           const input = screen.getByRole("combobox");
-          await user.click(input);
+          fireEvent.mouseDown(input);
+          fireEvent.focus(input);
           const groupLabels = screen
             .getAllByRole("group")
             .map(group => group.firstChild);
@@ -776,10 +765,10 @@ describe("Combobox", () => {
         const input = screen.getByRole("combobox");
         await act(async () => {
           await user.type(input, "berry");
-          await jest.advanceTimersByTimeAsync(2000);
+          await vi.advanceTimersByTimeAsync(2000);
         });
         await act(async () => {
-          await jest.advanceTimersByTimeAsync(2000);
+          await vi.advanceTimersByTimeAsync(2000);
         });
         const visibleOptions = screen.getAllByRole("option");
         expect(visibleOptions).toHaveLength(7);
@@ -790,7 +779,7 @@ describe("Combobox", () => {
         const input = screen.getByRole("combobox");
         await act(async () => {
           await user.type(input, "berry");
-          jest.advanceTimersByTime(500);
+          vi.advanceTimersByTime(500);
         });
         const wrapper = screen.getByTestId("mobius-combobox__wrapper");
         expect(wrapper).toHaveClass("mobius-combobox--is-loading");
@@ -801,10 +790,10 @@ describe("Combobox", () => {
         const input = screen.getByRole("combobox");
         await act(async () => {
           await user.type(input, "berry");
-          await jest.advanceTimersByTimeAsync(2000);
+          await vi.advanceTimersByTimeAsync(2000);
         });
         await act(async () => {
-          await jest.advanceTimersByTimeAsync(2000);
+          await vi.advanceTimersByTimeAsync(2000);
         });
         const wrapper = screen.getByTestId("mobius-combobox__wrapper");
         expect(wrapper).not.toHaveClass("mobius-combobox--is-loading");

package/src/components/Combobox/Combobox.tsx

@@ -2,7 +2,8 @@ import classNames from "classnames/dedupe";
 import type React from "react";
 import type { FocusEvent } from "react";
 import { useEffect, useId, useRef, useState } from "react";
-import { useBreakpoint, useOnUnmount } from "../../hooks";
+import { useOnUnmount } from "@simplybusiness/mobius-hooks";
+import { useBreakpoint } from "../../hooks";
 import { TextField } from "../TextField";
 import { VisuallyHidden } from "../VisuallyHidden";
 import { Listbox } from "./Listbox"; // Import Listbox component

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

@@ -3,11 +3,11 @@ import { useComboboxOptions } from "./useComboboxOptions";
 
 describe("useComboboxOptions", () => {
   beforeEach(() => {
-    jest.useFakeTimers();
+    vi.useFakeTimers({ shouldAdvanceTime: true });
   });
 
   afterEach(() => {
-    jest.useRealTimers();
+    vi.useRealTimers();
   });
 
   describe("basic functionality", () => {
@@ -75,7 +75,7 @@ describe("useComboboxOptions", () => {
       ]);
     });
 
-    xit("should handle special characters in filter", () => {
+    it.skip("should handle special characters in filter", () => {
       const options = [
         { label: "São Paulo", value: "1" },
         { label: "New York", value: "2" },
@@ -97,7 +97,7 @@ describe("useComboboxOptions", () => {
 
   describe("async options handling", () => {
     it("should handle async options", async () => {
-      const asyncOptions = jest.fn().mockResolvedValue([
+      const asyncOptions = vi.fn().mockResolvedValue([
         { label: "Async Option 1", value: "1" },
         { label: "Async Option 2", value: "2" },
       ]);
@@ -126,7 +126,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should require a minimum input length for async options", () => {
-      const asyncOptions = jest.fn().mockResolvedValue([
+      const asyncOptions = vi.fn().mockResolvedValue([
         { label: "Async Option 1", value: "1" },
         { label: "Async Option 2", value: "2" },
       ]);
@@ -150,7 +150,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should debounce async options calls", async () => {
-      const asyncOptions = jest.fn().mockResolvedValue([
+      const asyncOptions = vi.fn().mockResolvedValue([
         { label: "Async Option 1", value: "1" },
         { label: "Async Option 2", value: "2" },
       ]);
@@ -174,7 +174,7 @@ describe("useComboboxOptions", () => {
       expect(asyncOptions).not.toHaveBeenCalled();
 
       await act(async () => {
-        await jest.advanceTimersByTimeAsync(200);
+        await vi.advanceTimersByTimeAsync(200);
       });
 
       expect(asyncOptions).toHaveBeenCalledTimes(1);
@@ -182,7 +182,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should abort fetch on unmount", () => {
-      const asyncOptions = jest.fn().mockImplementation(
+      const asyncOptions = vi.fn().mockImplementation(
         () =>
           new Promise<void>(resolve => {
             setTimeout(() => resolve(), 100);
@@ -203,7 +203,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should ignore abort errors", async () => {
-      const asyncOptions = jest.fn().mockImplementation(
+      const asyncOptions = vi.fn().mockImplementation(
         () =>
           new Promise((_, reject) => {
             setTimeout(
@@ -221,7 +221,7 @@ describe("useComboboxOptions", () => {
       );
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current).toStrictEqual({
@@ -234,8 +234,8 @@ describe("useComboboxOptions", () => {
     });
 
     it("should call onSearched when async options have been fetched", async () => {
-      const onSearched = jest.fn();
-      const asyncOptions = jest.fn().mockResolvedValue([
+      const onSearched = vi.fn();
+      const asyncOptions = vi.fn().mockResolvedValue([
         { label: "Async Option 1", value: "1" },
         { label: "Async Option 2", value: "2" },
       ]);
@@ -255,8 +255,8 @@ describe("useComboboxOptions", () => {
     });
 
     it("should not call onSearched when input length is less than minSearchLength", async () => {
-      const onSearched = jest.fn();
-      const asyncOptions = jest.fn().mockResolvedValue([
+      const onSearched = vi.fn();
+      const asyncOptions = vi.fn().mockResolvedValue([
         { label: "Async Option 1", value: "1" },
         { label: "Async Option 2", value: "2" },
       ]);
@@ -277,7 +277,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should not call onSearched for synchronous options", async () => {
-      const onSearched = jest.fn();
+      const onSearched = vi.fn();
       const options = [
         { label: "Option 1", value: "1" },
         { label: "Option 2", value: "2" },
@@ -300,7 +300,7 @@ describe("useComboboxOptions", () => {
 
   describe("loading states", () => {
     it("should set isLoading to true while fetching async options", async () => {
-      const asyncOptions = jest.fn().mockImplementation(
+      const asyncOptions = vi.fn().mockImplementation(
         () =>
           new Promise(resolve => {
             setTimeout(
@@ -320,14 +320,14 @@ describe("useComboboxOptions", () => {
       expect(result.current.isLoading).toBe(true);
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current.isLoading).toBe(false);
     });
 
     it("should set isLoading to false after async options fetch success", async () => {
-      const asyncOptions = jest
+      const asyncOptions = vi
         .fn()
         .mockResolvedValue([{ label: "Async Option 1", value: "1" }]);
 
@@ -341,14 +341,14 @@ describe("useComboboxOptions", () => {
       expect(result.current.isLoading).toBe(true);
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current.isLoading).toBe(false);
     });
 
     it("should set isLoading to false after async options fetch error", async () => {
-      const asyncOptions = jest.fn().mockImplementation(
+      const asyncOptions = vi.fn().mockImplementation(
         () =>
           new Promise((_, reject) => {
             setTimeout(() => reject(new Error("Fetch error")), 100);
@@ -365,7 +365,7 @@ describe("useComboboxOptions", () => {
       expect(result.current.isLoading).toBe(true);
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current.isLoading).toBe(false);
@@ -374,7 +374,7 @@ describe("useComboboxOptions", () => {
 
   describe("error states", () => {
     it("should set error state on async options fetch error", async () => {
-      const asyncOptions = jest.fn().mockImplementation(
+      const asyncOptions = vi.fn().mockImplementation(
         () =>
           new Promise((_, reject) => {
             setTimeout(() => reject(new Error("Fetch error")), 100);
@@ -389,7 +389,7 @@ describe("useComboboxOptions", () => {
       );
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current).toStrictEqual({
@@ -402,7 +402,7 @@ describe("useComboboxOptions", () => {
     });
 
     it("should clear error state when input value changes", async () => {
-      const asyncOptions = jest
+      const asyncOptions = vi
         .fn()
         .mockRejectedValueOnce(new Error("Fetch error"))
         .mockResolvedValueOnce([{ label: "Success", value: "1" }]);
@@ -417,7 +417,7 @@ describe("useComboboxOptions", () => {
       );
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current.isError).toBe(true);
@@ -425,7 +425,7 @@ describe("useComboboxOptions", () => {
       rerender({ inputValue: "success" });
 
       await act(async () => {
-        await jest.runAllTimersAsync();
+        await vi.runAllTimersAsync();
       });
 
       expect(result.current.isError).toBe(false);
@@ -434,7 +434,7 @@ describe("useComboboxOptions", () => {
   });
 
   it("should reset the error state on async options fetch start", async () => {
-    const asyncOptions = jest.fn().mockImplementation(
+    const asyncOptions = vi.fn().mockImplementation(
       () =>
         new Promise((_, reject) => {
           setTimeout(() => reject(new Error("Fetch error")), 100);
@@ -449,7 +449,7 @@ describe("useComboboxOptions", () => {
     );
 
     await act(async () => {
-      await jest.runAllTimersAsync();
+      await vi.runAllTimersAsync();
     });
 
     expect(result.current).toStrictEqual({
@@ -462,7 +462,7 @@ describe("useComboboxOptions", () => {
   });
 
   it("should reset the error state on successful async options fetch", async () => {
-    const asyncOptions = jest
+    const asyncOptions = vi
       .fn()
       .mockResolvedValue([{ label: "Async Option 1", value: "1" }]);
 
@@ -474,7 +474,7 @@ describe("useComboboxOptions", () => {
     );
 
     await act(async () => {
-      await jest.runAllTimersAsync();
+      await vi.runAllTimersAsync();
     });
 
     expect(result.current).toStrictEqual({

package/src/components/Combobox/useComboboxOptions.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import type { ComboboxOption, ComboboxOptions, ComboboxProps } from "./types";
 import { filterOptions } from "./utils";
-import { useDebouncedValue } from "../../hooks";
+import { useDebouncedValue } from "@simplybusiness/mobius-hooks";
 
 export type UseComboboxOptionsProps<T extends ComboboxOption> = Pick<
   ComboboxProps<T>,

package/src/components/Container/Container.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { ContainerProps } from "./Container";
 import { Container } from "./Container";
 

package/src/components/DateField/DateField.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";
 import type { DateFieldProps } from "./DateField";