regression: add month and year picker

[aaryan610]

Description

This PR adds back the month and year pickers for the calendar component.

Type of Change

• Bug fix (non-breaking change which fixes an issue)

Summary by CodeRabbit

• Chores
  • Upgraded a key UI dependency to leverage the latest enhancements.
• Refactor
  • Streamlined the calendar view by simplifying navigation icons and underlying UI logic.
• Style
  • Refined dropdown interfaces with updated borders and rounded corners for a more polished appearance.

[coderabbitai]

Walkthrough

This pull request updates the react-day-picker dependency from version 8.10.1 to 9.5.0 in both the UI and web package files. The Calendar component has been refactored into an arrow function with updated icon handling—removing the unused ChevronRight in favor of a rotated ChevronLeft based on orientation. Additionally, the dropdown components for date and date-range have adjusted styling that now includes a border and rounded corners.

Changes

File(s)	Summary
packages/ui/package.json web/package.json	Updated react-day-picker dependency from 8.10.1 to 9.5.0.
packages/ui/src/calendar.tsx	Refactored the Calendar component into an arrow function; removed ChevronRight and updated icon handling to use a rotated ChevronLeft; commented out detailed classNames.
web/core/components/dropdowns/date-range.tsx web/core/components/dropdowns/date.tsx	Modified styling in dropdown options to add a 0.5px border with border-custom-border-300 and rounded-md corners.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Calendar
    participant Chevron
    User->>Calendar: Request calendar render
    Calendar->>Chevron: Retrieve Chevron icon based on orientation
    Chevron-->>Calendar: Return rotated Chevron icon
    Calendar->>User: Display updated Calendar component

Loading

Possibly related PRs

• Fix: date range selector #6625: Involves modifications to the Calendar component and its integration, aligning with part of these changes.
• [WEB-3237, 3238] dev: date picker enhancements #6470: Updates the react-day-picker dependency to version 9.5.0, directly relating to this upgrade.
• [WEB-3238] dev: datepicker with month and year selection dropdowns #6391: Also upgrades the react-day-picker dependency and introduces related feature enhancements.

Suggested labels

🎨UI / UX, 🌟enhancement

Suggested reviewers

• SatishGandham
• prateekshourya29

Poem

I'm a rabbit with a clever little hop,
Coding updates that make our project pop.
New icons and borders, shining bright,
Calendar tweaks that feel just right.
Hop along with joy in every line! 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between cc7b34e and 58b2164.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (5)

• packages/ui/package.json (1 hunks)
• packages/ui/src/calendar.tsx (1 hunks)
• web/core/components/dropdowns/date-range.tsx (1 hunks)
• web/core/components/dropdowns/date.tsx (1 hunks)
• web/package.json (1 hunks)

✅ Files skipped from review due to trivial changes (3)

• web/package.json
• web/core/components/dropdowns/date.tsx
• web/core/components/dropdowns/date-range.tsx

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: Analyze (javascript)

🔇 Additional comments (4)

packages/ui/src/calendar.tsx (3)

3-3: LGTM! Smart optimization of icon imports.

Good optimization by using a single ChevronLeft icon with rotation instead of importing both ChevronLeft and ChevronRight.

---

61-75: LGTM! Clean implementation of the Chevron component.

The Chevron component implementation is clean and efficient:

• Uses a single icon with conditional rotation
• Properly handles all orientations (right, down)
• Maintains className extensibility

---

11-78:

Details

✅ Verification successful

Verify the impact of commented-out styles on month/year pickers.

The extensive commenting out of classNames could affect the appearance and functionality of the month/year pickers that this PR aims to reintroduce. Particularly concerning are:

• Line 51-52: caption_dropdowns and dropdown_root styles for month/year picker dropdowns
• Line 53-59: dropdowns, dropdown, and caption_label styles for picker appearance

Please verify that:

1. The month/year pickers are still functional and properly styled
2. The commented-out styles aren't needed for the pickers

