docs(date-range-picker): fix React import and add troubleshooting section

[ariansj01]

📝 Description

Fixed React import issue in DateRangePicker presets example and added comprehensive troubleshooting section to improve developer experience. This addresses the issue where onFocusChange only updates the start date, causing the end date to be lost.

Closes #5757

Changes Made

• Fixed React import: Added missing import React from "react"; in presets.raw.jsx
• Added troubleshooting section: Comprehensive guide for common DateRangePicker issues
• Improved API documentation: Enhanced onFocusChange description with important notes
• Added examples: Proper handling of start/end date focus changes
• Added guidance: React import requirements and date range structure

Issues Addressed

• onFocusChange bug: Fixed the issue where onFocusChange only updates start date
• Missing React import: Resolved React import error in presets example
• Poor developer experience: Added troubleshooting section to help developers avoid common pitfalls

Additional Information

This PR specifically addresses the issue where users experience problems with DateRangePicker when:

1. Using onFocusChange without proper handling of both start and end dates
2. Missing React import causing compilation errors
3. Not understanding proper date range structure

The troubleshooting section will help developers:

• Understand common DateRangePicker issues
• Learn proper onFocusChange implementation
• Avoid losing end date selection
• Set up React imports correctly

Testing

• [x] All examples work correctly
• [x] No linting errors
• [x] Documentation renders properly
• [x] Troubleshooting section is comprehensive

Summary by CodeRabbit

• Bug Fixes

  • Improved Date Range Picker example focus handling to correctly track start and end fields, preventing accidental overwrites of the end date.

• Documentation

  • Updated onFocusChange API description with clear guidance and examples for handling both start and end focus changes.
  • Added a Troubleshooting section covering common issues: onFocusChange usage, missing React import, and correct date range value structure.
  • Clarified behavior to help avoid losing selections when switching focus between date fields.

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: d5a5b86c27459ecf42627ee07944fd079e8ce92e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

@ariansj01 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai[bot]]

Walkthrough

Updated the Date Range Picker example to handle focus changes for both start and end fields via calendarProps.onFocusChange. Documentation was revised to describe correct onFocusChange usage and added troubleshooting for focus handling, React import, and value shape.

Changes

Cohort / File(s)	Summary of changes
Docs example component apps/docs/content/components/date-range-picker/presets.raw.jsx	Modified onFocusChange to conditionally set focus to "start" or "end" based on provided value.
Documentation content apps/docs/content/docs/components/date-range-picker.mdx	Expanded API docs for onFocusChange with caution and example; added Troubleshooting section (focus handling, React import, value structure).

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant DateRangePicker as DateRangePicker (example)
  participant Calendar as Calendar (popup)

  User->>Calendar: Interact (select/start/end)
  Calendar-->>DateRangePicker: onFocusChange(val: "start" | "end")
  rect rgba(200,235,255,0.25)
    note right of DateRangePicker: Updated logic
    DateRangePicker->>DateRangePicker: if val === "start" setFocus(start)
    DateRangePicker->>DateRangePicker: else if val === "end" setFocus(end)
  end
  DateRangePicker-->>Calendar: Focus state updated

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (4 warnings)

Check name	Status	Explanation	Resolution
Linked Issues Check	⚠️ Warning	The changes in this PR only update documentation and examples for the DateRangePicker and do not implement any logic to reproduce or correct the scrolling behavior in the MonthYearPicker component as specified by issue #5757.	Please add or reference the code modifications required to reproduce and fix the scroll handling in the MonthYearPicker for both DatePicker and DateRangePicker components to satisfy the linked issue’s objectives.
Out of Scope Changes Check	⚠️ Warning	All modifications in this pull request are documentation and example updates that do not relate to the MonthYearPicker scrolling bug required by the linked issue, indicating that the PR introduces out-of-scope changes without addressing the core objective.	Limit this pull request to the implementation of the scroll fix logic for the MonthYearPicker or split the documentation improvements into a separate PR after the primary bug is resolved.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description Check	⚠️ Warning	The pull request description diverges significantly from the required template by omitting the “Current behavior (updates)”, “New behavior”, and “Is this a breaking change” sections, and by placing the Closes # directive inside the Description rather than at the top. It instead introduces custom headings like “Changes Made” and “Issues Addressed” which do not align with the repository’s standard structure. As a result, key information about the state before and after the change and the breaking change status is missing.	Please update the pull request description to follow the template exactly by moving the “Closes #5757” directive to the top, adding distinct sections for “⛳️ Current behavior (updates)”, “🚀 New behavior”, and “💣 Is this a breaking change (Yes/No)”, and then including any additional context under “📝 Additional Information” to ensure consistency with repository guidelines.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the main changes to the DateRangePicker documentation by noting the fix to the React import and the addition of a troubleshooting section, which accurately reflects the core modifications in this PR.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[wingkwong]

closing - inactive