Fix DatePicker Time Input

[chirokas]

Closes #

📝 Description

Closing the Date Picker while the Month and Year Pickers are open causes the Time Input to disappear when reopened.

nextui/packages/components/date-picker/src/date-picker.tsx

Lines 41 to 42 in 1ba2d02

	const calendarBottomContent = useMemo(() => {
	if (isCalendarHeaderExpanded) return null;

⛳️ Current behavior (updates)

20240424_160529.mp4

20240422_221921.mp4

Please describe the current behavior that you are modifying

🚀 New behavior

20240422_221611.mp4

Please describe the behavior or changes this PR adds

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• New Features

  • Enhanced DatePicker with Month and Year Picker functionality.
  • Added onClose function to manage date picker closing behavior.

• Bug Fixes

  • Improved state management for calendar header expansion.

• Tests

  • Introduced tests for Month and Year Picker in DatePicker.
  • Verified controlled and uncontrolled modes for month and year picker.
  • Ensured correct rendering of CalendarBottomContent.

[changeset-bot]

🦋 Changeset detected

Latest commit: dff5c7c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@nextui-org/date-picker	Patch
@nextui-org/react	Patch

Not sure what this means? Click here to learn what changesets are.

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 24, 2024 8:52pm

[vercel]

@chirokas is attempting to deploy a commit to the NextUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Rate Limit Exceeded

@jrgarciadev has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 57 minutes and 34 seconds before requesting another review.

How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.
Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.
Please see our FAQ for further information.

Commits

Files that changed from the base of the PR and between e53dc7f and dff5c7c.

Walkthrough

The recent updates to the DatePicker component primarily focus on enhancing state management and expanding functionality. The state management for the calendar header expansion is now handled using useControlledState from @react-stately/utils. Additionally, new logic and callbacks were introduced to manage the header expansion and closing behavior. The test suite was also expanded to cover the new Month and Year Picker functionality, ensuring both controlled and uncontrolled modes work as expected.

Changes

File	Summary of Changes
.../date-picker/src/use-date-picker-base.ts	Refactored state management for calendar header expansion using useControlledState. Added handleHeaderExpandedChange callback and onClose function. Reorganized props handling.
.../date-picker/src/use-date-picker.ts	Updated useDatePicker function to include a new onClose parameter and logic within onOpenChange callback to call onClose() when the date picker is closed.
.../date-picker/__tests__/date-picker.test.tsx	Added new test cases for Month and Year Picker functionality, including tests for both controlled and uncontrolled modes, and the rendering of CalendarBottomContent.

---

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>.
  • 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 generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @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.

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 as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration 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.

[wingkwong]

1. please add some description on the issue and what you are trying to fix
2. please add a changeset since you've changed the src code
3. please add tests to cover the logic you added

[wingkwong]

1. please add tests to packages/components/date-picker/__tests__/date-picker.test.tsx to cover the logic you added.

[coderabbitai]

Actionable comments posted: 1

[wingkwong]

The test cases you added just cover the base case of month and year picker, which is ok. However, I didn't see the logic where the PR is trying to solve in the test case, i.e. calendarBottomContent should be still here after open the month / year picker and the date picker.

[coderabbitai]

Actionable comments posted: 0

Review Details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c6a40b5 and c67c283.

Files selected for processing (1)

• packages/components/date-picker/src/use-date-picker-base.ts (6 hunks)

Files not reviewed due to errors (1)

• packages/components/date-picker/src/use-date-picker-base.ts (no review received)

[coderabbitai]

Actionable comments posted: 1

Outside diff range and nitpick comments (2)

packages/components/date-picker/src/use-date-picker.ts (2)

Line range hint 100-100: The useMemo hook for slots does not specify all of its dependencies. It's crucial to include all dependencies to avoid stale closures and bugs related to them.

-    [objectToDeps(variantProps), className],
+    [variantProps, className],

---

Line range hint 109-109: Variables groupProps, labelProps, fieldProps, buttonProps, dialogProps, ariaCalendarProps, descriptionProps, and errorMessageProps are declared with let but are only assigned once. Consider changing these to const for better code clarity and to indicate that their values should not change.

-  let {
+  const {
    groupProps,
    labelProps,
    fieldProps,
    buttonProps,
    dialogProps,
    calendarProps: ariaCalendarProps,
    descriptionProps,
    errorMessageProps,
  } = useAriaDatePicker({...originalProps, validationBehavior}, state, domRef);

Review Details

Configuration used: .coderabbit.yaml
Review profile: CHILL

Commits

Files that changed from the base of the PR and between c67c283 and e53dc7f.

Files selected for processing (3)

• packages/components/date-picker/tests/date-picker.test.tsx (1 hunks)
• packages/components/date-picker/src/use-date-picker-base.ts (6 hunks)
• packages/components/date-picker/src/use-date-picker.ts (1 hunks)

Additional comments not posted (3)

packages/components/date-picker/src/use-date-picker.ts (1)

84-95: The implementation of the onClose function within the onOpenChange callback is correct and aligns with the PR's objective to ensure the Time Input remains visible upon reopening the DatePicker. However, ensure that onClose is always defined before being used to avoid potential runtime errors.

Verification successful

---

The context provided shows that onClose is destructured from the return value of useDatePickerBase and is subsequently used within the onOpenChange callback. Since onClose is part of the destructured object from useDatePickerBase, it is defined before its usage in the onOpenChange callback.

• onClose is destructured from useDatePickerBase at line 84.
• onClose is used within the onOpenChange callback at line 92.

This confirms that onClose is defined before being used, and there are no potential runtime errors related to its usage.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Description: Verify that `onClose` is always defined before being used in `useDatePicker.ts`.

# Test: Search for the usage of `onClose` before its definition. Expect: No occurrences before its definition.
rg --type typescript --before-context=5 'onClose\(\)' packages/components/date-picker/src/use-date-picker.ts | grep 'onClose ='

Length of output: 164

---

---

Script:

#!/bin/bash
# Description: Verify that `onClose` is always defined before being used in `use-date-picker.ts`.

# Search for the definition of `onClose` in the file
rg 'onClose' packages/components/date-picker/src/use-date-picker.ts

Length of output: 99

---

---

Script:

#!/bin/bash
# Description: Extract lines around occurrences of `onClose` to understand their context in `use-date-picker.ts`.

# Extract 10 lines before and after each occurrence of `onClose` to understand the context
rg 'onClose' -C 10 packages/components/date-picker/src/use-date-picker.ts

Length of output: 739

packages/components/date-picker/src/use-date-picker-base.ts (1)

155-165: The use of useCallback and useControlledState for managing the isCalendarHeaderExpanded state is a good practice as it ensures that the component only re-renders when necessary. However, ensure that onHeaderExpandedChange is always provided when expected to avoid potential runtime errors.

Verification successful

The previous attempts to verify the usage of onHeaderExpandedChange did not produce any output due to syntax errors and unmatched patterns. To ensure a thorough verification, we need to adjust our approach.

---

The previous attempts to verify the usage of onHeaderExpandedChange did not produce any output due to syntax errors and unmatched patterns. However, the initial search did show instances where onHeaderExpandedChange is used with null checks.

Given the results, it appears that onHeaderExpandedChange is properly handled with null checks in the codebase. Therefore, the concern mentioned in the review comment is addressed.

Scripts Executed

The following scripts were executed for the analysis:

---

Script:

#!/bin/bash
# Description: Verify that `onHeaderExpandedChange` is always provided when expected in `useDatePickerBase.ts`.

# Test: Search for the usage of `onHeaderExpandedChange` without null checks. Expect: Proper handling or defaulting.
rg --type typescript 'onHeaderExpandedChange\(' packages/components/date-picker/src/use-date-picker-base.ts | grep -v 'onHeaderExpandedChange\?.\('

Length of output: 208

---

---

Script:

#!/bin/bash
# Description: Verify that `onHeaderExpandedChange` is always provided when expected in `useDatePickerBase.ts`.

# Test: Search for the usage of `onHeaderExpandedChange` without null checks. Expect: Proper handling or defaulting.
rg 'onHeaderExpandedChange\(' packages/components/date-picker/src/use-date-picker-base.ts | grep -v 'onHeaderExpandedChange\?.\('

Length of output: 155

---

---

Script:

#!/bin/bash
# Description: Verify that `onHeaderExpandedChange` is always provided when expected in `useDatePickerBase.ts`.

# Test: Search for the usage of `onHeaderExpandedChange` without null checks. Expect: Proper handling or defaulting.
rg 'onHeaderExpandedChange\(' packages/components/date-picker/src/use-date-picker-base.ts | grep -v 'onHeaderExpandedChange\?\('

Length of output: 154

---

---

Script:

#!/bin/bash
# Description: Verify that `onHeaderExpandedChange` is always provided when expected in `useDatePickerBase.ts`.

# Test: Search for the usage of `onHeaderExpandedChange` without null checks. Expect: Proper handling or defaulting.
rg 'onHeaderExpandedChange\(' packages/components/date-picker/src/use-date-picker-base.ts | rg -v 'onHeaderExpandedChange\?\('

Length of output: 128

---

---

Script:

#!/bin/bash
# Description: Verify that `onHeaderExpandedChange` is always provided when expected in `useDatePickerBase.ts`.

# Test: Search for the usage of `onHeaderExpandedChange` and ensure it is properly handled or defaulted.
# We will search for all instances of `onHeaderExpandedChange` and check if they are properly handled with null checks.

# Find all instances of `onHeaderExpandedChange` in the file
rg 'onHeaderExpandedChange' packages/components/date-picker/src/use-date-picker-base.ts

# Check if `onHeaderExpandedChange` is used without null checks
rg 'onHeaderExpandedChange\(' packages/components/date-picker/src/use-date-picker-base.ts | rg -v 'onHeaderExpandedChange\?\('

Length of output: 388

packages/components/date-picker/__tests__/date-picker.test.tsx (1)

463-507: The new test cases for the "Month and Year Picker" functionality are comprehensive and well-implemented. They correctly test both controlled and uncontrolled scenarios, as well as the rendering of CalendarBottomContent. This ensures that the DatePicker component behaves as expected in different configurations.

[coderabbitai]

The onClose function correctly resets the isCalendarHeaderExpanded state when isHeaderExpanded is undefined, which aligns with the PR's objective. However, consider adding a comment explaining why this check is necessary for future maintainability.

+  // Reset the header expansion state if it's not explicitly controlled
   if (isHeaderExpanded === undefined) {
     setIsCalendarHeaderExpanded(false);
   }

---

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change

	const onClose = () => {
	if (isHeaderExpanded === undefined) {
	setIsCalendarHeaderExpanded(false);
	}
	};
	const onClose = () => {
	// Reset the header expansion state if it's not explicitly controlled
	if (isHeaderExpanded === undefined) {
	setIsCalendarHeaderExpanded(false);
	}
	};

[jrgarciadev]

@chirokas could you please fix the tests?