feat(react-progress): add useProgressBarBase_unstable hook

change/@fluentui-react-progress-58adfb89-e975-4924-a0aa-3b68033e956f.json

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

packages/react-components/react-progress/library/src/ProgressBar.ts

@@ -1,8 +1,15 @@
-export type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './components/ProgressBar/index';
+export type {
+  ProgressBarProps,
+  ProgressBarBaseProps,
+  ProgressBarSlots,
+  ProgressBarState,
+  ProgressBarBaseState,
+} from './components/ProgressBar/index';
 export {
   ProgressBar,
   progressBarClassNames,
   renderProgressBar_unstable,
   useProgressBarStyles_unstable,
   useProgressBar_unstable,
+  useProgressBarBase_unstable,
 } from './components/ProgressBar/index';

packages/react-components/react-progress/library/src/components/ProgressBar/ProgressBar.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';
 
 export type ProgressBarSlots = {
   /**
@@ -46,9 +46,19 @@ export type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> &
   color?: 'brand' | 'success' | 'warning' | 'error';
 };
 
+/**
+ * ProgressBar base props — excludes design props (shape, thickness, color).
+ */
+export type ProgressBarBaseProps = DistributiveOmit<ProgressBarProps, 'shape' | 'thickness' | 'color'>;
+
 /**
  * State used in rendering ProgressBar
  */
 export type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &
   Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &
   Pick<ProgressBarProps, 'value' | 'color'>;
+
+/**
+ * ProgressBar base state — excludes design props (shape, thickness, color).
+ */
+export type ProgressBarBaseState = DistributiveOmit<ProgressBarState, 'shape' | 'thickness' | 'color'>;

packages/react-components/react-progress/library/src/components/ProgressBar/index.ts

@@ -1,5 +1,11 @@
 export { ProgressBar } from './ProgressBar';
-export type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar.types';
+export type {
+  ProgressBarProps,
+  ProgressBarBaseProps,
+  ProgressBarSlots,
+  ProgressBarState,
+  ProgressBarBaseState,
+} from './ProgressBar.types';
 export { renderProgressBar_unstable } from './renderProgressBar';
-export { useProgressBar_unstable } from './useProgressBar';
+export { useProgressBar_unstable, useProgressBarBase_unstable } from './useProgressBar';
 export { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';

packages/react-components/react-progress/library/src/components/ProgressBar/useProgressBar.tsx

@@ -4,7 +4,12 @@ import * as React from 'react';
 import { useFieldContext_unstable } from '@fluentui/react-field';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { clampValue, clampMax } from '../../utils/index';
-import type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';
+import type {
+  ProgressBarBaseProps,
+  ProgressBarBaseState,
+  ProgressBarProps,
+  ProgressBarState,
+} from './ProgressBar.types';
 
 /**
  * Create the state required to render ProgressBar.
@@ -24,6 +29,31 @@ export const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<
     shape = 'rounded',
     thickness = 'medium',
   } = props;
+
+  const state = useProgressBarBase_unstable(props, ref);
+
+  return {
+    ...state,
+    color,
+    shape,
+    thickness,
+  };
+};
+
+/**
+ * Base hook for ProgressBar component. Manages state related to ARIA progressbar attributes
+ * (role, aria-valuemin, aria-valuemax, aria-valuenow) and field context integration —
+ * without design props (shape, thickness, color).
+ *
+ * @param props - props from this instance of ProgressBar (without shape, thickness, color)
+ * @param ref - reference to root HTMLElement of ProgressBar
+ */
+export const useProgressBarBase_unstable = (
+  props: ProgressBarBaseProps,
+  ref: React.Ref<HTMLElement>,
+): ProgressBarBaseState => {
+  const field = useFieldContext_unstable();
+
   const max = clampMax(props.max ?? 1);
   const value = clampValue(props.value, max);
 
@@ -49,16 +79,12 @@ export const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<
       .join(' ');
   }
   const bar = slot.always(props.bar, { elementType: 'div' });
-  const state: ProgressBarState = {
-    color,
+
+  return {
     max,
-    shape,
-    thickness,
     value,
     components: { root: 'div', bar: 'div' },
     root,
     bar,
   };
-
-  return state;
 };

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

@@ -6,3 +6,7 @@ export {
   useProgressBarStyles_unstable,
 } from './ProgressBar';
 export type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useProgressBarBase_unstable } from './ProgressBar';
+// export type { ProgressBarBaseProps, ProgressBarBaseState } from './ProgressBar';