@dhis2-ui/calendar 10.19.0 → 10.19.2

package/src/calendar-input/__tests__/calendar-input.test.js

@@ -40,6 +40,89 @@ 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(
+            <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(
+            <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(
@@ -61,7 +144,286 @@ describe('Calendar Input', () => {
         )
     })
 
+    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(
+            <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(<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(
+            <CalendarInput
+                calendar="gregory"
+                pastOnly
+                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(
+            <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(
+            <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(
+            <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(
+            <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(
+                <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(
+                <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(
+                <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(
+                <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(
@@ -87,6 +449,90 @@ describe('Calendar Input', () => {
             ).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(
+                <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(
+                <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, getByText } = render(
                 <CalendarWithValidation
@@ -109,8 +555,7 @@ describe('Calendar Input', () => {
                 )
             ).toBeInTheDocument()
         })
-        // Temporarily disabled
-        it.skip('should validate date in ethiopic calendar', () => {
+        it('should validate date in ethiopic calendar', () => {
             const onDateSelectMock = jest.fn()
             const { getByTestId, getByText, queryByText } = render(
                 <CalendarWithValidation
@@ -155,7 +600,6 @@ describe('Calendar Input', () => {
                 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 { getByTestId, getByText, queryByText } = render(

package/src/calendar-input/calendar-input.js

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

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useDatePicker } from '@dhis2/multi-calendar-dates'
+import { useDatePicker, validateDateString } from '@dhis2/multi-calendar-dates'
 import { InputFieldProps } from '@dhis2-ui/input'
 
 export type CalendarDir = 'ltr' | 'rtl'
@@ -7,6 +7,25 @@ export type CalendarDir = 'ltr' | 'rtl'
 type CalendarPickerParam = Parameters<typeof useDatePicker>[0]
 type CalendarPickerOptions = CalendarPickerParam['options']
 
+/**
+ * The `validation` object CalendarInput attaches to its `onDateSelect`
+ * payload. Not produced by the bare `Calendar` widget - CalendarInput
+ * computes it itself via `validateDateString` (whose `error`/`warning`/
+ * `valid` combination depends on the `strictValidation` prop), except
+ * when the date is cleared, in which case it's just `{ valid: true }`.
+ */
+export type CalendarInputValidation = ReturnType<typeof validateDateString>
+
+export type CalendarInputOnDateSelectPayload =
+    | {
+          calendarDateString: string
+          validation: CalendarInputValidation
+      }
+    | {
+          calendarDateString: null
+          validation: { valid: true }
+      }
+
 export interface CalendarProps {
     /**
      * the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts
@@ -62,7 +81,14 @@ export interface CalendarProps {
 export const Calendar: React.FC<CalendarProps>
 
 export type CalendarInputProps = Omit<InputFieldProps, 'type' | 'value'> &
-    CalendarProps & {
+    Omit<CalendarProps, 'onDateSelect'> & {
+        /**
+         * Called with `{ calendarDateString: null, validation: { valid: true } }`
+         * when the date is cleared, otherwise with `{ calendarDateString: string, validation }`
+         * where `validation` reflects the result of validating against `minDate`/`maxDate`/
+         * `format` (see `CalendarInputValidation`), influenced by `strictValidation`.
+         */
+        onDateSelect: (payload: CalendarInputOnDateSelectPayload) => void
         /**
          * Optional format for the date. Determines how the date is displayed
          * or processed. If not provided it supports both formats