fix(calendar): apply inert attribute according to isHeaderExpanded #3087
Conversation
🦋 Changeset detectedLatest commit: cd3c622 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@KumJungMin is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe changes involve updating the Changes
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? TipsChatThere are 3 ways to chat with CodeRabbit:
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)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range and nitpick comments (2)
packages/components/calendar/src/calendar-month.tsx (1)
Line range hint
51-51: Using array indices as keys in React can lead to rendering issues. Consider using a more stable identifier.- <tr key={weekIndex} ...> + <tr key={`week-${weekIndex}`} ...> - <CalendarCell key={i} ...> + <CalendarCell key={`date-${date.toString()}`} ...> - <th key={index} ...> + <th key={`day-${day}`} ...>Also applies to: 60-60, 85-85
packages/components/calendar/src/calendar-picker.tsx (1)
Line range hint
51-51: Using array indices as keys in React can lead to rendering issues. Consider using a more stable identifier.- <EmptyItem key={i} /> + <EmptyItem key={`empty-item-${i}`} />Also applies to: 55-55
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (2)
- packages/components/calendar/src/calendar-month.tsx (1 hunks)
- packages/components/calendar/src/calendar-picker.tsx (1 hunks)
Additional Context Used
Biome (9)
packages/components/calendar/src/calendar-month.tsx (6)
1-1: Some named imports are only used as types.
1-2: All these imports are only used as types.
2-3: All these imports are only used as types.
51-51: Avoid using the index of an array as key property in an element.
60-60: Avoid using the index of an array as key property in an element.
85-85: Avoid using the index of an array as key property in an element.
packages/components/calendar/src/calendar-picker.tsx (3)
2-3: All these imports are only used as types.
51-51: Avoid using the index of an array as key property in an element.
55-55: Avoid using the index of an array as key property in an element.
Additional comments not posted (2)
packages/components/calendar/src/calendar-month.tsx (1)
44-44: The change to use the spread syntax for theinertattribute is a good approach to conditionally apply attributes based on state.packages/components/calendar/src/calendar-picker.tsx (1)
70-70: The change to use the spread syntax for theinertattribute is a good approach to conditionally apply attributes based on state.
KumJungMin
changed the title
|
@KumJungMin please add the changeset |
KumJungMin
changed the title
thank you comment :) |
There was a problem hiding this comment.
Actionable comments posted: 2
Outside diff range and nitpick comments (2)
packages/components/calendar/src/calendar-month.tsx (1)
Line range hint
52-52: Avoid using array indices as keys for React elements to prevent issues with rendering performance and component state during re-renders.Consider using a more stable identifier as a key, such as a unique property of the items being rendered.
Also applies to: 61-61, 86-86
packages/components/calendar/src/calendar-picker.tsx (1)
Line range hint
51-51: Avoid using array indices as keys for React elements to prevent issues with rendering performance and component state during re-renders.Consider using a more stable identifier as a key, such as a unique property of the items being rendered.
Also applies to: 55-55
Review Details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files selected for processing (3)
- .changeset/two-snakes-behave.md (1 hunks)
- packages/components/calendar/src/calendar-month.tsx (1 hunks)
- packages/components/calendar/src/calendar-picker.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- .changeset/two-snakes-behave.md
Additional Context Used
Biome (9)
packages/components/calendar/src/calendar-month.tsx (6)
1-1: Some named imports are only used as types.
1-2: All these imports are only used as types.
2-3: All these imports are only used as types.
52-52: Avoid using the index of an array as key property in an element.
61-61: Avoid using the index of an array as key property in an element.
86-86: Avoid using the index of an array as key property in an element.
packages/components/calendar/src/calendar-picker.tsx (3)
2-3: All these imports are only used as types.
51-51: Avoid using the index of an array as key property in an element.
55-55: Avoid using the index of an array as key property in an element.
| @@ -42,7 +42,7 @@ export function CalendarMonth(props: CalendarMonthProps) { | |||
| // makes the browser ignore the element and its children when tabbing | |||
| // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157) | |||
| // @ts-ignore | |||
| inert={isHeaderExpanded ? "" : undefined} | |||
| {...{inert: isHeaderExpanded ? "" : undefined}} | |||
There was a problem hiding this comment.
Consider using null instead of an empty string for the inert attribute to ensure compatibility across all browsers.
- {...{inert: isHeaderExpanded ? "" : undefined}}
+ {...{inert: isHeaderExpanded ? null : undefined}}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.
| {...{inert: isHeaderExpanded ? "" : undefined}} | |
| {...{inert: isHeaderExpanded ? null : undefined}} |
| @@ -68,7 +68,7 @@ export function CalendarPicker(props: CalendarPickerProps) { | |||
| // makes the browser ignore the element and its children when tabbing | |||
| // TODO: invert inert when switching to React 19 (ref: https://github.com/facebook/react/issues/17157) | |||
| // @ts-ignore | |||
| inert={isHeaderExpanded ? undefined : ""} | |||
| {...{inert: isHeaderExpanded ? "" : undefined}} | |||
There was a problem hiding this comment.
Consider using null instead of an empty string for the inert attribute to ensure compatibility across all browsers.
- {...{inert: isHeaderExpanded ? "" : undefined}}
+ {...{inert: isHeaderExpanded ? null : undefined}}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.
| {...{inert: isHeaderExpanded ? "" : undefined}} | |
| {...{inert: isHeaderExpanded ? null : undefined}} |
|
@KumJungMin can you double check if this issue is still reproducible in the current nextui documentation? I tired to use firebox to reproduce but i didn't see this error. Probably it could have been resolved in this PR. |
Oh! the issue was resolved :) thank you for check! |
📝 Description
error console
Summary by CodeRabbit
inertattribute in the calendar components for better code clarity and maintainability.