@transferwise/components 0.0.0-experimental-bcea1dd → 0.0.0-experimental-1168b1c

package/build/types/test-utils/index.d.ts

@@ -22,6 +22,7 @@ declare function customRender(ui: ReactElement, { locale, messages, ...renderOpt
         "neptune.DateLookup.goTo20YearView": string;
         "neptune.DateLookup.month": string;
         "neptune.DateLookup.next": string;
+        "neptune.DateLookup.notAvailable": string;
         "neptune.DateLookup.previous": string;
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;
@@ -110,6 +111,7 @@ declare function customRenderHook(callback: () => unknown, { locale, messages }?
         "neptune.DateLookup.goTo20YearView": string;
         "neptune.DateLookup.month": string;
         "neptune.DateLookup.next": string;
+        "neptune.DateLookup.notAvailable": string;
         "neptune.DateLookup.previous": string;
         "neptune.DateLookup.selected": string;
         "neptune.DateLookup.twentyYears": string;

package/build/types/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/test-utils/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAM,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAc,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAMxD;;;;GAIG;AACH,iBAAS,YAAY,CACnB,EAAE,EAAE,YAAY,EAChB,EAAE,MAAuB,EAAE,QAAa,EAAE,GAAG,aAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,GAChE,UAAU,CAAC,OAAO,MAAM,CAAC,CAK3B;AAED;;;GAGG;AACH,iBAAS,gBAAgB,CACvB,QAAQ,EAAE,MAAM,OAAO,EACvB,EAAE,MAAuB,EAAE,QAAa,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAK,uEAKhD;AAED,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,YAAY,IAAI,MAAM,EAAE,gBAAgB,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-bcea1dd",
+  "version": "0.0.0-experimental-1168b1c",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,8 +92,8 @@
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-addon-test-codegen": "^3.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@wise/wds-configs": "0.0.0",
-    "@wise/components-theming": "1.10.3"
+    "@wise/components-theming": "1.10.3",
+    "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",

package/src/Calendar/Calendar.css

@@ -1,32 +1,6 @@
-.tw-date-lookup-calendar {
-  min-width: 300px;
-  text-align: center;
-  table-layout: fixed;
-  border: none;
-  background-color: inherit;
-}
-.tw-date-lookup-calendar thead {
-  background-color: transparent;
-  background-color: initial;
-}
-.tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
-  color: var(--color-content-secondary);
-}
-.tw-date-lookup-calendar > tbody > tr > td {
-  border: none;
-  padding: 4px;
-  padding: var(--size-4);
-}
-@media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td {
-    padding: 0;
-  }
-}
-.tw-date-lookup-calendar > tbody > tr > td:has(.tw-date-lookup-day-option) {
-  padding: 1px;
-}
-.tw-date-lookup-calendar > tbody > tr > td button {
+.wds-Calendar__option--day,
+.wds-Calendar__option--month,
+.wds-Calendar__option--year {
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
@@ -42,11 +16,78 @@
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
-  .tw-date-lookup-calendar > tbody > tr > td button {
+  .wds-Calendar__option--day,
+  .wds-Calendar__option--month,
+  .wds-Calendar__option--year {
     padding: 0;
   }
 }
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option {
+.wds-Calendar__option--day.disabled,
+.wds-Calendar__option--month.disabled,
+.wds-Calendar__option--year.disabled,
+.wds-Calendar__option--day[aria-disabled="true"],
+.wds-Calendar__option--month[aria-disabled="true"],
+.wds-Calendar__option--year[aria-disabled="true"] {
+  --ring-outline-color: var(--color-sentiment-content-primary);
+  color: #768e9c;
+  color: var(--color-content-tertiary);
+  cursor: not-allowed;
+}
+.wds-Calendar__option--day.disabled:hover,
+.wds-Calendar__option--month.disabled:hover,
+.wds-Calendar__option--year.disabled:hover,
+.wds-Calendar__option--day[aria-disabled="true"]:hover,
+.wds-Calendar__option--month[aria-disabled="true"]:hover,
+.wds-Calendar__option--year[aria-disabled="true"]:hover,
+.wds-Calendar__option--day.disabled:focus,
+.wds-Calendar__option--month.disabled:focus,
+.wds-Calendar__option--year.disabled:focus,
+.wds-Calendar__option--day[aria-disabled="true"]:focus,
+.wds-Calendar__option--month[aria-disabled="true"]:focus,
+.wds-Calendar__option--year[aria-disabled="true"]:focus {
+  background-color: var(--color-sentiment-background-surface);
+  color: var(--color-sentiment-content-primary);
+  filter: initial;
+  opacity: 1;
+  opacity: initial;
+}
+.wds-Calendar__option--day.disabled.active,
+.wds-Calendar__option--month.disabled.active,
+.wds-Calendar__option--year.disabled.active,
+.wds-Calendar__option--day[aria-disabled="true"].active,
+.wds-Calendar__option--month[aria-disabled="true"].active,
+.wds-Calendar__option--year[aria-disabled="true"].active,
+.wds-Calendar__option--day.disabled.active:hover,
+.wds-Calendar__option--month.disabled.active:hover,
+.wds-Calendar__option--year.disabled.active:hover,
+.wds-Calendar__option--day[aria-disabled="true"].active:hover,
+.wds-Calendar__option--month[aria-disabled="true"].active:hover,
+.wds-Calendar__option--year[aria-disabled="true"].active:hover,
+.wds-Calendar__option--day.disabled.active:active,
+.wds-Calendar__option--month.disabled.active:active,
+.wds-Calendar__option--year.disabled.active:active,
+.wds-Calendar__option--day[aria-disabled="true"].active:active,
+.wds-Calendar__option--month[aria-disabled="true"].active:active,
+.wds-Calendar__option--year[aria-disabled="true"].active:active,
+.wds-Calendar__option--day.disabled.active:focus,
+.wds-Calendar__option--month.disabled.active:focus,
+.wds-Calendar__option--year.disabled.active:focus,
+.wds-Calendar__option--day[aria-disabled="true"].active:focus,
+.wds-Calendar__option--month[aria-disabled="true"].active:focus,
+.wds-Calendar__option--year[aria-disabled="true"].active:focus {
+  background-color: var(--color-sentiment-interactive-primary);
+  color: var(--color-sentiment-interactive-secondary);
+}
+.wds-Calendar__option--day.disabled.today,
+.wds-Calendar__option--month.disabled.today,
+.wds-Calendar__option--year.disabled.today,
+.wds-Calendar__option--day[aria-disabled="true"].today,
+.wds-Calendar__option--month[aria-disabled="true"].today,
+.wds-Calendar__option--year[aria-disabled="true"].today {
+  text-decoration-color: #768e9c;
+  text-decoration-color: var(--color-content-tertiary);
+}
+.wds-Calendar__option--day {
   height: 40px;
   height: var(--size-40);
   border-radius: 9999px;
@@ -60,17 +101,45 @@
   align-items: center;
   justify-content: center;
 }
-.tw-date-lookup-calendar > tbody > tr > td button.tw-date-lookup-day-option.today {
+.wds-Calendar__option--day.today {
   -webkit-text-decoration: underline;
   text-decoration: underline;
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
-.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+.tw-date-lookup-calendar {
+  min-width: 300px;
+  text-align: center;
+  table-layout: fixed;
+  border: none;
+  background-color: inherit;
+}
+.tw-date-lookup-calendar thead {
+  background-color: transparent;
+  background-color: initial;
+}
+.tw-date-lookup-calendar > tbody > tr > td.weekend button {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.tw-date-lookup-calendar > tbody > tr > td {
+  border: none;
+  padding: 4px;
+  padding: var(--size-4);
+}
+@media (max-width: 320px) {
+  .tw-date-lookup-calendar > tbody > tr > td {
+    padding: 0;
+  }
+}
+.tw-date-lookup-calendar > tbody > tr > td:has(.wds-Calendar__option--day) {
+  padding: 1px;
+}
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus:not(.disabled):not([aria-disabled="true"]),
+.tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled):not([aria-disabled="true"]) {
   background-color: var(--color-background-screen-hover);
 }
-.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+.tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active:not([aria-disabled="true"]) {
   background-color: var(--color-interactive-primary);
   color: var(--color-interactive-contrast);
 }

package/src/Calendar/Calendar.disabledDates.test.tsx

@@ -0,0 +1,197 @@
+import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
+import Calendar from './Calendar';
+import type { DisabledRules } from './Calendar.types';
+
+mockMatchMedia();
+
+const user = userEvent.setup();
+
+// 2024-07-01 is a Monday
+const initialValue = new Date(2024, 6, 1);
+
+const weekendRules: DisabledRules = {
+  weekdays: ['sat', 'sun'],
+  reason: 'We are closed on weekends.',
+};
+
+const bankHolidayRules: DisabledRules = {
+  dates: [new Date(2024, 6, 4), new Date(2024, 6, 11)],
+  reason: 'The service is unavailable on bank holidays.',
+};
+
+const rangeRules: DisabledRules = {
+  ranges: [{ start: new Date(2024, 6, 15), end: new Date(2024, 6, 19) }],
+  reason: 'Scheduled maintenance.',
+};
+
+describe('Calendar - disabled dates', () => {
+  describe('rendering disabled state', () => {
+    it('renders disabled weekday cells with aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      // 2024-07-06 is Saturday
+      const saturday = screen.getByLabelText(/^6 July 2024/u);
+      expect(saturday).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('renders enabled weekday cells without aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      // 2024-07-01 is Monday
+      const monday = screen.getByLabelText(/^1 July 2024.*selected/iu);
+      expect(monday).not.toHaveAttribute('aria-disabled');
+    });
+
+    it('renders disabled specific date cells with aria-disabled', () => {
+      render(
+        <Calendar value={initialValue} disabledRules={bankHolidayRules} onChange={jest.fn()} />,
+      );
+
+      const holiday = screen.getByLabelText(/^4 July 2024/u);
+      expect(holiday).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('renders disabled range cells with aria-disabled', () => {
+      render(<Calendar value={initialValue} disabledRules={rangeRules} onChange={jest.fn()} />);
+
+      const rangeDate = screen.getByLabelText(/16 July 2024/u);
+      expect(rangeDate).toHaveAttribute('aria-disabled', 'true');
+    });
+  });
+
+  describe('click interaction', () => {
+    it('fires onChange with isEnabled: false when clicking a disabled date', async () => {
+      const handleChange = jest.fn();
+      const handleSelect = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={bankHolidayRules}
+          onChange={handleChange}
+          onSelect={handleSelect}
+        />,
+      );
+
+      const holiday = screen.getByLabelText(/^4 July 2024/u);
+      await user.click(holiday);
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 4), { isEnabled: false });
+      expect(handleSelect).not.toHaveBeenCalled();
+    });
+
+    it('fires onChange and onSelect when clicking an enabled date', async () => {
+      const handleChange = jest.fn();
+      const handleSelect = jest.fn();
+      render(
+        <Calendar
+          value={initialValue}
+          disabledRules={bankHolidayRules}
+          onChange={handleChange}
+          onSelect={handleSelect}
+        />,
+      );
+
+      const enabledDate = screen.getByLabelText(/^3 July 2024/u);
+      await user.click(enabledDate);
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 3), { isEnabled: true });
+      expect(handleSelect).toHaveBeenCalledWith(new Date(2024, 6, 3));
+    });
+  });
+
+  describe('keyboard navigation', () => {
+    it('does NOT skip disabled dates and fires onChange with isEnabled: false', async () => {
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 5)}
+          disabledRules={weekendRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // ArrowRight from July 5 (Friday) should go to July 6 (Saturday = disabled)
+      await user.keyboard('{ArrowRight}');
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 6), { isEnabled: false });
+    });
+
+    it('fires onChange with isEnabled: true when navigating to an enabled date', async () => {
+      const handleChange = jest.fn();
+      render(
+        <Calendar
+          value={new Date(2024, 6, 1)}
+          disabledRules={weekendRules}
+          onChange={handleChange}
+        />,
+      );
+
+      await user.click(screen.getByRole('button', { name: /selected day/iu }));
+      // ArrowRight from July 1 (Monday) → July 2 (Tuesday = enabled)
+      await user.keyboard('{ArrowRight}');
+
+      expect(handleChange).toHaveBeenCalledWith(new Date(2024, 6, 2), { isEnabled: true });
+    });
+  });
+
+  describe('InlinePrompt', () => {
+    it('renders reason text when month has disabled dates', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      expect(screen.getByText('We are closed on weekends.')).toBeInTheDocument();
+    });
+
+    it('does not render when no disabledRules provided', () => {
+      render(<Calendar value={initialValue} onChange={jest.fn()} />);
+
+      expect(screen.queryByText(/closed/iu)).not.toBeInTheDocument();
+    });
+
+    it('renders with neutral sentiment by default', () => {
+      const { container } = render(
+        <Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />,
+      );
+
+      const prompt = container.querySelector('.wds-inline-prompt');
+      expect(prompt).toBeInTheDocument();
+    });
+
+    it('does not render in month view', async () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      await user.click(screen.getByRole('button', { name: /year view/iu }));
+      await user.keyboard(' ');
+
+      expect(screen.queryByText('We are closed on weekends.')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('disabled cells announce "not available" in aria-label', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      const saturday = screen.getByLabelText(/6 July 2024.*not available/iu);
+      expect(saturday).toBeInTheDocument();
+    });
+
+    it('disabled cells have aria-describedby pointing to the reason prompt', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      const saturday = screen.getByLabelText(/6 July 2024.*not available/iu);
+      expect(saturday).toHaveAttribute('aria-describedby');
+
+      const describedById = saturday.getAttribute('aria-describedby')!;
+      const promptElement = document.getElementById(describedById);
+      expect(promptElement).toBeInTheDocument();
+      expect(promptElement).toHaveTextContent('We are closed on weekends.');
+    });
+
+    it('enabled cells do NOT have aria-describedby', () => {
+      render(<Calendar value={initialValue} disabledRules={weekendRules} onChange={jest.fn()} />);
+
+      const monday = screen.getByLabelText(/^1 July 2024.*selected/iu);
+      expect(monday).not.toHaveAttribute('aria-describedby');
+    });
+  });
+});

