feat(date-field): QuickBooks-style keyboard shortcuts#364
Conversation
Whole-date navigation from a focused date segment and while the calendar popover is open (all case-insensitive): - t today; m/h month start/end; y/r year start/end; w/k week start/end - '-' / '=' / '+' step a day, rolling month and year boundaries over - '/' advances to the next segment; Alt+down opens the calendar - a 2-digit year expands to the 2000s on blur Shortcut targets clamp to minValue/maxValue; in the open calendar they move the highlight like the arrows (Enter confirms). The shared command resolver lives in lib/date-shortcuts.ts so the field and calendar engines stay decoupled. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The main-merge combined the test's @internationalized/date import onto one line; oxfmt wants it split. Fixes the failing fmt:check CI step. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Previously "26" → 2026 only ran on whole-group blur, but the calendar icon lives inside the group — so tabbing year→icon left "26" showing until focus escaped the field entirely. Fire the expansion when the year segment itself loses focus (to a sibling, the icon, or outside). Idempotent, so the commitOnBlur backstop (which also feeds the leap-year day-clamp) still runs. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
| } else { | ||
| base = completeCalendarDate(fields) ?? ref; | ||
| } | ||
| let next = resolveDateShortcut(cmd, base, ref, locale); |
There was a problem hiding this comment.
This never accepts a firstDayOfWeek option — so DatePicker passes firstDayOfWeek to useCalendarState (date-field.tsx:276) but not to useDateFieldState (date-field.tsx:248–263). resolveDateShortcut then falls through to startOfWeek(base, locale, undefined), i.e. the locale default.
i.e There's a <DatePicker locale="en-US" firstDayOfWeek="mon" />. Focus a segment and press w → field jumps to Sunday (en-US locale default). Open the calendar and press w → highlight jumps to Monday (use-calendar-state.ts:280, which does forward firstDayOfWeek).
DatePicker forwarded firstDayOfWeek to useCalendarState but not to useDateFieldState, so `w`/`k` from a focused segment fell through to resolveDateShortcut's locale default while the open-calendar path used the prop — e.g. <DatePicker locale="en-US" firstDayOfWeek="mon" /> jumped the field to Sunday but the calendar to Monday. Thread firstDayOfWeek into useDateFieldState and pass it through to the resolver. Centralize the FirstDayOfWeek type in lib/date-shortcuts.ts (the resolver that consumes it) and re-export from use-calendar-state so existing import sites are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
Good catch — fixed in 1fd47f3. Also moved the |
|
/review |
|
✅ API Design Review completed successfully! API Design Review complete for PR #364. The prior High issue (firstDayOfWeek not forwarded to useDateFieldState in DatePicker) is resolved per commit 1fd47f3. Impact analysis confirms no breaking API changes and no consumer regressions. One Low suggestion posted inline (DateField missing firstDayOfWeek prop for w/k shortcuts). Verdict: Approve. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Generated by API Design Review for issue #364 · 123.1 AIC · ⌖ 6.95 AIC · ⊞ 5.8K
Comment /review to run again
The w/k (start/end of week) keyboard shortcuts were locale-locked in a standalone DateField because firstDayOfWeek lived only on DatePickerProps. Move it into the shared DateBehaviorProps and thread it through DateField's useDateFieldState so a consumer in a non-default-week-start locale can override the week start. Addresses IzumiSy's review comment on #364. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3 participants
What
Adds QuickBooks Online-style keyboard shortcuts to
DateField/DatePicker. Fast-follow #1372 on the date-picker foundation (planning issue), which landed onmainvia #332.Shortcuts
From a focused date segment and while the calendar popover is open (all case-insensitive):
tm/hy/rw/k-=/+next day — both roll month and year boundaries over (+needs no Shift)/1means January, not the start of1x)Alt+↓DatePicker)A 1–2 digit year expands to the 2000s on blur (
26→2026).Video demo
date-keyboard-shortcuts.mp4
Invalid-date handling
minValue/maxValue— shortcut targets are clamped into range (field path and calendar path both), so a shortcut can never land out of bounds.isDateUnavailable— in the field it behaves like typing (free entry; the consumer validates); in the open calendar an unavailable day can be highlighted but not confirmed.Enter/click confirms.Structure
The shortcut vocabulary (
DateShortcut,DATE_SHORTCUT_KEYS,resolveDateShortcut) lives in a pure, React-freelib/date-shortcuts.tsthat both the field and calendar engines import — no cross-component coupling, and the date math is unit-tested directly.Testing
pnpm test— 1321 pass (incl. pure-resolver tests + field/calendar shortcut + clamp + popover-open coverage)/date-pickerdemo: today, month-start, min-clamp, and the popover-open highlight + Enter-to-confirm flow🤖 Generated with Claude Code