v2.4.8 #3765
v2.4.8 #3765
Conversation
* fix(range-calendar): hide only dates outside the month #2890 * fix(range-calendar): corrected spelling mistake in changeset description * fix(range-calendar): corrected capitalization in changeset description * chore(changeset): patch @nextui-org/theme --------- Co-authored-by: shrinidhi.upadhyaya <shrinidhi.upadhyaya@stud.uni-bamberg.de> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>
* fix: add missing TableRowProps export * feat(changeset): add changeset for PR2866 * chore(changeset): revise changeset message --------- Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>
* fix(input): correct label margin for RTL required inputs * fix(theme): add changeset fr theme
* refactor(core): cn utility adjusted and moved to the theme package * chore(root): changeset * fix(storybook): stories that used cn
* feat(switch): add @nextui-org/use-safe-layout-effect * chore(deps): add @nextui-org/use-safe-layout-effect * fix(switch): react-hook-form uncontrolled switch component * fix(switch): react-hook-form uncontrolled switch component * feat(switch): add rect-hook-form in dev dep * feat(switch): add WithReactHookFormTemplate
* feat(docs): add example how to set locale (#2867) * docs(guide): add an explanation for the installation guide (#2769) * docs(guide): add an explanation for the installation guide * docs(guide): add an explanation for the cli guide * docs(guide): add support for cli output * fix: change sort priority - cmdk (#2873) * docs: remove unsupported props in range calendar and date range picker (#2881) * chore(calendar): remove showMonthAndYearPickers from range calendar story * docs(date-range-picker): remove showMonthAndYearPickers info * docs(range-calendar): remove unsupported props * docs: refactor typing in form.ts (#2882) * chore(docs): supplement errorMessage behaviour in input (#2892) * refactor(docs): revise NextUI Provider structure * chore(docs): add updated tag --------- Co-authored-by: Nozomi-Hijikata <116155762+Nozomi-Hijikata@users.noreply.github.com> Co-authored-by: HaRuki <soccer_haruki15@me.com> Co-authored-by: Kaben <carnoxen@gmail.com>
…les (#2883) * chore(slider): include marks in hideThumb * fix(slider): revise slider styles * feat(changeset): add changeset * feat(slider): add tests with marks and hideThumb
* feat(input): add Input with React Hook Form tests * refactor(input): add missing types * feat(checkbox): add checkbox with React Hook Form tests * feat(select): add react-hook-form to dev dep * feat(select): add react hook form story * feat(select): react hook form tests * fix(select): incorrect button reference * feat(deps): add react-hook-form to dev dep in autocomplete * feat(autocomplete): react hook form story * feat(autocomplete): react hook form tests * fix(autocomplete): rollback wrapper type * feat(switch): add react hook form tests * refactor(stories): reorder stories items
* fix: update accordion item heading tag to be customizable * Update .changeset/heavy-hairs-join.md Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> * Update .changeset/heavy-hairs-join.md Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * chore(accordion): lint * chore(changeset): add issue number * feat(docs): add HeadingComponent prop --------- Co-authored-by: Shawn Dong <shawn.dong@flybuys.com.au> Co-authored-by: Junior Garcia <jrgarciadev@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: աɨռɢӄաօռɢ <wingkwong.code@gmail.com>
) * feat(tabs): add destroyInactiveTabPanel and set default to false * feat(tabs): integrate with destroyInactiveTabPanel * feat(theme): hidden inert tab panel * feat(changeset): add changeset * chore(changeset): add issue number * feat(docs): add `destroyInactiveTabPanel` prop to tabs page * chore(docs): set destroyInactiveTabPanel to true by default * chore(tabs): set destroyInactiveTabPanel to true by default * chore(tabs): revise destroyInactiveTabPanel logic * feat(tabs): add tests for destroyInactiveTabPanel * chore(tabs): change the default value of destroyInactiveTabPanel to true
* refactor: add support for disabling the animation globally * chore(docs): disableAnimation removed from global provider * feat(docs): nextui provider api updated, storybook preview adjusted * chore(theme): button is scalable when disabled, tooltip animation improved
* fix(theme): set overflow visible after skeleton loaded * feat(changeset): add changeset
* fix(select): missing onChange when there are more than 300 items * feat(select): add tests for onChange * chore(changeset): add changeset
* fix: use accessible text colors for flat variant * fix: use accessible text colors for flat variant * chore(changeset): update changeset --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com>
…uals "full" (#2684) * fix(modal): set the min-height of base height to 100dvh where size equals "full" * chore(changeset): add changeset --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com>
…3247) * fix: initialize throttleTimeout in cleanup function * chore(changeset): add changeset --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com>
* fix(theme): apply nested group for checkbox * fix(theme): apply nested group for autocomplete * fix(theme): apply nested group for select * fix(theme): apply nested group for toggle * fix(theme): apply nested group for radio * fix(theme): apply nested group for input * fix(theme): apply nested group for datepicker * fix(theme): apply nested group for dateinput * chore(changeset): add changeset * chore(changeset): add issue number * chore(theme): format code * feat(table): add TableWithSwitch
* fix(docs): incorrect image height * fix(docs): clipping of Floating components in Hero section * chore(docs): remove unnecessary space --------- Co-authored-by: WK Wong <wingkwong.code@gmail.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
* chore: rollback pr3307 * chore(changeset): fix typo
* chore: rollback pr3467
* feat(dropdown): add "should respect closeOnSelect setting of DropdownItem (dynamic)" * chore(changeset): add changeset * fix(dropdown): find is not function error when click dropdown item (#3763) * fix: find is not function error when click dropdown item * fix: find is not function error when click dropdown item * fix: type error * fix: optimization * refactor(dropdown): must have return value * chore(changeset): revise changeset --------- Co-authored-by: winches <329487092@qq.com>
Co-authored-by: Junior Garcia <jrgarciadev@gmail.com>
🦋 Changeset detectedLatest commit: 559436d The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 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 ↗︎
|
WalkthroughThis update introduces several enhancements across various components in the Changes
Possibly related PRs
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 using PR comments)
Other keywords and placeholders
Documentation and Community
|
![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 (3)
packages/utilities/aria-utils/src/overlays/ariaShouldCloseOnInteractOutside.ts (1)
1-45: LGTM! The function handles outside interactions effectively.The
ariaShouldCloseOnInteractOutsidefunction is well-structured and handles the outside interaction for popover-based components effectively. It checks if the clicked element is outside the trigger element and closes the popover if certain conditions are met.Some key points:
- The function enhances the user experience by managing the visibility of popovers based on outside interactions.
- It handles scenarios where multiple popovers are open and ensures that the correct one closes when another is interacted with.
- The code is well-documented with clear comments explaining the purpose and behavior of the function.
Consider the following suggestions for future improvements:
- Address the TODO comment on line 32 to handle more complex cases involving nested elements. This may require additional logic to determine when a popover should close based on the nesting hierarchy.
- Consider extracting the logic for finding focus scope elements into a separate utility function to improve code reusability and maintainability.
packages/hooks/use-aria-menu/src/use-menu.ts (1)
27-27: Approved with a suggestionThe change to the
onActionmethod signature, allowing it to accept an additionalitemparameter, aligns with the provided summary and enhances the flexibility of handling menu item actions by providing more context about the selected item.However, using the
anytype for theitemparameter is too broad and may lead to type-related issues. Consider defining a more specific type or interface for theitemparameter to improve type safety and provide better documentation for the expected data structure.packages/components/dropdown/src/use-dropdown.ts (1)
66-78: LGTM with a minor suggestion!The
getCloseOnSelectfunction correctly determines whether the dropdown should close upon selecting an item. It checks for thecloseOnSelectproperty on the menu item first, and falls back to thecloseOnSelectproperty on thepropsobject.As per the static analysis hint, consider using optional chaining to simplify the code and avoid the need for the
&&operator:-if (mergedItem && mergedItem.props && "closeOnSelect" in mergedItem.props) { +if ("closeOnSelect" in mergedItem?.props) {Tools
Biome
[error] 73-73: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
Files selected for processing (81)
- .changeset/witty-socks-bathe.md (1 hunks)
- apps/docs/app/examples/perf/page.tsx (1 hunks)
- apps/docs/components/marketing/hero/floating-components.tsx (0 hunks)
- apps/docs/components/theme-switch.tsx (1 hunks)
- apps/docs/content/components/input/custom-styles.ts (1 hunks)
- apps/docs/content/components/select/custom-styles.ts (1 hunks)
- apps/docs/content/components/switch/custom-styles.ts (1 hunks)
- apps/docs/content/customization/custom-variants/slots-component.ts (1 hunks)
- apps/docs/content/docs/customization/custom-variants.mdx (1 hunks)
- packages/components/accordion/CHANGELOG.md (1 hunks)
- packages/components/accordion/package.json (1 hunks)
- packages/components/autocomplete/CHANGELOG.md (1 hunks)
- packages/components/autocomplete/package.json (2 hunks)
- packages/components/autocomplete/src/use-autocomplete.ts (2 hunks)
- packages/components/date-picker/CHANGELOG.md (1 hunks)
- packages/components/date-picker/package.json (2 hunks)
- packages/components/date-picker/src/use-date-picker.ts (2 hunks)
- packages/components/date-picker/src/use-date-range-picker.ts (2 hunks)
- packages/components/dropdown/CHANGELOG.md (1 hunks)
- packages/components/dropdown/tests/dropdown.test.tsx (2 hunks)
- packages/components/dropdown/package.json (2 hunks)
- packages/components/dropdown/src/use-dropdown.ts (4 hunks)
- packages/components/listbox/CHANGELOG.md (1 hunks)
- packages/components/listbox/package.json (1 hunks)
- packages/components/menu/CHANGELOG.md (1 hunks)
- packages/components/menu/package.json (1 hunks)
- packages/components/modal/CHANGELOG.md (1 hunks)
- packages/components/modal/tests/modal.test.tsx (0 hunks)
- packages/components/modal/package.json (1 hunks)
- packages/components/modal/src/use-modal.ts (1 hunks)
- packages/components/popover/CHANGELOG.md (1 hunks)
- packages/components/popover/package.json (2 hunks)
- packages/components/popover/src/popover-content.tsx (3 hunks)
- packages/components/popover/src/use-aria-popover.ts (2 hunks)
- packages/components/popover/src/use-popover.ts (3 hunks)
- packages/components/select/CHANGELOG.md (1 hunks)
- packages/components/select/package.json (2 hunks)
- packages/components/select/src/use-select.ts (2 hunks)
- packages/components/select/stories/select.stories.tsx (1 hunks)
- packages/components/slider/CHANGELOG.md (1 hunks)
- packages/components/slider/package.json (1 hunks)
- packages/components/snippet/CHANGELOG.md (1 hunks)
- packages/components/snippet/package.json (1 hunks)
- packages/components/tabs/CHANGELOG.md (1 hunks)
- packages/components/tabs/package.json (1 hunks)
- packages/components/tooltip/CHANGELOG.md (1 hunks)
- packages/components/tooltip/package.json (1 hunks)
- packages/components/tooltip/src/use-tooltip.ts (1 hunks)
- packages/core/react/CHANGELOG.md (1 hunks)
- packages/core/react/package.json (1 hunks)
- packages/core/theme/CHANGELOG.md (1 hunks)
- packages/core/theme/package.json (1 hunks)
- packages/core/theme/src/components/autocomplete.ts (2 hunks)
- packages/core/theme/src/components/button.ts (1 hunks)
- packages/core/theme/src/components/checkbox.ts (4 hunks)
- packages/core/theme/src/components/date-input.ts (7 hunks)
- packages/core/theme/src/components/date-picker.ts (2 hunks)
- packages/core/theme/src/components/input.ts (32 hunks)
- packages/core/theme/src/components/radio.ts (6 hunks)
- packages/core/theme/src/components/select.ts (26 hunks)
- packages/core/theme/src/components/toggle.ts (7 hunks)
- packages/hooks/use-aria-menu/CHANGELOG.md (1 hunks)
- packages/hooks/use-aria-menu/package.json (1 hunks)
- packages/hooks/use-aria-menu/src/use-menu-item.ts (2 hunks)
- packages/hooks/use-aria-menu/src/use-menu.ts (1 hunks)
- packages/hooks/use-aria-modal-overlay/CHANGELOG.md (1 hunks)
- packages/hooks/use-aria-modal-overlay/package.json (1 hunks)
- packages/hooks/use-aria-modal-overlay/src/index.ts (2 hunks)
- packages/hooks/use-aria-multiselect/CHANGELOG.md (1 hunks)
- packages/hooks/use-aria-multiselect/package.json (1 hunks)
- packages/hooks/use-aria-multiselect/src/use-multiselect.ts (0 hunks)
- packages/hooks/use-aria-overlay/CHANGELOG.md (0 hunks)
- packages/hooks/use-aria-overlay/README.md (0 hunks)
- packages/hooks/use-aria-overlay/package.json (0 hunks)
- packages/hooks/use-aria-overlay/src/index.ts (0 hunks)
- packages/hooks/use-aria-overlay/tsconfig.json (0 hunks)
- packages/utilities/aria-utils/CHANGELOG.md (1 hunks)
- packages/utilities/aria-utils/package.json (1 hunks)
- packages/utilities/aria-utils/src/index.ts (1 hunks)
- packages/utilities/aria-utils/src/overlays/ariaShouldCloseOnInteractOutside.ts (1 hunks)
- packages/utilities/aria-utils/src/overlays/index.ts (1 hunks)
Files not reviewed due to no reviewable changes (8)
- apps/docs/components/marketing/hero/floating-components.tsx
- packages/components/modal/tests/modal.test.tsx
- packages/hooks/use-aria-multiselect/src/use-multiselect.ts
- packages/hooks/use-aria-overlay/CHANGELOG.md
- packages/hooks/use-aria-overlay/README.md
- packages/hooks/use-aria-overlay/package.json
- packages/hooks/use-aria-overlay/src/index.ts
- packages/hooks/use-aria-overlay/tsconfig.json
Files skipped from review due to trivial changes (35)
- apps/docs/components/theme-switch.tsx
- apps/docs/content/components/input/custom-styles.ts
- apps/docs/content/docs/customization/custom-variants.mdx
- packages/components/accordion/CHANGELOG.md
- packages/components/accordion/package.json
- packages/components/autocomplete/CHANGELOG.md
- packages/components/listbox/CHANGELOG.md
- packages/components/listbox/package.json
- packages/components/menu/CHANGELOG.md
- packages/components/menu/package.json
- packages/components/modal/CHANGELOG.md
- packages/components/modal/package.json
- packages/components/select/CHANGELOG.md
- packages/components/slider/CHANGELOG.md
- packages/components/slider/package.json
- packages/components/snippet/CHANGELOG.md
- packages/components/snippet/package.json
- packages/components/tabs/CHANGELOG.md
- packages/components/tabs/package.json
- packages/components/tooltip/CHANGELOG.md
- packages/components/tooltip/package.json
- packages/core/react/CHANGELOG.md
- packages/core/react/package.json
- packages/core/theme/CHANGELOG.md
- packages/core/theme/package.json
- packages/core/theme/src/components/checkbox.ts
- packages/core/theme/src/components/date-input.ts
- packages/core/theme/src/components/date-picker.ts
- packages/core/theme/src/components/toggle.ts
- packages/hooks/use-aria-menu/package.json
- packages/hooks/use-aria-modal-overlay/CHANGELOG.md
- packages/hooks/use-aria-multiselect/CHANGELOG.md
- packages/hooks/use-aria-multiselect/package.json
- packages/utilities/aria-utils/CHANGELOG.md
- packages/utilities/aria-utils/package.json
Additional context used
Biome
packages/components/dropdown/src/use-dropdown.ts
[error] 52-52: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 73-73: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Additional comments not posted (86)
.changeset/witty-socks-bathe.md (1)
1-5: LGTM!The changeset is well-structured and the description clearly explains the purpose and impact of the change. The patch version bump for the
@nextui-org/themepackage is appropriate for this fix.packages/utilities/aria-utils/src/overlays/index.ts (1)
12-12: LGTM!The new export statement for the
ariaShouldCloseOnInteractOutsidefunction is a useful addition to the module. It enhances the functionality by providing a utility to determine whether an overlay should close when interaction occurs outside of it. This can improve the handling of ARIA attributes and user experience in overlay contexts.The change is straightforward and unlikely to introduce any issues.
packages/utilities/aria-utils/src/index.ts (1)
10-10: LGTM!The addition of the
ariaShouldCloseOnInteractOutsideexport follows the existing pattern in the file and is likely to be a useful utility function for managing component behavior in accessible web applications. The change is straightforward and does not introduce any apparent issues.apps/docs/content/components/switch/custom-styles.ts (3)
14-14: LGTM!The conditional class is correctly applied to the thumb element when the hover state is true. This is a valid use case for applying conditional classes based on the component state.
16-16: LGTM!The conditional class is correctly applied to the thumb element when the selected state is true. This is a valid use case for applying conditional classes based on the component state.
18-19: LGTM!The conditional classes are correctly applied to the thumb element based on the pressed and selected states. This is a valid use case for applying conditional classes based on multiple component states.
packages/hooks/use-aria-modal-overlay/src/index.ts (1)
5-5: LGTM! Verify the import statements in other files.The change to use
useOverlayfrom@react-aria/overlaysinstead ofuseAriaOverlayfrom@nextui-org/use-aria-overlaylooks good. It should improve compatibility with the React Aria library without affecting the behavior of the function.Please ensure that the import statements in other files that use this function are updated accordingly.
Run the following script to verify the import statements:
Also applies to: 24-24
Verification successful
Verification successful: Import statements updated correctly
The verification process has confirmed that the changes to the import statements have been implemented correctly and consistently across the codebase. Specifically:
- The old import statement
from "@nextui-org/use-aria-overlay"has been successfully removed from all TypeScript files.- The new import statement
from "@react-aria/overlays"is present in the file under review (packages/hooks/use-aria-modal-overlay/src/index.ts) and in other relevant files throughout the project.These findings indicate that the transition to using
useOverlayfrom@react-aria/overlayshas been carried out thoroughly, maintaining consistency across the codebase.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the import statements for `useAriaModalOverlay` are updated. # Test: Search for the old import statement. Expect: No occurrences. rg --type typescript $'from "@nextui-org/use-aria-overlay"' # Test: Search for the new import statement. Expect: Occurrences in relevant files. rg --type typescript $'from "@react-aria/overlays"'Length of output: 183
Script:
#!/bin/bash # Description: Verify the import statements for `useAriaModalOverlay` are updated. # Test: Search for the old import statement. Expect: No occurrences. fd -e ts -e tsx | xargs rg 'from "@nextui-org/use-aria-overlay"' # Test: Search for the new import statement. Expect: Occurrences in relevant files. fd -e ts -e tsx | xargs rg 'from "@react-aria/overlays"'Length of output: 1526
packages/hooks/use-aria-modal-overlay/package.json (1)
3-3: Verify the impact of the dependency removal on the modal overlay functionality.The version bump to
2.0.13and the removal of the@nextui-org/use-aria-overlaydependency are approved. However, please ensure that the removal of the overlay dependency does not break any existing functionality or usage of the modal overlay.Run the following script to verify the impact:
Verification successful
Dependency removal verified: No negative impact on useAriaModalOverlay functionality
The removal of the
@nextui-org/use-aria-overlaydependency has been verified, and it does not negatively impact the functionality ofuseAriaModalOverlay. The implementation has been refactored to use standard React Aria utilities from packages like@react-aria/overlays, maintaining the same props and return type.Key findings:
- The removed package is only mentioned in CHANGELOG.md files, not in the actual code.
- The
useAriaModalOverlayfunction is still present and exported frompackages/hooks/use-aria-modal-overlay/src/index.ts.- The implementation now uses
@react-aria/overlaysand other React Aria packages instead of the removed dependency.This change appears to be a positive refactoring that aligns the implementation with more standard React Aria utilities while preserving the existing functionality.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the impact of the dependency removal on the modal overlay functionality. # Test 1: Search for any imports or usage of the removed overlay package. # Expect: No occurrences of the removed package. rg --type typescript -i $'@nextui-org/use-aria-overlay' # Test 2: Search for any breaking changes in the modal overlay usage. # Expect: No breaking changes in the usage of the modal overlay. fd --extension tsx --exec rg -A 10 $'useAriaModalOverlay'Length of output: 146
Script:
#!/bin/bash # Description: Verify the impact of the dependency removal on the modal overlay functionality. # Test 1: Search for any imports or usage of the removed overlay package in all files. echo "Searching for @nextui-org/use-aria-overlay:" rg -i "@nextui-org/use-aria-overlay" # Test 2: Search for any usage of useAriaModalOverlay in .ts and .tsx files. echo "Searching for useAriaModalOverlay usage:" rg -t ts -t tsx "useAriaModalOverlay" # Test 3: Check if there are any .ts or .tsx files in the packages/hooks/use-aria-modal-overlay directory. echo "Checking for .ts and .tsx files in use-aria-modal-overlay:" fd -e ts -e tsx . packages/hooks/use-aria-modal-overlay # Test 4: Display the content of the main TypeScript file in the use-aria-modal-overlay package. echo "Content of the main TypeScript file in use-aria-modal-overlay:" cat packages/hooks/use-aria-modal-overlay/src/index.tsLength of output: 2077
packages/core/theme/src/components/autocomplete.ts (4)
7-7: Simplification of thebaseslot's class name.The removal of the
/autocompletesegment from thebaseslot's class name simplifies the class structure. This change may affect how styles are applied or inherited for thebaseslot if there were styles specifically targeting thegroup/autocompleteclass. However, if no styles rely on the/autocompletesegment, this change should not have any significant impact.
19-19: Improved consistency in class name syntax for the invalid state.The transition from using a slash (
/) to a colon (:) in the class name for the invalid state aligns the syntax with a more standard approach to conditional styling in CSS frameworks. This change enhances the clarity and consistency of the class definition without impacting the functionality of the styling for the component in the invalid state.
25-25: Simplification of the hover state's class name.The removal of the
/autocompletesegment from the hover state's class name simplifies the class structure. This change may affect how styles are applied or inherited for the hover state if there were styles specifically targeting thesm:group-data-[hover=true]/autocompleteclass. However, if no styles rely on the/autocompletesegment, this change should not have any significant impact.
26-26: Simplification of the hover state's pointer events class name.The removal of the
/autocompletesegment from the hover state's pointer events class name simplifies the class structure. This change may affect how pointer events are handled for the hover state if there were styles specifically targeting thesm:group-data-[hover=true]/autocompleteclass. However, if no styles rely on the/autocompletesegment, this change should not have any significant impact.packages/components/dropdown/package.json (1)
3-3: LGTM! The changes enhance the accessibility of the dropdown component.The version bump to
2.1.31indicates a new release of the@nextui-org/dropdownpackage. The addition of the@nextui-org/aria-utilsdependency, sourced from the workspace, suggests an integration of accessibility utilities within the dropdown component. This is a positive enhancement that can improve the usability and compliance of the dropdown with accessibility standards.The changes are unlikely to introduce any breaking changes as the core functionality of the dropdown component appears to be preserved.
Also applies to: 44-44
packages/components/popover/package.json (3)
3-3: LGTM!The version update from
2.1.28to2.1.29is a minor version bump, indicating non-breaking changes.
59-59: Verify the behavior ofreact-remove-scrolldependency.The addition of
react-remove-scrolldependency with version^2.5.6indicates that the package now uses this module to manage scroll behavior when the popover is active. Please ensure that this change aligns with the desired user experience and doesn't introduce any unexpected behavior.Run the following script to verify the usage of
react-remove-scrollin the codebase:Verification successful
Verified:
react-remove-scrollis correctly implemented and aligns with expected behavior.The
react-remove-scrolldependency is properly imported and utilized in both the popover and navbar components. Its usage is consistent and appears to effectively manage scroll behavior when these components are active. The implementation allows for conditional enabling based on component state and maintains the scrollbar visibility, which should provide a smooth user experience.Key observations:
- Used in
packages/components/popover/src/popover-content.tsx- Used in
packages/components/navbar/src/navbar-menu.tsx- Consistently implemented with conditional enabling and visible scrollbars
This implementation aligns with the desired user experience of managing scroll behavior for overlay components without introducing unexpected behavior.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `react-remove-scroll` in the codebase. # Test: Search for the import of `react-remove-scroll`. Expect: Occurrences in relevant files. rg --type typescript $'react-remove-scroll'Length of output: 77
Script:
#!/bin/bash # Description: Verify the usage of `react-remove-scroll` in the codebase. # Search for import statements of react-remove-scroll echo "Searching for import statements of react-remove-scroll:" rg "from ['\"]react-remove-scroll['\"]" --type-add 'web:*.{ts,tsx,js,jsx}' -t web # Search for usage of react-remove-scroll components or functions echo "Searching for usage of react-remove-scroll components or functions:" rg "RemoveScroll|useRemoveScroll" --type-add 'web:*.{ts,tsx,js,jsx}' -t web # Search for any mention of react-remove-scroll in comments or strings echo "Searching for any mention of react-remove-scroll:" rg "react-remove-scroll" --type-add 'web:*.{ts,tsx,js,jsx}' -t webLength of output: 1608
58-58: Verify the impact of removing@nextui-org/use-aria-overlaydependency.The removal of
@nextui-org/use-aria-overlaydependency suggests that the package no longer relies on this module for managing overlays. Please ensure that this removal is intentional and that the code has been updated accordingly to handle overlays without this dependency.Run the following script to verify the usage of
@nextui-org/use-aria-overlayin the codebase:Verification successful
Dependency '@nextui-org/use-aria-overlay' has been successfully removed
The removal of the '@nextui-org/use-aria-overlay' dependency has been verified. No active usage of this dependency was found in the codebase. The only mentions are in CHANGELOG.md files, which likely document historical changes. The package.json files no longer list this dependency.
This confirms that the removal was intentional and has been properly implemented across the codebase. No further action is required regarding this dependency removal.
Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `@nextui-org/use-aria-overlay` in the codebase. # Test: Search for the import of `@nextui-org/use-aria-overlay`. Expect: No occurrences. rg --type typescript $'@nextui-org/use-aria-overlay'Length of output: 86
Script:
#!/bin/bash # Description: Verify the usage of `@nextui-org/use-aria-overlay` in the codebase. # Search for any occurrence of '@nextui-org/use-aria-overlay' echo "Searching for '@nextui-org/use-aria-overlay':" rg '@nextui-org/use-aria-overlay' # Search for import statements using the dependency echo "Searching for import statements:" rg "import .* from ['\"]@nextui-org/use-aria-overlay['\"]" # Search for require statements using the dependency echo "Searching for require statements:" rg "require\\(['\"]@nextui-org/use-aria-overlay['\"]\\)"Length of output: 588
Script:
#!/bin/bash # Description: Further verify the removal of '@nextui-org/use-aria-overlay' dependency # Check the content of CHANGELOG.md files echo "Content of packages/components/popover/CHANGELOG.md:" sed -n '/use-aria-overlay/,/^$/p' packages/components/popover/CHANGELOG.md echo "Content of packages/hooks/use-aria-modal-overlay/CHANGELOG.md:" sed -n '/use-aria-overlay/,/^$/p' packages/hooks/use-aria-modal-overlay/CHANGELOG.md # Perform a more comprehensive search for any potential usage echo "Searching for any partial matches of 'use-aria-overlay':" rg -i 'use.?aria.?overlay' # Check if the dependency is still listed in any package.json files echo "Checking package.json files for the dependency:" rg '"@nextui-org/use-aria-overlay"' $(fd -e json)Length of output: 8128
packages/components/date-picker/package.json (2)
3-3: Version bump looks good.Incrementing the minor version number from
2.1.7to2.1.8is appropriate for a release that likely includes bug fixes or minor enhancements.
44-44: New accessibility utility dependency is a welcome addition.The introduction of the
@nextui-org/aria-utilsdependency, sourced from the workspace, indicates an effort to improve the accessibility of the date picker component. This is a positive change that will enhance the user experience for those relying on assistive technologies.Sourcing the dependency from the workspace also ensures it stays in sync with the rest of the NextUI packages, promoting consistency across the library.
packages/components/select/package.json (2)
3-3: LGTM!The minor version bump is appropriate for the changes made in this PR.
44-44: LGTM!Adding the
@nextui-org/aria-utilsdependency from the workspace is a good choice to enhance accessibility features while maintaining consistency across NextUI packages.packages/components/autocomplete/package.json (2)
3-3: Version update looks good!The version has been incremented from
2.1.6to2.1.7, indicating a minor release. This follows semantic versioning conventions and suggests the inclusion of bug fixes or small improvements without introducing breaking changes.
44-44: New dependency addition is a positive enhancement.The inclusion of the
@nextui-org/aria-utilsdependency is a welcome addition. It suggests an enhancement in accessibility features or utilities related to ARIA (Accessible Rich Internet Applications).This improvement can potentially provide additional capabilities or optimizations for accessibility, making the autocomplete component more usable for users relying on assistive technologies.
apps/docs/content/customization/custom-variants/slots-component.ts (1)
50-50: LGTM!The change in the CSS class name is a valid refinement to the styling logic. Removing the
/inputsegment improves the specificity and clarity of the focus state styling for the component without altering its functionality.packages/hooks/use-aria-menu/CHANGELOG.md (1)
3-7: LGTM!The changelog entry accurately describes the bug fix for the
_a2.findruntime error, as reported in issue #3761. The patch release improves the reliability of the@nextui-org/use-aria-menupackage by resolving this critical issue.packages/components/popover/src/use-aria-popover.ts (3)
3-3: LGTM!The
useOverlayhook from@react-aria/overlaysis a suitable replacement for the previously useduseAriaOverlayhook.
9-14: LGTM!The new imports from
@nextui-org/aria-utilsare necessary to support the updated overlay functionality and the refined closing behavior of the popover.
74-83: Improved flexibility in the popover's closing behavior.The change from
useAriaOverlaytouseOverlayand the refined handling of theshouldCloseOnInteractOutsideprop allows for a more nuanced interaction model for the popover's closing behavior.By utilizing the
ariaShouldCloseOnInteractOutsideutility function whenshouldCloseOnInteractOutsideis not provided, the popover can now leverage the trigger reference and its own state to determine if it should close when interacting outside of it.This enhances the flexibility of the popover and enables a more tailored user experience.
packages/components/popover/src/popover-content.tsx (3)
6-6: LGTM!The
RemoveScrollcomponent from thereact-remove-scrolllibrary is a good choice for managing scroll behavior when the popover is open. It will help improve the user experience by preventing scrolling of the underlying content while the popover is active.
27-27: LGTM!The addition of the
isOpenandshouldBlockScrollprops to thePopoverContentPropsinterface is a good way to control the visibility and scroll behavior of the popover. These props will be used in conjunction with theRemoveScrollcomponent to provide a better user experience when the popover is open.Also applies to: 32-32
85-105: LGTM!The changes to the rendering logic of the popover content are well-structured and provide flexibility in terms of animation and scroll behavior. The use of the
RemoveScrollcomponent in conjunction with theshouldBlockScrollandisOpenprops ensures that scrolling is blocked when the popover is open, improving the user experience. The conditional rendering based on thedisableAnimationprop allows the popover to be rendered with or without animations, providing flexibility for different use cases. The use of thegetTransformOriginsfunction to set thetransformOriginstyle property based on theplacementprop ensures that the popover animates from the correct position, enhancing the visual appeal of the component.packages/core/theme/src/components/radio.ts (6)
30-30: LGTM!The changes to the
baseslot class names are concise and maintain the intended styling behavior.
43-43: LGTM!The changes to the
wrapperslot class name for the hover state of unselected radios are consistent with the updated syntax and maintain the intended styling behavior.
56-57: LGTM!The changes to the
controlslot class names for the selected state are consistent with the updated syntax and maintain the intended styling behavior.
66-66: LGTM!The changes to the
wrapperslot class names within thecolorvariants ensure that the border color of the selected radio wrapper matches the corresponding color variant. The updated syntax is consistent and maintains the intended styling behavior.Also applies to: 70-70, 74-74, 78-78, 82-82, 86-86
120-120: LGTM!The changes to the
wrapperslot class name within theisInvalidvariant ensure that the border color of the invalid radio wrapper remains consistent regardless of the selected state. The updated syntax is consistent and maintains the intended styling behavior.
129-129: LGTM!The changes to the
wrapperslot class name within thedisableAnimationvariant ensure that the radio wrapper scales down when pressed, providing visual feedback. The updated syntax is consistent and maintains the intended styling behavior.packages/components/dropdown/src/use-dropdown.ts (3)
46-64: LGTM!The
getMenuItemfunction correctly retrieves a menu item based on its key. It handles cases wherepropsormergedChildrenare undefined, and the use ofArray.isArrayand spread operator to mergeprops.childrenandprops.itemsis a good approach.Tools
Biome
[error] 52-52: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
190-193: LGTM!The use of
getCloseOnSelectfunction in theonActionhandler improves the clarity and maintainability of the code by removing the previous inline logic for determining thecloseOnSelectbehavior.
161-163: LGTM!The addition of
shouldCloseOnInteractOutsideproperty allows for more flexible interaction handling by leveraging theariaShouldCloseOnInteractOutsideutility.packages/components/modal/src/use-modal.ts (1)
172-172: LGTM!The addition of the
onClickhandler to close the modal when the backdrop is clicked is a great enhancement to the user experience. It aligns with the common expectation of being able to dismiss a modal by clicking outside of it.apps/docs/content/components/select/custom-styles.ts (1)
215-215: LGTM! The change simplifies the styling rule.The removal of the
select:prefix from thelabelclass name simplifies the styling rule by directly applying the transformation based on thefilledstate without theselectcontext. This change may affect how the label behaves visually in relation to the filled state of the select component, potentially altering the user interface's responsiveness to state changes.It's important to ensure that the desired visual behavior is still achieved with this change. Consider testing the component with various states to confirm that the label transitions as expected when the select is filled or unfilled.
packages/components/date-picker/src/use-date-picker.ts (2)
18-18: LGTM!The import statement is correctly added and the imported utility function is used appropriately later in the code.
196-198: Excellent enhancement to the popover configuration!The code segment correctly handles the
shouldCloseOnInteractOutsideproperty, providing flexibility to the user to override the default behavior. When not provided, it falls back to theariaShouldCloseOnInteractOutsideutility, which takes into account the current element, popover trigger reference, and date picker state to determine the appropriate behavior.This change improves the configurability of the date picker component's interaction with external elements.
packages/components/tooltip/src/use-tooltip.ts (1)
11-11: LGTM! The removal of the scroll-blocking feature simplifies the tooltip functionality.The changes involve:
- Removing the
shouldBlockScrollproperty from thePropsinterface.- Removing the associated logic that depended on
shouldBlockScrollin theuseTooltipfunction implementation.- Removing the
usePreventScrollhook call that relied on theshouldBlockScrollproperty.These changes simplify the tooltip's functionality by eliminating the scroll-blocking feature. This potentially allows for a more fluid user experience without the constraints of scroll prevention when the tooltip is open.
The overall structure of the tooltip functionality remains intact, and the removal of this feature does not appear to introduce any issues.
packages/hooks/use-aria-menu/src/use-menu-item.ts (2)
97-97: Approve the updatedonActionprop signature.The change to the
onActionprop signature in theAriaMenuItemPropsinterface, allowing it to accept an additionalitemparameter, enhances the functionality and flexibility of the handler. This enables the handler to access additional context about the activated menu item, facilitating more advanced handling scenarios.
170-174: Approve the updatedonActioncalls.The updates to the
onActioncalls within theuseMenuItemfunction, passing both thekeyanditemparameters, ensure that the new signature is properly utilized. This allows consumers of theonActionprop to leverage the additionalitemcontext if needed.packages/components/popover/src/use-popover.ts (2)
5-9: LGTM!The additional imports are necessary for implementing the desired behavior and improving accessibility. The changes do not introduce any breaking changes or compatibility issues.
301-305: Accessibility and usability enhancements!The introduction of the
useEffecthook and the usage of theariaHideOutsidefunction enhance the accessibility and usability of the popover component. The changes ensure that the popover is properly hidden from assistive technologies when it is not in focus, improving the overall user experience.Additionally, the inclusion of the
shouldBlockScrollproperty in the return object of theusePopoverfunction provides more flexibility in controlling the scroll behavior when the popover is active. This can be beneficial for customizing the user experience based on specific requirements.Great work on improving the accessibility and usability of the popover component!
Also applies to: 321-321
packages/core/theme/src/components/button.ts (1)
328-331: Improved hover state styling for the ghost button variant.The addition of the
data-[hover=true]:!text-danger-foregroundclass ensures that the text color is appropriately styled when the button is hovered over. This change enhances the visual feedback and provides a consistent user experience.packages/components/date-picker/src/use-date-range-picker.ts (1)
218-221: Improved popover closing behavior.The change enhances the user experience by conditionally setting the
shouldCloseOnInteractOutsideproperty of the popover based on the presence of a corresponding prop. If the prop is not provided, it defaults to using theariaShouldCloseOnInteractOutsideutility function to manage the closing behavior based on interactions with the specified element and the popover trigger reference.This ensures that the popover behaves correctly in response to user interactions outside of its bounds, while still allowing the behavior to be overridden if needed.
packages/components/date-picker/CHANGELOG.md (1)
1-15: Changelog looks good!The changelog follows the correct format, with a clear categorization of changes into different types (Patch Changes) and versions. The entries provide links to relevant pull requests and commits, making it easy to track the changes.
No changes needed.
packages/components/autocomplete/src/use-autocomplete.ts (2)
21-21: LGTM!The import statement for
ariaShouldCloseOnInteractOutsidefrom@nextui-org/aria-utilsis syntactically correct and the function is likely used to determine if the popover should close when interacting outside of it.
447-449: LGTM!The addition of the
shouldCloseOnInteractOutsideproperty ingetPopoverPropsenhances the control over the popover's behavior in response to user interactions. It allows customizing the behavior throughpopoverProps.shouldCloseOnInteractOutsideor falling back to the default behavior usingariaShouldCloseOnInteractOutside.The default behavior passes the relevant parameters to
ariaShouldCloseOnInteractOutsideto determine if the popover should close when interacting outside of it. This change potentially improves the user experience by allowing for more nuanced handling of focus and interaction states.apps/docs/app/examples/perf/page.tsx (1)
109-109: Simplification of CSS selectorThe change simplifies the CSS selector by removing the
/inputpart, which means theborder-zinc-600style will now be applied directly to the parent element withdata-[focus=true]attribute, rather than theinputelement. This improves the readability and specificity of the styles without introducing any functional issues, as long as the style is intended for the parent element.packages/core/theme/src/components/select.ts (5)
8-8: LGTM!Adding the
groupclass to the base slot is a good change. It enables the use ofgroup-*modifiers for styling child elements based on the state of the select component, which is consistent with the other changes in this file.
41-41: LGTM!Replacing
group-data-[state]/select:withgroup-data-[focus=true]:simplifies the class name and is consistent with the other changes in this file. It correctly applies thebg-default-100class when the select component is focused.
52-52: LGTM!Replacing
group-data-[state]/select:withgroup-data-[has-value=true]:simplifies the class name and is consistent with the other changes in this file. It correctly applies thetext-default-foregroundclass when the select component has a value.
89-89: LGTM!Replacing
group-data-[state]/select:withgroup-data-[has-value=true]:simplifies the class name and is consistent with the other changes in this file. It correctly applies thetext-default-foregroundclass when the select component has a value.
221-221: LGTM!Replacing
group-data-[state]/select:withgroup-data-[state]:orgroup-data-[state=true]:simplifies the class names and is consistent throughout the file. These changes correctly apply classes based on the state of the select component.Also applies to: 233-233, 247-247, 262-262, 277-277, 292-292, 345-345, 434-434, 442-442, 500-500, 508-508, 546-546, 553-553, 569-570, 579-581, 591-593, 604-604, 615-615, 627-627, 638-638, 648-648, 660-660, 673-673, 686-686, 699-699
packages/components/select/src/use-select.ts (1)
31-31: Enhance popover behavior withariaShouldCloseOnInteractOutside.The integration of the
ariaShouldCloseOnInteractOutsidefunction into thepopoverPropsconfiguration provides more flexible control over the popover's behavior in response to user interactions outside the select component.If a custom
shouldCloseOnInteractOutsideprop is provided, it will be used directly. Otherwise, theariaShouldCloseOnInteractOutsidefunction will determine if the popover should close based on interactions outside of it, using theelement,domRef, andstateparameters.This change potentially improves the user experience by ensuring that the popover closes appropriately when interacting with other parts of the application.
Also applies to: 533-535
packages/core/theme/src/components/input.ts (14)
78-78: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
88-88: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
95-95: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
119-119: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
122-122: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
181-181: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
218-218: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
256-256: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
267-267: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
282-282: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
300-300: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
317-317: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
334-334: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.
386-386: Looks good!The change improves the specificity of the class selector by replacing
/input:with=true]:. This ensures that the styles are applied directly to the group element rather than the input element, improving the styling logic.packages/components/popover/CHANGELOG.md (4)
3-4: LGTM!The changelog entry for version 2.1.29 looks good. It follows the expected format for a patch release.
5-9: Changes look good!The rollback of PR #3307 and PR #3467, and their rescheduling for version 2.5.0, is well-documented in the changelog. This is a valid reason for a patch release and demonstrates good release planning practices.
11-13: Dependency updates look good!Updating the versions of
@nextui-org/aria-utilsand@nextui-org/buttonin a patch release is a good practice to ensure compatibility and bug fixes. The updated versions follow the semantic versioning convention.
1-13: Changelog entry for version 2.1.29 looks great!The changelog entry provides a clear and concise summary of the changes and updated dependencies included in this patch release. It follows a consistent format and structure, making it easy to understand the scope of the release.
Great job documenting the changes!
packages/components/dropdown/CHANGELOG.md (5)
3-14: LGTM!The changes in version 2.1.31 look good. The key updates are:
- Fixed a critical bug where
_a2.findwas not functioning correctly. Great job tracking this down and linking it to the relevant issue and PR.- Rolled back a previous change (pr3467) and rescheduled it for a future release (v2.5.0). This shows good judgment in managing the release process.
The dependency updates are also appreciated to keep everything in sync.
Line range hint
16-27: Nice work on the overlay refactor and bug fix!The changes in version 2.1.30 are solid. Highlights include:
- Refactored overlays to reduce complexity and improve stability. This is a great proactive step to keep the codebase maintainable and robust. Nice architectural improvement!
- Fixed a bug where the
closeOnSelectprop onDropdownItemwas not being respected. This is an important fix for consistency and meeting user expectations. Good catch and resolution.As always, thanks for keeping the dependencies updated as well.
Line range hint
29-36: Conflicting versions fixed!The changes in version 2.1.29 are approved. The key update is:
- Fixed a conflicting versions issue in npm. This is crucial for a smooth user experience when installing the package. Thanks for taking care of this promptly.
Routine but appreciated dependency updates are also included.
Line range hint
38-41: Routine dependency updates!Version 2.1.28 includes only routine dependency updates. While there are no functional changes, keeping the dependencies up to date is important for compatibility and leveraging upstream improvements.
Looks good to me!
Line range hint
43-50: Important type definition fix!The changes in version 2.1.27 look great. The highlight is:
- Fixed an incorrect type definition for
onSelectionChangeto prevent primitive values as items. This is crucial for type safety and preventing unexpected behavior. Great catch and fix!The routine dependency updates are also appreciated for keeping everything in sync and up to date.
Approved!
packages/components/select/stories/select.stories.tsx (1)
508-508: Refactoring of label class name looks good, but verify label behavior.The simplification of the label class name by removing the
group-data-[filled=true]/select:prefix seems to be a reasonable refactoring to improve the clarity and maintainability of the styling logic.However, please ensure that this change does not unintentionally affect the appearance or behavior of the label in any state of the select component, especially when it is "filled". Verify that the label still functions as expected.
packages/components/dropdown/__tests__/dropdown.test.tsx (2)
Line range hint
799-834: LGTM!This test correctly verifies the behavior of the
closeOnSelectprop ofDropdownItemin a static scenario. It checks that the dropdown stays open when an item withcloseOnSelect={false}is clicked, and closes when an item without this prop is clicked.
835-880: LGTM!This test correctly verifies the behavior of the
closeOnSelectprop ofDropdownItemin a dynamic scenario, where the items are provided via theitemsprop ofDropdownMenu. It checks that the dropdown stays open when an item withcloseOnSelect={false}is clicked, and closes when an item without this prop is clicked. ThecloseOnSelectprop of eachDropdownItemis determined dynamically based on the item's key.
Closes #
📝 Description
⛳️ Current behavior (updates)
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
New Features
Bug Fixes
Dependency Updates
Documentation