enhance HoverCard component with group delay logic #7890
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ys across multiple HoverCards"
…agement - Removed legacy implementation and comments in `HoverCard` components. - Centralized `openDropdown` and `closeDropdown` delay logic in `use-hover-card` hook with timeouts managed via `useRef`. - Adjusted group-aware hover behavior to remove redundancy. - Updated demo to showcase modified delay timing for `HoverCard.Group`. - Minor cleanup: consistent imports, removed unused code, and ensured file formatting compliance.
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the HoverCard component to centralize its delay logic into a new useHoverCard hook, introduces a HoverCard.Group wrapper for synchronized open/close delays, and updates all related exports, stories, demos, and documentation to support the new grouping feature.
- Centralized hover delay and open/close logic in
use-hover-card.ts - Added
HoverCard.Groupcomponent with context and floating delay group - Updated exports, stories, demos, and docs to showcase and support the group behavior
Reviewed Changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/@mantine/core/src/components/HoverCard/use-hover-card.ts | Extracted delay handling into useHoverCard hook |
| packages/@mantine/core/src/components/HoverCard/index.ts | Exported HoverCardGroup and its prop types |
| packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx | Enhanced target to respect group context |
| packages/@mantine/core/src/components/HoverCard/HoverCardDropdown/HoverCardDropdown.tsx | Enhanced dropdown to respect group context |
| packages/@mantine/core/src/components/HoverCard/HoverCard.tsx | Integrated useHoverCard and added HoverCard.Group |
| packages/@mantine/core/src/components/HoverCard/HoverCard.context.ts | Extended context shape for group support |
| packages/@mantine/core/src/components/HoverCard/HoverCardGroup/HoverCardGroup.tsx | New HoverCard.Group component implementation |
| packages/@mantine/core/src/components/HoverCard/HoverCardGroup/HoverCardGroup.context.ts | New context for group mode flag |
| packages/@docs/demos/src/demos/core/HoverCard/index.ts | Added group demo export |
| packages/@docs/demos/src/demos/core/HoverCard/HoverCard.demos.story.tsx | Registered Demo_group story |
| packages/@docs/demos/src/demos/core/HoverCard/HoverCard.demo.group.tsx | New group demo code |
| apps/mantine.dev/src/pages/core/hover-card.mdx | Documentation section for HoverCard.Group |
Comments suppressed due to low confidence (1)
packages/@mantine/core/src/components/HoverCard/HoverCardGroup/HoverCardGroup.tsx:21
- The new
HoverCard.Groupsynchronization logic isn’t covered by any tests. It would be valuable to add unit or integration tests to verify that multipleHoverCardinstances respect the group delays.
export function HoverCardGroup(props: HoverCardGroupProps) {
| window.clearTimeout(closeTimeout.current); | ||
| }, []); | ||
|
|
||
| const onChange = useCallback( |
There was a problem hiding this comment.
The onChange callback uses setCurrentId but it isn’t listed in the dependency array. Please include setCurrentId to ensure the callback always has the latest reference.
Copilot uses AI. Check for mistakes.
packages/@mantine/core/src/components/HoverCard/use-hover-card.ts
Outdated
Show resolved
Hide resolved
Co-authored-by: Copilot <[email protected]>
|
Thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This pull request introduces improvements to the
HoverCardcomponent:HoverCardto simplify group handling and centralize delay logic using theuse-hover-cardhook.HoverCard.Groupto synchronize open/close delays across multipleHoverCardcomponents.