---

🌐 Web query:

What styles are required for month and year pickers in react-day-picker v9.5.0?

💡 Result:

To style month and year pickers in react-day-picker v9.5.x, you need to implement these key styling requirements:

Core Requirements

1. Default CSS Import
   Import base stylesheet for structural layout:

   import "react-day-picker/style.css";

   This handles:

   • Dropdown container positioning
   • Month/year select element sizing
   • Grid alignment for multi-month displays[3][9]

2. Dropdown Styling
   Target these classes for month/year pickers:

   .rdp-dropdown {
     /* Custom select box styling */
     margin: 0 4px;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
     padding: 2px 8px;
   }
   
   .rdp-caption_dropdowns {
     /* Container for month/year dropdowns */
     gap: var(--rdp-dropdown-gap, 8px);
   }

Customization Options

CSS Variables override default appearance:

.rdp-root {
  --rdp-dropdown-gap: 12px; /* Space between selects */
  --rdp-nav-button-width: 32px; /* Affects caption layout */
}

Class Overrides for advanced customization:

<DayPicker 
  classNames={{
    dropdown: 'custom-select',
    caption_dropdowns: 'my-dropdown-container'
  }}
/>

Key Considerations

• Dropdowns use native <select> elements by default[1][9]
• Multiple months display requires numberOfMonths prop[6]
• Persian calendar support added in v9.5.x uses same CSS structure[5]

For restricted navigation (month/year boundaries), use fromMonth/toMonth props rather than CSS[2]. The default style provides mobile-responsive behavior out of the box but can be extended with media queries as needed[9].

Citations:

• 1: https://www.jsdocs.io/package/react-day-picker
• 2: https://react-day-picker-v7.netlify.app/examples/months-restrict/
• 3: https://daypicker.dev/start
• 4: https://react-day-picker-v7.netlify.app/docs/styling/
• 5: https://github.com/gpbl/react-day-picker/releases
• 6: https://react-day-picker-v7.netlify.app/examples/months-initial/
• 7: https://react-day-picker-v7.netlify.app/examples/selected-range/
• 8: https://www.npmjs.com/package/react-date-picker
• 9: https://daypicker.dev/docs/styling
• 10: https://daypicker.dev/docs/navigation

---

Month/Year Pickers Styling Verified – Default CSS Is Sufficient

The default stylesheet provided by react-day-picker v9.5.x already delivers the necessary layout and styling for month/year dropdowns. In particular:

• The default CSS (typically imported via import "react-day-picker/style.css") handles dropdown alignment and sizing for the month/year pickers.
• Custom className overrides for caption_dropdowns, dropdown_root, dropdowns, dropdown, and caption_label (as seen in the commented-out block) are not mandatory unless additional customization is desired.

Please ensure that the base stylesheet is imported somewhere in the project. If so, you can safely leave the custom styles commented out.

packages/ui/package.json (1)

43-43:

Details

❓ Verification inconclusive

Verify compatibility with react-day-picker v9.5.0.

This is a major version upgrade from 8.10.1 to 9.5.0, which could introduce breaking changes.

Let's verify:

1. Breaking changes and migration requirements
2. Support for month/year pickers in v9.5.0

---

🌐 Web query:

What are the breaking changes between react-day-picker v8 and v9?

💡 Result:

The transition from React DayPicker v8 to v9 introduces several breaking changes across styling, props, components, and dependencies. Here's a detailed breakdown:

---

1. Styling Changes

• CSS Import Path: Update the CSS import path from react-day-picker/lib/style.css to react-day-picker/dist/style.css[1].
• Simplified Styles: Custom CSS styles may break due to updated class names and simplified structure[4][6]. Use new CSS variables for customization[4].
• Font Family: Default styles no longer set system-ui font family; inherit from parent elements unless explicitly overridden[2].

---

2. Prop Renames/Removals

