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/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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 import type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';
 
 export type SearchBoxSlots = InputSlots & {
@@ -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 = DistributiveOmit<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 = DistributiveOmit<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/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,29 @@ 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);
+
+  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 +94,6 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
     {
       type: 'search',
       disabled,
-      size,
       value: internalValue,
       root: slot.always<ExtractSlotProps<SearchBoxSlots['root']>>(
         {
@@ -110,7 +127,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
@@ -129,7 +146,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

@@ -6,3 +6,7 @@ export {
   useSearchBox_unstable,
 } from './SearchBox';
 export type { SearchBoxChangeEvent, SearchBoxProps, SearchBoxSlots, SearchBoxState } from './SearchBox';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useSearchBoxBase_unstable } from './SearchBox';
+// export type { SearchBoxBaseProps, SearchBoxBaseState } from './SearchBox';