refactor(overlays): improve stability, and complexity #3467
Conversation
🦋 Changeset detectedLatest commit: 0f4aca0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 18 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 ↗︎
|
|
@chirokas is attempting to deploy a commit to the NextUI Inc Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update refines ARIA overlay management and dependencies across multiple components. It reorganizes peer and dev dependencies, adding packages like Changes
Assessment against linked issues
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, codebase verification and nitpick comments (2)
packages/hooks/use-aria-overlay/README.md (2)
3-3: Consider using "brief" instead of "quick".To strengthen the wording, use "brief" instead of "quick".
- A Quick description of the component + A brief description of the componentTools
LanguageTool
[style] ~3-~3: Consider using the synonym “brief” (= concise, using a few words, not lasting long) to strengthen your wording.
Context: # @nextui-org/use-aria-overlay A Quick description of the component > This is...(QUICK_BRIEF)
17-17: Add a comma before "please".Usually, a comma is necessary before "please" at the end of a sentence.
- Yes please! See the + Yes, please! See theTools
LanguageTool
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...e-aria-overlay ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
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 (25)
- .changeset/new-peaches-whisper.md (1 hunks)
- packages/components/autocomplete/tests/autocomplete.test.tsx (1 hunks)
- packages/components/autocomplete/package.json (2 hunks)
- packages/components/autocomplete/src/use-autocomplete.ts (2 hunks)
- packages/components/date-picker/package.json (1 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/package.json (1 hunks)
- packages/components/dropdown/src/use-dropdown.ts (2 hunks)
- packages/components/modal/tests/modal.test.tsx (2 hunks)
- packages/components/modal/src/use-modal.ts (1 hunks)
- packages/components/popover/package.json (2 hunks)
- packages/components/popover/src/use-aria-popover.ts (2 hunks)
- packages/components/popover/src/use-popover.ts (3 hunks)
- packages/components/select/package.json (2 hunks)
- packages/components/select/src/use-select.ts (2 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-overlay/README.md (1 hunks)
- packages/hooks/use-aria-overlay/tests/use-aria-overlay.test.tsx (1 hunks)
- packages/hooks/use-aria-overlay/package.json (1 hunks)
- packages/hooks/use-aria-overlay/src/index.ts (1 hunks)
- packages/hooks/use-aria-overlay/tsconfig.json (1 hunks)
- packages/utilities/aria-utils/src/index.ts (1 hunks)
- packages/utilities/aria-utils/src/overlays/index.ts (1 hunks)
Files skipped from review due to trivial changes (6)
- .changeset/new-peaches-whisper.md
- packages/components/autocomplete/src/use-autocomplete.ts
- packages/components/modal/src/use-modal.ts
- packages/components/popover/src/use-popover.ts
- packages/hooks/use-aria-overlay/tsconfig.json
- packages/utilities/aria-utils/src/index.ts
Additional context used
LanguageTool
packages/hooks/use-aria-overlay/README.md
[style] ~3-~3: Consider using the synonym “brief” (= concise, using a few words, not lasting long) to strengthen your wording.
Context: # @nextui-org/use-aria-overlay A Quick description of the component > This is...(QUICK_BRIEF)
[typographical] ~17-~17: Usually, a comma is necessary before ‘Yes’ at the end of a sentence. Did you mean “, please”?
Context: ...e-aria-overlay ``` ## Contribution Yes please! See the [contributing guidelines](http...(COMMA_BEFORE_PLEASE)
Additional comments not posted (93)
packages/utilities/aria-utils/src/overlays/index.ts (1)
Line range hint
1-8:
LGTM! The removal aligns with PR objectives.The export of
ariaShouldCloseOnInteractOutsidehas been removed as intended.packages/hooks/use-aria-modal-overlay/src/index.ts (1)
Line range hint
1-24:
LGTM! The changes align with PR objectives.The import and usage of
useAriaOverlayare correct and align with the PR objectives.packages/hooks/use-aria-overlay/__tests__/use-aria-overlay.test.tsx (1)
1-43: LGTM! The tests are comprehensive and correctly implemented.The tests ensure correct behavior for
useAriaOverlayon mouse and touch events.packages/hooks/use-aria-modal-overlay/package.json (1)
37-37: Dependency Addition: Ensure CompatibilityThe addition of
@nextui-org/use-aria-overlayas a dependency is noted. Ensure that this new dependency is compatible with the existing codebase and does not introduce any conflicts.packages/hooks/use-aria-overlay/package.json (1)
1-60: New Package Setup: Verify CompletenessThe setup for the new
@nextui-org/use-aria-overlaypackage looks complete. Ensure that all necessary configurations and dependencies are included and correctly specified.packages/components/dropdown/package.json (3)
37-41: Peer Dependencies Update: Ensure CompatibilityThe peer dependencies have been updated to include
@nextui-org/systemand@nextui-org/theme. Ensure that these updates are compatible with the existing codebase and do not introduce any conflicts.
47-50: Dependency Addition: Verify Necessity and CompatibilitySeveral new dependencies have been added, including
@nextui-org/menu,@nextui-org/popover,@nextui-org/react-utils, and@nextui-org/shared-utils. Verify that these additions are necessary and compatible with the existing codebase.
56-64: Dev Dependencies Update: Ensure Development Environment StabilityThe dev dependencies have been updated to include several
@nextui-orgpackages. Ensure that these updates do not disrupt the development environment and are necessary for the project's development and testing.packages/components/date-picker/package.json (2)
43-58: Dependency Addition: Verify Necessity and CompatibilitySeveral new dependencies have been added, including
@internationalized/dateand multiple@nextui-orgpackages. Verify that these additions are necessary and compatible with the existing codebase.
62-64: Dev Dependencies Update: Ensure Development Environment StabilityThe dev dependencies have been updated to include several
@nextui-orgpackages. Ensure that these updates do not disrupt the development environment and are necessary for the project's development and testing.packages/components/popover/package.json (3)
37-41: Peer dependencies update approved.The additions of
@nextui-org/systemand@nextui-org/themewith specific versions appear necessary for the component's functionality.
46-50: Dependencies update approved.The additions of
@nextui-org/framer-utils,@nextui-org/shared-utils, and@nextui-org/use-aria-overlayappear necessary for the component's functionality.
64-68: Dev dependencies update approved.The additions of
@nextui-org/input,@nextui-org/system, and@nextui-org/themeappear necessary for development and testing purposes.packages/components/select/package.json (3)
37-41: Peer dependencies update approved.The additions of
@nextui-org/systemand@nextui-org/themewith specific versions appear necessary for the component's functionality.
50-50: Dependencies update approved.The additions of
@nextui-org/spinner,@nextui-org/use-aria-multiselect, and others appear necessary for the component's functionality.
63-73: Dev dependencies update approved.The additions of
@nextui-org/button,@nextui-org/chip, and others appear necessary for development and testing purposes.packages/components/autocomplete/package.json (3)
37-41: Peer dependencies update approved.The additions of
@nextui-org/systemand@nextui-org/themewith specific versions appear necessary for the component's functionality.
44-50: Dependencies update approved.The additions of
@nextui-org/button,@nextui-org/input, and others appear necessary for the component's functionality.
69-74: Dev dependencies update approved.The additions of
@nextui-org/system,@nextui-org/theme, and others appear necessary for development and testing purposes.packages/components/popover/src/use-aria-popover.ts (2)
8-12: Import statements update approved.The addition of
useAriaOverlayfrom@nextui-org/use-aria-overlayappears necessary for the component's functionality.
69-76: Integration ofuseAriaOverlayapproved.The integration of the
useAriaOverlayhook appears to be correctly implemented and should improve the functionality.packages/components/modal/__tests__/modal.test.tsx (1)
113-145: LGTM! The test case is well-implemented.The added test case correctly ensures that only the top-most modal is hidden when clicking outside.
packages/components/dropdown/src/use-dropdown.ts (1)
Line range hint
1-97:
LGTM! TheuseDropdownhook is well-implemented.The hook follows best practices and the logic for managing the dropdown state and interactions is sound.
packages/hooks/use-aria-overlay/src/index.ts (1)
1-145: LGTM! TheuseAriaOverlayhook is well-implemented.The hook follows ARIA best practices and the logic for managing overlay visibility and interactions is sound.
packages/components/date-picker/src/use-date-picker.ts (1)
Line range hint
1-97:
LGTM! TheuseDatePickerhook is well-implemented.The hook follows best practices and the logic for managing the date picker state and interactions is sound.
packages/components/date-picker/src/use-date-range-picker.ts (24)
Line range hint
1-13: Imports look good, but ensure consistency.The imports are well-organized and necessary for the functionality. Ensure that all imported modules are used.
Line range hint
14-18: InterfacePropsis well-defined.The
Propsinterface extendsUseDatePickerBasePropsand adds additional properties specific to theDateRangePicker.
Line range hint
19-20: Type aliasUseDateRangePickerPropsis appropriate.The type alias combines
PropsandAriaDateRangePickerPropsfor the hook's props.
Line range hint
21-30: Initialization and context usage are correct.The function initializes the global context and validation behavior correctly.
Line range hint
31-38: State management and ref initialization are correct.The state management using
useDateRangePickerStateand ref initialization are appropriate.
Line range hint
39-47: ARIA props and state management are well-handled.The function correctly uses
useAriaDateRangePickerto manage ARIA props and state.
Line range hint
48-55: Memoization and time field values are well-implemented.The memoization of slots and time field values is efficient and appropriate.
Line range hint
56-63: Label placement logic is well-defined.The label placement logic ensures that the label is positioned correctly based on the props.
Line range hint
64-66: DateRangePicker props are well-organized.The prop getters for the DateRangePicker component are well-defined and organized.
Line range hint
67-95: Prop getters for time input fields are well-implemented.The prop getters for the start and end time input fields are correctly implemented and handle the necessary props.
Line range hint
96-103: Prop getter for popover props is well-implemented.The prop getter for the popover props correctly merges the necessary props.
Line range hint
104-111: Prop getter for calendar props is well-implemented.The prop getter for the calendar props correctly merges the necessary props.
Line range hint
112-118: Prop getter for selector button props is well-implemented.The prop getter for the selector button props correctly merges the necessary props.
Line range hint
119-122: Prop getter for separator props is well-implemented.The prop getter for the separator props correctly merges the necessary props.
Line range hint
123-126: Prop getter for selector icon props is well-implemented.The prop getter for the selector icon props correctly merges the necessary props.
Line range hint
127-174: Prop getters for date input fields are well-implemented.The prop getters for the start and end date input fields are correctly implemented and handle the necessary props.
Line range hint
175-178: Prop getter for label props is well-implemented.The prop getter for the label props correctly merges the necessary props.
Line range hint
179-182: Prop getter for input wrapper props is well-implemented.The prop getter for the input wrapper props correctly merges the necessary props.
Line range hint
183-186: Prop getter for inner wrapper props is well-implemented.The prop getter for the inner wrapper props correctly merges the necessary props.
Line range hint
187-190: Prop getter for helper wrapper props is well-implemented.The prop getter for the helper wrapper props correctly merges the necessary props.
Line range hint
191-194: Prop getter for error message props is well-implemented.The prop getter for the error message props correctly merges the necessary props.
Line range hint
195-198: Prop getter for description props is well-implemented.The prop getter for the description props correctly merges the necessary props.
Line range hint
199-204: Prop getter for date input group props is well-implemented.The prop getter for the date input group props correctly merges the necessary props.
Line range hint
205-232: Return statement is well-structured.The return statement correctly returns the necessary state and prop getters.
packages/components/select/src/use-select.ts (30)
Line range hint
1-13: Imports look good, but ensure consistency.The imports are well-organized and necessary for the functionality. Ensure that all imported modules are used.
Line range hint
14-45: Type definitions and interfacePropsare well-defined.The type definitions and interface
Propsare well-defined and cover the necessary properties for the select component.
Line range hint
46-49: WeakMapselectDatais appropriately used.The
selectDataWeakMap is used to store select-related data.
Line range hint
50-53: Type aliasUseSelectPropsis appropriate.The type alias combines
PropsandMultiSelectPropsfor the hook's props.
Line range hint
54-61: Initialization and context usage are correct.The function initializes the global context and maps the props variants correctly.
Line range hint
62-71: State management and ref initialization are correct.The state management using
useMultiSelectStateand ref initialization are appropriate.
Line range hint
72-89: ARIA props and state management are well-handled.The function correctly uses
useMultiSelectto manage ARIA props and state.
Line range hint
90-94: Focus and hover state management are well-handled.The function correctly uses
useFocusRinganduseHoverto manage focus and hover states.
Line range hint
95-104: Label placement logic is well-defined.The label placement logic ensures that the label is positioned correctly based on the props.
Line range hint
105-110: Memoization of slots is well-implemented.The memoization of slots is efficient and appropriate.
Line range hint
111-125: Effect to scroll listbox to selected item is well-implemented.The effect to scroll the listbox to the selected item when the state is open is correctly implemented.
Line range hint
126-136: Error message handling is well-implemented.The error message handling logic is correctly implemented.
Line range hint
137-144: Effect to apply width to popover is well-implemented.The effect to apply the same width to the popover as the select is correctly implemented.
Line range hint
145-153: Prop getter for base props is well-implemented.The prop getter for the base props correctly merges the necessary props.
Line range hint
154-181: Prop getter for trigger props is well-implemented.The prop getter for the trigger props correctly merges the necessary props.
Line range hint
182-189: Prop getter for hidden select props is well-implemented.The prop getter for the hidden select props correctly merges the necessary props.
Line range hint
190-196: Prop getter for label props is well-implemented.The prop getter for the label props correctly merges the necessary props.
Line range hint
197-203: Prop getter for value props is well-implemented.The prop getter for the value props correctly merges the necessary props.
Line range hint
204-210: Prop getter for listbox wrapper props is well-implemented.The prop getter for the listbox wrapper props correctly merges the necessary props.
Line range hint
211-217: Prop getter for listbox props is well-implemented.The prop getter for the listbox props correctly merges the necessary props.
Line range hint
218-232: Prop getter for popover props is well-implemented.The prop getter for the popover props correctly merges the necessary props.
Line range hint
233-237: Prop getter for selector icon props is well-implemented.The prop getter for the selector icon props correctly merges the necessary props.
Line range hint
238-244: Prop getter for inner wrapper props is well-implemented.The prop getter for the inner wrapper props correctly merges the necessary props.
Line range hint
245-251: Prop getter for helper wrapper props is well-implemented.The prop getter for the helper wrapper props correctly merges the necessary props.
Line range hint
252-258: Prop getter for description props is well-implemented.The prop getter for the description props correctly merges the necessary props.
Line range hint
259-265: Prop getter for main wrapper props is well-implemented.The prop getter for the main wrapper props correctly merges the necessary props.
Line range hint
266-272: Prop getter for error message props is well-implemented.The prop getter for the error message props correctly merges the necessary props.
Line range hint
273-279: Prop getter for spinner props is well-implemented.The prop getter for the spinner props correctly merges the necessary props.
Line range hint
280-283: WeakMapselectDatais appropriately used.The
selectDataWeakMap is used to store select-related data.
Line range hint
284-290: Return statement is well-structured.The return statement correctly returns the necessary state and prop getters.
packages/components/autocomplete/__tests__/autocomplete.test.tsx (14)
Line range hint
1-18: Imports look good, but ensure consistency.The imports are well-organized and necessary for the tests. Ensure that all imported modules are used.
Line range hint
19-29: Test data and helper components are well-defined.The test data and helper components are well-defined and necessary for the tests.
Line range hint
30-38: Test case for renderingAutocompleteis correct.The test case for rendering the
Autocompletecomponent is correctly implemented.
Line range hint
39-48: Test case for forwarding ref is correct.The test case for forwarding the ref to the
Autocompletecomponent is correctly implemented.
Line range hint
49-57: Test case for dynamic rendering is correct.The test case for rendering the
Autocompletecomponent with dynamic items is correctly implemented.
Line range hint
58-67: Test case for rendering with section (static) is correct.The test case for rendering the
Autocompletecomponent with static sections is correctly implemented.
Line range hint
68-83: Test case for rendering with section (dynamic) is correct.The test case for rendering the
Autocompletecomponent with dynamic sections is correctly implemented.
Line range hint
84-101: Test case for focusing on click is correct.The test case for focusing the
Autocompletecomponent when clicked is correctly implemented.
Line range hint
102-124: Test case for clearing value is correct.The test case for clearing the value of the
Autocompletecomponent is correctly implemented.
Line range hint
125-148: Test case for opening and closing listbox is correct.The test case for opening and closing the listbox of the
Autocompletecomponent is correctly implemented.
Line range hint
149-174: Test case for closing listbox on outside click is correct.The test case for closing the listbox of the
Autocompletecomponent when clicking outside is correctly implemented.
Line range hint
175-198: Test case for closing listbox on outside click with modal open is correct.The test case for closing the listbox of the
Autocompletecomponent when clicking outside with a modal open is correctly implemented.
Line range hint
199-221: Test case for setting input after selection is correct.The test case for setting the input value after selecting an item in the
Autocompletecomponent is correctly implemented.
Line range hint
222-253: **Test case for closing
There was a problem hiding this comment.
Actionable comments posted: 0
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 (11)
- .changeset/happy-socks-hug.md (1 hunks)
- packages/components/autocomplete/package.json (2 hunks)
- packages/components/autocomplete/src/use-autocomplete.ts (2 hunks)
- packages/components/date-picker/package.json (1 hunks)
- packages/components/dropdown/package.json (1 hunks)
- packages/components/popover/package.json (2 hunks)
- packages/components/popover/src/use-aria-popover.ts (2 hunks)
- packages/components/select/package.json (2 hunks)
- packages/hooks/use-aria-modal-overlay/package.json (1 hunks)
- packages/hooks/use-aria-multiselect/src/use-multiselect.ts (1 hunks)
- packages/hooks/use-aria-overlay/src/index.ts (1 hunks)
Files skipped from review due to trivial changes (4)
- packages/components/date-picker/package.json
- packages/components/dropdown/package.json
- packages/components/popover/package.json
- packages/components/select/package.json
Additional comments not posted (14)
.changeset/happy-socks-hug.md (1)
1-14: Changeset looks good.The changeset file is well-structured and provides a clear summary of the patches applied to the listed packages.
packages/hooks/use-aria-modal-overlay/package.json (1)
37-37: Dependency addition approved.The addition of
@nextui-org/use-aria-overlayis appropriate for enhancing ARIA modal overlay functionality.packages/components/autocomplete/package.json (3)
37-41: Reorganization of peerDependencies approved.The rearrangement maintains version constraints and improves clarity.
44-45: Addition of new dependencies approved.The inclusion of
@nextui-org/buttonand@nextui-org/inputsupports enhanced component functionality.
69-70: Movement of dependencies to devDependencies approved.Moving
@nextui-org/themeand@nextui-org/systemto devDependencies reflects their usage context.packages/components/popover/src/use-aria-popover.ts (2)
12-12: Approved: Updated import foruseAriaOverlay.The import change aligns with the refactor objectives to improve overlay handling.
69-78: Approved: Simplified overlay logic withuseAriaOverlay.The use of
useAriaOverlayand the simplified logic forshouldCloseOnInteractOutsideenhance readability and maintainability.Ensure that the
useAriaOverlayis correctly implemented and used across the codebase.Verification successful
Verified: Consistent usage of
useAriaOverlayacross the codebase.The
useAriaOverlayfunction is correctly implemented and used in bothuse-aria-popover.tsanduse-aria-modal-overlay/src/index.ts, ensuring consistent overlay management. No issues found.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `useAriaOverlay` across the codebase. # Test: Search for the usage of `useAriaOverlay`. Expect: Consistent implementation. rg --type ts -A 5 $'useAriaOverlay'Length of output: 2391
packages/hooks/use-aria-overlay/src/index.ts (4)
9-20: Approved: Interface and initial setup foruseAriaOverlay.The interface and initialization of
visibleOverlaysalign with the goal of enhancing overlay management.
38-51: Approved: Overlay stack management withuseEffect.The logic for managing the overlay stack ensures proper handling of multiple overlays.
60-100: Approved: Comprehensive interaction handling logic.The logic for handling interactions outside the overlay is well-implemented and covers various scenarios.
142-150: Approved: Return structure ofuseAriaOverlay.The return structure is clear and effectively provides the necessary props for overlay management.
packages/hooks/use-aria-multiselect/src/use-multiselect.ts (1)
115-119: Approved: Addition ofonPressStartevent handler.The
onPressStartevent handler improves the component's responsiveness to pointer events.packages/components/autocomplete/src/use-autocomplete.ts (2)
Line range hint
1-1:
LGTM!The changes in the
useAutocompletefunction are approved. The removal ofshouldCloseOnInteractOutsidealigns with the PR objectives to simplify and enhance stability.
Line range hint
1-1:
Verify the impact of removingshouldCloseOnInteractOutside.The removal of
shouldCloseOnInteractOutsidefrompopoverPropssimplifies the logic but may alter the behavior of interactions outside the popover. Ensure that this change aligns with the intended user experience and does not introduce regressions.
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (3)
packages/components/dropdown/src/use-dropdown.ts (1)
Line range hint
76-76: Refactor Menu Action HandlingThe function
onMenuActioncould be refactored for clarity. Currently, it handles whether the menu should close based on thecloseOnSelectprop. Consider simplifying this logic or breaking it into smaller, more testable functions.Consider refactoring
onMenuActionto improve clarity and maintainability:const handleMenuClose = (shouldClose: boolean) => { if (shouldClose) { state.close(); } } const onMenuAction = (menuCloseOnSelect?: boolean) => { const shouldClose = menuCloseOnSelect !== undefined ? !menuCloseOnSelect : closeOnSelect; handleMenuClose(shouldClose); };packages/components/autocomplete/src/use-autocomplete.ts (2)
Line range hint
1-1: Assessment of theuseAutocompletefunction's structure and logic.The
useAutocompletefunction is well-structured, making extensive use of destructuring and default values to handle props. This approach enhances readability and maintainability. However, the function's length and complexity could be reduced by breaking it into smaller, more focused sub-functions or hooks.Consider refactoring the
useAutocompletefunction to improve readability and maintainability. Here's a potential way to break down the function:
- Extract parts of the logic related to handling state changes into a separate hook.
- Separate the UI logic that deals with rendering and props manipulation into another function or custom hook.
This separation can make the code easier to test and maintain.
Line range hint
1-1: Consideration for backward compatibility and deprecation warnings.The function includes a TODO comment about removing the
disableClearableprop in the next minor release. It's important to ensure that there are clear deprecation warnings and documentation updates to inform users about this change.Would you like me to help draft the deprecation notice or update the documentation regarding the removal of the
disableClearableprop?
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 (4)
- packages/components/autocomplete/src/use-autocomplete.ts (2 hunks)
- packages/components/dropdown/src/use-dropdown.ts (2 hunks)
- packages/components/popover/package.json (1 hunks)
- packages/components/popover/src/use-popover.ts (3 hunks)
Additional comments not posted (11)
packages/components/popover/package.json (2)
50-50: Approved addition of new dependency.The addition of
@nextui-org/use-aria-overlayas a dependency is aligned with the PR's objectives to enhance overlay functionalities. This should theoretically improve the component's accessibility and interaction handling.
50-50: Verify integration and functionality of the new dependency.Ensure that the integration of
@nextui-org/use-aria-overlayis thoroughly tested across the project, especially where overlays are utilized. This is crucial to maintain the stability and performance of the components.Run the following script to verify the usage of the new dependency:
Verification successful
Integration of
@nextui-org/use-aria-overlayVerifiedThe
@nextui-org/use-aria-overlaydependency is properly integrated into the project, as evidenced by its usage in overlay management logic within the codebase. To ensure full functionality, it is recommended to conduct manual testing of the components utilizing this dependency, such as those inuse-aria-modal-overlayanduse-aria-popover. This will help confirm that the overlays behave as expected in various scenarios.
- Files to focus on for manual testing:
packages/hooks/use-aria-modal-overlay/src/index.tspackages/components/popover/src/use-aria-popover.tsScripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of `@nextui-org/use-aria-overlay` across the project. # Test: Search for the usage of the new dependency. Expect: Proper integration and no errors. rg --type json -A 5 $'@nextui-org/use-aria-overlay'Length of output: 1516
Script:
#!/bin/bash # Description: Search for the usage of `@nextui-org/use-aria-overlay` in JavaScript and TypeScript files. # Test: Look for import statements or references to `@nextui-org/use-aria-overlay`. rg --type js --type ts '@nextui-org/use-aria-overlay'Length of output: 278
Script:
#!/bin/bash # Description: Extract context around the usage of `useAriaOverlay` in the identified files. # Extract context from `packages/hooks/use-aria-modal-overlay/src/index.ts` rg --type ts -A 10 -B 5 'useAriaOverlay' packages/hooks/use-aria-modal-overlay/src/index.ts # Extract context from `packages/components/popover/src/use-aria-popover.ts` rg --type ts -A 10 -B 5 'useAriaOverlay' packages/components/popover/src/use-aria-popover.tsLength of output: 1940
packages/components/dropdown/src/use-dropdown.ts (5)
Line range hint
1-1: General Observation: Import StatementsThe import statements are well-organized and clear, which is good for maintainability. However, ensure that all imported modules are used within the file to avoid unnecessary imports.
Line range hint
44-44: Evaluate State ManagementThe state management using
useMenuTriggerStateand handling theonOpenChangeevent is correctly implemented. It ensures that theonClosecallback is called when the dropdown closes, which is crucial for cleanup tasks.
Line range hint
58-58: Assess Prop Merging StrategyThe use of
mergePropsfrom@react-aria/utilsto combineotherPropswithpropsingetPopoverPropsis a good practice. It helps in avoiding prop collisions and ensures that all props are correctly passed down to child components.
Line range hint
89-89: Verify Removal ofshouldCloseOnInteractOutsideThe removal of
shouldCloseOnInteractOutsidefrompopoverPropsneeds careful consideration. Verify that this change aligns with the intended behavior changes and does not introduce regressions in how the dropdown interacts with outside elements.
Line range hint
6-6: Check Global Context UsageThe use of
globalContextto determinedisableAnimationis a good practice as it adheres to the DRY principle by not repeating the same logic across components. However, ensure thatglobalContextis robustly defined and consider handling cases where it might be undefined.Verification successful
Global Context Usage is Robustly Defined
The
globalContextaccessed throughuseProviderContextis robustly defined with default values, ensuring safe usage across components. ThedisableAnimationproperty has a default value, addressing concerns about undefined values. No further action is needed.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if `globalContext` is robustly defined across the project. ast-grep --lang typescript --pattern $'useProviderContext() { $$$ }'Length of output: 520
Script:
#!/bin/bash # Description: Search for the definition of the `useProviderContext` function to verify the usage of `globalContext`. ast-grep --lang typescript --pattern 'function useProviderContext() { $$$ }'Length of output: 78
Script:
#!/bin/bash # Description: Search for any references to `useProviderContext` in the codebase to gather more context about its definition and usage. rg 'useProviderContext' -A 5Length of output: 43938
Script:
#!/bin/bash # Description: Search for the setup of the ProviderContext to verify if default values are provided and how it is used. rg 'ProviderContext' -A 5Length of output: 46799
packages/components/popover/src/use-popover.ts (2)
5-9: Review import changes.The removal of
useEffectsuggests a simplification in lifecycle management, which is generally positive if the functionality is maintained or improved. Ensure that the removal ofuseEffectdoes not affect any dependent features.Verification successful
Removal of
useEffectis verified.The absence of
useEffectin theuse-popover.tsfile confirms that its removal does not impact the functionality of theusePopoverhook. The import changes are appropriate and maintain the intended behavior.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify if `useEffect` was crucial for any features in the `usePopover` hook. # Test: Search for `useEffect` usage in the file. Expect: No occurrences. rg --type typescript -A 5 $'useEffect' packages/components/popover/src/use-popover.tsLength of output: 119
Script:
#!/bin/bash # Description: Verify if `useEffect` was crucial for any features in the `usePopover` hook. # Test: Search for `useEffect` usage in the file. Expect: No occurrences. rg -A 5 $'useEffect' packages/components/popover/src/use-popover.tsLength of output: 66
266-266: Refactoraria-haspopuphandling.The use of
mergePropsto handlearia-haspopupenhances flexibility and integration with other properties. This change should be tested to ensure it maintains all intended accessibility features.Verification successful
Integration of
aria-haspopupwithmergePropsconfirmed.The use of
mergePropsto handlearia-haspopupalongside other properties liketriggerPropsandotherPropsis consistent with the intended refactoring goals. This approach should maintain the intended accessibility features. Ensure that this integration is tested to verify its functionality in different scenarios.Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the integration and functionality of `aria-haspopup` with other properties. # Test: Search for `aria-haspopup` usage in the file. Expect: Proper integration with `mergeProps`. rg --type typescript -A 5 $'aria-haspopup' packages/components/popover/src/use-popover.tsLength of output: 123
Script:
#!/bin/bash # Description: Verify the integration and functionality of `aria-haspopup` with other properties. # Test: Search for `aria-haspopup` usage in the file. Expect: Proper integration with `mergeProps`. rg --type ts -A 5 $'aria-haspopup' packages/components/popover/src/use-popover.tsLength of output: 368
packages/components/autocomplete/src/use-autocomplete.ts (2)
Line range hint
1-1: Review of import statements.The import statements are well-organized and relevant to the functionality of the
useAutocompletehook. It's good to see that types are being imported separately, which can help with tree shaking and potentially reduce bundle sizes.
Line range hint
1-1: Verification of the removal ofshouldCloseOnInteractOutside.The removal of the
shouldCloseOnInteractOutsidelogic simplifies the function but raises concerns about the behavior of the autocomplete component in scenarios where outside interactions are common. It's crucial to ensure that this change aligns with the intended user experience and does not introduce regressions.
* chore(root): reat-aria packages updated (#2889) * chore(storybook): common colors enabled (#2902) * fix(range-calendar): hide only dates outside the month (#2906) * 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 <[email protected]> Co-authored-by: աɨռɢӄաօռɢ <[email protected]> * fix(date-picker): keep date picker style consistent for different variants (#2908) * fix: add missing TableRowProps export (#2866) * fix: add missing TableRowProps export * feat(changeset): add changeset for PR2866 * chore(changeset): revise changeset message --------- Co-authored-by: աɨռɢӄաօռɢ <[email protected]> * fix(input): correct label margin for RTL required inputs (#2781) * fix(input): correct label margin for RTL required inputs * fix(theme): add changeset fr theme * docs(core): add storybook and canary release info (#2914) * Cn utility refactor (#2915) * refactor(core): cn utility adjusted and moved to the theme package * chore(root): changeset * fix(storybook): stories that used cn * docs(date-picker): change to jsx instead (#2919) * fix(switch): support uncontrolled switch in react-hook-form (#2924) * 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 * refactor(root): react aria packages fixed (#2944) * feat(docs): docs changes (#2868) * 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 <[email protected]> Co-authored-by: HaRuki <[email protected]> Co-authored-by: Kaben <[email protected]> * fix(slider): missing marks when hideThumb is true & revise slider styles (#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(test): react hook form tests & stories (#2931) * 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 (#2265) * fix: update accordion item heading tag to be customizable * Update .changeset/heavy-hairs-join.md Co-authored-by: Junior Garcia <[email protected]> * 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 <[email protected]> Co-authored-by: Junior Garcia <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: աɨռɢӄաօռɢ <[email protected]> * fix(theme): add pointer-events-none to skeleton base (#2972) * feat(tabs): add `destroyInactiveTabPanel` prop for Tabs component (#2973) * 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 (#2929) * 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): remove origin-bottom from button (#2990) * fix(skeleton): overflow issue in skeleton (#2986) * fix(theme): set overflow visible after skeleton loaded * feat(changeset): add changeset * fix(table): v2 input/textarea don't allow spaces inside a table (#3020) * fix(table): set onKeyDownCapture to undefined * feat(changeset): add changeset * fix(slider): calculate the correct value on mark click (#3017) * fix(slider): calculate the correct value on mark click * refactor(slider): remove the tests inside describe block * feat(slider): add tests for thumb move on mark click * refactor(slider): use val instead of pos * fix(theme): revise input isInvalid styles (#3010) * fix(theme): revise isInvalid input styles * feat(changeset): add changeset * feat(date-picker): add missing ref to input wrapper (#3011) * fix(date-picker): add missing ref to input wrapper * feat(changeset): add changeset * fix(core): incorrect tailwind classnames (#3018) * fix(dropdown): focus behaviour on press / enter keydown (#2970) * fix(dropdown): set focus on the first item * feat(dropdown): add keyboard interactions tests * feat(changeset): add changeset * fix(dropdown): use fireEvent.keyDown instead * chore(deps): add @nextui-org/test-utils to dropdown * refactor(dropdown): pass onKeyDown to menu trigger and don't hardcode autoFocus * chore(dropdown): remove autoFocus * fix(menu): pass userMenuProps to useTreeState and useAriaMenu and remove from getListProps * chore(changeset): add menu package * fix(component): update type definition to prevent primitive values as items (#2953) * fix: update type definition to prevent primitive values as items * fix: typecheck * fix(select): onSelectionChange can handle number (#2937) * fix: onSelectionChange type for dynamic items in Select component * docs: remove unnecessary properties * docs: update highlightedLines * chore: add changeset * fix(calendar): scrolling is hidden when changing the month (#2949) * fix(calendar): scrolling is hidden when changing the month * chore(changeset): correct package name --------- Co-authored-by: Poli Sour <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix: make VisuallyHidden's element type as span when it's inside phrasing element (#3013) * fix(checkbox): make VisuallyHidden's element type as span * feat(changeset): add changeset * fix(radio): make the VisuallyHidden element type as span * fix(switch): make the VisuallyHidden element type as span * fix(select): make the VisuallyHidden element type as span * feat(changeset): replace changeset * chore: fix formatting * docs: sync nextui-cli api (#3035) * docs: sync nextui-cli api * docs: update * chore: update routes.json with new path and set updated flag --------- Co-authored-by: Junior Garcia <[email protected]> * feat: switch default validationBehavior to aria and allow switching via props (#2987) * chore: add support validationBehavior aria * chore: add validationBehavior to Provider * chore: add autocomplete validation test * chore: add checkbox validation test * fix(input): require condition * docs: add description of validationBehavior props * chore: add support validationBehavior props for date components * docs(dates): add description of validationBehavior props * chore: add changeset * chore: format * chore: fix test * fix: select validationBehavior is not support yet * fix: select validationBehavior not supported yet * chore(docs): validation behavior prop added to nextui-provider --------- Co-authored-by: Junior Garcia <[email protected]> * fix: popover-based focus behaviour (#2854) * fix(autocomplete): autocomplete focus behaviour * feat(autocomplete): add test case for catching blur cases * refactor(autocomplete): use isOpen instead * feat(autocomplete): add "should focus when clicking autocomplete" test case * feat(autocomplete): add should set the input after selection * fix(autocomplete): remove shouldUseVirtualFocus * fix(autocomplete): uncomment blur logic * refactor(autocomplete): remove state as it is in getPopoverProps * refactor(autocomplete): remove unnecessary blur * refactor(select): remove unncessary props * fix(popover): use domRef instead * fix(popover): revise isNonModal and isDismissable * fix(popover): use dialogRef back * fix(popover): rollback * fix(autocomplete): onFocus logic * feat(popover): set disableFocusManagement to overlay * feat(modal): set disableFocusManagement to overlay * fix(autocomplete): set disableFocusManagement for autocomplete * feat(popover): include disableFocusManagement prop * refactor(autocomplete): revise type in selectorButton * fix(autocomplete): revise focus logic * feat(autocomplete): add internal focus state and add shouldCloseOnInteractOutside * feat(autocomplete): handle selectedItem change * feat(autocomplete): add clear button test * feat(changeset): add changeset * refactor(components): use the original order * refactor(autocomplete): add more comments * fix(autocomplete): revise focus behaviours * refactor(autocomplete): rename to listbox * chore(popover): remove disableFocusManagement from popover * chore(autocomplete): remove disableFocusManagement from autocomplete * chore(changeset): add issue number * fix(popover): don't set default value to transformOrigin * fix(autocomplete): revise shouldCloseOnInteractOutside logic * feat(autocomplete): should close listbox by clicking another autocomplete * fix(popover): add disableFocusManagement to overlay * refactor(autocomplete): revise comments and refactor shouldCloseOnInteractOutside * feat(changeset): add issue number * fix(autocomplete): merge with selectorButtonProps.onClick * refactor(autocomplete): remove extra line * refactor(autocomplete): revise comment * feat(select): add shouldCloseOnInteractOutside * feat(dropdown): add shouldCloseOnInteractOutside * feat(date-picker): add shouldCloseOnInteractOutside * feat(changeset): add dropdown and date-picker * fix(popover): revise shouldCloseOnInteractOutside * feat(date-picker): integrate with ariaShouldCloseOnInteractOutside * feat(select): integrate with ariaShouldCloseOnInteractOutside * feat(dropdown): integrate with ariaShouldCloseOnInteractOutside * feat(popover): integrate with ariaShouldCloseOnInteractOutside * feat(aria-utils): ariaShouldCloseOnInteractOutside * chore(deps): update pnpm-lock.yaml * feat(autocomplete): integrate with ariaShouldCloseOnInteractOutside * feat(aria-utils): handle setShouldFocus logic * feat(changeset): add @nextui-org/aria-utils * chore(autocomplete): put the test into correct group * feat(select): should close listbox by clicking another select * feat(dropdown): should close listbox by clicking another dropdown * feat(popover): should close listbox by clicking another popover * feat(date-picker): should close listbox by clicking another datepicker * chore(changeset): add issue numbers and revise changeset message * refactor(autocomplete): change to useRef instead * refactor(autocomplete): change to useRef instead * refactor(aria-utils): revise comments and format code * chore(changeset): add issue number * chore: take popoverProps.shouldCloseOnInteractOutside first * refactor(autocomplete): remove unnecessary logic * refactor(autocomplete): focus management logic * fix(components): Fix 'Tap to click' behavior on macOS with Edge/Chrome for Accordion and Tab (#2725) * fix(components): fix 'Tap to click' behavior on macOS * Add change file for accordion, menu, and tabs * Remove 'fix(components)' from the .changeset file * fix(components): undo dropdown change now that it's no longer applicable * fix(components): update changeset file now that we are no longer modifying the dropdown component * fix(date-picker): corrected inert value for true condition (#3054) * fix(date-picker): corrected inert value for true condition #3044 * refactor(calendar): add todo comment * feat(changeset): add changeset --------- Co-authored-by: shrinidhi.upadhyaya <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(hooks): resolve type error in onKeyDown event handler (#3064) * fix(hooks): resolve type error in onKeyDown event handler * chore(changeset): revise changeset --------- Co-authored-by: WK Wong <[email protected]> * Update dependency array on setPage useCallback hook (#3029) Changes: Add the onChangeActivePage function to the dependency array of the setPage useCallback hook to ensure it always reflects the latest state. Impact: This fix ensures that the pagination component accurately reflects the current state when triggering onChangeActivePage. * fix: error peerDep in pkg (#3014) * fix: error peerDep in pkg * docs: changeset * Fix DatePicker Time Input (#2845) * fix(date-picker): set `isCalendarHeaderExpanded` to `false` when DatePicker is closed * fix(date-picker): calendar header controlled state on DatePicker * chore(date-picker): update test * chore(date-picker): remove unnecessary `async` in test * Update packages/components/date-picker/__tests__/date-picker.test.tsx --------- Co-authored-by: WK Wong <[email protected]> Co-authored-by: Junior Garcia <[email protected]> * fix(date-picker): test * fix(hooks): optimize useScrollPosition with useCallback and useRef (#3049) * fix(hooks): optimize useScrollPosition with useCallback and useRef * Update .changeset/lucky-cobras-jog.md * Update packages/hooks/use-scroll-position/src/index.ts * Update packages/hooks/use-scroll-position/src/index.ts --------- Co-authored-by: Junior Garcia <[email protected]> * fix(select): placeholder text display for controlled component (#3081) * fix: return placeholder when selectedItems is empty * chore: add test and changeset * chore(docs): v2.4.0 (#3084) * chore(docs): v2.4.0 * chore(docs): v2.4.0 blog * chore(docs): revise typos based on coderabbitai * chore(docs): adjust navbar --------- Co-authored-by: WK Wong <[email protected]> * chore(changese): update @nextui-org/react dependency to minor version * docs: update cli docs (#3096) * ci(changesets): version packages (#2903) Co-authored-by: Junior Garcia <[email protected]> * fix(radio): remove required attribute for Radio with validationBehavior="aria" (#3110) * fix(theme): add missing pointer event after data loaded (#3126) * fix(system): listbox href issue (experimental) (#3119) * fix(system): @react-aria/utils * feat(hooks): include routerLinkProps * feat(changeset): add changeset * chore(deps): bump @react-aria/utils to 3.24.1 * fix(hooks): missing arguments * chore(deps): bump @react-types/link * chore(link): bump @react-aria/link to 3.7.1 * chore(link): use @react-aria/link instead * chore(changeset): revise changeset * chore(hooks): undo use-aria-link changes * chore(deps): undo use-aria-link changes * chore(deps): bump `@react-aria/utils` to `3.24.1` * chore(deps): bump `@react-types/shared` * feat: add missing router.open parameters due to router change * chore(changeset): add new line * chore(deps): bump `@react-types/shared` to `3.23.1` * fix(avatar): avoid passing `disableAnimation` prop to a DOM element (#3111) * fix(avatar): avoid passing `disableAnimation` prop to a DOM element * refactor(avatar): use filterDOMProps approach * chore(avatar): remove to type import * chore(avatar): change to shouldFilterDOMProps * fix(docs): removed unused import & corrected prop for disabled DatePicker (#3136) Co-authored-by: shrinidhi.upadhyaya <[email protected]> * ci(changesets): version packages (#3115) * fix(pagination): missing animation (#3144) * fix tsup domain (#3158) * chore(docs): remove destroyInactiveTabPanel from Tab due to merge conflict (#3155) * fix(autocomplete): maximum update depth exceeded in autocomplete (#3175) * chore(checkbox): avoid passing non-DOM attributes to svg (#3199) * chore(docs): avoid passing non-DOM attributes to svg * chore(utilities): avoid passing non-DOM attributes to svg * feat(changeset): add changeset * fix(docs): fix typo in autocomplete documentation page (#3182) * fix(select): add missing data-invalid in select and add missing data attributes in docs (#3177) * fix(select): add missing data-invalid attribute * chore(docs): add missing data attributes for select base * fix(tabs): destroyInactiveTabPanel unmounts inactive tabs' content (#3164) * fix(tabs): incorrect content in tab panel * feat(tabs): revise destroyInactiveTabPanel test cases * fix(select): unset form value after unselecting an item (#3157) * fix(select): set empty string instead of undefined for unsetting value * feat(selet): should unset form value * fix(tabs): set tab panel id correctly (#3246) * docs(tooltip): supplement correct style path (#3183) * docs(tooltip): supplement correct style path * chore(docs): move the note below import tabs * fix(use-aria-menu): link logic in useMenuItem (#3229) * chore(deps): bump @internationalized/date version (#3230) * fix(input): input display with hidden type (#3174) * fix(input): input display with hidden type * chore(input): add isHiddenType to dependency * refactor(input): move the styles to theme and change hidden to data attr * feat(theme): add isHiddenType to input * chore(changeset): include theme package * chore(input): revise input test * fix(theme): remove isHiddenType from variants and use data-hidden prop instead * fix(theme): remove isHiddenType from defaultVariants * fix(input): remove isHiddenType passing to input * feat(date-picker): add support for DatePicker to apply styles to DateInput (#3146) * feat(date-picker): add support for DatePicker to apply styles to DateInput * chore: update changeset * docs(date-picker): add dateInputClassNames props * refactor(date): updated errorMessage story and modified to import props (#3112) * refactor(date): updated errorMessage story and modified to import props * docs(date): add errorMessageFunction examples * chore: add changeset * fix: remove unnecessary props * fix: typo * Update regex-validation.ts (#3123) * Update regex-validation.ts Fix email regex * Update email regex input.stories.tsx * fix(autocomplete): controlled state logic (#2969) * fix(autocomplete): autocomplete controlled state (#2955) * chore(autocomplete): add changeset * Update packages/components/autocomplete/__tests__/autocomplete.test.tsx --------- Co-authored-by: Junior Garcia <[email protected]> * fix(utilities): resolve assignRef TypeScript ref assignment issue (#3098) * fix(utilities): resolve assignRef TypeScript ref assignment issue * chore(changeset): revise changeset message --------- Co-authored-by: WK Wong <[email protected]> * fix(table): table-column align prop (#2900) * fix(navbar): fixed the height of navbar menu (#1805) * fix(navbar): fixed the height of navbar menu * fix(navbar): refactored the css of navbar * fix(navbar): fix redundant expression * fix(navbar): fixed unnecessary changes * fix(navbar): adjust viewport * fix: RA dependencies bump (#3240) * fix(popover): popover focus issue (#3187) * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * fix: interactions with popover & focus issues (#3137) * fix(aria-utils): handle click on listbox * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * chore(utilities): remove ariaShouldCloseOnInteractOutside * chore(deps): pnpm-lock.yaml * fix(popover): remove disableFocusManagement * fix(modal): remove disableFocusManagement * fix(autocomplete): remove custom focus logic and remove ariaShouldCloseOnInteractOutside * fix(popover): rewrite shouldCloseOnInteractOutside logic * chore(utilities): remove ariaShouldCloseOnInteractOutside * chore(deps): bump react-aria dependencies * chore(autocomplete): change back to focus * feat(changeset): update changeset * chore(docs): update type in onSelectionChange * fix(popover): revise popover test case * chore(deps): add @nextui-org/aria-utils * fix(autocomplete): add ariaShouldCloseOnInteractOutside * fix(date-picker): add ariaShouldCloseOnInteractOutside * fix(select): add ariaShouldCloseOnInteractOutside * chore(deps): add @nextui-org/aria-utils * fix(dropdown): add ariaShouldCloseOnInteractOutside * feat(utilities): rewrite ariaShouldCloseOnInteractOutside * fix(popover): use ariaShouldCloseOnInteractOutside * fix(autocomplete): add back shouldFocus * fix(utilities): include shouldFocus logic * chore(utilities): remove ! * refactor(aria-utils): add more comments * chore(changeset): update packages * refactor(aria-utils): add more comments * feat(popover): add test * fix: dropdown onPress issue (#3211) * fix(popover): move useDialog to popover-content * fix(popover): move useDialog to free-solo-popover * refactor(popover): use const instead * feat(changset): add changeset * feat(popover): popover focus test * refactor(popover): getDialogProps * fix(popover): dropdown onPress blocking issue * fix(dropdown): incorrect keyCodes * feat(dropdown): add keyboard onPress test cases * chore(deps): keep all @react-aria/overlays version consistent * chore(deps): sync dependencies * chore(deps): sync dependencies * refactor(aria-utils): remove shouldFocus logic * refactor(autocomplete): remove shouldFocus logic and set input focus when open * chore(deps): bump dependencies * chore(deps): fix react aria dependencies * fix(autocomplete): move popover style width inside isOpen true block * fix(autocomplete): focus back to trigger * feat(changeset): add changeset * chore(deps): bump react-aria dependencies * refactor(autocomplete): revise comment * refactor(dropdown): revise logSpy and trigger mockRestore * refactor(popover): remove debug className * fix(date-input): avoid setting isInvalid in useDateFieldState * fix(autocomplete): use ComboBoxValidationValue * feat(use-aria-menu): add deprecate message * feat(changeset): add missing packages * refactor(use-aria-menu): remove isLink since it is included in useLinkProps * Update packages/hooks/use-aria-menu/src/use-menu-item.ts --------- Co-authored-by: Junior Garcia <[email protected]> * ci(changesets): version packages (#3147) Co-authored-by: Junior Garcia <[email protected]> * fix(avatar): remove extra `disableAnimation` prop in `getImageProps` (#3260) * fix(system-rsc): extendVariants with defaultVariants (#3299) * fix(date-picker): update calendar classNames in useDateRangePicker (#3258) * fix(date-picker): update calendar classNames in useDateRangePicker * feat(docs): include custom styles in date-range-picker docs --------- Co-authored-by: WK Wong <[email protected]> * fix(accordion): variants for nested accordions (#3291) * feat(accordion): add data-variant * fix(theme): revise accordion styles for variants * feat(changeset): add changeset * chore(theme): rollback content padding * chore(accordion): abandon data-group approach * refactor(theme): pass variant to accordionItem * refactor(accordion): pass variant to accordionItem * fix(accordion): revise accordion variants * refactor(accordion): refine transitionVariants * refactor(.github): nextui version description in bug report template (#3281) * refactor(.github): revise version description & placeholder * refactor(.github): revise version description & placeholder * chore: add accessible name to the icon button (#3300) * fix(radio): ensure radio input correctly references description (#3301) * fix(radio): ensure radio input correctly references description * refactor: tweak test * refactor(.github): github action warnings (#3317) * chore(.github): bump action versions * refactor(autocomplete): linting * chore(.github): without version * fix(doc): migrated ScriptProvider component from the root level to each decendant folder (#3269) Co-authored-by: HaRuki Kuriwada <[email protected]> * refactor(docs): fix international calendar bug (#3363) * refactor(docs): fix international calendar bug * chore: update @react-aria/i18n version and update lock file * fix(table): custom with class names storybook styles (#3344) * fix: #3338 * fix(table): custom with class names storybook styles * chore(deps): pnpm-lock.yaml (#3372) * fix(accordion): allow cursor navigation within text (#3419) * fix(accordion): allow cursor navigation within text * fix: wrong issue number * fix(date-range-picker): input field clear error (#3409) Co-authored-by: shrinidhi.upadhyaya <[email protected]> * fix: remove autoCapitalize to prevent Firefox warning (#3376) * fix: remove autoCapitalize to prevent firefox warning * chore: add changeset * fix(user): avatar icon not shown in User component (#3387) * chore(deps): pnpm-lock.yaml * fix(user): avoid passing user name to avatar component * feat(changeset): add changeset * feat(user): add avatar icon test cases * fix(select): close select by pressing selector button (#3374) * feat(select): add test * fix(select): use domRef in ariaShouldCloseOnInteractOutside * feat(changeset): add changeset * fix(select): rewrite "should unset form value" test * fix(select): import HiddenSelect and UseSelectProps (#3368) * fix(select): import HiddenSelect and UseSelectProps * chore: merge import * feat: eslint add rule prefer top level type import (#3354) * fix(calendar): disable button picker in calendar if `isDisabled` is true (#3358) * fix(calendar): disable button picker in calendar if `isDisabled` is true * feat(changeset): add changeset * feat(calendar): add test to cover showMonthAndYearPickers with isDisabled * fix: incorrect year in showMonthAndYearPickers with locale (#3331) * fix(date-input): add gregorian year offset to minValue & maxValue * feat(shared-utils): add getGregorianYearOffset * fix(calendar): add gregorian year offset to minValue & maxValue * feat(changeset): add changeset * fix(system): remove defaultDates.minDate and defaultDates.maxDate * fix(calendar): add missing import * feat(date-picker): add test * feat(calendar): add test * fix(popover): dialog focus behaviour (#3311) * fix(autocomplete): set skipDialogFocus to true * feat(popover): add skipDialogFocus to free solo popover * refactor(popover): rename variable and add comment * refactor(autocomplete): rename variable and add comment * feat(changeset): add changeset * refactor(docs): sort component routes alphabetically (#3328) * docs(pagination): fix typo of missing "`" in doc (#3324) * fix(image): override default auto height (#3327) * fix(image): override default auto height * feat(changeset): add changeset * feat(image): add test * refactor(image): add comment * fix(table): differentiate selected bg color from striped bg color (#3221) * fix: override bg color when selecting striped row * chore(style): differentiate selected bg color from striped row * chore: changeset * chore(changeset): add issue number --------- Co-authored-by: WK Wong <[email protected]> * fix(date-picker): open and close datepicker after pressing selector button (#3283) * fix(date-picker): use trigger ref instead * fix(date-input): add innerWrapperProps * fix(date-picker): include popoverTriggerRef and add onPress to selector * feat(date-picker): add test * feat(changeset): add changeset * refactor(date-input): merge innerWrapperPropsProp & props and add cn * fix(popover): close popover on scroll (#3414) * fix(popover): close popover on scroll * feat(popover): add "should close popover on scroll" test * feat(changeset): add changeset * feat(select): add ScrollableContainerTemplate * fix(navbar): shouldHideOnScroll fixed (#3315) * fix(navbar): shouldHideOnScroll fixed * Update packages/hooks/use-scroll-position/src/index.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update index.ts * fix(navbar): applying suggested changes --------- Co-authored-by: Pratyush <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * fix(accordion): pass missing `dividerProps` to Divider (#3392) * chore(deps): pnpm-lock.yaml * fix(accordion): pass missing `dividerProps` to Divider * chore(changeset): add issue number --------- Co-authored-by: WK Wong <[email protected]> * fix(image): optional height (#3420) * fix(image): optional height * fix(image): incorrect props * feat(changeset): add changeset * fix(input): input with file type (#3268) * fix(input): remove value & onChange for input[type="file"] * refactor(theme): remove unnecessary styles * fix(theme): input file styles * fix(theme): revise cursor-pointer on file * feat(input): add file input logic * feat(changeset): add changeset * refactor(input): use warn function from shared-utils instead * feat(input): add file type story * refactor(input): include in Input Types * fix(date-picker): resolve width clipping issue on 90/110% zoom (#3416) * fix(date-picker): resolve width clipping issue on 90/110% zoom * fix(date-picker): resolve width clipping issue on 90/110% zoom * Delete .changeset/metal-bats-reflect.md * Update weak-dingos-chew.md * chore: add storybook --------- Co-authored-by: Ryo Matsukawa <[email protected]> * fix: onSelectionChange type incorrect (#3336) * fix: onSelectionChange type incorrect * feat: export shardSelection * fix: typo * fix: review --------- Co-authored-by: WK Wong <[email protected]> * fix: tsc errors (#3362) * fix: tsc error * docs: changeset * fix: test * fix: test * fix: review problem * fix: review * feat: add tw config to get the intelliSense (#3385) * feat: add tw config to get the intelliSense * chore(deps): pnpm-lock.yaml --------- Co-authored-by: WK Wong <[email protected]> * fix(datePicker): prevent year, month change in showMonthAndYearPickers mode (#3088) * fix: prevent year, month change error in showMonthAndYearPickers mode * docs: add changeset * docs: edit changeset * test: add test code about date clear issue in date picker * test: update test code * test: check application aria is same with current date * chore(changeset): revise package and add issue number --------- Co-authored-by: WK Wong <[email protected]> * fix: add onClear prop to Ripple component in button custom implementation (#3439) * fix(input): fixed the background change on autofill in Chrome (#3430) * fix(input): fixed the background change on autofill in Chrome * fix(input): fixed the background change on autofill in Chrome * chore(changeset): add issue number --------- Co-authored-by: WK Wong <[email protected]> * fix(time-input): minValue and maxValue validation (#3426) * fix(time-input): minValue and maxValue validation (#3424) * test(time-input): update * refactor(time-input): simplify `isInvalid` logic * fix(docs): incorrect image height (#3427) * docs: removed show more from code example (#3373) * docs: removed show more from code example * Update sandpack.css * docs: remove-show-more * chore(docs): remove unused code * chore(deps): pnpm-lock.yaml --------- Co-authored-by: WK Wong <[email protected]> * fix(table): resolve double fetch issue in useInfiniteScroll hook (#3332) * fix(table): resolve double fetch issue in useInfiniteScroll hook (fix #3251) * fix(table): remove unnecessary else clause * fix(table): add a changeset file for use-infinite-scroll * fix(hooks): add clearTimeout function --------- Co-authored-by: WK Wong <[email protected]> * docs(frameworks): update highlighted line numbers in Frameworks examples (#3412) * Update highlighted line numbers in Remix examples * Update highlighted line numbers in Next.js examples * Update highlighted line numbers in Astro examples * Update highlighted line numbers in Vite examples * Adjust highlighted line number * Adjust highlighted line number * fix(autocomplete): remove unnecessary state.close (#3464) * fix(autocomplete): remove unnecessary state.close * feat(autocomplete): add fully controlled template * feat(autocomplete): should clear value after clicking clear button (controlled) * ci(changesets): version packages (#3266) Co-authored-by: Junior Garcia <[email protected]> * fix(system-rsc): defaultVariants null case in extendVariants (#3503) * fix(system-rsc): defaultVariants null case in extendVariants * chore(changeset): add issue number * fix(date-range-picker): calendar-content width as per visible-months (#3505) * fix: normalize 'status' field values to lowercase across multiple files (#2947) * fix(status): normalize 'status' value to lowercase in page.tsx * fix(status): normalize 'status' value to lowercase in use-case.ts * fix(status): normalize 'status' value to lowercase in custom-render-value.ts * fix(status): normalize 'status' value to lowercase in top-content.ts * fix(status): normalize 'status' value to lowercase in multiple-chips.ts * fix(status): normalize 'status' value to lowercase in custom-items.ts * fix(status): normalize 'status' value to lowercase in data.ts * fix(status): normalize 'status' value to lowercase in custom-styles.ts * fix(status): normalize 'status' value to lowercase in page.tsx * fix(status): normalize 'status' value to lowercase in custom-styles.ts * fix(status): normalize 'status' value to lowercase in custom-items.ts * fix(status): normalize 'status' value to lowercase in page.tsx * fix(status): normalize 'status' value to lowercase in custom-styles.ts * fix(modal): double scrollbar in inside scrollbehaviour (#3495) * fix(modal): double scrollbar in inside scrollbehaviour * chore(changeset): update changeset message and add issue number --------- Co-authored-by: WK Wong <[email protected]> * fix(table): sortable header slow color change during theme change (#3491) * fix(table): sortable header slow color change during theme change * chore(changeset): add space --------- Co-authored-by: WK Wong <[email protected]> * fix(theme): button scaling when disableAnimation is true (#3499) * fix(system-rsc): add @react-types/shared to dependencies (#3501) * fix(system-rsc): add @react-types/shared to dependencies * fix: change pnpm lock * fix: change pnpm lock * fix: change pnpm lock --------- Co-authored-by: winches <[email protected]> * build(script): fixing Clean script (#3500) running clean lock before clean node modules. * ci(changesets): version packages (#3507) Co-authored-by: Junior Garcia <[email protected]> * ci(changesets): version packages (#3508) Co-authored-by: Junior Garcia <[email protected]> * feat(chanageset): bump versions (#3512) * ci(changesets): version packages (#3513) * fix(deps): overrides RA utils pkg (#3537) * chore(deps): rollback PR3537 (#3541) * chore(docs): lint sponsors (#3547) * chore(docs): format ScrumbuissLogo svg * chore(docs): lint * chore(deps): upgrade pnpm to v9 (#3589) * chore(deps): upgrade pnpm to v9 * chore(root): bump node version * fix(dropdown): respect closeOnSelect prop on DropdownItem (#2598) * fix(dropdown): fix dropdown menu unexpected close when closeOnSelect is false (#2290) * feat(changeset): Updated DropdownMenu to respect closeOnSelect prop on DropdownItem * fix(dropdown): add Template * fix(dropdown): add tests * fix(dropdown): fixing logic gaps * fix(changeset): incorrect package name --------- Co-authored-by: աɨռɢӄաօռɢ <[email protected]> * fix: typo in home page (#3615) * docs: fix typo in override styles doc (#3611) * docs(storybook): remove overriding and unused code (#3566) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * docs(storybook): removed unnecessary code lines * Delete .changeset/brown-days-applaud.md * fix(input): sync ref value to internal value (#3533) * fix: sync ref value to internal value #3024 #3436 * feat: changeset - added changeset * chore: remove comment * chore(changeset): add issue numbers * refactor(input): revise typing --------- Co-authored-by: Anthony Ortiz <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(system-rsc): missing StringToBoolean<keyof V[K]>[] (#3559) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * fix(core): string[] accepted by compoundVariants.variant * Delete .changeset/brown-days-applaud.md * chore(changeset): revise changeset message * fix(system-rsc): incorrect VariantValue typing and typo in Options --------- Co-authored-by: WK Wong <[email protected]> * doc(sandpack): improved logic for react import (#3582) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * docs(sandpack): improved logic for react imoprt * Delete .changeset/brown-days-applaud.md * Update use-sandpack.ts * refactor(docs): skip adding import react if not required --------- Co-authored-by: WK Wong <[email protected]> * fix(docs): typo in snippet page (#3555) * docs(card, badge): slots section addition (#3580) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * docs(card,badge): added slots section * Delete .changeset/brown-days-applaud.md * fix(theme): double click issue on checkbox, toggle and radio (#3552) * fix(theme): double click issue on checkbox, toggle and radio * fix(theme): skeleton overflow issue (#3217) * fix(link): deprecated onClick warning on using onPress (#3569) * fix(navbar): fixed the height when style h-full * fix(navbar): fixed the height when style h-full * fix(link): deprecated onClick warning on using onPress * refactor(link): add comment * chore(changeset): revise changeset message --------- Co-authored-by: WK Wong <[email protected]> * fix(navbar): allow height prop to accept number type and fix broken menu (#3601) * fix(navbar): allow height prop to accept number type and fix broken menu * fix(navbar): menu breaking when a numerical height value is provided. changeset * feat(docs): added tanstack router to the routing section in the documentation (#3271) * feat(docs): added tanstack router to the routing section in the documentation * fix: updated the TanStack Router example by following RA example * fix: updated the documentation wordings * chore(docs): update highlighted row numbers --------- Co-authored-by: HaRuki Kuriwada <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(calendar): arrows changing order when html has dir="rtl" (#3656) * fix(calendar): #3641,#3642 add order and row-reverse to arrows for rtl layout support * chore(changeset): patch @nextui-org/calendar * chore(changeset): add missing package and revise changeset message --------- Co-authored-by: WK Wong <[email protected]> * chore(theme): export default-layout (#2946) * Support default configuration export Conveniently available for developers to modify from the default configuration * chore(changeset): add changeset --------- Co-authored-by: WK Wong <[email protected]> * fix(modal): modal position when keyboard appears (#3691) * feat(theme): add h-[--visual-viewport-height] to modal wrapper * fix(modal): apply --visual-viewport-height * chore(changeset): add changeset * fix(utilities): gregorian year offset for persian (#3603) * fix(utilities): gregorian year offset for persian * feat(changeset): add changeset * fix(input): prevent clearable when input is readonly (#3643) * fix(input): prevent clearable when input is readonly * test(input): add tests for isReadOnly and isClearable interaction * chore(changeset): add changeset for fixing clear button visibility with isReadOnly * fix(input): disable clear button from input is readonly * test(input): disable clear button when input is readonly * chore(changeset): update changeset * chore(changeset): revise message --------- Co-authored-by: WK Wong <[email protected]> * fix(docs): changed breakpoint to md (#2630) Co-authored-by: shrinidhi.upadhyaya <[email protected]> * fix(docs): added ts example for infinite pagination (#2718) * fix(docs): added ts example for infinite pagination * fix(docs): changed the condition of showOpenInCodeSandbox in CodeDemo * chore(docs): add bun command * chore(docs): add bun command --------- Co-authored-by: WK Wong <[email protected]> * fix(hooks): ensure exposed functions wrap by `useCallback` (#3607) * fix(hooks): ensure exposed functions wrap by `useCallback` * fix(hooks/use-real-shape): remove unnecessary dependency from `useCallback` * fix(select): prevent select from closing instantly when clicking on label of select (#3568) * fix(select): prevent select from closing instantly when clicking on label * fix(select): flickering on label click * fix(select): flickering while click on label * fix(select): add changeset on fixing the flickering model issue * chore(changeset): revise changeset message and add issue number --------- Co-authored-by: WK Wong <[email protected]> * refactor(popover): use `usePreventScroll` instead of `react-remove-scroll` (#3307) * refactor(popover): use `usePreventScroll` instead of `react-remove-scroll` * chore: lint * refactor(popover): use `usePreventScroll` instead of `react-remove-scroll` * chore: lint * fix(tooltip): `shouldBlockScroll` prop * chore(storybook): revert * chore(changeset): update changeset --------- Co-authored-by: WK Wong <[email protected]> * fix(autocomplete): ignore pointer events when the clear button is hidden (#3000) * fix(autocomplete): hide clear button with `visibility: hidden` * fix(autocomplete): clear button pointer-events * refactor(autocomplete): improve keyboard reopen issue on mobile * chore: add changeset * refactor(autocomplete): apply chain and add type to e --------- Co-authored-by: WK Wong <[email protected]> * refactor(overlays): improve stability, and complexity (#3467) * feat(hooks): new `use-aria-overlay` package * refactor(overlays): use custom `useAriaOverlay` * chore(modal): remove unnecessary `onClose: state.close` * chore(popover): remove duplicate `ariaHideOutside` * test(modal): only hide the top-most modal * chore: add changeset * refactor(hooks): useAriaOverlay tweaks --------- Co-authored-by: WK Wong <[email protected]> * chore(input): rollback PR3533 (#3720) * chore(autocomplete): should blur after clicking outside autocomplete (#3721) * fix(theme): color discrepancy in select (#3663) * fix(select): resolving color descrepancy in select * fix(select): making the changes accroding to the asked design * chore(changeset): revise message --------- Co-authored-by: WK Wong <[email protected]> * fix(listbox): card shadow clipping when inside listbox item (#3486) * fix(listbox): card shadow clipping when inside listbox item * fix(listbox): card shadow clipping when inside listbox item * Update five-teachers-refuse.md * Delete .changeset/bright-avocados-yell.md * fix(listbox): card shadow clipping when inside listbox item * fix(input): added hover and focus to input when label placement is outside-left #2328 (#2958) * 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 * fix(input): added hover and focus to input when label placement is outside-left #2328 * fix(input): label props mergeProps precedence change --------- Co-authored-by: shrinidhi.upadhyaya <[email protected]> * fix(autocomplete): highlight item in `AutocompleteSection` during keyboard navigation (#3726) * chore: run tests and storybook in StrictMode (#3352) Co-authored-by: WK Wong <[email protected]> * fix(root): .nvmrc version (#2795) * fix(config): Cannot use .nvmrc #2794 * fix(root): correct nvmrc version --------- Co-authored-by: AtharvaUpadhye <[email protected]> Co-authored-by: WK Wong <[email protected]> * chore(docs): add global css import to root layout (#2688) * Adds global css import to root layout * refactor(docs): include globals css info in other examples --------- Co-authored-by: Eli <[email protected]> Co-authored-by: WK Wong <[email protected]> * chore(ci): update github action versions (#2439) * chore(ci): update github action versions * chore(ci): update pnpm, gh-action and node versions * fix(ci): specify exact version in gh-action * chore(changeset): remove changeset * chore(root): update pnpm version * chore(root): update node version --------- Co-authored-by: աӄա <[email protected]> * fix(components): improve RTL support for input component (#2038) * fix(components): improve RTL support for select component * fix(theme): revise RTL styles * chore(changeset): remove input package from changeset --------- Co-authored-by: amirhhashemi <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(components): improve RTL support for select component (#2041) * fix(components): improve RTL support for select component * fix(theme): rtl styles for select * chore(changeset): remove unchanged package * chore(theme): remove ps-2 --------- Co-authored-by: amirhhashemi <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(components): improve RTL support for pagination component (#2044) * fix(components): improve RTL support for pagination component * chore(changeset): remove unchanged package * chore(pagination): undo change * chore(pagination): no chevronPrev slot * fix(theme): avoid rotate chevron in rtl --------- Co-authored-by: amirhhashemi <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(docs): remove unwanted generic from PaginationItemRenderProps(#3729) In the documentation on the custom item the type PaginationItemRenderProps is represented with a generic but in the implementation it doesn't receive a generic type. * fix(table): improve RTL support for table component (#2097) Co-authored-by: amirhhashemi <[email protected]> Co-authored-by: WK Wong <[email protected]> * fix(theme): use data-hover instead of hover (#2110) * chore(docs): update component link (#3737) * fix(system): missing useHref logic (#2943) * chore(deps): update pnpm-lock.yaml * fix(system): missing useHref logic * chore(docs): restructure heading * feat(docs): add useHref content to routing page * fix(hooks): revise useAriaLink onClick logic * chore(deps): bump @react-types/shared * chore(deps): bump @react-types/shared * fix(hooks): add missing parameters * fix(pagination): add missing parameters * feat(changeset): add missing router.open parameters due to rounter change * fix(docs): onSelectionChange type * refactor(changeset): revise changeset message * chore(deps): lock deps * chore(hooks): bump @react-types/shared to 3.23.0 * chore(changeset): remove this changeset since it is already in canary * refactor(docs): add package manager options (#3731) Co-authored-by: Maharshi Alpesh <[email protected]> * refactor(deps): remove react copy from react-rsc-utils bundle (#3597) * refactor(deps): remove react copy from react-rsc-utils bundle * chore(changeset): add changeset * fix(select): missing onChange when there are more than 300 items (#3598) * fix(select): missing onChange when there are more than 300 items * feat(select): add tests for onChange * chore(changeset): add changeset * fix(theme): update flat variant text colors to be accessible (#3738) * 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 <[email protected]> * fix(theme): set the min-height of base height to 100dvh where size equals "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 <[email protected]> * fix(hook): re-attached scroll event behavior in `useScrollPosition` (#3247) * fix: initialize throttleTimeout in cleanup function * chore(changeset): add changeset --------- Co-authored-by: WK Wong <[email protected]> * fix(theme): applied tw nested group (#3658) * 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): Floating components clipping in hero section (#3432) * fix(docs): incorrect image height * fix(docs): clipping of Floating components in Hero section * chore(docs): remove unnecessary space --------- Co-authored-by: WK Wong <[email protected]> * ci(changesets): version packages (#3662) Co-authored-by: Junior Garcia <[email protected]> * fix(docs): missing tw nested groups in docs (#3751) * fix(docs): set shouldBlockScroll to false (#3752) * chore: undo pr3658 & pr3751 (#3754) * chore: undo pr3307 (#3756) * chore: rollback pr3307 * chore(changeset): fix typo * chore: rollback pr3467 (#3759) * chore: rollback pr3467 * fix(dropdown): _a2.find is not a function (#3762) * 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 <[email protected]> * ci(changesets): version packages (#3755) Co-authored-by: Junior Garcia <[email protected]> * fix(theme): ghost danger button style (#3764) --------- Co-authored-by: Junior Garcia <[email protected]> Co-authored-by: Shrinidhi Upadhyaya <[email protected]> Co-authored-by: shrinidhi.upadhyaya <[email protected]> Co-authored-by: Paul Tiedtke <[email protected]> Co-authored-by: Mohammad Reza Badri <[email protected]> Co-authored-by: Nozomi-Hijikata <[email protected]> Co-authored-by: HaRuki <[email protected]> Co-authored-by: Kaben <[email protected]> Co-authored-by: Shawn Dong <[email protected]> Co-authored-by: Shawn Dong <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Ryo Matsukawa <[email protected]> Co-authored-by: Poli Sour <[email protected]> Co-authored-by: Poli Sour <[email protected]> Co-authored-by: Artem Pitikin <[email protected]> Co-authored-by: winches <[email protected]> Co-authored-by: Eric Abreu <[email protected]> Co-authored-by: Minsu <[email protected]> Co-authored-by: Jesus Perdomo Lampignano <[email protected]> Co-authored-by: chirokas <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: EGOIST <[email protected]> Co-authored-by: Damien Leroy <[email protected]> Co-authored-by: Christian Abele <[email protected]> Co-authored-by: Nozomi Hijikata <[email protected]> Co-authored-by: HaRuki Kuriwada <[email protected]> Co-authored-by: Deval Minocha <[email protected]> Co-authored-by: Ankit <[email protected]> Co-authored-by: wiyco <[email protected]> Co-authored-by: Sjoerd van Bommel <[email protected]> Co-authored-by: Pratyush Kongalla <[email protected]> Co-authored-by: Pratyush <[email protected]> Co-authored-by: Abhinandan <[email protected]> Co-authored-by: KumJungMin <[email protected]> Co-authored-by: dochi <[email protected]> Co-authored-by: Abhishek Tomar <[email protected]> Co-authored-by: RockerFlower <[email protected]> Co-authored-by: codeesura <[email protected]> Co-authored-by: Simon Podlipsky <[email protected]> Co-authored-by: sandeep Butte <[email protected]> Co-authored-by: Gtio <[email protected]> Co-authored-by: Jay <[email protected]> Co-authored-by: Sa'ad <[email protected]> Co-authored-by: AnthonyPaulO <[email protected]> Co-authored-by: Anthony Ortiz <[email protected]> Co-authored-by: Xiao Han <[email protected]> Co-authored-by: Facundo Tenuta <[email protected]> Co-authored-by: Amey Bhavsar <[email protected]> Co-authored-by: rockey2020 <[email protected]> Co-authored-by: 安忆 <[email protected]> Co-authored-by: sohan01fw <[email protected]> Co-authored-by: Maharshi Alpesh <[email protected]> Co-authored-by: Atharva Upadhye <[email protected]> Co-authored-by: AtharvaUpadhye <[email protected]> Co-authored-by: Eli <[email protected]> Co-authored-by: Eli <[email protected]> Co-authored-by: Robin <[email protected]> Co-authored-by: Amir Hossein Hashemi <[email protected]> Co-authored-by: amirhhashemi <[email protected]> Co-authored-by: Matheus Cruz Rocha <[email protected]> Co-authored-by: black197 <[email protected]> Co-authored-by: Maharshi Alpesh <[email protected]> Co-authored-by: Riley Butterfield <[email protected]> Co-authored-by: Hyden Liu <[email protected]> Co-authored-by: vetan2 <[email protected]>
Closes #
📝 Description
This is a significant refactor to overlays (such as popovers , modals, etc.) to reduce its complexity, while improving stability.
This PR introduced the following changes:
Re-introduce a proper solution to fix the issue instead of the old patch we used to have.
See Overlay not closed when clicking another MenuTrigger adobe/react-spectrum#1155 (comment)
See Clicking on another overlay trigger or focusable element does not focus the element when an overlay was already open adobe/react-spectrum#2061 (comment)
Fixes [BUG] - Select not able to close when clicked on again #3276, see https://github.com/adobe/react-spectrum/blob/f56a78746d0fd804267cb5ab17e2675f33f13e5e/packages/%40react-aria/menu/src/useMenuTrigger.ts#L112-L119
Removed
onClose: state.close. It didn't seem necessary.useInteractOutsidewill handle it for us.Removed duplicate
ariaHideOutsidein Popover. See hereFixes [BUG] - Unexpected Behavior of Select's Animation #3619
Once that was done, all of the dependent packages needed updated accordingly.
⛳️ Current behavior (updates)
20240812215744.mp4
🚀 New behavior
💣 Is this a breaking change (Yes/No):
📝 Additional Information
Summary by CodeRabbit
Summary by CodeRabbit
New Features
@nextui-org/use-aria-overlayfor managing ARIA overlays.Enhancements
autocomplete,dropdown,popover).Bug Fixes
Refactor
use-autocompleteanduse-dropdownregarding outside interactions.useEffectinuse-popoverfor managing side effects.