v8 Prop	v9 Change
showWeekNumbers	Renamed to showWeekNumber[1][5].
initialMonth	Renamed to defaultMonth[1].
canChangeMonth	Renamed to disableNavigation[1].
selectedDays	Renamed to selected[1].
disabledDays	Renamed to disabled[1].
todayButton	Removed; implement via custom logic[1].
onDay* events	Some events (e.g., onDayTouchStart, onDayDoubleClick) removed; use custom components instead[4].

---

3. Component/Hook Changes

• Removed Components:
  • DayPickerInput: Replaced with custom input implementations (see Input Fields Guide)[1].
  • Legacy icons (IconDropdown, IconLeft, etc.): Replaced with unified Chevron component[10].
• Renamed Components:
  • Caption → MonthCaption
  • HeadRow → Weekdays
  • Row → Week[10].
• Hooks:
  • useInput hook deprecated/removed; use controlled inputs instead[4][6].

---

4. Dependency Updates

• date-fns: Now included as a direct dependency (previously a peer dependency)[4].
• Persian Calendar Support: Replaces Jalali calendar; update imports from react-day-picker/jalali to /persian[2].

---

5. Localization & Formatting

• Dropdown Formatters: Now receive a Date object instead of a numeric value (e.g., formatMonthDropdown(date))[2].
• ISO Weeks: Use the ISOWeek prop explicitly for ISO week calculations (previously default)[1].

---

6. Accessibility & Behavior

• ARIA Labels: Updated for WCAG 2.1 compliance; may require translation/test updates[4][6].
• Focus Management: Improved keyboard navigation with stricter focus boundaries (e.g., disabled days ignored)[4].

---

7. Modifiers & Customization

• Modifiers API: Requires both modifiers and modifiersClassNames props for styling custom modifiers[5].

  <DayPicker
    dayPickerProps={{
      modifiers: { odd: isDayOdd },
      modifiersClassNames: { odd: "odd" }
    }}
  />

---

Migration Steps

1. Update dependencies:

   npm install react-day-picker@latest date-fns

2. Refactor renamed props/components (e.g., replace selectedDays with selected).
3. Rewrite input fields using native React inputs instead of deprecated DayPickerInput.
4. Test CSS overrides with new class names/variables.
5. Verify localization settings for Persian/ISO weeks if applicable.

For full details, refer to the v9 Upgrading Guide[10].

Citations:

• 1: https://daypicker.dev/v8/upgrading
• 2: https://github.com/gpbl/react-day-picker/releases
• 3: https://www.npmjs.com/package/@fluentui%2Freact-datepicker-compat
• 4: https://github.com/gpbl/react-day-picker/blob/master/CHANGELOG.md
• 5: https://github.com/palantir/blueprint/wiki/react-day-picker-8-migration
• 6: v9.0.0 released gpbl/react-day-picker#2280
• 7: https://react-day-picker-v7.netlify.app/docs/matching-days/
• 8: https://www.jsdocs.io/package/react-day-picker
• 9: https://www.npmjs.com/package/react-day-picker/v/8.9.1
• 10: https://daypicker.dev/upgrading

---

🌐 Web query:

How to implement month and year pickers in react-day-picker v9?

💡 Result:

To implement month and year pickers in react-day-picker v9, use controlled navigation with custom dropdown components tied to React state management:

Controlled Month Navigation

1. Set up state for controlling displayed month:

const [currentMonth, setCurrentMonth] = useState<Date>(new Date());

2. Implement dropdown components:

<select 
  value={currentMonth.getMonth()}
  onChange={(e) => {
    const newDate = new Date(currentMonth);
    newDate.setMonth(parseInt(e.target.value));
    setCurrentMonth(newDate);
  }}
>
  {Array.from({length: 12}).map((_, i) => (
    <option key={i} value={i}>
      {format(new Date(2024, i), 'MMMM')}
    </option>
  ))}
</select>

