Skip to content

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

Open
dmytrokirpa wants to merge 4 commits into
masterfrom
feat/react-nav-base-hooks
Open

feat(react-nav): add useNavBase_unstable hook#35812
dmytrokirpa wants to merge 4 commits into
masterfrom
feat/react-nav-base-hooks

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

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
Copy link
Copy Markdown

github-actions Bot commented Mar 5, 2026

Pull request demo site: URL

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Mar 5, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.294 MB
325.186 kB
1.294 MB
325.274 kB
435 B
88 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
67.61 kB
19.536 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
227.925 kB
68.478 kB
react-components
react-components: FluentProvider & webLightTheme
40.806 kB
13.616 kB
react-portal-compat
PortalCompatProvider
5.567 kB
2.237 kB
react-timepicker-compat
TimePicker
105.613 kB
35.351 kB
🤖 This report was generated against 7d754a92091660adf575d533e3f7c6d3224ec81a

@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
…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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
…emBase_unstable

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant