feat(react-input): add useInputBase_unstable hook

change/@fluentui-react-input-e2a5a63e-40cf-40e8-a33f-b83b14c0058b.json

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

packages/react-components/react-input/library/src/components/Input/Input.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';
 
 export type InputSlots = {
   /**
@@ -106,11 +106,22 @@ export type InputProps = Omit<
     | 'week';
 };
 
+/**
+ * Input props without design-specific props (appearance, size).
+ * Use this when building a base input that is unstyled or uses a custom design system.
+ */
+export type InputBaseProps = DistributiveOmit<InputProps, 'appearance' | 'size'>;
+
 /**
  * State used in rendering Input.
  */
 export type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
 
+/**
+ * Input state without design-specific state (appearance, size).
+ */
+export type InputBaseState = DistributiveOmit<InputState, 'appearance' | 'size'>;
+
 /**
  * Data passed to the `onChange` callback when a user changes the input's value.
  */

packages/react-components/react-input/library/src/components/Input/index.ts

@@ -1,5 +1,5 @@
 export { Input } from './Input';
-export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';
+export type { InputBaseProps, InputBaseState, InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';
 export { renderInput_unstable } from './renderInput';
-export { useInput_unstable } from './useInput';
+export { useInput_unstable, useInputBase_unstable } from './useInput';
 export { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';

packages/react-components/react-input/library/src/components/Input/useInput.ts

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
-import type { InputProps, InputState } from './Input.types';
+import type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 
 /**
@@ -20,7 +20,7 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputEle
 
   const overrides = useOverrides();
 
-  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', onChange } = props;
+  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;
 
   if (
     process.env.NODE_ENV !== 'production' &&
@@ -33,6 +33,25 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputEle
     );
   }
 
+  const state = useInputBase_unstable(baseProps, ref);
+
+  return {
+    size,
+    appearance,
+    ...state,
+  };
+};
+
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @param props - User provided props to the Input component.
+ * @param ref - User provided ref to be passed to the Input component.
+ */
+export const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {
+  const { onChange } = props;
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
@@ -42,12 +61,10 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputEle
   const nativeProps = getPartitionedNativeProps({
     props,
     primarySlotTagName: 'input',
-    excludedPropNames: ['size', 'onChange', 'value', 'defaultValue'],
+    excludedPropNames: ['onChange', 'value', 'defaultValue'],
   });
 
-  const state: InputState = {
-    size,
-    appearance,
+  const state: InputBaseState = {
     components: {
       root: 'span',
       input: 'input',

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

@@ -1,2 +1,12 @@
-export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';
+export {
+  Input,
+  inputClassNames,
+  renderInput_unstable,
+  useInputStyles_unstable,
+  useInput_unstable,
+} from './Input';
 export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useInputBase_unstable } from './Input';
+// export type { InputBaseProps, InputBaseState } from './Input';