package/src/Calendar/Calendar.less

@@ -1,4 +1,5 @@
 @import (reference) "./../styles/variables/neptune-tokens.less";
+@import "./TableLink/TableLink.less";
 
 .tw-date-lookup-calendar {
   min-width: 300px;
@@ -21,47 +22,16 @@
       padding: 0;
     }
 
-    &:has(.tw-date-lookup-day-option) {
+    &:has(.wds-Calendar__option--day) {
       padding: 1px;
     }
 
-    button {
-      width: 100%;
-      padding: var(--size-4) 0;
-      @media (--screen-400-zoom) {
-        padding: 0;
-      }
-      color: var(--color-content-accent);
-      border: transparent;
-      border-radius: var(--radius-small);
-      background-color: transparent;
-      font-weight: var(--font-weight-semi-bold);
-      color: var(--color-content-primary);
-
-      &.tw-date-lookup-day-option {
-        height: var(--size-40);
-        border-radius: var(--radius-full);
-        line-height: var(--size-40);
-        width: var(--size-40);
-        padding: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-
-        &.today {
-          text-decoration: underline;
-          text-decoration-thickness: 2px;
-          text-underline-offset: 4px;
-        }
-      }
-    }
-
-    &:not(.disabled, :disabled) button.show-focus,
-    &:hover button:not(.disabled, :disabled) {
+    &:not(.disabled, :disabled) button.show-focus:not(.disabled, [aria-disabled="true"]),
+    &:hover button:not(.disabled, :disabled, [aria-disabled="true"]) {
       background-color: var(--color-background-screen-hover);
     }
 
-    &:not(.disabled, :disabled) button.active {
+    &:not(.disabled, :disabled) button.active:not([aria-disabled="true"]) {
       background-color: var(--color-interactive-primary);
       color: var(--color-interactive-contrast);
     }

package/src/Calendar/Calendar.messages.ts

@@ -36,6 +36,11 @@ export default defineMessages({
     defaultMessage: 'selected',
     description: 'Description of the selected day/month/year',
   },
+  notAvailable: {
+    id: 'neptune.DateLookup.notAvailable',
+    defaultMessage: 'not available',
+    description: 'Announces that a date is disabled/unavailable',
+  },
   goTo20YearView: {
     id: 'neptune.DateLookup.goTo20YearView',
     defaultMessage: 'Go to 20 year view',

package/src/Calendar/Calendar.test.tsx

@@ -23,7 +23,7 @@ describe('Calendar', () => {
 
       const expected = new Date(initialValue);
       expected.setDate(initialValue.getDate() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleChange).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
 
     it('selects a day on click', async () => {
@@ -32,18 +32,18 @@ describe('Calendar', () => {
 
       await user.click(screen.getByText('15'));
 
-      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15));
+      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15), { isEnabled: true });
     });
 
-    it('calls onSelect instead of onChange when clicking a day', async () => {
+    it('fires both onChange and onSelect when clicking a day', async () => {
       const handleChange = jest.fn();
       const handleSelect = jest.fn();
       render(<Calendar value={initialValue} onChange={handleChange} onSelect={handleSelect} />);
 
       await user.click(screen.getByText('15'));
 
+      expect(handleChange).toHaveBeenCalledWith(new Date(2000, 0, 15), { isEnabled: true });
       expect(handleSelect).toHaveBeenCalledWith(new Date(2000, 0, 15));
-      expect(handleChange).not.toHaveBeenCalled();
     });
   });
 
@@ -62,7 +62,7 @@ describe('Calendar', () => {
 
       const expected = new Date(initialValue);
       expected.setFullYear(initialValue.getFullYear() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleChange).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
   });
 
@@ -82,7 +82,7 @@ describe('Calendar', () => {
 
       const expected = new Date(initialValue);
       expected.setMonth(initialValue.getMonth() + step);
-      expect(handleChange).toHaveBeenCalledWith(expected);
+      expect(handleChange).toHaveBeenCalledWith(expected, { isEnabled: true });
     });
   });
 
@@ -96,7 +96,7 @@ describe('Calendar', () => {
       await user.click(screen.getByRole('button', { name: /selected day/iu }));
       await user.keyboard('{ArrowLeft}{ArrowLeft}');
 
-      expect(handleChange).toHaveBeenLastCalledWith(min);
+      expect(handleChange).toHaveBeenLastCalledWith(min, { isEnabled: true });
     });
 
     it('limits navigation to max value', async () => {
@@ -108,7 +108,7 @@ describe('Calendar', () => {
       await user.click(screen.getByRole('button', { name: /selected day/iu }));
       await user.keyboard('{ArrowRight}{ArrowRight}');
 
-      expect(handleChange).toHaveBeenLastCalledWith(max);
+      expect(handleChange).toHaveBeenLastCalledWith(max, { isEnabled: true });
     });
 
     it('clamps value to range when value is outside min/max', () => {
@@ -117,7 +117,7 @@ describe('Calendar', () => {
       const handleChange = jest.fn();
       render(<Calendar value={initialValue} min={min} max={max} onChange={handleChange} />);
 
-      expect(handleChange).toHaveBeenCalledWith(min);
+      expect(handleChange).toHaveBeenCalledWith(min, { isEnabled: true });
     });
   });