@dhis2-ui/calendar 10.18.0 → 10.19.1

package/build/es/calendar-input/__tests__/calendar-input.test.js

@@ -28,6 +28,62 @@ describe('Calendar Input', () => {
     }));
     jest.useRealTimers();
   });
+  it('allow selection of a date through the calendar widget (ethiopic)', async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+    const onDateSelectMock = jest.fn();
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "ethiopian",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(calendar).toBeInTheDocument();
+    const todayString = '2017-02-12';
+    const today = within(calendar).getByTestId(todayString);
+
+    // the visible day-cell text must be the bare day number, not the
+    // full date string used for data-test - regressed silently during
+    // the multi-calendar-dates 2.2.0-alpha.1 upgrade (see CLAUDE.md)
+    expect(within(today).getByText('12')).toBeInTheDocument();
+    fireEvent.click(today);
+    await waitFor(() => {
+      expect(calendar).not.toBeInTheDocument();
+    });
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: todayString
+    }));
+    jest.useRealTimers();
+  });
+  it('allow selection of a date through the calendar widget (nepali)', async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+    const onDateSelectMock = jest.fn();
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "nepali",
+      onDateSelect: onDateSelectMock
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(calendar).toBeInTheDocument();
+    const todayString = '2081-07-06';
+    const today = within(calendar).getByTestId(todayString);
+
+    // the visible day-cell text must be the bare day number, not the
+    // full date string used for data-test - regressed silently during
+    // the multi-calendar-dates 2.2.0-alpha.1 upgrade (see CLAUDE.md)
+    expect(within(today).getByText('6')).toBeInTheDocument();
+    fireEvent.click(today);
+    await waitFor(() => {
+      expect(calendar).not.toBeInTheDocument();
+    });
+    expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+      calendarDateString: todayString
+    }));
+    jest.useRealTimers();
+  });
   it('allow selection of a date through the input', async () => {
     const onDateSelectMock = jest.fn();
     const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
@@ -46,7 +102,215 @@ describe('Calendar Input', () => {
       calendarDateString: dateInputString
     }));
   });
