Skip to content

feat(react-nav): add useNavBase_unstable hook#35812

Merged
dmytrokirpa merged 6 commits into
masterfrom
feat/react-nav-base-hooks
May 19, 2026
Merged

feat(react-nav): add useNavBase_unstable hook#35812
dmytrokirpa merged 6 commits into
masterfrom
feat/react-nav-base-hooks

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Mar 3, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Stack

This PR is part of a 3-PR stack. Review and merge bottom-up:

  1. test(react-nav): add hook-level regression tests for react-nav components #36212 — test(react-nav): hook-level regression tests (base: master) — merge first
  2. 👉 feat(react-nav): add useNavBase_unstable hook #35812 — feat(react-nav): expose base hooks (base: test(react-nav): add hook-level regression tests for react-nav components #36212) — depends on test(react-nav): add hook-level regression tests for react-nav components #36212
  3. feat(react-headless-components-preview): add Nav component and stories #36213 — feat(react-headless-components-preview): add Nav component (base: feat(react-nav): add useNavBase_unstable hook #35812) — depends on this PR

Summary

  • Adds useNavBase_unstable hook to react-nav that extracts pure Nav logic (selection state, category toggling, nav item registration) without the density design prop
  • Adds useNavCategoryBase_unstable hook for NavCategory (manages open/closed state from context) — no design props to omit, mirrors existing hook
  • Adds useNavCategoryItemBase_unstable hook for NavCategoryItem that excludes the density design prop while preserving ARIA attributes (aria-current, aria-expanded) and keyboard event handling
  • Adds corresponding NavBaseProps, NavBaseState, NavCategoryBaseProps, NavCategoryBaseState, NavCategoryItemBaseProps, NavCategoryItemBaseState types using DistributiveOmit
  • Refactors useNav_unstable and useNavCategoryItem_unstable to delegate to their base hooks, then add design props
  • Exports all new types and hooks from the package index.ts

Design props excluded

Component Omitted props
Nav density
NavCategory (none — no design props)
NavCategoryItem density

Test plan

  • TypeScript compiles without errors (npx tsc -p packages/react-components/react-nav/library/tsconfig.json --noEmit)
  • Existing Nav functionality is unchanged (base hooks delegate correctly)
  • New hooks are exported from the package index

🤖 Generated with Claude Code

@github-actions github-actions Bot added the CI label Mar 3, 2026
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 10:51
@dmytrokirpa dmytrokirpa force-pushed the feat/react-nav-base-hooks branch from b41fe5f to fe061dc Compare March 5, 2026 10:51
@github-actions github-actions Bot removed the CI label Mar 5, 2026
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

Pull request demo site: URL

github-actions[bot]
github-actions Bot reviewed Mar 5, 2026
View reviewed changes
Comment thread change/@fluentui-react-nav-05dea2ef-4c82-471b-a48e-79a084526d82.json
@github-actions

github-actions Bot commented Mar 5, 2026 •
edited
Loading

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library		 1.293 MB
324.749 kB		 1.293 MB
324.827 kB		 435 B
78 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme		 66.328 kB
19.02 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 226.773 kB
68.079 kB
react-components
react-components: FluentProvider & webLightTheme		 39.525 kB
13.113 kB
react-portal-compat
PortalCompatProvider		 5.567 kB
2.237 kB
react-timepicker-compat
TimePicker		 104.461 kB
34.894 kB
🤖 This report was generated against 1031517ee91349057a25fecb81eaab5794651d87

@dmytrokirpa dmytrokirpa mentioned this pull request Mar 23, 2026
Open
1 task
@dmytrokirpa dmytrokirpa self-assigned this Apr 5, 2026
@dmytrokirpa dmytrokirpa force-pushed the feat/react-nav-base-hooks branch from 00bb8ba to 3ff4cfc Compare May 16, 2026 14:22
@dmytrokirpa dmytrokirpa changed the base branch from master to test/react-nav-base-hook-tests May 16, 2026 14:23
@dmytrokirpa dmytrokirpa force-pushed the test/react-nav-base-hook-tests branch from 5f7f6c8 to 8780ef8 Compare May 16, 2026 19:23
@dmytrokirpa dmytrokirpa force-pushed the feat/react-nav-base-hooks branch from 3ff4cfc to f2ca767 Compare May 16, 2026 19:23
dmytrokirpa and others added 2 commits May 16, 2026 21:55
@dmytrokirpa @claude
test(react-nav): add hook-level regression tests for react-nav compon…
4288c01 
…ents

Add hook-level tests covering useNavBase_unstable, useAppItemBase_unstable,
useAppItemStaticBase_unstable, useNavCategoryItemBase_unstable,
useNavItemBase_unstable, useNavSubItemBase_unstable, and
useNavSubItemGroupBase_unstable to lock in current behavior before refactor.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@dmytrokirpa @claude
feat(react-nav): add more base hooks and expose them
00ced3c 
Add useNavBase_unstable, useAppItemBase_unstable, useAppItemStaticBase_unstable,
useNavCategoryItemBase_unstable, useNavItemBase_unstable, useNavSubItemBase_unstable,
and useNavSubItemGroupBase_unstable, exposing the behavior layer of react-nav
without styling. Also exports the related Base prop, slot, and state types.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@dmytrokirpa dmytrokirpa force-pushed the test/react-nav-base-hook-tests branch from 8780ef8 to 4288c01 Compare May 16, 2026 19:56
@dmytrokirpa dmytrokirpa force-pushed the feat/react-nav-base-hooks branch from f2ca767 to 00ced3c Compare May 16, 2026 19:56
This was referenced May 17, 2026
Merged
Merged
@dmytrokirpa @claude
fix(react-nav): add hyphen and description to @param tags on useNavIt…
fece79a 
…emBase_unstable

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
@dmytrokirpa dmytrokirpa requested a review from Hotell May 18, 2026 09:30
@dmytrokirpa dmytrokirpa marked this pull request as ready for review May 18, 2026 12:42
@dmytrokirpa dmytrokirpa requested review from a team and mainframev as code owners May 18, 2026 12:42
@dmytrokirpa dmytrokirpa changed the base branch from test/react-nav-base-hook-tests to master May 18, 2026 12:42
mainframev
mainframev approved these changes May 19, 2026
View reviewed changes

@mainframev mainframev left a comment •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, two non-blocking questions

Comment thread packages/react-components/react-nav/library/src/components/Nav/useNav.ts Outdated
Comment thread packages/react-components/react-nav/library/src/components/Nav/useNav.ts Outdated
@dmytrokirpa dmytrokirpa merged commit c16cd87 into master May 19, 2026
15 checks passed
@dmytrokirpa dmytrokirpa deleted the feat/react-nav-base-hooks branch May 19, 2026 18:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@github-actions github-actions[bot] github-actions[bot] left review comments
@mainframev mainframev mainframev approved these changes
@Hotell Hotell Awaiting requested review from Hotell

Assignees

@dmytrokirpa dmytrokirpa

Labels

Area: Build System PR: API Modified

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dmytrokirpa @mainframev