@fluentui/react-progress 9.4.17 → 9.5.0

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Mon, 30 Mar 2026 14:35:49 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.5.0)
+
+Wed, 01 Apr 2026 15:50:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.17..@fluentui/react-progress_v9.5.0)
+
+### Minor changes
+
+- feat: add base hooks for ProgressBar ([PR #35817](https://github.com/microsoft/fluentui/pull/35817) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
 ## [9.4.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.4.17)
 
-Mon, 30 Mar 2026 14:35:49 GMT 
+Mon, 30 Mar 2026 14:37:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.4.16..@fluentui/react-progress_v9.4.17)
 
 ### Patches

package/dist/index.d.ts

@@ -12,6 +12,16 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
 
+/**
+ * ProgressBar base props — excludes design props (shape, thickness, color).
+ */
+export declare type ProgressBarBaseProps = Omit<ProgressBarProps, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;
+
+/**
+ * ProgressBar base state — excludes design props (shape, thickness, color).
+ */
+export declare type ProgressBarBaseState = Omit<ProgressBarState, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;
+
 export declare const progressBarClassNames: SlotClassNames<Omit<ProgressBarSlots, 'indeterminateMotion'>>;
 
 /**
@@ -71,7 +81,7 @@ export declare type ProgressBarState = ComponentState<Required<ProgressBarSlots>
 /**
  * Render the final JSX of ProgressBar
  */
-export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSXElement;
+export declare const renderProgressBar_unstable: (state: ProgressBarBaseState) => JSXElement;
 
 /**
  * Create the state required to render ProgressBar.
@@ -84,6 +94,16 @@ export declare const renderProgressBar_unstable: (state: ProgressBarState) => JS
  */
 export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
 
+/**
+ * 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 declare const useProgressBarBase_unstable: (props: ProgressBarBaseProps, ref: React_2.Ref<HTMLElement>) => ProgressBarBaseState;
+
 /**
  * Apply styling to the ProgressBar slots based on the state
  */

package/lib/ProgressBar.js

@@ -1 +1 @@
-export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBarStyles_unstable, useProgressBar_unstable } from './components/ProgressBar/index';
+export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBarStyles_unstable, useProgressBar_unstable, useProgressBarBase_unstable } from './components/ProgressBar/index';

package/lib/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ProgressBar.ts"],"sourcesContent":["export type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './components/ProgressBar/index';\nexport {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBar_unstable,\n} from './components/ProgressBar/index';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBarStyles_unstable","useProgressBar_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}
+{"version":3,"sources":["../src/ProgressBar.ts"],"sourcesContent":["export type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './components/ProgressBar/index';\nexport {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBar_unstable,\n  useProgressBarBase_unstable,\n} from './components/ProgressBar/index';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBarStyles_unstable","useProgressBar_unstable","useProgressBarBase_unstable"],"mappings":"AAOA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,EACvBC,2BAA2B,QACtB,iCAAiC"}

package/lib/components/ProgressBar/ProgressBar.types.js

@@ -1,3 +1,3 @@
 /**
- * State used in rendering ProgressBar
+ * ProgressBar base state — excludes design props (shape, thickness, color).
  */ export { };