+  it('rejects input whose detected shape does not match the format prop', () => {
+    // "2024-12-25" is unambiguously YYYY-MM-DD shaped (4-digit group
+    // first). With format="DD-MM-YYYY" that mismatch is rejected
+    // rather than reinterpreted.
+    const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
+      calendar: "gregory",
+      format: "DD-MM-YYYY"
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.change(dateInput, {
+      target: {
+        value: '2024-12-25'
+      }
+    });
+    fireEvent.blur(dateInput);
+    expect(screen.getByText('Date string format does not match the specified format. Expected DD-MM-YYYY but got YYYY-MM-DD.')).toBeInTheDocument();
+  });
+  it('accepts the same typed input without the format prop', () => {
+    const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
+      calendar: "gregory"
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.change(dateInput, {
+      target: {
+        value: '2024-12-25'
+      }
+    });
+    fireEvent.blur(dateInput);
+    expect(screen.queryByText(/does not match the specified format/)).not.toBeInTheDocument();
+  });
+  it('limits the year selector to the current year when pastOnly is set', async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      pastOnly: true,
+      onDateSelect: jest.fn()
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const yearSelect = await screen.findByTestId('calendar-year-select');
+    const years = within(yearSelect).getAllByRole('option').map(option => Number(option.value));
+    expect(Math.max(...years)).toBe(2024);
+    jest.useRealTimers();
+  });
+  it('includes future years in the year selector without pastOnly', async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      onDateSelect: jest.fn()
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const yearSelect = await screen.findByTestId('calendar-year-select');
+    const years = within(yearSelect).getAllByRole('option').map(option => Number(option.value));
+    expect(Math.max(...years)).toBeGreaterThan(2024);
+    jest.useRealTimers();
+  });
+  it('sets the calendar wrapper direction from the dir prop', async () => {
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      dir: "rtl",
+      onDateSelect: jest.fn()
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(calendar).toHaveAttribute('dir', 'rtl');
+  });
+  it('renders day labels using the numberingSystem prop', async () => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      numberingSystem: "arab",
+      onDateSelect: jest.fn()
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    const today = within(calendar).getByTestId('2024-10-22');
+    expect(today).toHaveTextContent('٢٢');
+    jest.useRealTimers();
+  });
+  it('renders weekday headers using the weekDayFormat prop', async () => {
+    const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+      calendar: "gregory",
+      weekDayFormat: "long",
+      onDateSelect: jest.fn()
+    }));
+    const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+    fireEvent.focus(dateInput);
+    const calendar = await screen.findByTestId('calendar');
+    expect(within(calendar).getByText('Monday')).toBeInTheDocument();
+  });
+
+  // Regression coverage for LIBS-763: useDatePicker (in @dhis2/multi-calendar-dates)
+  // used to rebuild the year/month navigation lists and the day-cell grid on every
+  // render - including every keystroke while typing here, with the calendar widget
+  // open - regardless of whether the visible month/calendar/locale had actually
+  // changed. Fixed upstream in @dhis2/multi-calendar-dates@3.0.0-alpha.1.
+  describe('performance (LIBS-763)', () => {
+    // For gregory/ethiopic (native-ICU calendars) the broken memoization showed
+    // up as ~500 redundant `new Intl.DateTimeFormat(...)` constructions for a
+    // single keystroke; count is a deterministic, machine-speed-independent
+    // signal, unlike timing it directly.
+    const countDateTimeFormatConstructions = fn => {
+      const realResolvedOptions = Intl.DateTimeFormat.prototype.resolvedOptions;
+      let count = 0;
+      Intl.DateTimeFormat.prototype.resolvedOptions = function (...args) {
+        count++;
+        return realResolvedOptions.apply(this, args);
+      };
+      try {
+        fn();
+      } finally {
+        Intl.DateTimeFormat.prototype.resolvedOptions = realResolvedOptions;
+      }
+      return count;
+    };
+    it('does not reconstruct Intl.DateTimeFormat instances while typing (gregory)', async () => {
+      const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+        calendar: "gregory",
+        onDateSelect: jest.fn()
+      }));
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.focus(dateInput);
+      await screen.findByTestId('calendar');
+      const constructions = countDateTimeFormatConstructions(() => {
+        fireEvent.change(dateInput, {
+          target: {
+            value: '2024-10-1'
+          }
+        });
+      });
+      expect(constructions).toBeLessThan(10);
+    });
+    it('does not reconstruct Intl.DateTimeFormat instances while typing (ethiopic)', async () => {
+      const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+        calendar: "ethiopian",
+        onDateSelect: jest.fn()
+      }));
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.focus(dateInput);
+      await screen.findByTestId('calendar');
+      const constructions = countDateTimeFormatConstructions(() => {
+        fireEvent.change(dateInput, {
+          target: {
+            value: '2017-02-0'
+          }
+        });
+      });
+      expect(constructions).toBeLessThan(10);
+    });
+
+    // Nepali is a custom (non-ICU) calendar, so it never goes through
+    // Intl.DateTimeFormat - the same broken memoization instead showed up as
+    // redundant custom-calendar date-conversion work, so time it directly.
+    // 300ms for 10 keystrokes is ~25x the fixed baseline (~13ms) and ~2.5x
+    // below the broken one (~760ms), leaving headroom in both directions.
+    // Skipped in CI: unlike the count-based tests above, this asserts on
+    // wall-clock time, which can be flaky on slower/shared CI runners.
+    // Uncomment to run locally when touching useDatePicker/useNavigation.
+    it.skip('keeps typing fast (nepali)', async () => {
+      const screen = render(/*#__PURE__*/React.createElement(CalendarInput, {
+        calendar: "nepali",
+        onDateSelect: jest.fn()
+      }));
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.focus(dateInput);
+      await screen.findByTestId('calendar');
+      const chars = '2081-07-01'.split('');
+      const progressive = chars.map((_, i) => chars.slice(0, i + 1).join(''));
+      const start = process.hrtime.bigint();
+      progressive.forEach(value => fireEvent.change(dateInput, {
+        target: {
+          value
+        }
+      }));
+      const elapsedMs = Number(process.hrtime.bigint() - start) / 1e6;
+      expect(elapsedMs).toBeLessThan(300);
+    });
+  });
   describe('validation', () => {
+    it('should show a warning instead of an error when strictValidation is false', () => {
+      const onDateSelectMock = jest.fn();
+      const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-01-01",
+        strictValidation: false,
+        onDateSelect: onDateSelectMock
+      }));
+      const dateInputString = '2023-10-12';
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.change(dateInput, {
+        target: {
+          value: dateInputString
+        }
+      });
+      fireEvent.blur(dateInput);
+      expect(screen.getByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.')).toBeInTheDocument();
+      expect(onDateSelectMock).toHaveBeenCalledWith(expect.objectContaining({
+        validation: expect.objectContaining({
+          warning: true,
+          valid: true
+        })
+      }));
+    });
     it('should validate minimum date', () => {
       const onDateSelectMock = jest.fn();
       const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
@@ -65,6 +329,60 @@ describe('Calendar Input', () => {
       expect(screen.getByText('Date 2023-10-12 is less than the minimum allowed date 2024-01-01.')).toBeInTheDocument();
       expect(onDateSelectMock).toHaveBeenCalledTimes(1);
     });
+
+    // Regression test: minDate/maxDate used to reach validateDateString
+    // (as minDateString/maxDateString) but not useDatePicker itself, due to a
+    // key mismatch - so in strict mode the input rejected an out-of-range
+    // date while the widget still selected it. Warning mode is unaffected
+    // (see the test below) since useDatePicker only falls back to today when
+    // strictValidation produces an `error`.
+    it('calendar widget falls back to today for a date the input has flagged as below the minimum (strict mode)', async () => {
+      jest.useFakeTimers();
+      jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+      const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-01-01"
+      }));
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.change(dateInput, {
+        target: {
+          value: '2020-01-15'
+        }
+      });
+      fireEvent.blur(dateInput);
+      expect(screen.getByText('Date 2020-01-15 is less than the minimum allowed date 2024-01-01.')).toBeInTheDocument();
+      fireEvent.focus(dateInput);
+      const calendar = await screen.findByTestId('calendar');
+
+      // expected: the widget falls back to today, like useDatePicker's own
+      // getInvalidDateResult does for a date it recognizes as invalid
+      expect(within(calendar).getByTestId('2024-10-22').querySelector('button')).toHaveClass('isToday');
+      jest.useRealTimers();
+    });
+    it('calendar widget correctly still selects an out-of-range date in warning mode', async () => {
+      jest.useFakeTimers();
+      jest.setSystemTime(new Date('2024-10-22T09:05:00.000Z'));
+      const screen = render(/*#__PURE__*/React.createElement(CalendarWithValidation, {
+        calendar: "gregory",
+        minDate: "2024-01-01",
+        strictValidation: false
+      }));
+      const dateInput = within(screen.getByTestId('dhis2-uicore-input')).getByRole('textbox');
+      fireEvent.change(dateInput, {
+        target: {
+          value: '2020-01-15'
+        }
+      });
+      fireEvent.blur(dateInput);
+      expect(screen.getByText('Date 2020-01-15 is less than the minimum allowed date 2024-01-01.')).toBeInTheDocument();
+      fireEvent.focus(dateInput);
+      const calendar = await screen.findByTestId('calendar');
+
+      // warning mode means "flag it, but still let them pick it" - the
+      // widget showing the out-of-range date as selected is intentional
+      expect(within(calendar).getByTestId('2020-01-15').querySelector('button')).toHaveClass('isSelected');
+      jest.useRealTimers();
+    });
     it('should validate maximum date', () => {
       const {
         getByTestId,
@@ -83,8 +401,7 @@ describe('Calendar Input', () => {
       fireEvent.blur(dateInput);
       expect(getByText('Date 2024-10-12 is greater than the maximum allowed date 2024-01-01.')).toBeInTheDocument();
     });
-    // Temporarily disabled
-    it.skip('should validate date in ethiopic calendar', () => {
+    it('should validate date in ethiopic calendar', () => {
       const onDateSelectMock = jest.fn();
       const {
         getByTestId,
@@ -122,7 +439,6 @@ describe('Calendar Input', () => {
       fireEvent.blur(dateInput);
       expect(getByText('Invalid date in specified calendar')).toBeInTheDocument();
     });
-    // ToDo: these scenarios seem to work but they timeout on CI sporadically - ticket: https://dhis2.atlassian.net/browse/LIBS-763
     it('should validate date in nepali calendar', () => {
       const onDateSelectMock = jest.fn();
       const {

package/build/es/calendar-input/calendar-input.js

@@ -78,7 +78,10 @@ export const CalendarInput = ({
       setOpen(false);
     },
     date,
-    ...validationOptions,
+    minDate,
+    maxDate,
+    format,
+    strictValidation,
     options: useDatePickerOptions
   });
   const handleChange = e => {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "10.18.0",
+    "version": "10.19.1",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "10.18.0",
-        "@dhis2-ui/card": "10.18.0",
-        "@dhis2-ui/input": "10.18.0",
-        "@dhis2-ui/layer": "10.18.0",
-        "@dhis2-ui/popper": "10.18.0",
-        "@dhis2/multi-calendar-dates": "2.1.2",
+        "@dhis2-ui/button": "10.19.1",
+        "@dhis2-ui/card": "10.19.1",
+        "@dhis2-ui/input": "10.19.1",
+        "@dhis2-ui/layer": "10.19.1",
+        "@dhis2-ui/popper": "10.19.1",
+        "@dhis2/multi-calendar-dates": "3.0.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.18.0",
-        "@dhis2/ui-icons": "10.18.0",
+        "@dhis2/ui-constants": "10.19.1",
+        "@dhis2/ui-icons": "10.19.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/src/calendar-input/CLAUDE.md

@@ -0,0 +1,25 @@
+# CalendarInput
+
+`CalendarInput` wraps the `Calendar` widget (`../calendar/`) with a text input, validation, and a clear button. Both get their date logic — parsing, localization, navigation — from `@dhis2/multi-calendar-dates`'s `useDatePicker`/`useResolvedDirection`/`validateDateString`; this directory has no date-math of its own.
+
+## Data flow
+
+Dates cross the public API as calendar-native `YYYY-MM-DD` strings (in whatever `calendar` prop is set — not necessarily Gregorian ISO), never as `Temporal` objects. Treat any change that would leak a `Temporal`/date-engine object through `onDateSelect`, `date`, or similar props as a breaking change. `CalendarInput`'s `onDateSelect` payload also carries a `validation` object that `CalendarInput` computes itself via `validateDateString` — it is _not_ part of `multi-calendar-dates`'s types, so it's declared separately in `../../types/index.d.ts` (`CalendarInputValidation` / `CalendarInputOnDateSelectPayload`). If you change how validation is computed or shaped, update that file too.
+
+## Testing
+
+Two surfaces, used for different things:
+
+- **Jest** (`__tests__/calendar-input.test.js`, run via `yarn test`) — component behavior and logic: prop handling, validation, callbacks.
+- **Cypress + Cucumber e2e** (`../features/*.feature` + step defs, driven off `../__e2e__/calendar-input.e2e.stories.js`, run via `yarn cy:test` at the repo root) — real rendered output and localization across calendars. Heavier; not run by `yarn test`.
+
+When adding a prop or behavior, add a Jest test. If it's about rendering or localized text for a specific calendar/locale, check whether a `.feature` scenario should exist too.
+
+Coverage decisions in this component are scoped to the three calendars the project actually supports in practice: **Gregorian, Ethiopic, Nepali**. Ethiopic and Nepali behave differently enough from Gregorian (Ethiopic is a native-ICU calendar with its own era handling; Nepali is a custom, non-ICU calendar implemented in `multi-calendar-dates` via a lookup table, not `Intl`) that "tested for Gregorian" should not be assumed to mean "tested for the other two" — verify explicitly rather than assuming parity.
+
+## Gotchas
+
+- **Day-cell tests must assert on visible text, not just the `data-test` attribute.** `data-test` on a day cell is always the full date string (e.g. `2024-10-17`); the _rendered label_ is a separate value from `multi-calendar-dates` and can silently regress into something else (it has, historically) without any `data-test`-based assertion catching it. Assert `within(cell).getByText('17')` (or the calendar-appropriate bare day number) in addition to clicking by `data-test`.
+- **`useDatePicker` recomputes on every render of `CalendarInput`, regardless of whether the calendar dropdown is open.** Its output must stay properly memoized inside `multi-calendar-dates` — if you find yourself adding expensive work anywhere in this render path (here or upstream), verify it doesn't run on every keystroke. The `performance (LIBS-763)` describe block in the test file guards against this regressing again; keep it green.
+- **`inputWidth` is deliberately untested.** It's a passthrough to a `styled-jsx` CSS width — purely cosmetic, and `styled-jsx` output is fragile to assert on in jsdom. Don't assume this is an oversight.
+- **`minDate`/`maxDate`/`format`/`strictValidation` get passed to two different functions with different expectations**: `validateDateString` (via `validationOptions`, keyed `minDateString`/`maxDateString`) drives the visible error text, while `useDatePicker` takes the same values under its own key names (`minDate`/`maxDate`) to decide whether to fall back to today internally in strict mode. These used to silently disagree (the `validationOptions` object, keyed for `validateDateString`, was spread straight into `useDatePicker` too) — the widget would keep an out-of-range date selected in strict mode even though the input correctly rejected it. Pass `useDatePicker` its own correctly-named fields explicitly; don't assume an options object built for one of these functions is safe to reuse for the other.