Skip to content

feat(react-search): add useSearchBoxBase_unstable hook#35825

Merged
dmytrokirpa merged 7 commits into
masterfrom
feat/react-search-base-hooks
Mar 23, 2026
Merged

feat(react-search): add useSearchBoxBase_unstable hook#35825
dmytrokirpa merged 7 commits into
masterfrom
feat/react-search-base-hooks

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Adds useSearchBoxBase_unstable hook that extracts the core SearchBox logic without design props (size, appearance)
  • Adds SearchBoxBaseProps and SearchBoxBaseState types using DistributiveOmit
  • Refactors useSearchBox_unstable to delegate to the base hook, then add size and appearance
  • Exports new types and hook from component index.ts, barrel file, and package index.ts

What the base hook manages

  • Controlled/uncontrolled value state (useControllableState)
  • Focus tracking (focused state, onFocus/onBlur callbacks via searchBoxRootRef)
  • Dismiss button click handling (clears value, fires onChange, restores focus)
  • type="search" input via useInput_unstable
  • Search icon slot (contentBefore with SearchRegular default)
  • Dismiss icon slot with role="button" and aria-label="clear"
  • Content after slot

Design props excluded from base hook

Prop Description
size 'small' / 'medium' / 'large' input size
appearance 'outline' / 'underline' / 'filled-darker' / etc.

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 12:10
Implements useSearchBoxBase_unstable hook for the SearchBox component that extracts
pure component logic (controlled/uncontrolled value state, focus tracking, dismiss
button click handling, search icon slot, type=search input) without design props
(size, appearance). The styled hook useSearchBox_unstable now delegates to the base
hook and adds size and appearance.

Adds SearchBoxBaseProps and SearchBoxBaseState types using DistributiveOmit, omitting
appearance and size from SearchBoxProps/SearchBoxState.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@dmytrokirpa dmytrokirpa force-pushed the feat/react-search-base-hooks branch from 6e2444a to 9e468a9 Compare March 5, 2026 11:10
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 11:10
@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

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.296 MB
323.717 kB
1.296 MB
323.827 kB
215 B
110 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.62 kB
68.716 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against 4267b29a575d6480c73f4700dbb5b2b0626addb2

@dmytrokirpa dmytrokirpa enabled auto-merge (squash) March 23, 2026 14:14
@dmytrokirpa dmytrokirpa merged commit 17eeda5 into master Mar 23, 2026
15 checks passed
tudorpopams pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026
@dmytrokirpa dmytrokirpa deleted the feat/react-search-base-hooks branch May 23, 2026 10:31
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.

2 participants