package/lib/components/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAqDA;;CAEC,GACD,WAE4C"}
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * ProgressBar base props — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseProps = Omit<ProgressBarProps, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n\n/**\n * ProgressBar base state — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseState = Omit<ProgressBarState, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n"],"names":[],"mappings":"AAiEA;;CAEC,GACD,WAAmH"}

package/lib/components/ProgressBar/index.js

@@ -1,4 +1,4 @@
 export { ProgressBar } from './ProgressBar';
 export { renderProgressBar_unstable } from './renderProgressBar';
-export { useProgressBar_unstable } from './useProgressBar';
+export { useProgressBar_unstable, useProgressBarBase_unstable } from './useProgressBar';
 export { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';

package/lib/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/index.ts"],"sourcesContent":["export { ProgressBar } from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar.types';\nexport { renderProgressBar_unstable } from './renderProgressBar';\nexport { useProgressBar_unstable } from './useProgressBar';\nexport { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\n"],"names":["ProgressBar","renderProgressBar_unstable","useProgressBar_unstable","progressBarClassNames","useProgressBarStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/ProgressBar/index.ts"],"sourcesContent":["export { ProgressBar } from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nexport { renderProgressBar_unstable } from './renderProgressBar';\nexport { useProgressBar_unstable, useProgressBarBase_unstable } from './useProgressBar';\nexport { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\n"],"names":["ProgressBar","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarBase_unstable","progressBarClassNames","useProgressBarStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAQ5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,mBAAmB;AACxF,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

package/lib/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBACE,KAACA,MAAMC,IAAI;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,iBACxB,KAACH,MAAMG,mBAAmB;sBACxB,cAAA,KAACH,MAAME,GAAG;2BAGZ,KAACF,MAAME,GAAG,KACZ;;AAGR,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarBaseState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarBaseState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAC9B,qBACE,KAACA,MAAMC,IAAI;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,iBACxB,KAACH,MAAMG,mBAAmB;sBACxB,cAAA,KAACH,MAAME,GAAG;2BAGZ,KAACF,MAAME,GAAG,KACZ;;AAGR,EAAE"}

package/lib/components/ProgressBar/useProgressBar.js

@@ -16,7 +16,28 @@ import { ProgressBarIndeterminateMotion } from './progressBarMotions';
  */ export const useProgressBar_unstable = (props, ref)=>{
     const field = useFieldContext_unstable();
     const fieldState = field === null || field === void 0 ? void 0 : field.validationState;
-    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium' } = props;
+    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium', indeterminateMotion, ...baseProps } = props;
+    const state = useProgressBarBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        color,
+        shape,
+        thickness,
+        indeterminateMotion: state.value === undefined ? motionSlot(indeterminateMotion, {
+            elementType: ProgressBarIndeterminateMotion,
+            defaultProps: {}
+        }) : undefined
+    };
+};
+/**
+ * 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, ref)=>{
+    const field = useFieldContext_unstable();
     var _props_max;
     const max = clampMax((_props_max = props.max) !== null && _props_max !== void 0 ? _props_max : 1);
     const value = clampValue(props.value, max);
@@ -45,11 +66,8 @@ import { ProgressBarIndeterminateMotion } from './progressBarMotions';
     const bar = slot.always(props.bar, {
         elementType: 'div'
     });
-    const state = {
-        color,
+    return {
         max,
-        shape,
-        thickness,
         value,
         components: {
             root: 'div',
@@ -57,11 +75,6 @@ import { ProgressBarIndeterminateMotion } from './progressBarMotions';
             indeterminateMotion: ProgressBarIndeterminateMotion
         },
         root,
-        bar,
-        indeterminateMotion: value === undefined ? motionSlot(props.indeterminateMotion, {
-            elementType: ProgressBarIndeterminateMotion,
-            defaultProps: {}
-        }) : undefined
+        bar
     };
-    return state;
 };

package/lib/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n    indeterminateMotion:\n      value === undefined\n        ? motionSlot(props.indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components","indeterminateMotion","defaultProps"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;AAEzD,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQV;IACd,MAAMW,aAAaD,kBAAAA,4BAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,MAAMX,SAASG,CAAAA,aAAAA,MAAMQ,GAAG,cAATR,wBAAAA,aAAa;IAClC,MAAMS,QAAQb,WAAWI,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOf,KAAKgB,MAAM,CACtBjB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,kBAAAA,4BAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAM,AAAD,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,kBAAAA,4BAAAA,MAAOc,mBAAmB;YAAEd,kBAAAA,4BAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM1B,KAAKgB,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;YAAOG,qBAAqB1B;QAA+B;QAC3FY;QACAW;QACAG,qBACEf,UAAUI,YACNpB,WAAWO,MAAMwB,mBAAmB,EAAE;YACpCT,aAAajB;YACb2B,cAAc,CAAC;QACjB,KACAZ;IACR;IAEA,OAAOS;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type {\n  ProgressBarProps,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n    indeterminateMotion,\n    ...baseProps\n  } = props;\n\n  const state = useProgressBarBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    color,\n    shape,\n    thickness,\n    indeterminateMotion:\n      state.value === undefined\n        ? motionSlot(indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n};\n\n/**\n * Base hook for ProgressBar component. Manages state related to ARIA progressbar attributes\n * (role, aria-valuemin, aria-valuemax, aria-valuenow) and field context integration —\n * without design props (shape, thickness, color).\n *\n * @param props - props from this instance of ProgressBar (without shape, thickness, color)\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBarBase_unstable = (\n  props: ProgressBarBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ProgressBarBaseState => {\n  const field = useFieldContext_unstable();\n\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n\n  return {\n    max,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n  };\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","indeterminateMotion","baseProps","state","useProgressBarBase_unstable","value","undefined","elementType","defaultProps","max","root","always","role","labelId","validationMessageId","hintId","filter","Boolean","join","bar","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,UAAU,EAAEC,QAAQ,QAAQ,oBAAoB;AAOzD,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,QAAQV;IACd,MAAMW,aAAaD,kBAAAA,4BAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACpBC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,QAAQC,4BAA4BF,WAAWR;IAErD,OAAO;QACL,GAAGS,KAAK;QACRL;QACAC;QACAC;QACAC,qBACEE,MAAME,KAAK,KAAKC,YACZpB,WAAWe,qBAAqB;YAC9BM,aAAahB;YACbiB,cAAc,CAAC;QACjB,KACAF;IACR;AACF,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMF,8BAA8B,CACzCX,OACAC;IAEA,MAAMC,QAAQV;QAEOQ;IAArB,MAAMgB,MAAMnB,SAASG,CAAAA,aAAAA,MAAMgB,GAAG,cAAThB,wBAAAA,aAAa;IAClC,MAAMY,QAAQhB,WAAWI,MAAMY,KAAK,EAAEI;IAEtC,MAAMC,OAAOtB,KAAKuB,MAAM,CACtBxB,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLkB,MAAM;QACN,iBAAiBP,UAAUC,YAAY,IAAIA;QAC3C,iBAAiBD,UAAUC,YAAYG,MAAMH;QAC7C,iBAAiBD;QACjB,iBAAiB,EAAEV,kBAAAA,4BAAAA,MAAOkB,OAAO;QACjC,GAAGpB,KAAK;IACV,IACA;QAAEc,aAAa;IAAM;IAEvB,IAAIZ,SAAUA,CAAAA,MAAMmB,mBAAmB,IAAInB,MAAMoB,MAAM,AAAD,GAAI;QACxD,oFAAoF;QACpFL,IAAI,CAAC,mBAAmB,GAAG;YAACf,kBAAAA,4BAAAA,MAAOmB,mBAAmB;YAAEnB,kBAAAA,4BAAAA,MAAOoB,MAAM;YAAEL,IAAI,CAAC,mBAAmB;SAAC,CAC7FM,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM/B,KAAKuB,MAAM,CAAClB,MAAM0B,GAAG,EAAE;QAAEZ,aAAa;IAAM;IAExD,OAAO;QACLE;QACAJ;QACAe,YAAY;YAAEV,MAAM;YAAOS,KAAK;YAAOlB,qBAAqBV;QAA+B;QAC3FmB;QACAS;IACF;AACF,EAAE"}

package/lib/index.js

@@ -1 +1 @@
-export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
+export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable, useProgressBarBase_unstable } from './ProgressBar';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBarBase_unstable,\n} from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","useProgressBarBase_unstable"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,EAC7BC,2BAA2B,QACtB,gBAAgB"}

package/lib-commonjs/ProgressBar.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderProgressBar_unstable: function() {
         return _index.renderProgressBar_unstable;
     },
+    useProgressBarBase_unstable: function() {
+        return _index.useProgressBarBase_unstable;
+    },
     useProgressBarStyles_unstable: function() {
         return _index.useProgressBarStyles_unstable;
     },

package/lib-commonjs/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ProgressBar.ts"],"sourcesContent":["export type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './components/ProgressBar/index';\nexport {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBar_unstable,\n} from './components/ProgressBar/index';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBarStyles_unstable","useProgressBar_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}
+{"version":3,"sources":["../src/ProgressBar.ts"],"sourcesContent":["export type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './components/ProgressBar/index';\nexport {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBar_unstable,\n  useProgressBarBase_unstable,\n} from './components/ProgressBar/index';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBarStyles_unstable","useProgressBar_unstable","useProgressBarBase_unstable"],"mappings":";;;;;;;;;;;;eAQEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAG1BG,kCAA2B;;;eAF3BF,oCAA6B;;;eAC7BC,8BAAuB;;;uBAElB,iCAAiC"}

package/lib-commonjs/components/ProgressBar/ProgressBar.types.js

@@ -1,5 +1,5 @@
 /**
- * State used in rendering ProgressBar
+ * ProgressBar base state — excludes design props (shape, thickness, color).
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"names":[],"mappings":"AAqDA;;CAEC,GACD,WAE4C"}
+{"version":3,"sources":["../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { MotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n  /**\n   * Motion slot for the indeterminate animation. Pass `null` to disable the animation.\n   */\n  indeterminateMotion?: Slot<MotionSlotProps>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * ProgressBar base props — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseProps = Omit<ProgressBarProps, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<Required<ProgressBarSlots>> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n\n/**\n * ProgressBar base state — excludes design props (shape, thickness, color).\n */\nexport type ProgressBarBaseState = Omit<ProgressBarState, 'shape' | 'thickness' | 'color' | 'indeterminateMotion'>;\n"],"names":[],"mappings":"AAiEA;;CAEC,GACD,WAAmH"}

package/lib-commonjs/components/ProgressBar/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderProgressBar_unstable: function() {
         return _renderProgressBar.renderProgressBar_unstable;
     },
+    useProgressBarBase_unstable: function() {
+        return _useProgressBar.useProgressBarBase_unstable;
+    },
     useProgressBarStyles_unstable: function() {
         return _useProgressBarStylesstyles.useProgressBarStyles_unstable;
     },

package/lib-commonjs/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/index.ts"],"sourcesContent":["export { ProgressBar } from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar.types';\nexport { renderProgressBar_unstable } from './renderProgressBar';\nexport { useProgressBar_unstable } from './useProgressBar';\nexport { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\n"],"names":["ProgressBar","renderProgressBar_unstable","useProgressBar_unstable","progressBarClassNames","useProgressBarStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}
+{"version":3,"sources":["../src/components/ProgressBar/index.ts"],"sourcesContent":["export { ProgressBar } from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarBaseProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nexport { renderProgressBar_unstable } from './renderProgressBar';\nexport { useProgressBar_unstable, useProgressBarBase_unstable } from './useProgressBar';\nexport { progressBarClassNames, useProgressBarStyles_unstable } from './useProgressBarStyles.styles';\n"],"names":["ProgressBar","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarBase_unstable","progressBarClassNames","useProgressBarStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAUXI,iDAAqB;;;eAFrBH,6CAA0B;;;eACDE,2CAA2B;;;eAC7BE,yDAA6B;;;eADpDH,uCAAuB;;;6BATJ,gBAAgB;mCAQD,sBAAsB;gCACI,mBAAmB;4CACnB,gCAAgC"}

package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,GAAA,WAAA,OACxB,eAAA,EAACH,MAAMG,mBAAmB,EAAA;sBACxB,WAAA,OAAA,eAAA,EAACH,MAAME,GAAG,EAAA,CAAA;+BAGZ,eAAA,EAACF,MAAME,GAAG,EAAA,CAAA,EAAA,CACZ;;AAGR,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ProgressBarBaseState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarBaseState): JSXElement => {\n  assertSlots<ProgressBarSlots>(state);\n  return (\n    <state.root>\n      {state.bar &&\n        (state.indeterminateMotion ? (\n          <state.indeterminateMotion>\n            <state.bar />\n          </state.indeterminateMotion>\n        ) : (\n          <state.bar />\n        ))}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderProgressBar_unstable","state","root","bar","indeterminateMotion"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAC9B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBACRD,MAAME,GAAG,IACPF,CAAAA,MAAMG,mBAAmB,GAAA,WAAA,OACxB,eAAA,EAACH,MAAMG,mBAAmB,EAAA;sBACxB,WAAA,OAAA,eAAA,EAACH,MAAME,GAAG,EAAA,CAAA;+BAGZ,eAAA,EAACF,MAAME,GAAG,EAAA,CAAA,EAAA,CACZ;;AAGR,EAAE"}

package/lib-commonjs/components/ProgressBar/useProgressBar.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useProgressBar_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useProgressBarBase_unstable: function() {
+        return useProgressBarBase_unstable;
+    },
+    useProgressBar_unstable: function() {
         return useProgressBar_unstable;
     }
 });
