feat(react-textarea): add useTextareaBase_unstable hook

change/@fluentui-react-textarea-6f25abb2-9d38-4df0-8088-c7fc02d8348a.json

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

packages/react-components/react-textarea/library/src/Textarea.ts

@@ -1,8 +1,16 @@
-export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './components/Textarea/index';
+export type {
+  TextareaBaseProps,
+  TextareaBaseState,
+  TextareaOnChangeData,
+  TextareaProps,
+  TextareaSlots,
+  TextareaState,
+} from './components/Textarea/index';
 export {
   Textarea,
   renderTextarea_unstable,
   textareaClassNames,
   useTextareaStyles_unstable,
   useTextarea_unstable,
+  useTextareaBase_unstable,
 } from './components/Textarea/index';

packages/react-components/react-textarea/library/src/components/Textarea/Textarea.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 TextareaSlots = {
   /**
@@ -63,12 +63,23 @@ export type TextareaProps = Omit<
   value?: string;
 };
 
+/**
+ * Textarea base props, excluding design-related props like appearance and size.
+ * Note: resize is kept as it is a structural/behavioral prop.
+ */
+export type TextareaBaseProps = DistributiveOmit<TextareaProps, 'appearance' | 'size'>;
+
 /**
  * State used in rendering Textarea
  */
 export type TextareaState = ComponentState<TextareaSlots> &
   Required<Pick<TextareaProps, 'appearance' | 'resize' | 'size'>>;
 
+/**
+ * Textarea base state, excluding design-related state like appearance and size.
+ */
+export type TextareaBaseState = DistributiveOmit<TextareaState, 'appearance' | 'size'>;
+
 /**
  * Data passed to the `onChange` callback when the textarea's value changes.
  */

packages/react-components/react-textarea/library/src/components/Textarea/index.ts

@@ -1,5 +1,12 @@
 export { Textarea } from './Textarea';
-export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea.types';
+export type {
+  TextareaBaseProps,
+  TextareaBaseState,
+  TextareaOnChangeData,
+  TextareaProps,
+  TextareaSlots,
+  TextareaState,
+} from './Textarea.types';
 export { renderTextarea_unstable } from './renderTextarea';
-export { useTextarea_unstable } from './useTextarea';
+export { useTextarea_unstable, useTextareaBase_unstable } from './useTextarea';
 export { textareaClassNames, useTextareaStyles_unstable } from './useTextareaStyles.styles';

packages/react-components/react-textarea/library/src/components/Textarea/useTextarea.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 { TextareaProps, TextareaState } from './Textarea.types';
+import type { TextareaBaseProps, TextareaBaseState, TextareaProps, TextareaState } from './Textarea.types';
 import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
 
 /**
@@ -16,17 +16,9 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param ref - reference to root HTMLElement of Textarea
  */
 export const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>): TextareaState => {
-  // Merge props from surrounding <Field>, if any
-  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
-
   const overrides = useOverrides();
 
-  const {
-    size = 'medium',
-    appearance = overrides.inputDefaultAppearance ?? 'outline',
-    resize = 'none',
-    onChange,
-  } = props;
+  const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;
 
   if (
     process.env.NODE_ENV !== 'production' &&
@@ -39,6 +31,31 @@ export const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTe
     );
   }
 
+  const baseState = useTextareaBase_unstable(baseProps, ref);
+
+  return {
+    ...baseState,
+    size,
+    appearance,
+  };
+};
+
+/**
+ * Base hook for Textarea component, which manages state related to slots structure and
+ * controlled/uncontrolled value state.
+ *
+ * @param props - User provided props to the Textarea component.
+ * @param ref - User provided ref to be passed to the Textarea component.
+ */
+export const useTextareaBase_unstable = (
+  props: TextareaBaseProps,
+  ref?: React.Ref<HTMLTextAreaElement>,
+): TextareaBaseState => {
+  // Merge props from surrounding <Field>, if any
+  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });
+
+  const { resize = 'none', onChange } = props;
+
   const [value, setValue] = useControllableState({
     state: props.value,
     defaultState: props.defaultValue,
@@ -51,9 +68,7 @@ export const useTextarea_unstable = (props: TextareaProps, ref: React.Ref<HTMLTe
     excludedPropNames: ['onChange', 'value', 'defaultValue'],
   });
 
-  const state: TextareaState = {
-    size,
-    appearance,
+  const state: TextareaBaseState = {
     resize,
     components: {
       root: 'span',

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

@@ -5,4 +5,13 @@ export {
   useTextareaStyles_unstable,
   useTextarea_unstable,
 } from './Textarea';
-export type { TextareaOnChangeData, TextareaProps, TextareaSlots, TextareaState } from './Textarea';
+export type {
+  TextareaOnChangeData,
+  TextareaProps,
+  TextareaSlots,
+  TextareaState,
+} from './Textarea';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useTextareaBase_unstable } from './Textarea';
+// export type { TextareaBaseProps, TextareaBaseState } from './Textarea';