[WC-3466] chore(datagrid-date-filter-web): migrate react-datepicker to v9 (WC-3466)

[iobuhov]

What & why

Upgrades the Date filter widget's calendar from react-datepicker@6 to react-datepicker@9 (and date-fns@3 → 4), resolving WC-3466. v9 is a 3-major jump: Popper.js is replaced by Floating UI, the calendar popup is now a role="dialog" aria-modal="true", and day-name columns expose full weekday accessible names.

Changes

• chore: migrate react-datepicker to v9 with date-fns 4 — bumps react-datepicker and date-fns, drops the now-unnecessary @types/react-datepicker (v9 ships its own types), widens the widget-plugin-filtering date-fns peer to ^3.6.0 || ^4.1.0, and adapts the component to v9's typings:
  • DatePicker.tsx — new discriminated PickerChangeHandler, selectsRange narrowed so the props union resolves to its range arm, drops no-op props.
  • DatePickerController.ts / useSetup.ts — retyped against v9's DatePickerProps.
  • Unit tests updated + new DatePickerController.spec.ts.
  • CHANGELOG entry for the day-name screen-reader improvement.
• test: fix flaky filter_init_condition e2e — the two "apply filter right after load" tests used a racy goto("/#/…", {timeout:1000}) + reload() that intermittently landed on the home page under the shared worker session. Switched to the resolved path goto("/p/filter_init_condition") + waitForMendixApp, matching the text/number filter specs. (Pre-existing flake, not caused by the migration.)
• docs: update migration tasks — OpenSpec task bookkeeping.

Testing

• pnpm run test — unit suite green (68 tests, snapshots unchanged).
• pnpm turbo build + pnpm run verify — pass.
• e2e against a local Studio Pro app: all non-screenshot tests pass reliably, serial and parallel (previously the init-condition tests failed consistently in the full suite).

Notes / follow-ups

• The open-calendar screenshot baseline (test.fixme) and any updated closed-state baseline must be regenerated in CI (chromium-linux), not on macOS.
• v9 hard-codes the dialog's accessible name ("Choose Date") in English with no override prop — non-English apps get an untranslated dialog label. Worth an upstream issue.

🤖 Generated with Claude Code

[github-actions]

AI Code Review

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
packages/pluggableWidgets/datagrid-date-filter-web/CHANGELOG.md	User-facing changelog entry added
packages/pluggableWidgets/datagrid-date-filter-web/e2e/DataGridDateFilter.spec.js	Flaky init-condition tests fixed
packages/pluggableWidgets/datagrid-date-filter-web/package.json	react-datepicker ^6.6.0→^9.1.0, date-fns ^3.6.0→^4.1.0, drop @types/react-datepicker
packages/pluggableWidgets/datagrid-date-filter-web/src/components/DatePicker.tsx	Type imports updated, PickerChangeHandler exported, selectsRange narrowed, useWeekdaysShort removed, StaticProps narrowed
packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/DatePickerController.ts	DatePickerBackendProps dropped, types updated to v9 API, UNSAFE_handleChangeRaw signature narrowed
packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/useSetup.ts	calendarStartDay typed via DatePickerProps["calendarStartDay"]
packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/DatagridDateFilter.spec.tsx	Locale/weekday tests refactored to columnheader role; new aria-expanded + aria-controls tests
packages/pluggableWidgets/datagrid-date-filter-web/src/components/__tests__/DatePicker.spec.tsx	New toggle button a11y tests
packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/__tests__/DatePickerController.spec.ts	New file — full coverage of handlePickerChange modes and pickerState routing
packages/pluggableWidgets/datagrid-web/package.json	MENDIX_VERSION pin added to e2e scripts
packages/pluggableWidgets/gallery-web/e2e/Gallery.spec.js-snapshots/galleryDateFilter-chromium-linux.png	Screenshot baseline regenerated
packages/shared/widget-plugin-filtering/package.json	date-fns peer widened to ^3.6.0 || ^4.1.0
packages/pluggableWidgets/datagrid-date-filter-web/openspec/changes/update-react-datepicker-v9/	OpenSpec bookkeeping — skipped

Skipped (out of scope): pnpm-lock.yaml

Note: gh pr checks required interactive approval in this environment — CI status could not be verified programmatically. The PR description confirms the unit suite (68 tests), build, and local e2e pass.

---

Findings

⚠️ Low — PickerChangeHandler type exported from a component and imported into a helper

File: packages/pluggableWidgets/datagrid-date-filter-web/src/helpers/DatePickerController.ts line 4
Note: DatePickerController.ts imports PickerChangeHandler from ../components/DatePicker, reversing the normal helper→component dependency direction. The type describes the boundary contract between the controller and the picker, so it would be more natural to define it in DatePickerController.ts (or a shared types.ts) and have DatePicker.tsx import it upward — the same direction the component already imports DatePickerController. Not blocking for a migration PR, but worth tidying in a follow-up.

---

⚠️ Low — MENDIX_VERSION hardcoded in datagrid-web e2e scripts

File: packages/pluggableWidgets/datagrid-web/package.json line 32–35
Note: MENDIX_VERSION=10.24.12.86709 is hardcoded in the e2e and e2edev scripts. This change is in datagrid-web, not in the affected datagrid-date-filter-web package, and the PR description doesn't explain why it's included here. If it's a necessary companion to make CI use the right Mendix test app after the picker upgrade, a brief comment in the PR body would clarify intent. It will also need to be updated whenever the test app version changes — consider whether this pin belongs in a shared CI config or .env instead.

---

⚠️ Low — Studio Pro manual pass and E2E blocked but incomplete

File: packages/pluggableWidgets/datagrid-date-filter-web/openspec/changes/update-react-datepicker-v9/tasks.md sections 7 and 8
Note: Tasks 7.1–7.9 (manual Studio Pro verification: popup escape, locale, Atlas theme) and 8.1/8.3/8.4 (full E2E suite, axe wcag21aa scan, screenshot baseline) are explicitly marked blocked. The tasks.md notes that the axe scan currently runs on / with the calendar closed, so v9's new role="dialog" aria-modal="true" and role="table" / columnheader / gridcell structure inside the calendar are not exercised by that scan. If the E2E pass is completed before merge, opening the calendar before the axe scan would close this gap.

---

Positives

• The selectsRange={props.selectsRange || undefined} narrowing elegantly satisfies the v9 discriminated union without any type cast — cleaner than the onChange-cast approach that was considered and discarded.
• The old code had a copy-paste bug: handleCalendarClose was typed as DatePickerBackendProps["onCalendarOpen"]. The migration silently fixes this by using DatePickerProps["onCalendarClose"].
• DatePickerController.spec.ts is a solid new file: it covers all four handlePickerChange branches (single date, full range, half-open range, null clear) and all three pickerState routing paths, matching the spec scenarios exactly.
• The weekday tests were rewritten against getAllByRole("columnheader") and the aria-hidden abbreviation child — much more resilient to DOM restructuring than the old .parentElement?.lastChild?.textContent pointer walk.
• The openCalendar / getShortWeekDays helpers in the test file eliminate five blocks of duplicated setup code and make the intent clear at a glance.
• The comment block ordering constraint (// Keep this block last) and the useId counter explanation are exactly the kind of non-obvious "why" comments the codebase should have.
• The design.md and tasks.md are unusually thorough — decision rationale (cast vs. union narrowing, single-step vs. staged upgrade), risk register, and open questions are all documented. The build caveat about Node 17+ and the v9 exports map trailing-slash form (ERR_PACKAGE_PATH_NOT_EXPORTED) is particularly valuable institutional knowledge.