@@ -19,7 +27,21 @@ const _progressBarMotions = require("./progressBarMotions");
 const useProgressBar_unstable = (props, ref)=>{
     const field = (0, _reactfield.useFieldContext_unstable)();
     const fieldState = field === null || field === void 0 ? void 0 : field.validationState;
-    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium' } = props;
+    const { color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand', shape = 'rounded', thickness = 'medium', indeterminateMotion, ...baseProps } = props;
+    const state = useProgressBarBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        color,
+        shape,
+        thickness,
+        indeterminateMotion: state.value === undefined ? (0, _reactmotion.motionSlot)(indeterminateMotion, {
+            elementType: _progressBarMotions.ProgressBarIndeterminateMotion,
+            defaultProps: {}
+        }) : undefined
+    };
+};
+const useProgressBarBase_unstable = (props, ref)=>{
+    const field = (0, _reactfield.useFieldContext_unstable)();
     var _props_max;
     const max = (0, _index.clampMax)((_props_max = props.max) !== null && _props_max !== void 0 ? _props_max : 1);
     const value = (0, _index.clampValue)(props.value, max);
@@ -48,11 +70,8 @@ const useProgressBar_unstable = (props, ref)=>{
     const bar = _reactutilities.slot.always(props.bar, {
         elementType: 'div'
     });
-    const state = {
-        color,
+    return {
         max,
-        shape,
-        thickness,
         value,
         components: {
             root: 'div',
@@ -60,11 +79,6 @@ const useProgressBar_unstable = (props, ref)=>{
             indeterminateMotion: _progressBarMotions.ProgressBarIndeterminateMotion
         },
         root,
-        bar,
-        indeterminateMotion: value === undefined ? (0, _reactmotion.motionSlot)(props.indeterminateMotion, {
-            elementType: _progressBarMotions.ProgressBarIndeterminateMotion,
-            defaultProps: {}
-        }) : undefined
+        bar
     };
-    return state;
 };

package/lib-commonjs/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n  } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n    indeterminateMotion:\n      value === undefined\n        ? motionSlot(props.indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n\n  return state;\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","max","value","root","always","role","undefined","labelId","elementType","validationMessageId","hintId","filter","Boolean","join","bar","state","components","indeterminateMotion","defaultProps"],"mappings":"AAAA;;;;;+BAmBaQ;;;;;;;iEAjBU,QAAQ;4BACU,wBAAwB;6BACtC,yBAAyB;gCACL,4BAA4B;uBACtC,oBAAoB;oCAEV,uBAAuB;AAW/D,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,YAAQV,oCAAAA;IACd,MAAMW,aAAaD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACrB,GAAGP;QACiBA;IAArB,MAAMQ,UAAMX,eAAAA,EAASG,CAAAA,aAAAA,MAAMQ,GAAAA,AAAG,MAAA,QAATR,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMS,YAAQb,iBAAAA,EAAWI,MAAMS,KAAK,EAAED;IAEtC,MAAME,OAAOf,oBAAAA,CAAKgB,MAAM,KACtBjB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLW,MAAM;QACN,iBAAiBH,UAAUI,YAAY,IAAIA;QAC3C,iBAAiBJ,UAAUI,YAAYL,MAAMK;QAC7C,iBAAiBJ;QACjB,iBAAiB,EAAEP,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOY,OAAO;QACjC,GAAGd,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,IAAIb,SAAUA,CAAAA,MAAMc,mBAAmB,IAAId,MAAMe,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFP,IAAI,CAAC,mBAAmB,GAAG;YAACR,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOc,mBAAmB;YAAEd,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOe,MAAM;YAAEP,IAAI,CAAC,mBAAmB;SAAC,CAC7FQ,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM1B,oBAAAA,CAAKgB,MAAM,CAACX,MAAMqB,GAAG,EAAE;QAAEN,aAAa;IAAM;IACxD,MAAMO,QAA0B;QAC9BjB;QACAG;QACAF;QACAC;QACAE;QACAc,YAAY;YAAEb,MAAM;YAAOW,KAAK;YAAOG,qBAAqB1B,kDAAAA;QAA+B;QAC3FY;QACAW;QACAG,qBACEf,UAAUI,gBACNpB,uBAAAA,EAAWO,MAAMwB,mBAAmB,EAAE;YACpCT,aAAajB,kDAAAA;YACb2B,cAAc,CAAC;QACjB,KACAZ;IACR;IAEA,OAAOS;AACT,EAAE"}
+{"version":3,"sources":["../src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable } from '@fluentui/react-field';\nimport { motionSlot } from '@fluentui/react-motion';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type {\n  ProgressBarProps,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar.types';\nimport { ProgressBarIndeterminateMotion } from './progressBarMotions';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  const field = useFieldContext_unstable();\n  const fieldState = field?.validationState;\n\n  const {\n    color = fieldState === 'error' || fieldState === 'warning' || fieldState === 'success' ? fieldState : 'brand',\n    shape = 'rounded',\n    thickness = 'medium',\n    indeterminateMotion,\n    ...baseProps\n  } = props;\n\n  const state = useProgressBarBase_unstable(baseProps, ref);\n\n  return {\n    ...state,\n    color,\n    shape,\n    thickness,\n    indeterminateMotion:\n      state.value === undefined\n        ? motionSlot(indeterminateMotion, {\n            elementType: ProgressBarIndeterminateMotion,\n            defaultProps: {},\n          })\n        : undefined,\n  };\n};\n\n/**\n * Base hook for ProgressBar component. Manages state related to ARIA progressbar attributes\n * (role, aria-valuemin, aria-valuemax, aria-valuenow) and field context integration —\n * without design props (shape, thickness, color).\n *\n * @param props - props from this instance of ProgressBar (without shape, thickness, color)\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBarBase_unstable = (\n  props: ProgressBarBaseProps,\n  ref: React.Ref<HTMLElement>,\n): ProgressBarBaseState => {\n  const field = useFieldContext_unstable();\n\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-valuemin': value !== undefined ? 0 : undefined,\n      'aria-valuemax': value !== undefined ? max : undefined,\n      'aria-valuenow': value,\n      'aria-labelledby': field?.labelId,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  if (field && (field.validationMessageId || field.hintId)) {\n    // Prepend the field's validation message and/or hint to the user's aria-describedby\n    root['aria-describedby'] = [field?.validationMessageId, field?.hintId, root['aria-describedby']]\n      .filter(Boolean)\n      .join(' ');\n  }\n  const bar = slot.always(props.bar, { elementType: 'div' });\n\n  return {\n    max,\n    value,\n    components: { root: 'div', bar: 'div', indeterminateMotion: ProgressBarIndeterminateMotion },\n    root,\n    bar,\n  };\n};\n"],"names":["React","useFieldContext_unstable","motionSlot","getIntrinsicElementProps","slot","clampValue","clampMax","ProgressBarIndeterminateMotion","useProgressBar_unstable","props","ref","field","fieldState","validationState","color","shape","thickness","indeterminateMotion","baseProps","state","useProgressBarBase_unstable","value","undefined","elementType","defaultProps","max","root","always","role","labelId","validationMessageId","hintId","filter","Boolean","join","bar","components"],"mappings":"AAAA;;;;;;;;;;;;+BA6DaoB;eAAAA;;IArCAZ,uBAAAA;;;;;iEAtBU,QAAQ;4BACU,wBAAwB;6BACtC,yBAAyB;gCACL,4BAA4B;uBACtC,oBAAoB;oCAOV,uBAAuB;AAW/D,gCAAgC,CAACC,OAAyBC;IAC/D,MAAMC,YAAQV,oCAAAA;IACd,MAAMW,aAAaD,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOE,eAAe;IAEzC,MAAM,EACJC,QAAQF,eAAe,WAAWA,eAAe,aAAaA,eAAe,YAAYA,aAAa,OAAO,EAC7GG,QAAQ,SAAS,EACjBC,YAAY,QAAQ,EACpBC,mBAAmB,EACnB,GAAGC,WACJ,GAAGT;IAEJ,MAAMU,QAAQC,4BAA4BF,WAAWR;IAErD,OAAO;QACL,GAAGS,KAAK;QACRL;QACAC;QACAC;QACAC,qBACEE,MAAME,KAAK,KAAKC,gBACZpB,uBAAAA,EAAWe,qBAAqB;YAC9BM,aAAahB,kDAAAA;YACbiB,cAAc,CAAC;QACjB,KACAF;IACR;AACF,EAAE;AAUK,oCAAoC,CACzCb,OACAC;IAEA,MAAMC,QAAQV,wCAAAA;QAEOQ;IAArB,MAAMgB,UAAMnB,eAAAA,EAASG,CAAAA,aAAAA,MAAMgB,GAAAA,AAAG,MAAA,QAAThB,eAAAA,KAAAA,IAAAA,aAAa;IAClC,MAAMY,YAAQhB,iBAAAA,EAAWI,MAAMY,KAAK,EAAEI;IAEtC,MAAMC,OAAOtB,oBAAAA,CAAKuB,MAAM,KACtBxB,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FO,KAAKA;QACLkB,MAAM;QACN,iBAAiBP,UAAUC,YAAY,IAAIA;QAC3C,iBAAiBD,UAAUC,YAAYG,MAAMH;QAC7C,iBAAiBD;QACjB,iBAAiB,EAAEV,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOkB,OAAO;QACjC,GAAGpB,KAAK;IACV,IACA;QAAEc,aAAa;IAAM;IAEvB,IAAIZ,SAAUA,CAAAA,MAAMmB,mBAAmB,IAAInB,MAAMoB,MAAAA,AAAK,GAAI;QACxD,oFAAoF;QACpFL,IAAI,CAAC,mBAAmB,GAAG;YAACf,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOmB,mBAAmB;YAAEnB,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOoB,MAAM;YAAEL,IAAI,CAAC,mBAAmB;SAAC,CAC7FM,MAAM,CAACC,SACPC,IAAI,CAAC;IACV;IACA,MAAMC,MAAM/B,oBAAAA,CAAKuB,MAAM,CAAClB,MAAM0B,GAAG,EAAE;QAAEZ,aAAa;IAAM;IAExD,OAAO;QACLE;QACAJ;QACAe,YAAY;YAAEV,MAAM;YAAOS,KAAK;YAAOlB,qBAAqBV,kDAAAA;QAA+B;QAC3FmB;QACAS;IACF;AACF,EAAE"}

package/lib-commonjs/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderProgressBar_unstable: function() {
         return _ProgressBar.renderProgressBar_unstable;
     },
+    useProgressBarBase_unstable: function() {
+        return _ProgressBar.useProgressBarBase_unstable;
+    },
     useProgressBarStyles_unstable: function() {
         return _ProgressBar.useProgressBarStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable"],"mappings":";;;;;;;;;;;;eACEA,wBAAW;;;eACXC,kCAAqB;;;eACrBC,uCAA0B;;;eAE1BE,0CAA6B;;;eAD7BD,oCAAuB;;;6BAElB,gBAAgB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n  useProgressBarBase_unstable,\n} from './ProgressBar';\nexport type {\n  ProgressBarProps,\n  ProgressBarSlots,\n  ProgressBarState,\n  ProgressBarBaseProps,\n  ProgressBarBaseState,\n} from './ProgressBar';\n"],"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","useProgressBarBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,wBAAW;;;eACXC,kCAAqB;;;eACrBC,uCAA0B;;;eAG1BG,wCAA2B;;;eAD3BD,0CAA6B;;;eAD7BD,oCAAuB;;;6BAGlB,gBAAgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.4.17",
+  "version": "9.5.0",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,7 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/react-motion": "^9.14.0",
-    "@fluentui/react-field": "^9.4.16",
+    "@fluentui/react-field": "^9.5.0",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",