<select
  value={currentMonth.getFullYear()}
  onChange={(e) => {
    const newDate = new Date(currentMonth);
    newDate.setFullYear(parseInt(e.target.value));
    setCurrentMonth(newDate);
  }}
>
  {Array.from({length: 10}).map((_, i) => {
    const year = new Date().getFullYear() - 5 + i;
    return <option key={year} value={year}>{year}</option>;
  })}
</select>

3. Connect to DayPicker:

<DayPicker
  month={currentMonth}
  onMonthChange={setCurrentMonth}
  showWeekNumber
  fixedWeeks
/>

Key Implementation Details

• Use month prop to control displayed calendar view[1][4]
• onMonthChange handles navigation updates[1][7]
• Format dates with date-fns helpers like format()[4][8]
• Maintain separate state for selected dates vs displayed month[3][6]

Complete Example Implementation

import { useState } from 'react';
import { DayPicker } from 'react-day-picker';
import { format } from 'date-fns';
import 'react-day-picker/style.css';

export default function DatePickerWithControls() {
  const [currentMonth, setCurrentMonth] = useState<Date>(new Date());
  
  return (
    <div>
      <div className="dropdowns">
        <select
          value={currentMonth.getMonth()}
          onChange={(e) => setCurrentMonth(new Date(
            currentMonth.getFullYear(),
            parseInt(e.target.value)
          ))}
        >
          {Array.from({length: 12}).map((_, i) => (
            <option key={i} value={i}>
              {format(new Date(2024, i), 'MMMM')}
            </option>
          ))}
        </select>

        <select
          value={currentMonth.getFullYear()}
          onChange={(e) => setCurrentMonth(new Date(
            parseInt(e.target.value),
            currentMonth.getMonth()
          ))}
        >
          {Array.from({length: 10}).map((_, i) => {
            const year = new Date().getFullYear() - 5 + i;
            return <option key={year} value={year}>{year}</option>;
          })}
        </select>
      </div>

      <DayPicker
        mode="single"
        month={currentMonth}
        onMonthChange={setCurrentMonth}
        modifiersClassNames={{
          selected: 'selected-day'
        }}
      />
    </div>
  );
}

This implementation provides full programmatic control over calendar navigation while maintaining accessibility and responsive behavior[4][7]. The dropdowns synchronize with both user interactions and calendar navigation controls[1][9].

Citations:

• 1: https://daypicker.dev/docs/navigation
• 2: https://daypicker.dev/start
• 3: https://refine.dev/blog/react-date-picker/
• 4: https://www.npmjs.com/package/react-day-picker
• 5: https://www.jsdocs.io/package/react-day-picker
• 6: https://www.npmjs.com/package/react-date-picker
• 7: https://github.com/gpbl/react-day-picker/releases
• 8: https://www.npmjs.com/package/react-day-picker/v/9.0.0-rc.4
• 9: https://github.com/gpbl/react-day-picker
• 10: DayPicker resets to current month after date selection gpbl/react-day-picker#2389

---

Ensure Compatibility with React-Day-Picker v9.5.0

This major version upgrade (from 8.10.1 to 9.5.0) introduces several breaking changes that require careful verification:

• Migration Adjustments:

  • Update styling: Adjust the CSS import path and verify custom overrides against the new class names and CSS variable strategy.
  • Prop and component changes: Replace or rename props (e.g., use defaultMonth instead of initialMonth, showWeekNumber instead of showWeekNumbers) and update components that have been removed or renamed (such as replacing DayPickerInput with a custom solution).
  • Review dependency updates (e.g., integrating date-fns as a direct dependency).

• Month/Year Picker Functionality:

  • Ensure that the implementation for month and year pickers uses controlled navigation with custom dropdowns, as outlined in the v9 documentation.
  • Confirm that the UI still supports the required calendar navigation and that state changes reflect the correct month/year selections.

Please verify these changes against your application’s usage of react-day-picker to ensure no unintended breakages.

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.