feat(react-spinner): add useSpinnerBase_unstable hook

change/@fluentui-react-spinner-0b1986e9-6bb9-4988-97a9-5f12c359a967.json

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

packages/react-components/react-spinner/library/src/Spinner.ts

@@ -1,8 +1,15 @@
-export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';
+export type {
+  SpinnerBaseProps,
+  SpinnerBaseState,
+  SpinnerProps,
+  SpinnerSlots,
+  SpinnerState,
+} from './components/Spinner/index';
 export {
   Spinner,
   renderSpinner_unstable,
   spinnerClassNames,
   useSpinnerStyles_unstable,
   useSpinner_unstable,
+  useSpinnerBase_unstable,
 } from './components/Spinner/index';

packages/react-components/react-spinner/library/src/components/Spinner/Spinner.types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 
 export type SpinnerSlots = {
@@ -53,6 +53,11 @@ export type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
   size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
 };
 
+/**
+ * Spinner base props, excluding design-related props like appearance and size.
+ */
+export type SpinnerBaseProps = DistributiveOmit<SpinnerProps, 'appearance' | 'size'>;
+
 /**
  * State used in rendering Spinner
  */
@@ -63,3 +68,8 @@ export type SpinnerState = ComponentState<SpinnerSlots> &
      */
     shouldRenderSpinner: boolean;
   };
+
+/**
+ * Spinner base state, excluding design-related state like appearance and size.
+ */
+export type SpinnerBaseState = DistributiveOmit<SpinnerState, 'appearance' | 'size'>;

packages/react-components/react-spinner/library/src/components/Spinner/index.ts

@@ -1,5 +1,5 @@
 export { Spinner } from './Spinner';
-export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';
+export type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';
 export { renderSpinner_unstable } from './renderSpinner';
-export { useSpinner_unstable } from './useSpinner';
+export { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';
 export { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';

packages/react-components/react-spinner/library/src/components/Spinner/useSpinner.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';
-import type { SpinnerProps, SpinnerState } from './Spinner.types';
+import type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerState } from './Spinner.types';
 import { Label } from '@fluentui/react-label';
 import { useSpinnerContext } from '../../contexts/SpinnerContext';
 
@@ -16,25 +16,39 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
  * @param ref - reference to root HTMLElement of Spinner
  */
 export const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {
-  // Props
   const { size: contextSize } = useSpinnerContext();
-  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;
+  const { appearance = 'primary', size = contextSize ?? 'medium', ...baseProps } = props;
+
+  const baseState = useSpinnerBase_unstable(baseProps, ref);
+
+  return {
+    ...baseState,
+    appearance,
+    size,
+  };
+};
+
+/**
+ * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,
+ * and delay-based visibility logic.
+ *
+ * @param props - User provided props to the Spinner component.
+ * @param ref - User provided ref to be passed to the Spinner component.
+ */
+export const useSpinnerBase_unstable = (props: SpinnerBaseProps, ref?: React.Ref<HTMLElement>): SpinnerBaseState => {
+  const { delay = 0, labelPosition = 'after' } = props;
   const baseId = useId('spinner');
 
   const { role = 'progressbar', ...rest } = props;
   const nativeRoot = slot.always(
-    getIntrinsicElementProps(
-      'div',
-      {
-        // FIXME:
-        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: ref as React.Ref<HTMLDivElement>,
-        role,
-        ...rest,
-      },
-      ['size'],
-    ),
+    getIntrinsicElementProps('div', {
+      // FIXME:
+      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+      // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+      ref: ref as React.Ref<HTMLDivElement>,
+      role,
+      ...rest,
+    }),
     {
       elementType: 'div',
     },
@@ -64,11 +78,9 @@ export const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElem
   if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
     nativeRoot['aria-labelledby'] = labelShorthand.id;
   }
-  const state: SpinnerState = {
-    appearance,
+  const state: SpinnerBaseState = {
     delay,
     labelPosition,
-    size,
     shouldRenderSpinner: !delay || isShownAfterDelay,
     components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },
     root: nativeRoot,

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

@@ -8,3 +8,7 @@ export {
 export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';
 export { SpinnerContextProvider, useSpinnerContext } from './contexts/index';
 export type { SpinnerContextValue } from './contexts/index';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useSpinnerBase_unstable } from './Spinner';
+// export type { SpinnerBaseProps, SpinnerBaseState } from './Spinner';