feat(CNavGroup): controlled visibility, onVisibleChange and context-based accordion#459
Merged
Merged
Conversation
…ased accordion Rework the sidebar nav group so it works either uncontrolled (the toggler manages its own state) or controlled (the parent owns `visible` via `onVisibleChange`), and replace the positional `idx`/`recursiveClone` coordination with a context-based accordion. - Add `onVisibleChange`. A group is controlled when `visible` and `onVisibleChange` are provided together; the toggler then only requests a change and the group follows the prop, so a rejected collapse keeps it open (no desync). On its own, `visible` still acts as the default-open state and the group stays toggleable. - Coordinate groups through React context with stable `useId` chains instead of cloning children to inject positional `idx`. This works through wrappers, fragments and `Children.map`, and removes the duplicated logic in CSidebarNav. - A controlled group now closes when another branch opens by requesting the change through `onVisibleChange`, keeping the accordion consistent. - Detect active nav links with a MutationObserver on the link's class, so client-side navigation reopens the active section (the previous effect missed route changes that did not change `className`). - Add `aria-expanded` on the toggler. Docs: add a "Controlled navigation group" example and refresh the sidebar example.
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
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
Reworks the sidebar nav group so it works either uncontrolled (the toggler manages its own state) or controlled (the parent owns
visible), and replaces the positionalidx/recursiveClonecoordination with a context-based accordion using stable ids.What changes
onVisibleChange+ controlled mode. A group is controlled whenvisibleandonVisibleChangeare provided together. The toggler then only requests a change and the group follows the prop, so a rejected collapse keeps it open—no desync. Used on its own,visiblestill acts as the default-open state and the group stays fully toggleable (backward compatible).useIdchains. Groups no longer rely onCSidebarNavcloning children to inject a positional dottedidx. Each group derives a stable id chain through React context, so coordination works through wrappers, fragments andChildren.map, and the duplicated logic inCSidebarNavis gone.onVisibleChange(the parent decides—collapse it, or keep it open if it must stay expanded).CNavLinknow observes the link'sclasswith aMutationObserver, so client-side navigation reopens the active section. The previous effect missed route changes that didn't changeclassName.aria-expanded.Notes
CNavGroupno longer takes the internalidxprop, andCSidebarNavContextchanges shape (both were internal, not part of the public API).visibleresolve to a single open branch.Docs
Adds a "Controlled navigation group" example to the Sidebar page and refreshes the main sidebar example.
Tests
CNavGroup.spec.tsxcovers uncontrolled toggling, controlled reject, accordion close on sibling open (accept vs. locked), nested default-open groups staying independently toggleable, the toggler render function, and active-link auto-open.