feat(react-search): add useSearchBoxBase_unstable hook

change/@fluentui-react-search-a97ad746-5a21-4b09-b830-5532b7bd3ca2.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks for SearchBox",
+  "packageName": "@fluentui/react-search",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-search/library/etc/react-search.api.md

@@ -17,11 +17,17 @@ import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
-export const renderSearchBox_unstable: (state: SearchBoxState) => JSXElement;
+export const renderSearchBox_unstable: (state: SearchBoxBaseState) => JSXElement;
 
 // @public
 export const SearchBox: ForwardRefComponent<SearchBoxProps>;
 
+// @public
+export type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;
+
+// @public
+export type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;
+
 // @public
 export type SearchBoxChangeEvent = React_2.ChangeEvent<HTMLInputElement> | React_2.MouseEvent<HTMLSpanElement>;
 
@@ -46,6 +52,9 @@ export type SearchBoxState = ComponentState<SearchBoxSlots> & InputState & Requi
 // @public
 export const useSearchBox_unstable: (props: SearchBoxProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxState;
 
+// @public
+export const useSearchBoxBase_unstable: (props: SearchBoxBaseProps, ref: React_2.Ref<HTMLInputElement>) => SearchBoxBaseState;
+
 // @public
 export const useSearchBoxStyles_unstable: (state: SearchBoxState) => SearchBoxState;
 

packages/react-components/react-search/library/src/SearchBox.ts

@@ -1,13 +1,16 @@
 export type {
   SearchBoxChangeEvent,
   SearchBoxProps,
+  SearchBoxBaseProps,
   SearchBoxSlots,
   SearchBoxState,
+  SearchBoxBaseState,
 } from './components/SearchBox/index';
 export {
   SearchBox,
   renderSearchBox_unstable,
   searchBoxClassNames,
   useSearchBoxStyles_unstable,
   useSearchBox_unstable,
+  useSearchBoxBase_unstable,
 } from './components/SearchBox/index';

packages/react-components/react-search/library/src/components/SearchBox/SearchBox.types.ts

@@ -26,6 +26,11 @@ export type SearchBoxProps = Omit<
     onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;
   };
 
+/**
+ * SearchBox base props — excludes design props (appearance, size).
+ */
+export type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;
+
 /**
  * State used in rendering SearchBox
  */
@@ -36,5 +41,10 @@ export type SearchBoxState = ComponentState<SearchBoxSlots> &
     focused: boolean;
   };
 
+/**
+ * SearchBox base state — excludes design props (appearance, size).
+ */
+export type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;
+
 /** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */
 export type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;

packages/react-components/react-search/library/src/components/SearchBox/index.ts

@@ -1,5 +1,12 @@
 export { SearchBox } from './SearchBox';
-export type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox.types';
+export type {
+  SearchBoxChangeEvent,
+  SearchBoxProps,
+  SearchBoxBaseProps,
+  SearchBoxSlots,
+  SearchBoxState,
+  SearchBoxBaseState,
+} from './SearchBox.types';
 export { renderSearchBox_unstable } from './renderSearchBox';
-export { useSearchBox_unstable } from './useSearchBox';
+export { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';
 export { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';

packages/react-components/react-search/library/src/components/SearchBox/renderSearchBox.tsx

@@ -3,12 +3,12 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { SearchBoxState, SearchBoxSlots } from './SearchBox.types';
+import type { SearchBoxBaseState, SearchBoxSlots } from './SearchBox.types';
 
 /**
  * Render the final JSX of SearchBox
  */
-export const renderSearchBox_unstable = (state: SearchBoxState): JSXElement => {
+export const renderSearchBox_unstable = (state: SearchBoxBaseState): JSXElement => {
   assertSlots<SearchBoxSlots>(state);
 
   return (

packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx

@@ -12,7 +12,13 @@ import {
 import { useInput_unstable } from '@fluentui/react-input';
 import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
-import type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox.types';
+import type {
+  SearchBoxBaseProps,
+  SearchBoxBaseState,
+  SearchBoxSlots,
+  SearchBoxProps,
+  SearchBoxState,
+} from './SearchBox.types';
 
 /**
  * Create the state required to render SearchBox.
@@ -24,17 +30,37 @@ import type { SearchBoxSlots, SearchBoxProps, SearchBoxState } from './SearchBox
  * @param ref - reference to root HTMLElement of SearchBox
  */
 export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTMLInputElement>): SearchBoxState => {
-  const {
-    size = 'medium',
-    disabled = false,
-    root,
-    contentBefore,
-    dismiss,
-    contentAfter,
-    value,
-    defaultValue,
-    ...inputProps
-  } = props;
+  const { size = 'medium', appearance = 'outline', ...baseProps } = props;
+  const state = useSearchBoxBase_unstable(baseProps, ref);
+
+  if (state.contentBefore) {
+    state.contentBefore.children ??= <SearchRegular />;
+  }
+
+  if (state.dismiss) {
+    state.dismiss.children ??= <DismissRegular />;
+  }
+
+  return {
+    ...state,
+    size,
+    appearance,
+  };
+};
+
+/**
+ * Base hook for SearchBox component. Manages state related to controlled/uncontrolled
+ * value, focus tracking, dismiss button click handling, search icon slot, and
+ * input type="search" — without design props (size, appearance).
+ *
+ * @param props - props from this instance of SearchBox (without size, appearance)
+ * @param ref - reference to root HTMLElement of SearchBox
+ */
+export const useSearchBoxBase_unstable = (
+  props: SearchBoxBaseProps,
+  ref: React.Ref<HTMLInputElement>,
+): SearchBoxBaseState => {
+  const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;
 
   const searchBoxRootRef = React.useRef<HTMLDivElement>(null);
   const searchBoxRef = React.useRef<HTMLInputElement>(null);
@@ -76,7 +102,6 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     {
       type: 'search',
       disabled,
-      size,
       value: internalValue,
       root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(
         {
@@ -91,9 +116,6 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
       ),
       contentBefore: slot.optional(contentBefore, {
         renderByDefault: true,
-        defaultProps: {
-          children: <SearchRegular />,
-        },
         elementType: 'span',
       }),
       contentAfter: slot.optional(contentAfter, {
@@ -110,7 +132,7 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     useMergedRefs(searchBoxRef, ref),
   );
 
-  const state: SearchBoxState = {
+  const state: SearchBoxBaseState = {
     ...inputState,
     components: {
       // eslint-disable-next-line @typescript-eslint/no-deprecated
@@ -119,7 +141,6 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     },
     dismiss: slot.optional(dismiss, {
       defaultProps: {
-        children: <DismissRegular />,
         role: 'button',
         'aria-label': 'clear',
         tabIndex: -1,
@@ -129,7 +150,6 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     }),
     disabled,
     focused,
-    size,
   };
 
   if (state.dismiss) {

packages/react-components/react-search/library/src/index.ts

@@ -4,5 +4,13 @@ export {
   searchBoxClassNames,
   useSearchBoxStyles_unstable,
   useSearchBox_unstable,
+  useSearchBoxBase_unstable,
+} from './SearchBox';
+export type {
+  SearchBoxChangeEvent,
+  SearchBoxProps,
+  SearchBoxSlots,
+  SearchBoxState,
+  SearchBoxBaseProps,
+  SearchBoxBaseState,
 } from './SearchBox';
-export type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox';