raystack / raystack/apsara

[Calendar] Support ref as prop and fix date handling edge cases

Open
#602 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component triage
Dominant language
TypeScript
Stars
70
Forks
13
Avg merge
2d 5h
Merged PRs (30d)
8

Description

Summary

Improvements to the Calendar, DatePicker, and RangePicker components to fix patterns and improve flexibility.

Improvements

1. No ref prop support on Calendar, DatePicker, or RangePicker

None of the three exported components accept ref as a prop, inconsistent with the rest of the design system.

2. Hardcoded future date restriction in DatePicker

DatePicker input validation has dayjs(date).isSameOrBefore(dayjs()) hardcoded, preventing selection of future dates. This should be configurable or removed.

4. Manual event listener management in DatePicker

DatePicker manually manages mouseup event listeners via document.addEventListener/removeEventListener. This could be simplified using the Popover's own onOpenChange interaction model or a useEffect cleanup pattern.

5. mode='single' hardcoded in Calendar

The Calendar component sets mode='single' by default but also spreads ...props after, which allows override. The default should be documented or the prop should be explicit in the type.

6. DatePicker input format detection is fragile

handleInputChange guesses the date format based on separator character (/ or -). This can conflict with the dateFormat prop if the user specifies a different format.

Moved to Cross-Cutting Issues

The following items have been moved to cross-cutting issues that address them across all components:

  • Remove !important declarations (#678)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Calendar, DatePicker, and RangePicker component entry points and inspect their prop types and date-handling paths. Review ref support, future-date validation, mouseup listener cleanup, Calendar's single mode default, and input format detection against the stated improvements. Done means the affected behavior is configurable or corrected across the three components, with the existing design-system patterns preserved.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.