Skip to content

feat(calendar): add useSelection hook for date selection#442

Merged
moraeso merged 7 commits into
mainfrom
feat/calendar-selection
Mar 24, 2026
Merged

feat(calendar): add useSelection hook for date selection#442
moraeso merged 7 commits into
mainfrom
feat/calendar-selection

Conversation

@moraeso
Copy link
Copy Markdown
Member

@moraeso moraeso commented Mar 11, 2026

Summary

  • Add useSelection hook supporting three selection modes: single, range, and multiple
  • Introduce Matcher system for flexible date disabling (Date, Date[], { before }, { after }, { from, to }, { dayOfWeek }, custom function)

API

const calendar = useCalendar();
const { body, select, selected } = useSelection({
  mode: "single", // | "range" | "multiple"
  body: calendar.body,
  disabled: { dayOfWeek: [0, 6] },
});

Selection Modes

Mode selected type Features
single Date | undefined Toggle, required option
range DateRange | undefined Auto-swap, min/max day constraints
multiple Date[] Toggle, min/max count constraints

Demo

Single Range Multiple
Range selection Multiple selection Single selection

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
h6s Ready Ready Preview, Comment Mar 12, 2026 5:33am

Request Review

songsang added 7 commits March 12, 2026 13:30
Add Selection type definitions (Matcher, DateRange, CalendarBodyCell,
SelectionCellProps, RangeSelectionCellProps) and matchDate utility
for flexible date matching patterns.

Unify DateCell and CalendarBodyCell by making CalendarBodyCell extend
DateCell, establishing an explicit type contract between calendar
core and selection layers.
Implement useSelection hook supporting three selection modes:
- single: select one date with optional required constraint
- range: select date range with min/max day constraints
- multiple: toggle multiple dates with min/max count constraints

Each mode enriches the calendar body cells with selection state
(isSelected, isDisabled, isRangeStart, isRangeEnd, isInRange),
enabling headless rendering of selection UI.

Internally split into useSingleSelection, useRangeSelection, and
useMultipleSelection to comply with Rules of Hooks while exposing
a single useSelection entry point.
Add storybook stories demonstrating three selection modes:
- Single: select one date, weekends disabled
- Range: select date range with min/max constraints
- Multiple: toggle up to 5 dates, past dates disabled
Add React example page showcasing useSelection hook with three
tabbed demos (Single, Range, Multiple) using Chakra UI Table
components, consistent with the existing calendar example style.
Move matchDate/matchDateArray tests from useSelection.test.ts into
a dedicated matchDate.test.ts, consistent with other utility tests.

Add edge case coverage:
- empty Date[] and { dayOfWeek: [] }
- { before }/{ after } boundary exclusivity
- { from, to } with same-day range
- time-insensitive Date comparison
- always true/false function matchers
- Date[] treated as single Matcher vs Matcher[]
- mixed Matcher array with multiple matcher types
@moraeso moraeso force-pushed the feat/calendar-selection branch from d8b2c6b to 0058661 Compare March 12, 2026 05:30
@moraeso moraeso merged commit e1669ac into main Mar 24, 2026
9 checks passed
@moraeso moraeso deleted the feat/calendar-selection branch March 24, 2026 14:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant