@simplybusiness/mobius-datepicker 9.0.1 → 9.0.3

package/dist/types/src/utils/mockMatchMedia.d.ts

@@ -0,0 +1 @@
+export declare function mockMatchMedia(matches: boolean): void;

package/dist/types/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius-datepicker",
   "license": "UNLICENSED",
-  "version": "9.0.1",
+  "version": "9.0.3",
   "description": "Mobius date picker component",
   "repository": {
     "type": "git",
@@ -10,8 +10,7 @@
   "simplyBusiness": {
     "publishToPublicNpm": true
   },
-  "type": "module",
-  "main": "dist/esm/index.js",
+  "main": "dist/cjs/index.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "src",
@@ -20,18 +19,20 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     },
     "./src/*.css": "./src/*.css"
   },
   "publishConfig": {
-    "main": "dist/esm/index.js",
+    "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
     "types": "./dist/types/index.d.ts",
     "exports": {
       ".": {
         "types": "./dist/types/index.d.ts",
+        "require": "./dist/cjs/index.js",
         "import": "./dist/esm/index.js",
         "default": "./dist/esm/index.js"
       },
@@ -42,13 +43,14 @@
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
     "prepack": "yarn run build",
-    "turbo:build": "yarn build:esm && yarn build:types",
+    "turbo:build": "yarn build:esm && yarn build:cjs && yarn build:types",
     "build:esm": "build-package esm",
+    "build:cjs": "build-package cjs",
     "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "check-types": "tsc --noEmit --pretty",
     "lint:css": "lint-css",
     "lint:css:fix": "lint-css --fix"
@@ -60,17 +62,15 @@
     "@eslint/js": "^9.39.2",
     "@simplybusiness/build-scripts": "^2.0.1",
     "@simplybusiness/eslint-config": "^2.0.1",
-    "@swc/core": "^1.12.5",
-    "@swc/jest": "^0.2.39",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^30.0.0",
     "@types/react": "^19.2.11",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
@@ -81,23 +81,21 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-ssr-friendly": "^1.3.0",
     "eslint-plugin-testing-library": "^7.15.4",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-config": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@simplybusiness/icons": "^5.0.1",
-    "@simplybusiness/mobius": "^8.0.1",
+    "@simplybusiness/icons": "^5.0.2",
+    "@simplybusiness/mobius": "^9.0.0",
+    "@simplybusiness/mobius-hooks": "^0.1.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "react-day-picker": "^9.13.0"

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { add, format } from "date-fns";
 import { excludeControls } from "../../utils";
 import { StoryContainer } from "../../utils/StoryContainer";

package/src/components/DatePicker/DatePicker.test.tsx

@@ -1,9 +1,13 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { DatePicker } from ".";
-import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
+import { mockMatchMedia } from "../../utils/mockMatchMedia";
 import { DEFAULT_AFTER_MAX, DEFAULT_BEFORE_MIN } from "./utils";
 
+// Eagerly resolve DatePickerModal so React.lazy gets an instant cache hit
+// Without this, the dynamic import can take too long on slow CI runners
+vi.mock("./DatePickerModal", async importOriginal => importOriginal());
+
 const DISABLED_CLASS_NAME = "--is-disabled";
 const TOUCH_DEVICE_CLASS_NAME = "--is-touch-device";
 const VALID_CLASS_NAME = "--is-valid";
@@ -17,7 +21,7 @@ const DEVICES = [
 describe("DatePicker", () => {
   describe.each(DEVICES)(`given it is a %s`, (deviceLabel, isTouchDevice) => {
     beforeEach(() => {
-      jestMockMatchMedia(isTouchDevice as boolean);
+      mockMatchMedia(isTouchDevice as boolean);
     });
 
     it("should render without errors", () => {
@@ -110,7 +114,7 @@ describe("DatePicker", () => {
       it("triggers onChange", async () => {
         const labelText = "Start date";
         const testId = "date-picker";
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         render(
           <DatePicker
@@ -216,26 +220,35 @@ describe("DatePicker", () => {
     });
 
     describe("when TextField is clicked", () => {
-      it(`should ${(isTouchDevice && "not") || ""} open the date picker modal`, async () => {
-        const labelText = "Start date";
-        const testId = "date-picker";
-
-        render(<DatePicker label={labelText} data-testid={testId} />);
-
-        const inputField = screen.getByTestId(testId);
-
-        await userEvent.click(inputField);
-
-        await waitFor(() => {
-          if (isTouchDevice) {
-            expect(
-              screen.queryByTestId("modal-container"),
-            ).not.toBeInTheDocument();
-          } else {
-            expect(screen.getByTestId("modal-container")).toBeInTheDocument();
-          }
-        });
-      }, 10000);
+      it(
+        `should ${(isTouchDevice && "not") || ""} open the date picker modal`,
+        { retry: 2, timeout: 10000 },
+        async () => {
+          const labelText = "Start date";
+          const testId = "date-picker";
+
+          render(<DatePicker label={labelText} data-testid={testId} />);
+
+          const inputField = screen.getByTestId(testId);
+
+          await userEvent.click(inputField);
+
+          await waitFor(
+            () => {
+              if (isTouchDevice) {
+                expect(
+                  screen.queryByTestId("modal-container"),
+                ).not.toBeInTheDocument();
+              } else {
+                expect(
+                  screen.getByTestId("modal-container"),
+                ).toBeInTheDocument();
+              }
+            },
+            { timeout: 10000 },
+          );
+        },
+      );
     });
   });
 });

package/src/components/DatePicker/DatePickerModal.test.tsx

@@ -73,7 +73,7 @@ describe("DatePickerModal", () => {
   });
 
   it("calls onSelected when a day is picked", async () => {
-    const onSelected = jest.fn();
+    const onSelected = vi.fn();
 
     render(<DatePickerModal isOpen top={30} onSelected={onSelected} />);
 
@@ -142,7 +142,7 @@ describe("DatePickerModal", () => {
   it.todo("traps focus when opened"); // Move to e2e test with Playwright
 
   it("should disable dates before min and after max value", () => {
-    const onSelected = jest.fn();
+    const onSelected = vi.fn();
     const date = "2025-01-07";
     const min = "2025-01-05";
     const max = "2025-01-10";

package/src/components/DatePicker/DatePickerModal.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { VisuallyHidden, useOnClickOutside } from "@simplybusiness/mobius";
+import { useOnClickOutside } from "@simplybusiness/mobius-hooks";
+import { VisuallyHidden } from "@simplybusiness/mobius";
 import classNames from "classnames/dedupe";
 import { parseISO } from "date-fns";
 import { useId, useRef } from "react";

package/src/components/DatePicker/utils/getStartWeekday.test.ts

@@ -3,8 +3,8 @@ import { getStartWeekday } from "./getStartWeekday";
 
 describe("getStartWeekday", () => {
   beforeEach(() => {
-    jest.spyOn(navigator, "languages", "get").mockReturnValue([]);
-    jest.spyOn(navigator, "language", "get").mockImplementation(() => "en-GB");
+    vi.spyOn(navigator, "languages", "get").mockReturnValue([]);
+    vi.spyOn(navigator, "language", "get").mockImplementation(() => "en-GB");
   });
 
   it("assumes default of en-GB (Monday) when no args supplied", () => {

package/src/utils/mockMatchMedia.ts

@@ -0,0 +1,36 @@
+import { type MockedFunction } from "vitest";
+
+export function mockMatchMedia(matches: boolean) {
+  const addListenerMock: MockedFunction<MediaQueryList["addListener"]> =
+    vi.fn();
+  const removeListenerMock: MockedFunction<MediaQueryList["removeListener"]> =
+    vi.fn();
+  const addEventListenerMock: MockedFunction<
+    MediaQueryList["addEventListener"]
+  > = vi.fn();
+  const removeEventListenerMock: MockedFunction<
+    MediaQueryList["removeEventListener"]
+  > = vi.fn();
+  const dispatchEventMock: MockedFunction<MediaQueryList["dispatchEvent"]> =
+    vi.fn();
+
+  const matchMediaMock: MockedFunction<typeof window.matchMedia> = vi.fn(
+    (query: string) =>
+      ({
+        matches,
+        media: query,
+        onchange: null,
+        addListener: addListenerMock,
+        removeListener: removeListenerMock,
+        addEventListener: addEventListenerMock,
+        removeEventListener: removeEventListenerMock,
+        dispatchEvent: dispatchEventMock,
+      }) satisfies MediaQueryList,
+  );
+
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    configurable: true,
+    value: matchMediaMock,
+  });
+}

package/dist/types/src/utils/jestMockMatchMedia.d.ts

@@ -1 +0,0 @@
-export declare function jestMockMatchMedia(matches: boolean): void;

package/src/utils/jestMockMatchMedia.ts

@@ -1,36 +0,0 @@
-export function jestMockMatchMedia(matches: boolean) {
-  const addListenerMock: jest.MockedFunction<MediaQueryList["addListener"]> =
-    jest.fn();
-  const removeListenerMock: jest.MockedFunction<
-    MediaQueryList["removeListener"]
-  > = jest.fn();
-  const addEventListenerMock: jest.MockedFunction<
-    MediaQueryList["addEventListener"]
-  > = jest.fn();
-  const removeEventListenerMock: jest.MockedFunction<
-    MediaQueryList["removeEventListener"]
-  > = jest.fn();
-  const dispatchEventMock: jest.MockedFunction<
-    MediaQueryList["dispatchEvent"]
-  > = jest.fn();
-
-  const matchMediaMock: jest.MockedFunction<typeof window.matchMedia> = jest.fn(
-    (query: string) =>
-      ({
-        matches,
-        media: query,
-        onchange: null,
-        addListener: addListenerMock,
-        removeListener: removeListenerMock,
-        addEventListener: addEventListenerMock,
-        removeEventListener: removeEventListenerMock,
-        dispatchEvent: dispatchEventMock,
-      }) satisfies MediaQueryList,
-  );
-
-  Object.defineProperty(window, "matchMedia", {
-    writable: true,
-    configurable: true,
-    value: matchMediaMock,
-  });
-}